@vaadin/split-layout 24.2.0-alpha5 → 24.2.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/split-layout",
-  "version": "24.2.0-alpha5",
+  "version": "24.2.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-split-layout.d.ts",
+    "!src/vaadin-lit-split-layout.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -35,11 +37,12 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.2.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha5",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha5"
+    "@vaadin/component-base": "24.2.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha6",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -50,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "73db22a5e8993e3ce48d1e6540d30eff9cb5c257"
+  "gitHead": "3ef6e6cd66919b3ef7637e42916e4c54656beb51"
 }

package/src/vaadin-split-layout-mixin.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare function SplitLayoutMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<SplitLayoutMixinClass> & T;
+
+export declare class SplitLayoutMixinClass {
+  /**
+   * The split layout's orientation. Possible values are: `horizontal|vertical`.
+   */
+  orientation: 'horizontal' | 'vertical';
+}

package/src/vaadin-split-layout-mixin.js

@@ -0,0 +1,141 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { addListener } from '@vaadin/component-base/src/gestures.js';
+
+/**
+ * @polymerMixin
+ */
+export const SplitLayoutMixin = (superClass) =>
+  class SplitLayoutMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * The split layout's orientation. Possible values are: `horizontal|vertical`.
+         * @type {string}
+         */
+        orientation: {
+          type: String,
+          reflectToAttribute: true,
+          value: 'horizontal',
+        },
+
+        /** @private */
+        _previousPrimaryPointerEvents: String,
+
+        /** @private */
+        _previousSecondaryPointerEvents: String,
+      };
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._processChildren();
+
+      this.__observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          this._cleanupNodes(mutation.removedNodes);
+        });
+
+        this._processChildren();
+      });
+
+      this.__observer.observe(this, { childList: true });
+
+      const splitter = this.$.splitter;
+      addListener(splitter, 'track', this._onHandleTrack.bind(this));
+      addListener(splitter, 'down', this._setPointerEventsNone.bind(this));
+      addListener(splitter, 'up', this._restorePointerEvents.bind(this));
+    }
+
+    /** @private */
+    _cleanupNodes(nodes) {
+      nodes.forEach((node) => {
+        if (!(node.parentElement instanceof this.constructor)) {
+          node.removeAttribute('slot');
+        }
+      });
+    }
+
+    /** @private */
+    _processChildren() {
+      [...this.children].forEach((child, i) => {
+        if (i === 0) {
+          this._primaryChild = child;
+          child.setAttribute('slot', 'primary');
+        } else if (i === 1) {
+          this._secondaryChild = child;
+          child.setAttribute('slot', 'secondary');
+        } else {
+          child.removeAttribute('slot');
+        }
+      });
+    }
+
+    /** @private */
+    _setFlexBasis(element, flexBasis, containerSize) {
+      flexBasis = Math.max(0, Math.min(flexBasis, containerSize));
+      if (flexBasis === 0) {
+        // Pure zero does not play well in Safari
+        flexBasis = 0.000001;
+      }
+      element.style.flex = `1 1 ${flexBasis}px`;
+    }
+
+    /** @private */
+    _setPointerEventsNone(event) {
+      if (!this._primaryChild || !this._secondaryChild) {
+        return;
+      }
+      this._previousPrimaryPointerEvents = this._primaryChild.style.pointerEvents;
+      this._previousSecondaryPointerEvents = this._secondaryChild.style.pointerEvents;
+      this._primaryChild.style.pointerEvents = 'none';
+      this._secondaryChild.style.pointerEvents = 'none';
+
+      event.preventDefault();
+    }
+
+    /** @private */
+    _restorePointerEvents() {
+      if (!this._primaryChild || !this._secondaryChild) {
+        return;
+      }
+      this._primaryChild.style.pointerEvents = this._previousPrimaryPointerEvents;
+      this._secondaryChild.style.pointerEvents = this._previousSecondaryPointerEvents;
+    }
+
+    /** @private */
+    _onHandleTrack(event) {
+      if (!this._primaryChild || !this._secondaryChild) {
+        return;
+      }
+
+      const size = this.orientation === 'vertical' ? 'height' : 'width';
+      if (event.detail.state === 'start') {
+        this._startSize = {
+          container: this.getBoundingClientRect()[size] - this.$.splitter.getBoundingClientRect()[size],
+          primary: this._primaryChild.getBoundingClientRect()[size],
+          secondary: this._secondaryChild.getBoundingClientRect()[size],
+        };
+
+        return;
+      }
+
+      const distance = this.orientation === 'vertical' ? event.detail.dy : event.detail.dx;
+      const isRtl = this.orientation !== 'vertical' && this.__isRTL;
+      const dirDistance = isRtl ? -distance : distance;
+
+      this._setFlexBasis(this._primaryChild, this._startSize.primary + dirDistance, this._startSize.container);
+      this._setFlexBasis(this._secondaryChild, this._startSize.secondary - dirDistance, this._startSize.container);
+
+      if (event.detail.state === 'end') {
+        this.dispatchEvent(new CustomEvent('splitter-dragend'));
+
+        delete this._startSize;
+      }
+    }
+  };

