wj-elements 0.1.200 → 0.1.202

package/dist/packages/wje-reorder-handle/reorder-handle.element.d.ts

@@ -31,14 +31,14 @@ export default class ReorderHandle extends WJElement {
     afterDraw(): void;
     /**
      * Handles the attribute changes.
-     * @param {DragEvent} event
+     * @param {DragEvent} e
      */
-    startDrag(event: DragEvent): void;
+    startDrag(e: DragEvent): void;
     /**
      * Handles the touch start event.
-     * @param {TouchEvent} event
+     * @param {TouchEvent} e
      */
-    startTouchDrag(event: TouchEvent): void;
+    startTouchDrag(e: TouchEvent): void;
     /**
      * Initiates the drag-and-drop action for a sortable element.
      * @param {number} clientX The x-coordinate of the mouse pointer at the start of the drag action.
@@ -46,9 +46,17 @@ export default class ReorderHandle extends WJElement {
      */
     startDragAction(clientX: number, clientY: number): void;
     /**
-     * Retrieves the dropzone associated with the given element.
-     * @param {HTMLElement} element The element from which to search for the closest dropzone.
-     * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or the parent element if no dropzone is found.
+     * Retrieves the closest draggable element based on attribute conditions.
+     * If the element has a "parent" attribute, the method attempts to find the closest ancestor
+     * matching the CSS selector specified in the attribute. If no such ancestor exists,
+     * the method defaults to returning the immediate parent element.
+     * @returns {Element|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.
+     */
+    getDraggable(): Element | null;
+    /**
+     * Retrieves the nearest dropzone element based on the element's attributes or its parent element.
+     * @param {HTMLElement} element The HTML element for which the dropzone is being determined.
+     * @returns {HTMLElement|null} The nearest dropzone element if found; otherwise, the parent element or null.
      */
     getDropzone(element: HTMLElement): HTMLElement | null;
     /**
@@ -68,8 +76,9 @@ export default class ReorderHandle extends WJElement {
      */
     getElementsFromPointAll(x: number, y: number, root?: Document | ShadowRoot, visited?: Set<Node>): HTMLElement[];
     /**
-     * Re-indexes the items in the container.
-     * @param container
+     * Re-indexes child elements of the given container by setting their dataset index.
+     * @param {HTMLElement} container The container element whose children are to be re-indexed.
+     * @returns {void}
      */
-    reIndexItems(container: any): void;
+    reIndexItems(container: HTMLElement): void;
 }

