From d778ec80b2ff560183a0ffaa5587757ead8120b9 Mon Sep 17 00:00:00 2001
From: "ala'n (Alexey Stsefanovich)" <astsefanovich@exadel.com>
Date: Sun, 29 Oct 2023 02:18:55 +0100
Subject: [PATCH] feat(uip-toggle-dir): separate uip-toggle-dir widget to
 control uip-preview direction

---
 src/plugins/direction/uip-dir.icon.tsx |  9 +++++++
 src/plugins/direction/uip-dir.less     | 27 ++++++++++++++++++++
 src/plugins/direction/uip-dir.shape.ts | 14 +++++++++++
 src/plugins/direction/uip-dir.ts       | 34 ++++++++++++++++++++++++++
 4 files changed, 84 insertions(+)
 create mode 100644 src/plugins/direction/uip-dir.icon.tsx
 create mode 100644 src/plugins/direction/uip-dir.less
 create mode 100644 src/plugins/direction/uip-dir.shape.ts
 create mode 100644 src/plugins/direction/uip-dir.ts

diff --git a/src/plugins/direction/uip-dir.icon.tsx b/src/plugins/direction/uip-dir.icon.tsx
new file mode 100644
index 00000000..98d73a5c
--- /dev/null
+++ b/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;
diff --git a/src/plugins/direction/uip-dir.less b/src/plugins/direction/uip-dir.less
new file mode 100644
index 00000000..6ccdfef1
--- /dev/null
+++ b/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;
+}
diff --git a/src/plugins/direction/uip-dir.shape.ts b/src/plugins/direction/uip-dir.shape.ts
new file mode 100644
index 00000000..c5fd6084
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/plugins/direction/uip-dir.ts b/src/plugins/direction/uip-dir.ts
new file mode 100644
index 00000000..8d00942d
--- /dev/null
+++ b/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;
+  }
+}