feat(uip-toggle-dir): separate uip-toggle-dir widget to control uip-p…

…review direction

src/plugins/direction/uip-dir.icon.tsx

@@ -0,0 +1,9 @@
+import React from 'jsx-dom';
+
+export const UIPDirIcon = (): Element => (
+  <div class="uip-dir-icon">
+    <span>L</span>
+    <span>T</span>
+    <span>R</span>
+  </div>
+) as Element;

src/plugins/direction/uip-dir.less

@@ -0,0 +1,27 @@
+
+uip-toggle-dir {
+  display: none;
+  cursor: pointer;
+  .uip-root &.uip-toggle-dir {
+    display: inline-block;
+  }
+
+  height: 1em;
+  line-height: 1em;
+
+  svg {
+    width: 100%;
+    height: 100%;
+
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+
+.uip-dir-icon {
+  display: flex;
+  user-select: none;
+  pointer-events: none;
+  font-weight: 500;
+  letter-spacing: -1px;
+}

src/plugins/direction/uip-dir.shape.ts

@@ -0,0 +1,14 @@
+import type {ESLBaseElementShape} from '@exadel/esl/modules/esl-base-element/core';
+import type {UIPDirSwitcher} from './uip-dir';
+
+export interface UIPDirSwitcherShape extends ESLBaseElementShape<UIPDirSwitcher> {
+  children?: any;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uip-toggle-dir': UIPDirSwitcherShape;
+    }
+  }
+}

src/plugins/direction/uip-dir.ts

@@ -0,0 +1,34 @@
+import './uip-dir.shape';
+
+import {listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
+import {UIPPluginButton} from '../../core/button/plugin-button';
+import type {UIPPreview} from '../../core/preview/preview';
+
+export class UIPDirSwitcher extends UIPPluginButton {
+  public static override is = 'uip-toggle-dir';
+  public static override defaultTitle = 'Switch direction (RTL/LTR)';
+
+  @memoize()
+  get $preview(): UIPPreview {
+    return this.root!.querySelector('uip-preview')!;
+  }
+
+  protected override connectedCallback(): void {
+    if (!this.root || !this.$preview) return;
+    super.connectedCallback();
+    this.onDirChange();
+  }
+
+  protected override onAction(): void {
+    if (!this.$preview) return;
+    this.$preview.dir = this.dir === 'rtl' ? 'ltr' : 'rtl';
+  }
+
+  @listen({
+    event: 'uip:dirchange',
+    target: ($this: UIPDirSwitcher) => $this.$preview,
+  })
+  protected onDirChange(): void {
+    this.dir = this.$preview.dir;
+  }
+}