package/dist/wje-reorder-handle.js

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
+import { event } from "./event.js";
 const styles = ".disabled {\n    opacity: 0.3;\n}\n";
 class ReorderHandle extends WJElement {
   /**
@@ -58,19 +59,20 @@ class ReorderHandle extends WJElement {
   }
   /**
    * Handles the attribute changes.
-   * @param {DragEvent} event
+   * @param {DragEvent} e
    */
-  startDrag(event) {
+  startDrag(e) {
     if (this.hasAttribute("disabled") || this.hasAttribute("locked")) return;
-    this.startDragAction(event.clientX, event.clientY);
+    this.startDragAction(e.clientX, e.clientY);
+    event.dispatchCustomEvent(this, "wje-reorder-handle:start", { draggable: this.getDraggable() });
   }
   /**
    * Handles the touch start event.
-   * @param {TouchEvent} event
+   * @param {TouchEvent} e
    */
-  startTouchDrag(event) {
+  startTouchDrag(e) {
     if (this.hasAttribute("disabled") || this.hasAttribute("locked")) return;
-    const touch = event.touches[0];
+    const touch = e.touches[0];
     this.startDragAction(touch.clientX, touch.clientY);
   }
   /**
@@ -79,13 +81,7 @@ class ReorderHandle extends WJElement {
    * @param {number} clientY The y-coordinate of the mouse pointer at the start of the drag action.
    */
   startDragAction(clientX, clientY) {
-    let draggable;
-    if (this.hasAttribute("parent")) {
-      const parentSelector = this.getAttribute("parent");
-      draggable = this.closest(parentSelector);
-    } else {
-      draggable = this.parentElement;
-    }
+    let draggable = this.getDraggable();
     const initialContainer = this.getDropzone(draggable);
     if (!this.getAttribute("dropzone")) {
       this.setAttribute("dropzone", initialContainer.localName);
@@ -106,10 +102,10 @@ class ReorderHandle extends WJElement {
       draggable.style.top = `${pageY - offsetY - document.documentElement.scrollTop}px`;
     };
     moveAt(clientX, clientY);
-    const onMouseMove = (event) => {
+    const onMouseMove = (e) => {
       var _a;
-      moveAt(event.pageX, event.pageY);
-      const dropzone = this.getClosestDropzone(event.clientX, event.clientY);
+      moveAt(e.pageX, e.pageY);
+      const dropzone = this.getClosestDropzone(e.clientX, e.clientY);
       if (!dropzone) return;
       const siblings = Array.from(dropzone.children).filter(
         (child) => child !== draggable && child !== placeholder
@@ -117,8 +113,8 @@ class ReorderHandle extends WJElement {
       for (const sibling of siblings) {
         const siblingRect = sibling.getBoundingClientRect();
         if ((_a = sibling.children[0]) == null ? void 0 : _a.hasAttribute("locked")) continue;
-        if (event.clientY > siblingRect.top && event.clientY < siblingRect.bottom) {
-          if (event.clientY < siblingRect.top + siblingRect.height / 2) {
+        if (e.clientY > siblingRect.top && e.clientY < siblingRect.bottom) {
+          if (e.clientY < siblingRect.top + siblingRect.height / 2) {
             dropzone.insertBefore(placeholder, sibling);
           } else {
             dropzone.insertBefore(placeholder, sibling.nextSibling);
@@ -140,20 +136,35 @@ class ReorderHandle extends WJElement {
       finalContainer.insertBefore(draggable, placeholder);
       finalContainer.removeChild(placeholder);
       this.reIndexItems(finalContainer);
+      event.dispatchCustomEvent(this, "wje-reorder-handle:change", { finalContainer, draggable });
     };
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
     initialContainer.insertBefore(placeholder, draggable);
   }
   /**
-   * Retrieves the dropzone associated with the given element.
-   * @param {HTMLElement} element The element from which to search for the closest dropzone.
-   * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or the parent element if no dropzone is found.
+   * Retrieves the closest draggable element based on attribute conditions.
+   * If the element has a "parent" attribute, the method attempts to find the closest ancestor
+   * matching the CSS selector specified in the attribute. If no such ancestor exists,
+   * the method defaults to returning the immediate parent element.
+   * @returns {Element|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.
+   */
+  getDraggable() {
+    if (this.hasAttribute("parent")) {
+      let parent = this.closest(this.getAttribute("parent"));
+      if (parent) return parent;
+    }
+    return this.parentElement;
+  }
+  /**
+   * Retrieves the nearest dropzone element based on the element's attributes or its parent element.
+   * @param {HTMLElement} element The HTML element for which the dropzone is being determined.
+   * @returns {HTMLElement|null} The nearest dropzone element if found; otherwise, the parent element or null.
    */
   getDropzone(element) {
-    const dropzoneAttr = this.getAttribute("dropzone");
-    if (dropzoneAttr) {
-      let dropzone = element.closest(dropzoneAttr);
+    this.getAttribute("dropzone");
+    if (this.hasAttribute("dropzone")) {
+      let dropzone = element.closest(this.getAttribute("dropzone"));
       if (dropzone) return dropzone;
     }
     return element.parentElement;
@@ -194,8 +205,9 @@ class ReorderHandle extends WJElement {
     return allElements;
   }
   /**
-   * Re-indexes the items in the container.
-   * @param container
+   * Re-indexes child elements of the given container by setting their dataset index.
+   * @param {HTMLElement} container The container element whose children are to be re-indexed.
+   * @returns {void}
    */
   reIndexItems(container) {
     const items = Array.from(container.children);

package/dist/wje-reorder-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-reorder-handle.js","sources":["../packages/wje-reorder-handle/reorder-handle.element.js","../packages/wje-reorder-handle/reorder-handle.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ReorderHandle` is a custom web component that represents a reorder handle.\n * @summary This element represents a reorder handle.\n * @documentation https://elements.webjet.sk/components/reorder-handle\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder handle.\n * @slot - The default slot for the reorder handle.\n * @tag wje-reorder-handle\n */\nexport default class ReorderHandle extends WJElement {\n    /**\n     * Creates an instance of ReorderHandle.\n     */\n    constructor() {\n        super();\n        this.addEventListener('mousedown', this.startDrag.bind(this));\n        this.addEventListener('touchstart', this.startTouchDrag.bind(this));\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ReorderHandle';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['dropzone', 'parent'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const container = document.createElement('div');\n        container.classList.add('container');\n        container.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component after it is connected to the DOM.\n     */\n    afterDraw() {\n        if (this.hasAttribute('disabled')) {\n            this.style.opacity = '.3';\n        }\n    }\n\n    /**\n     * Handles the attribute changes.\n     * @param {DragEvent} event\n     */\n    startDrag(event) {\n        if (this.hasAttribute('disabled') || this.hasAttribute('locked')) return;\n        this.startDragAction(event.clientX, event.clientY);\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param {TouchEvent} event\n     */\n    startTouchDrag(event) {\n        if (this.hasAttribute('disabled') || this.hasAttribute('locked')) return;\n        const touch = event.touches[0];\n        this.startDragAction(touch.clientX, touch.clientY);\n    }\n\n    /**\n     * Initiates the drag-and-drop action for a sortable element.\n     * @param {number} clientX The x-coordinate of the mouse pointer at the start of the drag action.\n     * @param {number} clientY The y-coordinate of the mouse pointer at the start of the drag action.\n     */\n    startDragAction(clientX, clientY) {\n        let draggable;\n        if (this.hasAttribute('parent')) {\n            const parentSelector = this.getAttribute('parent');\n            draggable = this.closest(parentSelector);\n        } else {\n            draggable = this.parentElement;\n        }\n\n        const initialContainer = this.getDropzone(draggable);\n\n        if (!this.getAttribute('dropzone')) {\n            this.setAttribute('dropzone', initialContainer.localName);\n        }\n\n        const rect = draggable.getBoundingClientRect();\n        const offsetX = clientX - rect.left;\n        const offsetY = clientY - rect.top;\n\n        let placeholder = document.createElement('div');\n        placeholder.classList.add('sortable-item');\n        placeholder.style.visibility = 'hidden';\n        placeholder.style.height = `${rect.height}px`;\n\n        draggable.classList.add('dragging');\n\n        draggable.style.position = 'fixed';\n        draggable.style.zIndex = '1000';\n        draggable.style.width = `${rect.width}px`;\n\n        const moveAt = (pageX, pageY) => {\n            draggable.style.left = `${pageX - offsetX - document.documentElement.scrollLeft}px`;\n            draggable.style.top = `${pageY - offsetY - document.documentElement.scrollTop}px`;\n        };\n\n        moveAt(clientX, clientY);\n\n        const onMouseMove = (event) => {\n            moveAt(event.pageX, event.pageY);\n\n            const dropzone = this.getClosestDropzone(event.clientX, event.clientY);\n            if (!dropzone) return;\n\n            const siblings = Array.from(dropzone.children).filter(\n                (child) => child !== draggable && child !== placeholder\n            );\n\n            for (const sibling of siblings) {\n                const siblingRect = sibling.getBoundingClientRect();\n\n                if (sibling.children[0]?.hasAttribute('locked')) continue;\n\n                if (event.clientY > siblingRect.top && event.clientY < siblingRect.bottom) {\n                    if (event.clientY < siblingRect.top + siblingRect.height / 2) {\n                        dropzone.insertBefore(placeholder, sibling);\n                    } else {\n                        dropzone.insertBefore(placeholder, sibling.nextSibling);\n                    }\n                    break;\n                }\n            }\n        };\n\n        const onMouseUp = () => {\n            document.removeEventListener('mousemove', onMouseMove);\n            document.removeEventListener('mouseup', onMouseUp);\n\n            draggable.classList.remove('dragging');\n\n            draggable.style.position = '';\n            draggable.style.zIndex = '';\n            draggable.style.left = '';\n            draggable.style.top = '';\n            draggable.style.width = '';\n\n            const finalContainer = placeholder.parentElement;\n            finalContainer.insertBefore(draggable, placeholder);\n            finalContainer.removeChild(placeholder);\n\n            this.reIndexItems(finalContainer);\n        };\n\n        document.addEventListener('mousemove', onMouseMove);\n        document.addEventListener('mouseup', onMouseUp);\n\n        initialContainer.insertBefore(placeholder, draggable);\n    }\n\n    /**\n     * Retrieves the dropzone associated with the given element.\n     * @param {HTMLElement} element The element from which to search for the closest dropzone.\n     * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or the parent element if no dropzone is found.\n     */\n    getDropzone(element) {\n        const dropzoneAttr = this.getAttribute('dropzone');\n        if (dropzoneAttr) {\n            let dropzone = element.closest(dropzoneAttr);\n            if (dropzone) return dropzone;\n        }\n        return element.parentElement;\n    }\n\n    /**\n     * Retrieves the closest dropzone element at the specified coordinates.\n     * @param {number} clientX The x-coordinate relative to the viewport.\n     * @param {number} clientY The y-coordinate relative to the viewport.\n     * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or `null` if none is found.\n     */\n    getClosestDropzone(clientX, clientY) {\n        const elements = this.getElementsFromPointAll(clientX, clientY);\n        for (const element of elements) {\n            if (element.matches(this.getAttribute('dropzone'))) {\n                return element;\n            }\n        }\n        return null;\n    }\n\n    /**\n     * Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n     * @param {number} x The x-coordinate relative to the viewport.\n     * @param {number} y The y-coordinate relative to the viewport.\n     * @param {Document|ShadowRoot} [root] The root context in which to search. Defaults to the main document.\n     * @param {Set<Node>} [visited] A set of already visited nodes to avoid infinite recursion in nested shadow DOMs.\n     * @returns {HTMLElement[]} An array of all elements found at the specified coordinates, including shadow DOM elements.\n     */\n    getElementsFromPointAll(x, y, root = document, visited = new Set()) {\n        if (visited.has(root)) return [];\n        visited.add(root);\n\n        const elements = root.elementsFromPoint(x, y);\n        let allElements = [...elements];\n\n        for (const element of elements) {\n            if (element.shadowRoot && !visited.has(element.shadowRoot)) {\n                allElements = allElements.concat(this.getElementsFromPointAll(x, y, element.shadowRoot, visited));\n            }\n        }\n\n        return allElements;\n    }\n\n    /**\n     * Re-indexes the items in the container.\n     * @param container\n     */\n    reIndexItems(container) {\n        const items = Array.from(container.children);\n        let index = 0;\n\n        items.forEach((child) => {\n            if (child.children[0]?.hasAttribute('locked')) {\n                child.dataset.index = index;\n            } else {\n                child.dataset.index = index;\n            }\n            index++;\n        });\n    }\n}\n","import ReorderHandle from './reorder-handle.element.js';\n\nexport default ReorderHandle;\n\nReorderHandle.define('wje-reorder-handle', ReorderHandle);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-reorder-handle.js","sources":["../packages/wje-reorder-handle/reorder-handle.element.js","../packages/wje-reorder-handle/reorder-handle.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ReorderHandle` is a custom web component that represents a reorder handle.\n * @summary This element represents a reorder handle.\n * @documentation https://elements.webjet.sk/components/reorder-handle\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder handle.\n * @slot - The default slot for the reorder handle.\n * @tag wje-reorder-handle\n */\nexport default class ReorderHandle extends WJElement {\n    /**\n     * Creates an instance of ReorderHandle.\n     */\n    constructor() {\n        super();\n        this.addEventListener('mousedown', this.startDrag.bind(this));\n        this.addEventListener('touchstart', this.startTouchDrag.bind(this));\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ReorderHandle';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['dropzone', 'parent'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const container = document.createElement('div');\n        container.classList.add('container');\n        container.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        return fragment;\n    }\n\n    /**\n     * Draws the component after it is connected to the DOM.\n     */\n    afterDraw() {\n        if (this.hasAttribute('disabled')) {\n            this.style.opacity = '.3';\n        }\n    }\n\n    /**\n     * Handles the attribute changes.\n     * @param {DragEvent} e\n     */\n    startDrag(e) {\n        if (this.hasAttribute('disabled') || this.hasAttribute('locked')) return;\n        this.startDragAction(e.clientX, e.clientY);\n        event.dispatchCustomEvent(this, 'wje-reorder-handle:start', {draggable: this.getDraggable()});\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param {TouchEvent} e\n     */\n    startTouchDrag(e) {\n        if (this.hasAttribute('disabled') || this.hasAttribute('locked')) return;\n        const touch = e.touches[0];\n        this.startDragAction(touch.clientX, touch.clientY);\n    }\n\n    /**\n     * Initiates the drag-and-drop action for a sortable element.\n     * @param {number} clientX The x-coordinate of the mouse pointer at the start of the drag action.\n     * @param {number} clientY The y-coordinate of the mouse pointer at the start of the drag action.\n     */\n    startDragAction(clientX, clientY) {\n        let draggable = this.getDraggable();\n\n        const initialContainer = this.getDropzone(draggable);\n\n        if (!this.getAttribute('dropzone')) {\n            this.setAttribute('dropzone', initialContainer.localName);\n        }\n\n        const rect = draggable.getBoundingClientRect();\n        const offsetX = clientX - rect.left;\n        const offsetY = clientY - rect.top;\n\n        let placeholder = document.createElement('div');\n        placeholder.classList.add('sortable-item');\n        placeholder.style.visibility = 'hidden';\n        placeholder.style.height = `${rect.height}px`;\n\n        draggable.classList.add('dragging');\n\n        draggable.style.position = 'fixed';\n        draggable.style.zIndex = '1000';\n        draggable.style.width = `${rect.width}px`;\n\n        const moveAt = (pageX, pageY) => {\n            draggable.style.left = `${pageX - offsetX - document.documentElement.scrollLeft}px`;\n            draggable.style.top = `${pageY - offsetY - document.documentElement.scrollTop}px`;\n        };\n\n        moveAt(clientX, clientY);\n\n        const onMouseMove = (e) => {\n            moveAt(e.pageX, e.pageY);\n\n            const dropzone = this.getClosestDropzone(e.clientX, e.clientY);\n            if (!dropzone) return;\n\n            const siblings = Array.from(dropzone.children).filter(\n                (child) => child !== draggable && child !== placeholder\n            );\n\n            for (const sibling of siblings) {\n                const siblingRect = sibling.getBoundingClientRect();\n\n                if (sibling.children[0]?.hasAttribute('locked')) continue;\n\n                if (e.clientY > siblingRect.top && e.clientY < siblingRect.bottom) {\n                    if (e.clientY < siblingRect.top + siblingRect.height / 2) {\n                        dropzone.insertBefore(placeholder, sibling);\n                    } else {\n                        dropzone.insertBefore(placeholder, sibling.nextSibling);\n                    }\n                    break;\n                }\n            }\n        }\n\n        const onMouseUp = () => {\n            document.removeEventListener('mousemove', onMouseMove);\n            document.removeEventListener('mouseup', onMouseUp);\n\n            draggable.classList.remove('dragging');\n\n            draggable.style.position = '';\n            draggable.style.zIndex = '';\n            draggable.style.left = '';\n            draggable.style.top = '';\n            draggable.style.width = '';\n\n            const finalContainer = placeholder.parentElement;\n            finalContainer.insertBefore(draggable, placeholder);\n            finalContainer.removeChild(placeholder);\n\n            this.reIndexItems(finalContainer);\n\n            event.dispatchCustomEvent(this, 'wje-reorder-handle:change', {finalContainer: finalContainer, draggable: draggable});\n        };\n\n        document.addEventListener('mousemove', onMouseMove);\n        document.addEventListener('mouseup', onMouseUp);\n\n        initialContainer.insertBefore(placeholder, draggable);\n    }\n\n    /**\n     * Retrieves the closest draggable element based on attribute conditions.\n     * If the element has a \"parent\" attribute, the method attempts to find the closest ancestor\n     * matching the CSS selector specified in the attribute. If no such ancestor exists,\n     * the method defaults to returning the immediate parent element.\n     * @returns {Element|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.\n     */\n    getDraggable() {\n        if (this.hasAttribute('parent')) {\n            let parent = this.closest(this.getAttribute('parent'));\n            if(parent) return parent;\n        }\n        return this.parentElement;\n    }\n\n    /**\n     * Retrieves the nearest dropzone element based on the element's attributes or its parent element.\n     * @param {HTMLElement} element The HTML element for which the dropzone is being determined.\n     * @returns {HTMLElement|null} The nearest dropzone element if found; otherwise, the parent element or null.\n     */\n    getDropzone(element) {\n        const dropzoneAttr = this.getAttribute('dropzone');\n        if (this.hasAttribute('dropzone')) {\n            let dropzone = element.closest(this.getAttribute('dropzone'));\n            if (dropzone) return dropzone;\n        }\n        return element.parentElement;\n    }\n\n    /**\n     * Retrieves the closest dropzone element at the specified coordinates.\n     * @param {number} clientX The x-coordinate relative to the viewport.\n     * @param {number} clientY The y-coordinate relative to the viewport.\n     * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or `null` if none is found.\n     */\n    getClosestDropzone(clientX, clientY) {\n        const elements = this.getElementsFromPointAll(clientX, clientY);\n        for (const element of elements) {\n            if (element.matches(this.getAttribute('dropzone'))) {\n                return element;\n            }\n        }\n        return null;\n    }\n\n    /**\n     * Retrieves all elements at the specified coordinates, including those within shadow DOMs.\n     * @param {number} x The x-coordinate relative to the viewport.\n     * @param {number} y The y-coordinate relative to the viewport.\n     * @param {Document|ShadowRoot} [root] The root context in which to search. Defaults to the main document.\n     * @param {Set<Node>} [visited] A set of already visited nodes to avoid infinite recursion in nested shadow DOMs.\n     * @returns {HTMLElement[]} An array of all elements found at the specified coordinates, including shadow DOM elements.\n     */\n    getElementsFromPointAll(x, y, root = document, visited = new Set()) {\n        if (visited.has(root)) return [];\n        visited.add(root);\n\n        const elements = root.elementsFromPoint(x, y);\n        let allElements = [...elements];\n\n        for (const element of elements) {\n            if (element.shadowRoot && !visited.has(element.shadowRoot)) {\n                allElements = allElements.concat(this.getElementsFromPointAll(x, y, element.shadowRoot, visited));\n            }\n        }\n\n        return allElements;\n    }\n\n    /**\n     * Re-indexes child elements of the given container by setting their dataset index.\n     * @param {HTMLElement} container The container element whose children are to be re-indexed.\n     * @returns {void}\n     */\n    reIndexItems(container) {\n        const items = Array.from(container.children);\n        let index = 0;\n\n        items.forEach((child) => {\n            if (child.children[0]?.hasAttribute('locked')) {\n                child.dataset.index = index;\n            } else {\n                child.dataset.index = index;\n            }\n            index++;\n        });\n    }\n}\n","import ReorderHandle from './reorder-handle.element.js';\n\nexport default ReorderHandle;\n\nReorderHandle.define('wje-reorder-handle', ReorderHandle);\n"],"names":[],"mappings":"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"}

package/dist/wje-tree-item.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n            .indent {\n                display: block;\n                width: 1em;\n            }\n            .toggle {\n                font-size: var(--wje-font-size-medium);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n            wje-checkbox {\n                font-size: var(--wje-font-size-medium);\n                margin: 0;\n            }\n            .content {\n                font-size: var(--wje-font-size-medium);\n            }\n            slot {\n                display: flex;\n                align-items: center;\n            }\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            font-size: calc(1em + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n            display: none;\n            &.open {\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
+const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n            .indent {\n                display: block;\n                width: 1em;\n            }\n            .toggle {\n                font-size: var(--wje-font-size-medium);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n            wje-checkbox {\n                font-size: var(--wje-font-size-medium);\n                margin: 0;\n            }\n            .content {\n                font-size: var(--wje-font-size-medium);\n            }\n            slot {\n                display: flex;\n                align-items: center;\n            }\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            font-size: calc(1rem + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n            display: none;\n            &.open {\n                font-size: var(--wje-font-size-medium);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
 class TreeItem extends WJElement {
   /**
    * Creates an instance of Toast.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.200",
+  "version": "0.1.202",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",