fix: fix resize feature / resize internal API ;

fix setting content normalization ;
revert ability to render rtl toggler in the toolbar

pages/views/index.njk

@@ -24,7 +24,7 @@ isLandingPage: true
     </script>
     <uip-preview class="center-alignment"></uip-preview>
 
-    <uip-settings collapsible vertical="@+sm" target=".logo-content" theme-toggle dir-toggle>
+    <uip-settings resizable collapsible vertical="@+sm" target=".logo-content" theme-toggle dir-toggle>
       <uip-text-setting label="Alternative Button Text:" target=".get-started" attribute="data-test-msg"></uip-text-setting>
       <uip-slider-setting label="Width:" target=".logo-content svg" attribute="width" min="100" max="500"></uip-slider-setting>
       <uip-select-setting label="Color:" attribute="class" mode="append">

src/core/button/plugin-button.ts

@@ -28,6 +28,7 @@ export abstract class UIPPluginButton extends UIPPlugin {
 
   protected override connectedCallback(): void {
     super.connectedCallback();
+    this.$$cls('uip-plugin-button', true);
     this.setAttribute('tabindex', '0');
     this.setAttribute('role', 'button');
 

src/core/panel/plugin-panel.horizontal.less

@@ -2,7 +2,7 @@
   flex-direction: column;
   margin-bottom: 1px;
 
-  .uip-plugin-resizebar {
+  .uip-plugin-resize-bar {
     order: 100;
     cursor: row-resize;
   }

src/core/panel/plugin-panel.less

@@ -8,13 +8,15 @@
     transition: none !important;
   }
 
-  .uip-plugin-resizebar {
+  .uip-plugin-resize-bar {
     border: 3px solid transparent;
     z-index: 10;
     margin: -3px;
     box-sizing: border-box;
   }
-  &:not([resizable]) .uip-plugin-resizebar {
+
+  &[collapsed] .uip-plugin-resize-bar,
+  &:not([resizable]) .uip-plugin-resize-bar {
     display: none;
   }
 

src/core/panel/plugin-panel.tsx

@@ -59,8 +59,8 @@ export abstract class UIPPluginPanel extends UIPPlugin {
 
   /** Creates resize area element */
   @memoize()
-  protected get $resizebar(): HTMLElement {
-    return (<div class="uip-plugin-resizebar" />) as HTMLElement;
+  protected get $resize(): HTMLElement {
+    return (<div class="uip-plugin-resize-bar" />) as HTMLElement;
   }
 
   /** @returns if the plugin should be rendered vertically */
@@ -89,7 +89,9 @@ export abstract class UIPPluginPanel extends UIPPlugin {
     selector: '.uip-plugin-header-trigger',
   })
   protected _onCollapseClick(): void {
-    if (this.collapsible) this.collapsed = !this.collapsed;
+    if (!this.collapsible) return;
+    this.collapsed = !this.collapsed;
+    this.resizing = false;
   }
 
   /** Handles vertical media query change */
@@ -111,36 +113,36 @@ export abstract class UIPPluginPanel extends UIPPlugin {
   /** Handles resize start */
   @listen({
     event: 'pointerdown',
-    selector: '.uip-plugin-resizebar'
+    selector: '.uip-plugin-resize-bar'
   })
   protected _onPointerStart(event: PointerEvent): void {
-    if (!this.resizable) return;
+    if (!this.resizable || this.collapsed) return;
     const {isVertical} = this;
     this.resizing = true;
     const prop = isVertical ? '--uip-plugin-width' : '--uip-plugin-height';
     this._startSize = parseFloat(getComputedStyle(this).getPropertyValue(prop) || '0');
     this._startPoint = isVertical ? event.x : event.y;
-    if (this.$resizebar.setPointerCapture) this.$resizebar.setPointerCapture(event.pointerId);
+    if (this.$resize.setPointerCapture) this.$resize.setPointerCapture(event.pointerId);
 
     this.$$on(this._onPointerMove);
   }
 
   /** Handles resize end */
   @listen({
     event: 'pointerup',
-    selector: '.uip-plugin-resizebar'
+    selector: '.uip-plugin-resize-bar'
   })
   protected _onPointerEnd(event: PointerEvent): void {
     this.resizing = false;
-    if (this.$resizebar.releasePointerCapture) this.$resizebar.releasePointerCapture(event.pointerId);
+    if (this.$resize.releasePointerCapture) this.$resize.releasePointerCapture(event.pointerId);
     this.$$off(this._onPointerMove);
   }
 
   /** Handles resize */
   @listen({
     auto: false,
     event: 'pointermove',
-    selector: '.uip-plugin-resizebar'
+    selector: '.uip-plugin-resize-bar'
   })
   protected _onPointerMove(event: PointerEvent): void {
     if (!this.resizing) return;

src/core/panel/plugin-panel.vertical.less

@@ -3,7 +3,7 @@
   flex-direction: row;
   min-height: max(100%, 100px);
 
-  .uip-plugin-resizebar {
+  .uip-plugin-resize-bar {
     order: -1;
     cursor: col-resize;
   }

src/plugins/direction/dir-toggle.less

@@ -35,22 +35,21 @@ uip-dir-toggle {
     align-items: center;
   }
 
-
-  &.uip-settings-direction {
+  .uip-settings-container > & {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     height: auto;
   }
 
-  &.uip-settings-direction &-label {
+  .uip-settings-container > & &-label {
     display: block;
     &::after {
       content: ':';
     }
   }
 
-  &.uip-settings-direction &-figure {
+  .uip-settings-container > & &-figure {
     width: auto;
     min-height: 1.5em;
     vertical-align: middle;

src/plugins/direction/dir-toggle.tsx

@@ -34,6 +34,8 @@ export class UIPDirSwitcher extends UIPPluginButton {
 
   protected override connectedCallback(): void {
     if (!this.$root || !this.$preview) return;
+    this.$$attr('uip-settings-content', true);
+    this.$$fire('uip:settings:invalidate');
     super.connectedCallback();
     this.appendChild(this.$label);
     this.appendChild(this.$content);

src/plugins/editor/editor.tsx

@@ -87,7 +87,7 @@ export class UIPEditor extends UIPPluginPanel {
     // Prefill content
     this.appendChild(this.$header);
     this.appendChild(this.$inner);
-    this.appendChild(this.$resizebar);
+    this.appendChild(this.$resize);
 
     // Initial update
     this._onRootStateChange();

src/plugins/settings/base-setting/base-setting.ts

@@ -12,7 +12,6 @@ import type {UIPStateModel} from '../../../core/base/model';
  */
 export abstract class UIPSetting extends UIPPlugin {
   public static override is = 'uip-setting';
-  public static readonly isSetting = (el: Node): el is UIPSetting => el && (el instanceof UIPSetting);
 
   /** No matching value message */
   @prop('No select match') public NO_MATCH_MSG: string;
@@ -39,6 +38,7 @@ export abstract class UIPSetting extends UIPPlugin {
   }
 
   protected override connectedCallback(): void {
+    this.$$attr('uip-settings-content', true);
     this.$$fire('uip:settings:invalidate');
     super.connectedCallback();
     this.classList.add(UIPSetting.is);

src/plugins/settings/settings.tsx

@@ -1,12 +1,12 @@
 import React from 'jsx-dom';
 
+import {isElement} from '@exadel/esl/modules/esl-utils/dom/api';
 import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
 import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPPluginPanel} from '../../core/panel/plugin-panel';
 import {ThemeToggleIcon} from '../theme/theme-toggle.icon';
 
-import {UIPSetting} from './base-setting/base-setting';
 import {SettingsIcon} from './settings.icon';
 
 /**
@@ -32,6 +32,7 @@ export class UIPSettings extends UIPPluginPanel {
     const type = this.constructor as typeof UIPSettings;
     return (<div class={type.is + '-toolbar uip-plugin-header-toolbar'}>
       {this.themeToggle ? <uip-theme-toggle class={type.is + '-toolbar-option'}><ThemeToggleIcon/></uip-theme-toggle> : ''}
+      {this.dirToggle ? <uip-dir-toggle class={type.is + '-toolbar-option'}/> : ''}
     </div>) as HTMLElement;
   }
 
@@ -47,22 +48,27 @@ export class UIPSettings extends UIPPluginPanel {
   @memoize()
   protected get $container(): HTMLElement {
     const type = this.constructor as typeof UIPSettings;
-    return (<div class={type.is + '-container esl-scrollable-content'}>
-      {this.dirToggle ? <uip-dir-toggle class={type.is + '-direction'}/> : ''}
-    </div>) as HTMLElement;
+    return (<div class={type.is + '-container esl-scrollable-content'}/>) as HTMLElement;
+  }
+
+  /** @returns HTMLElement[] - all internal items marked as settings item */
+  protected get $items(): HTMLElement[] {
+    return [...this.childNodes].filter(
+      ($el: ChildNode): $el is HTMLElement => isElement($el) && $el.hasAttribute('uip-settings-content')
+    );
   }
 
   protected override connectedCallback(): void {
     super.connectedCallback();
     this.appendChild(this.$header);
     this.appendChild(this.$inner);
-    this.appendChild(this.$resizebar);
+    this.appendChild(this.$resize);
     this.invalidate();
   }
 
   protected override disconnectedCallback(): void {
     super.disconnectedCallback();
-    this.append(...this.settings);
+    this.append(...this.$items);
     this.removeChild(this.$header);
     this.removeChild(this.$inner);
   }
@@ -77,15 +83,9 @@ export class UIPSettings extends UIPPluginPanel {
     }
   }
 
-  /** Collects all {@link UIPSetting} items */
-  protected get settings(): UIPSetting[] {
-    return Array.from(this.$container.childNodes).filter(UIPSetting.isSetting);
-  }
-
   @decorate(debounce, 100)
   protected invalidate(): void {
-    const items = [...this.childNodes].filter(UIPSetting.isSetting);
-    const outside = items.filter((el) => el.parentElement !== this.$container);
+    const outside = this.$items.filter((el) => el.parentElement !== this.$container);
     outside.forEach((el) => this.$container.appendChild(el));
   }