@exmg/exm-sortable 1.1.36 → 1.1.37-alpha.31

package/.rollup.cache/root/repo/packages/exm-sortable/dist/exm-sortable-base.d.ts

@@ -0,0 +1,100 @@
+import { PropertyValues } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+export declare class SortableElementBase extends ExmgElement {
+    handleSelector?: string;
+    itemSelector: string;
+    /**
+     * Optionally is possible to pass node instance which is host of sortable elements otherwise host for sortable elements
+     * is `exm-sortable` itself.
+     * Note that style `sortableHostNode.style.position` will be set to `relative`
+     */
+    sortableHostNode?: HTMLElement;
+    animationEnabled: boolean;
+    clonedClass: string;
+    draggedClass: string;
+    animationTiming: any;
+    orientation?: 'horizontal' | 'vertical';
+    private dragRequestPending;
+    private draggedElement?;
+    private draggedElementClone?;
+    private draggedElementOrigin?;
+    private sortableNodes;
+    private animatedElements;
+    private initialScrollTop;
+    private animationPromise?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Get instance of sortable host.
+     * By default it is `exm-sortable` which can be overridden by property `sortableHostNode`
+     */
+    private getSortableHost;
+    /**
+     * Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following
+     * the first actual move event following a touchstart/mousedown.
+     */
+    private handleTrack;
+    /**
+     * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property. If a
+     * handleSelector is defined, a node matching this selector must be clicked instead.
+     */
+    private trackStart;
+    /**
+     * Ends the drag and drop sequence.
+     */
+    private trackEnd;
+    /**
+     * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is
+     * the insert point for updated sorting.
+     */
+    private trackMove;
+    private updateUserSelectStyle;
+    /**
+     * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the
+     * given targets. Returns an array of matches.
+     *
+     * @param {HTMLElement} node
+     * @param {Array} targets
+     * @return {Array<HTMLElement>} matches
+     */
+    private hitTest;
+    /**
+     * Returns a boolean indicating whether the node is currently in an animation.
+     *
+     * @param {HTMLElement} node
+     * @returns {boolean} isAnimating
+     */
+    private isAnimating;
+    private reset;
+    /**
+     * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as
+     * if nodes animate from their old to their new position in the dom.
+     *
+     * @param {Node} node
+     * @param {number} dx
+     * @param {number} dy
+     */
+    private animateNode;
+    /**
+     * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;
+     * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very
+     * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because
+     * of this dom update.
+     *
+     * @param {Node} node
+     * @param {Node} target
+     */
+    private insertAtTarget;
+    /**
+     * Clones a given node to visually drag around. The original node is left in the same flow as its siblings. Clone
+     * styles are added onto the style object directly, since the ::slotted() selector can't universally target nodes
+     * that may be nested an unknown amount of shadow dom levels deep.
+     *
+     * @param {HTMLElement} node
+     * @return {Node} clone
+     */
+    private createClone;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/.rollup.cache/root/repo/packages/exm-sortable/dist/exm-sortable-base.js

@@ -0,0 +1,357 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+import { gestures } from '@exmg/lit-base/index.js';
+/**
+ * Orientation map to limit dragging to horizontal or vertical.
+ */
+const orientationMap = {
+    horizontal: { x: 1, y: 0 },
+    vertical: { x: 0, y: 1 },
+};
+export class SortableElementBase extends ExmgElement {
+    constructor() {
+        super();
+        this.itemSelector = 'li';
+        this.animationEnabled = false;
+        this.clonedClass = 'cloned';
+        this.draggedClass = 'dragged';
+        this.animationTiming = { duration: 200, easing: 'ease-out' };
+        this.dragRequestPending = false;
+        this.sortableNodes = [];
+        this.animatedElements = [];
+        this.initialScrollTop = 0;
+        /* Save function references */
+        this.handleTrack = this.handleTrack.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        gestures.addListener(this.getSortableHost(), 'track', this.handleTrack);
+    }
+    disconnectedCallback() {
+        gestures.removeListener(this.getSortableHost(), 'track', this.handleTrack);
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('sortableHostNode')) {
+            // reset listeners when sortableHostNode changed
+            gestures.removeListener(changedProperties.get('sortableHostNode') || this, 'track', this.handleTrack);
+            gestures.addListener(this.getSortableHost(), 'track', this.handleTrack);
+            if (this.sortableHostNode) {
+                // sortable host must have position relative
+                this.sortableHostNode.style.position = 'relative';
+            }
+        }
+    }
+    /**
+     * Get instance of sortable host.
+     * By default it is `exm-sortable` which can be overridden by property `sortableHostNode`
+     */
+    getSortableHost() {
+        if (this.sortableHostNode) {
+            return this.sortableHostNode;
+        }
+        return this;
+    }
+    /**
+     * Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following
+     * the first actual move event following a touchstart/mousedown.
+     */
+    handleTrack(e) {
+        switch (e.detail.state) {
+            case 'start':
+                if (!this.dragRequestPending) {
+                    this.trackStart(e);
+                }
+                break;
+            case 'track':
+                this.trackMove(e);
+                break;
+            case 'end':
+                if (this.animationPromise) {
+                    this.animationPromise.then(() => {
+                        setTimeout(() => this.trackEnd());
+                    });
+                }
+                else {
+                    setTimeout(() => this.trackEnd());
+                }
+                break;
+        }
+    }
+    /**
+     * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property. If a
+     * handleSelector is defined, a node matching this selector must be clicked instead.
+     */
+    trackStart(e) {
+        const handle = this.handleSelector;
+        const eventPath = e.path ? e.path : e.composedPath();
+        const targetElement = eventPath[0];
+        /* Look for closest handle */
+        if (handle && !targetElement.closest(handle)) {
+            return;
+        }
+        this.updateUserSelectStyle('none');
+        this.dragRequestPending = true;
+        const selector = this.itemSelector;
+        const node = targetElement.closest(selector);
+        if (node) {
+            e.preventDefault();
+            this.draggedElement = node;
+            this.sortableNodes = Array.from(this.getSortableHost().querySelectorAll(selector)) || [];
+            this.draggedElementClone = this.createClone(node);
+            this.draggedElementOrigin = node.nextSibling;
+            this.animatedElements = [];
+            this.draggedElement.classList.add(this.draggedClass);
+        }
+    }
+    /**
+     * Ends the drag and drop sequence.
+     */
+    trackEnd() {
+        if (!this.draggedElement) {
+            return;
+        }
+        const updated = Array.from(this.getSortableHost().querySelectorAll(this.itemSelector));
+        const sourceIndex = this.sortableNodes.indexOf(this.draggedElement);
+        const targetIndex = updated.indexOf(this.draggedElement);
+        if (sourceIndex !== targetIndex) {
+            this.dispatchEvent(new CustomEvent('dom-order-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    sourceIndex,
+                    targetIndex,
+                },
+            }));
+        }
+        this.reset();
+        this.dragRequestPending = false;
+        this.updateUserSelectStyle('text');
+    }
+    /**
+     * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is
+     * the insert point for updated sorting.
+     */
+    trackMove(e) {
+        e.preventDefault();
+        if (!this.draggedElementClone) {
+            return;
+        }
+        let { dx, dy } = e.detail;
+        const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
+        if (this.orientation) {
+            dx = dx * orientationMap[this.orientation].x;
+            dy = dy * orientationMap[this.orientation].y;
+        }
+        /* Work around for issue with first element being party offscreen when drag start */
+        dy = dy - (this.initialScrollTop - scrollTop);
+        Object.assign(this.draggedElementClone.style, {
+            transform: `translate3d(${dx}px, ${dy}px, 0)`,
+        });
+        const target = this.hitTest(this.draggedElementClone, this.sortableNodes)[0];
+        if (
+        // if clone intersects with a valid target,
+        target &&
+            // other than its own origin,
+            target !== this.draggedElement &&
+            // and the target isn't currently animating, which causes false hit tests,
+            !this.isAnimating(target)) {
+            this.insertAtTarget(this.draggedElement, target);
+        }
+    }
+    updateUserSelectStyle(userSelect) {
+        /**
+         * Firefox bug fix: when dragging elements in firefox, closest text also getting selected
+         */
+        this.style.userSelect = userSelect;
+        this.style.MozUserSelect = userSelect;
+        // @ts-ignore
+        this.style.msUserSelect = userSelect;
+        this.style.webkitUserSelect = userSelect;
+    }
+    /**
+     * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the
+     * given targets. Returns an array of matches.
+     *
+     * @param {HTMLElement} node
+     * @param {Array} targets
+     * @return {Array<HTMLElement>} matches
+     */
+    hitTest(node, targets) {
+        const { left: l, top: t, width: w, height: h } = node.getBoundingClientRect();
+        const x = l + w / 2;
+        const y = t + h / 2;
+        return targets.filter((item) => {
+            const { left, right, top, bottom } = item.getBoundingClientRect();
+            return !(x < left || x > right || y < top || y > bottom);
+        });
+    }
+    /**
+     * Returns a boolean indicating whether the node is currently in an animation.
+     *
+     * @param {HTMLElement} node
+     * @returns {boolean} isAnimating
+     */
+    isAnimating(node) {
+        return this.animatedElements.indexOf(node) !== -1;
+    }
+    reset() {
+        if (this.draggedElementClone !== undefined && this.draggedElementClone.parentNode !== null) {
+            this.draggedElementClone.parentNode.removeChild(this.draggedElementClone);
+        }
+        if (this.draggedElement && this.draggedElement.parentNode && this.draggedElementOrigin) {
+            this.draggedElement.classList.remove(this.draggedClass);
+            this.draggedElement.parentNode.insertBefore(this.draggedElement, this.draggedElementOrigin);
+        }
+        delete this.draggedElementClone;
+        delete this.draggedElement;
+        this.sortableNodes = [];
+        this.animatedElements = [];
+        this.dragRequestPending = false;
+        this.updateUserSelectStyle('text');
+    }
+    /**
+     * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as
+     * if nodes animate from their old to their new position in the dom.
+     *
+     * @param {Node} node
+     * @param {number} dx
+     * @param {number} dy
+     */
+    animateNode(node, dx = 0, dy = 0) {
+        if (!node.animate) {
+            return;
+        }
+        // keep a stack of currently animating nodes to exclude as drag & drop targets.
+        this.animatedElements.push(node);
+        Object.assign(node.style, {
+            willChange: 'transform',
+        });
+        // animate from dx/dy (old node position) to none (new node position)
+        this.animationPromise = new Promise((resolve) => {
+            node
+                .animate([{ transform: `translate3d(${dx}px, ${dy}px, 0)` }, { transform: 'none' }], this.animationTiming)
+                .addEventListener('finish', () => {
+                const index = this.animatedElements.indexOf(node);
+                Object.assign(node.style, {
+                    willChange: 'initial',
+                });
+                if (index !== -1) {
+                    // splice out when done to unlock as a valid target
+                    this.animatedElements.splice(index, 1);
+                }
+                resolve();
+                delete this.animationPromise;
+            });
+        });
+    }
+    /**
+     * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;
+     * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very
+     * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because
+     * of this dom update.
+     *
+     * @param {Node} node
+     * @param {Node} target
+     */
+    insertAtTarget(node, target) {
+        let offsets = [];
+        if (this.animationEnabled) {
+            offsets = this.sortableNodes.map((item) => ({
+                x: item.offsetLeft,
+                y: item.offsetTop,
+            }));
+        }
+        if (node && node.parentNode) {
+            const insert = node.compareDocumentPosition(target) & this.DOCUMENT_POSITION_FOLLOWING ? target.nextSibling : target;
+            node.parentNode.insertBefore(node, insert);
+        }
+        if (this.animationEnabled) {
+            this.sortableNodes.forEach((sortableNode, i) => {
+                const { x, y } = offsets[i];
+                const dx = x - sortableNode.offsetLeft;
+                const dy = y - sortableNode.offsetTop;
+                if (dx !== 0 || dy !== 0) {
+                    this.animateNode(sortableNode, dx, dy);
+                }
+            });
+        }
+    }
+    /**
+     * Clones a given node to visually drag around. The original node is left in the same flow as its siblings. Clone
+     * styles are added onto the style object directly, since the ::slotted() selector can't universally target nodes
+     * that may be nested an unknown amount of shadow dom levels deep.
+     *
+     * @param {HTMLElement} node
+     * @return {Node} clone
+     */
+    createClone(node) {
+        const clone = node.cloneNode(true);
+        /**
+         * Bugfix for table row sorting.
+         * During dragging table rows shrink, so we manually set them width of original node.
+         */
+        Array.from(clone.children).forEach((nodeChild, index) => {
+            const clonedNodeChild = nodeChild;
+            const originalNodeChild = node.children.item(index);
+            if (originalNodeChild) {
+                clonedNodeChild.style.width = `${originalNodeChild.offsetWidth}px`;
+            }
+        });
+        /**
+         * We have to copy all user defined properties manually.
+         * Lit element prefixes custom properties with '__' so that's why we check for it.
+         */
+        Object.keys(node)
+            .filter((prop) => prop.startsWith('__'))
+            .forEach((prop) => (clone[prop] = node[prop]));
+        const { offsetLeft: x, offsetTop: y } = node;
+        this.initialScrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
+        Object.assign(clone.style, {
+            position: 'absolute',
+            left: `${x}px`,
+            top: `${y}px`,
+            willChange: 'transform,opacity',
+        });
+        clone.classList.add(this.clonedClass);
+        return node.parentNode.appendChild(clone);
+    }
+    render() {
+        return html `
+      <style>
+        :host {
+          position: relative;
+          display: block;
+        }
+      </style>
+      <slot></slot>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: 'handle-selector' })
+], SortableElementBase.prototype, "handleSelector", void 0);
+__decorate([
+    property({ type: String, attribute: 'item-selector' })
+], SortableElementBase.prototype, "itemSelector", void 0);
+__decorate([
+    property({ type: Object })
+], SortableElementBase.prototype, "sortableHostNode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'animation-enabled' })
+], SortableElementBase.prototype, "animationEnabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'cloned-class' })
+], SortableElementBase.prototype, "clonedClass", void 0);
+__decorate([
+    property({ type: String, attribute: 'dragged-class' })
+], SortableElementBase.prototype, "draggedClass", void 0);
+__decorate([
+    property({ type: Object, attribute: 'animation-timing' })
+], SortableElementBase.prototype, "animationTiming", void 0);
+__decorate([
+    property({ type: String })
+], SortableElementBase.prototype, "orientation", void 0);
+//# sourceMappingURL=exm-sortable-base.js.map

package/.rollup.cache/root/repo/packages/exm-sortable/dist/exm-sortable.d.ts

@@ -0,0 +1,27 @@
+import { SortableElementBase } from './exm-sortable-base.js';
+/**
+ * The `<exm-sortable>` element Enables drag and drop sorting of nodes in a list, table or any other set of
+ * elements.
+ *
+ * !!! You should always handle @dom-order-change to update your local .items property to update sorted list properly
+ *
+ * ```html
+ * <exm-sortable item-selector="li" @dom-order-change="${this.myChangeHandler}">
+ *  <ul>
+ *     ${this.items.map((item) => {
+ *       return html`
+ *         <li>${item}</li>
+ *       `;
+ *     })}
+ *  </ul>
+ * </exm-sortable>
+ * ```
+ * @extends {SortableElementBase}
+ */
+export declare class SortableElement extends SortableElementBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-sortable': SortableElement;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-sortable/dist/exm-sortable.js

@@ -0,0 +1,29 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { SortableElementBase } from './exm-sortable-base.js';
+/**
+ * The `<exm-sortable>` element Enables drag and drop sorting of nodes in a list, table or any other set of
+ * elements.
+ *
+ * !!! You should always handle @dom-order-change to update your local .items property to update sorted list properly
+ *
+ * ```html
+ * <exm-sortable item-selector="li" @dom-order-change="${this.myChangeHandler}">
+ *  <ul>
+ *     ${this.items.map((item) => {
+ *       return html`
+ *         <li>${item}</li>
+ *       `;
+ *     })}
+ *  </ul>
+ * </exm-sortable>
+ * ```
+ * @extends {SortableElementBase}
+ */
+let SortableElement = class SortableElement extends SortableElementBase {
+};
+SortableElement = __decorate([
+    customElement('exm-sortable')
+], SortableElement);
+export { SortableElement };
+//# sourceMappingURL=exm-sortable.js.map

package/.rollup.cache/root/repo/packages/exm-sortable/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { SortableElement } from './exm-sortable.js';
+export { SortableElementBase } from './exm-sortable-base.js';

package/.rollup.cache/root/repo/packages/exm-sortable/dist/index.js

@@ -0,0 +1,3 @@
+export { SortableElement } from './exm-sortable.js';
+export { SortableElementBase } from './exm-sortable-base.js';
+//# sourceMappingURL=index.js.map

package/dist/exm-sortable-base.js

@@ -1,8 +1,8 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { ExmgElement } from '@exmg/lit-base/index.js';
+import { ExmgElement, gestures } from '@exmg/lit-base/index.js';
 import { property } from 'lit/decorators.js';
-import { gestures } from '@exmg/lit-base/index.js';
+
 /**
  * Orientation map to limit dragging to horizontal or vertical.
  */
@@ -10,7 +10,7 @@ const orientationMap = {
     horizontal: { x: 1, y: 0 },
     vertical: { x: 0, y: 1 },
 };
-export class SortableElementBase extends ExmgElement {
+class SortableElementBase extends ExmgElement {
     constructor() {
         super();
         this.itemSelector = 'li';
@@ -354,4 +354,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SortableElementBase.prototype, "orientation", void 0);
-//# sourceMappingURL=exm-sortable-base.js.map
+
+export { SortableElementBase };
+//# sourceMappingURL=exm-sortable-base.js.map

package/dist/exm-sortable.js

@@ -1,6 +1,7 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators.js';
 import { SortableElementBase } from './exm-sortable-base.js';
+
 /**
  * The `<exm-sortable>` element Enables drag and drop sorting of nodes in a list, table or any other set of
  * elements.
@@ -25,5 +26,6 @@ let SortableElement = class SortableElement extends SortableElementBase {
 SortableElement = __decorate([
     customElement('exm-sortable')
 ], SortableElement);
+
 export { SortableElement };
-//# sourceMappingURL=exm-sortable.js.map
+//# sourceMappingURL=exm-sortable.js.map

package/dist/index.js

@@ -1,3 +1,3 @@
 export { SortableElement } from './exm-sortable.js';
 export { SortableElementBase } from './exm-sortable-base.js';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-sortable",
-  "version": "1.1.36",
+  "version": "1.1.37-alpha.31+513140a",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fb4c4b7fdbc8d149a825e172b63f7e00c8e8a4a"
+  "gitHead": "513140a59e3a5a9a0fa572147ba6c0cf9801816e"
 }