package/src/vaadin-split-layout-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const splitLayoutStyles: CSSResult;

package/src/vaadin-split-layout-styles.js

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const splitLayoutStyles = css`
+  :host {
+    display: flex;
+    overflow: hidden !important;
+    transform: translateZ(0);
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+  }
+
+  :host ::slotted(*) {
+    flex: 1 1 auto;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  [part='splitter'] {
+    flex: none;
+    position: relative;
+    z-index: 1;
+    overflow: visible;
+    min-width: 8px;
+    min-height: 8px;
+  }
+
+  :host(:not([orientation='vertical'])) > [part='splitter'] {
+    cursor: ew-resize;
+  }
+
+  :host([orientation='vertical']) > [part='splitter'] {
+    cursor: ns-resize;
+  }
+
+  [part='handle'] {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+  @media (forced-colors: active) {
+    [part~='splitter'] {
+      outline: 1px solid;
+    }
+
+    [part~='handle']::after {
+      background-color: AccentColor !important;
+      forced-color-adjust: none;
+    }
+  }
+`;

package/src/vaadin-split-layout.d.ts

@@ -5,6 +5,7 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SplitLayoutMixin } from './vaadin-split-layout-mixin.js';
 
 export interface SplitLayoutCustomEventMap {
   'splitter-dragend': Event;
@@ -150,12 +151,7 @@ export interface SplitLayoutEventMap extends HTMLElementEventMap, SplitLayoutCus
  *
  * @fires {Event} splitter-dragend - Fired after dragging the splitter have ended.
  */
-declare class SplitLayout extends ElementMixin(ThemableMixin(HTMLElement)) {
-  /**
-   * The split layout's orientation. Possible values are: `horizontal|vertical`.
-   */
-  orientation: 'horizontal' | 'vertical';
-
+declare class SplitLayout extends SplitLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof SplitLayoutEventMap>(
     type: K,
     listener: (this: SplitLayout, ev: SplitLayoutEventMap[K]) => void,

package/src/vaadin-split-layout.js

@@ -3,11 +3,13 @@
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { addListener } from '@vaadin/component-base/src/gestures.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SplitLayoutMixin } from './vaadin-split-layout-mixin.js';
+import { splitLayoutStyles } from './vaadin-split-layout-styles.js';
+
+registerStyles('vaadin-split-layout', splitLayoutStyles, { moduleId: 'vaadin-split-layout-styles' });
 
 /**
  * `<vaadin-split-layout>` is a Web Component implementing a split layout for two
@@ -149,68 +151,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes SplitLayoutMixin
  * @mixes ThemableMixin
  */
-class SplitLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
+class SplitLayout extends SplitLayoutMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: flex;
-          overflow: hidden !important;
-          transform: translateZ(0);
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host([orientation='vertical']) {
-          flex-direction: column;
-        }
-
-        :host ::slotted(*) {
-          flex: 1 1 auto;
-          overflow: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        [part='splitter'] {
-          flex: none;
-          position: relative;
-          z-index: 1;
-          overflow: visible;
-          min-width: 8px;
-          min-height: 8px;
-        }
-
-        :host(:not([orientation='vertical'])) > [part='splitter'] {
-          cursor: ew-resize;
-        }
-
-        :host([orientation='vertical']) > [part='splitter'] {
-          cursor: ns-resize;
-        }
-
-        [part='handle'] {
-          width: 40px;
-          height: 40px;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate3d(-50%, -50%, 0);
-        }
-
-        @media (forced-colors: active) {
-          [part~='splitter'] {
-            outline: 1px solid;
-          }
-          [part~='handle']::after {
-            background-color: AccentColor !important;
-            forced-color-adjust: none;
-          }
-        }
-      </style>
       <slot id="primary" name="primary"></slot>
       <div part="splitter" id="splitter">
         <div part="handle"></div>
@@ -223,127 +169,6 @@ class SplitLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
     return 'vaadin-split-layout';
   }
 
-  static get properties() {
-    return {
-      /**
-       * The split layout's orientation. Possible values are: `horizontal|vertical`.
-       * @type {string}
-       */
-      orientation: {
-        type: String,
-        reflectToAttribute: true,
-        value: 'horizontal',
-      },
-
-      /** @private */
-      _previousPrimaryPointerEvents: String,
-
-      /** @private */
-      _previousSecondaryPointerEvents: String,
-    };
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    this.__observer = new FlattenedNodesObserver(this, (info) => {
-      this._cleanupNodes(info.removedNodes);
-      this._processChildren();
-    });
-
-    const splitter = this.$.splitter;
-    addListener(splitter, 'track', this._onHandleTrack.bind(this));
-    addListener(splitter, 'down', this._setPointerEventsNone.bind(this));
-    addListener(splitter, 'up', this._restorePointerEvents.bind(this));
-  }
-
-  /** @private */
-  _cleanupNodes(nodes) {
-    nodes.forEach((node) => {
-      if (!(node.parentElement instanceof SplitLayout)) {
-        node.removeAttribute('slot');
-      }
-    });
-  }
-
-  /** @private */
-  _processChildren() {
-    [...this.children].forEach((child, i) => {
-      if (i === 0) {
-        this._primaryChild = child;
-        child.setAttribute('slot', 'primary');
-      } else if (i === 1) {
-        this._secondaryChild = child;
-        child.setAttribute('slot', 'secondary');
-      } else {
-        child.removeAttribute('slot');
-      }
-    });
-  }
-
-  /** @private */
-  _setFlexBasis(element, flexBasis, containerSize) {
-    flexBasis = Math.max(0, Math.min(flexBasis, containerSize));
-    if (flexBasis === 0) {
-      // Pure zero does not play well in Safari
-      flexBasis = 0.000001;
-    }
-    element.style.flex = `1 1 ${flexBasis}px`;
-  }
-
-  /** @private */
-  _setPointerEventsNone(event) {
-    if (!this._primaryChild || !this._secondaryChild) {
-      return;
-    }
-    this._previousPrimaryPointerEvents = this._primaryChild.style.pointerEvents;
-    this._previousSecondaryPointerEvents = this._secondaryChild.style.pointerEvents;
-    this._primaryChild.style.pointerEvents = 'none';
-    this._secondaryChild.style.pointerEvents = 'none';
-
-    event.preventDefault();
-  }
-
-  /** @private */
-  _restorePointerEvents() {
-    if (!this._primaryChild || !this._secondaryChild) {
-      return;
-    }
-    this._primaryChild.style.pointerEvents = this._previousPrimaryPointerEvents;
-    this._secondaryChild.style.pointerEvents = this._previousSecondaryPointerEvents;
-  }
-
-  /** @private */
-  _onHandleTrack(event) {
-    if (!this._primaryChild || !this._secondaryChild) {
-      return;
-    }
-
-    const size = this.orientation === 'vertical' ? 'height' : 'width';
-    if (event.detail.state === 'start') {
-      this._startSize = {
-        container: this.getBoundingClientRect()[size] - this.$.splitter.getBoundingClientRect()[size],
-        primary: this._primaryChild.getBoundingClientRect()[size],
-        secondary: this._secondaryChild.getBoundingClientRect()[size],
-      };
-
-      return;
-    }
-
-    const distance = this.orientation === 'vertical' ? event.detail.dy : event.detail.dx;
-    const isRtl = this.orientation !== 'vertical' && this.__isRTL;
-    const dirDistance = isRtl ? -distance : distance;
-
-    this._setFlexBasis(this._primaryChild, this._startSize.primary + dirDistance, this._startSize.container);
-    this._setFlexBasis(this._secondaryChild, this._startSize.secondary - dirDistance, this._startSize.container);
-
-    if (event.detail.state === 'end') {
-      this.dispatchEvent(new CustomEvent('splitter-dragend'));
-
-      delete this._startSize;
-    }
-  }
-
   /**
    * Fired after dragging the splitter have ended.
    *

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/split-layout",
-  "version": "24.2.0-alpha5",
+  "version": "24.2.0-alpha6",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/split-layout",
-  "version": "24.2.0-alpha5",
+  "version": "24.2.0-alpha6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {