wj-elements 0.1.194 → 0.1.196

package/dist/packages/wje-dropdown/dropdown.element.d.ts

@@ -52,11 +52,18 @@ export default class Dropdown extends WJElement {
      */
     draw(): DocumentFragment;
     anchorSlot: HTMLSlotElement;
-    popupHideCallback: () => void;
+    popupHideCallback: (e: any) => void;
     /**
      * Adds event listeners for the mouseenter and mouseleave events.
      */
     afterDraw(): void;
+    /**
+     * @summary Toggles the dropdown element between active and inactive states.
+     * Calls the `onOpen` method if the element is currently inactive,
+     * and calls the `onClose` method if the element is currently active.
+     * @param {Event} e The event object.
+     */
+    toggleCallback: (e: Event) => void;
     /**
      * @summary Returns the content to be displayed before showing the dropdown.
      * @returns {any} The content to be displayed.
@@ -66,13 +73,6 @@ export default class Dropdown extends WJElement {
      * This method is called after the dropdown is shown.
      */
     afterShow(): void;
-    /**
-     * @summary Toggles the dropdown element between active and inactive states.
-     * Calls the `onOpen` method if the element is currently inactive,
-     * and calls the `onClose` method if the element is currently active.
-     * @param {Event} e The event object.
-     */
-    toggleCallback: (e: Event) => void;
     /**
      * Open the popup element.
      * @param {object} e
@@ -80,5 +80,5 @@ export default class Dropdown extends WJElement {
     onOpen: (e: object) => void;
     beforeClose: () => void;
     afterClose: () => void;
-    onClose: (e: any) => void;
+    onClose: () => void;
 }

package/dist/wje-dropdown.js

@@ -33,13 +33,9 @@ class Dropdown extends WJElement {
         this.popup.hide();
       }
     });
-    __publicField(this, "popupHideCallback", () => {
+    __publicField(this, "popupHideCallback", (e) => {
       if (this.classList.contains("active")) {
-        this.classList.remove("active");
-        event.dispatchCustomEvent(this, "wje-dropdown:close", {
-          bubbles: true,
-          detail: { target: this }
-        });
+        this.toggleCallback(e);
       }
     });
     /**
@@ -49,10 +45,11 @@ class Dropdown extends WJElement {
      * @param {Event} e The event object.
      */
     __publicField(this, "toggleCallback", (e) => {
-      e.stopPropagation();
       if (this.classList.contains("active")) {
-        this.onClose(e);
+        e.stopPropagation();
+        this.onClose();
       } else {
+        e.stopPropagation();
         this.onOpen(e);
       }
     });
@@ -61,7 +58,6 @@ class Dropdown extends WJElement {
      * @param {object} e
      */
     __publicField(this, "onOpen", (e) => {
-      e.stopPropagation();
       this.classList.add("active");
       Promise.resolve(this.beforeShow(this)).then((res) => {
         if (!this.classList.contains("active")) {
@@ -82,8 +78,7 @@ class Dropdown extends WJElement {
     });
     __publicField(this, "afterClose", () => {
     });
-    __publicField(this, "onClose", (e) => {
-      e.stopPropagation();
+    __publicField(this, "onClose", () => {
       this.classList.remove("active");
       Promise.resolve(this.beforeClose(this)).then((res) => {
         if (this.classList.contains("active")) {

package/dist/wje-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('part', 'popup');\n\n        popup.appendChild(anchorSlot);\n        popup.appendChild(slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n    }\n\n    popupHideCallback = () => {\n        if (this.classList.contains('active')) {\n            this.classList.remove('active');\n\n            event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                bubbles: true,\n                detail: { target: this },\n            });\n        }\n    };\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n                Array.from(this.querySelectorAll('wje-menu-item')),\n                'click',\n                'wje-menu-item:click',\n                this.onClose\n            );\n        }\n    }\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        e.stopPropagation();\n\n        if (this.classList.contains('active')) {\n            this.onClose(e);\n        } else {\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        e.stopPropagation();\n\n        this.classList.add('active');\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(true); // Show tooltip\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide(true);\n            });\n    };\n\n    beforeClose = () => {\n        // Do nothing\n    };\n\n    afterClose = () => {\n        // Do nothing\n    };\n\n    onClose = (e) => {\n        e.stopPropagation();\n\n        this.classList.remove('active');\n        Promise.resolve(this.beforeClose(this))\n            .then((res) => {\n                if (this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.hide(true); // Show tooltip\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterClose(this));\n            })\n            .catch((error) => {\n                this.classList.add('active');\n                this.popup.show(true);\n            });\n    };\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/**\n * `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n */\nexport default class Dropdown extends WJElement {\n    /**\n     * Creates an instance of Dropdown.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The placement of the dropdown.\n     * @type {{\"wje-popup\": Popup}}\n     */\n    dependencies = {\n        'wje-popup': Popup,\n    };\n\n    /**\n     * Sets the placement of the dropdown.\n     * @param value\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Gets the placement of the dropdown.\n     * @returns {string|string}\n     */\n    get trigger() {\n        return this.getAttribute('trigger') || 'click';\n    }\n\n    /**\n     * Sets the placement of the dropdown.\n     * @type {string}\n     */\n    className = 'Dropdown';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active'];\n    }\n\n    /**\n     * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n     * @param {Event} e The event object.\n     */\n    otherDropdownOpennedCallback = (e) => {\n        if (e.detail.detail.target !== this) {\n            this.classList.remove('active');\n            this.popup.hide();\n        }\n    };\n\n    /**\n     * Sets up the attributes for the dropdown.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Removes the popup element.\n     */\n    beforeDraw() {\n        this.popup?.remove();\n        this.popup = null;\n    }\n\n    /**\n     * Draws the dropdown element and returns the created document fragment.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('wje-placement', 'wje-' + this.placement || 'wje-start');\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-dropdown');\n\n        let tooltip = document.createElement('wje-tooltip');\n        tooltip.setAttribute('content', this.tooltip);\n\n        let anchorSlot = document.createElement('slot');\n        anchorSlot.setAttribute('name', 'trigger');\n        anchorSlot.setAttribute('slot', 'anchor');\n\n        let slot = document.createElement('slot');\n\n        let popup = document.createElement('wje-popup');\n        popup.setAttribute('placement', this.placement);\n        popup.setAttribute('offset', this.offset);\n        popup.setAttribute('part', 'popup');\n\n        popup.appendChild(anchorSlot);\n        popup.appendChild(slot);\n\n        // if(this.trigger === \"click\")\n        popup.setAttribute('manual', '');\n\n        native.appendChild(popup);\n\n        fragment.appendChild(native);\n\n        this.popup = popup;\n        this.anchorSlot = anchorSlot;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDisconnect() {\n        event.removeListener(this, 'mouseenter', null, this.onOpen);\n        event.removeListener(this, 'mouseleave', null, this.onClose);\n        event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n    }\n\n    popupHideCallback = (e) => {\n        if (this.classList.contains('active')) {\n            this.toggleCallback(e);\n        }\n    };\n\n    /**\n     * Adds event listeners for the mouseenter and mouseleave events.\n     */\n    afterDraw() {\n        event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n        if (this.trigger !== 'click') {\n            event.addListener(this, 'mouseenter', null, this.onOpen);\n            event.addListener(this, 'mouseleave', null, this.onClose);\n        } else {\n            event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n        }\n\n        if (this.hasAttribute('collapsible')) {\n            event.addListener(\n                Array.from(this.querySelectorAll('wje-menu-item')),\n                'click',\n                'wje-menu-item:click',\n                this.onClose\n            );\n        }\n    }\n\n    /**\n     * @summary Toggles the dropdown element between active and inactive states.\n     * Calls the `onOpen` method if the element is currently inactive,\n     * and calls the `onClose` method if the element is currently active.\n     * @param {Event} e The event object.\n     */\n    toggleCallback = (e) => {\n        if (this.classList.contains('active')) {\n            e.stopPropagation();\n            this.onClose();\n        } else {\n            e.stopPropagation();\n            this.onOpen(e);\n        }\n    };\n\n    /**\n     * @summary Returns the content to be displayed before showing the dropdown.\n     * @returns {any} The content to be displayed.\n     */\n    beforeShow() {\n        return this.content;\n    }\n\n    /**\n     * This method is called after the dropdown is shown.\n     */\n    afterShow() {\n        // Do nothing\n    }\n\n    /**\n     * Open the popup element.\n     * @param {object} e\n     */\n    onOpen = (e) => {\n        this.classList.add('active');\n        Promise.resolve(this.beforeShow(this))\n            .then((res) => {\n                if (!this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.show(true); // Show tooltip\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterShow(this));\n            })\n            .catch((error) => {\n                // ak je nejaka chyba tak to len zatvorime\n                this.classList.remove('active');\n                this.popup.hide(true);\n            });\n    };\n\n    beforeClose = () => {\n        // Do nothing\n    };\n\n    afterClose = () => {\n        // Do nothing\n    };\n\n    onClose = () => {\n        this.classList.remove('active');\n        Promise.resolve(this.beforeClose(this))\n            .then((res) => {\n                if (this.classList.contains('active')) {\n                    throw new Error('beforeShow method returned false or not string');\n                }\n\n                this.popup.hide(true); // Show tooltip\n\n                event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n                    bubbles: true,\n                    detail: { target: this },\n                });\n\n                Promise.resolve(this.afterClose(this));\n            })\n            .catch((error) => {\n                this.classList.add('active');\n                this.popup.show(true);\n            });\n    };\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}

package/dist/wje-reorder.js

@@ -227,7 +227,7 @@ class Reorder extends WJElement {
       }
       return clonedNode;
     });
-    const newOrder = orderElements.map((el) => el.innerText.trim());
+    const newOrder = newOrderElements.map((el) => el.innerText.trim());
     this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);
     document.body.style.userSelect = "";
   }
@@ -267,10 +267,10 @@ class Reorder extends WJElement {
    * // @fires wje-reorder:change - Dispatched when the reordering is completed.
    * The event includes details about the initial position, the new position, and the new order.
    */
-  dispatchChange(from, to, order, orderElements2) {
+  dispatchChange(from, to, order, orderElements) {
     this.dispatchEvent(
       new CustomEvent("wje-reorder:change", {
-        detail: { from, to, order, orderElements: orderElements2 }
+        detail: { from, to, order, orderElements }
       })
     );
   }

package/dist/wje-reorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-reorder.js","sources":["../packages/wje-reorder/reorder.element.js","../packages/wje-reorder/reorder.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Reorder` is a custom web component that represents a reorder.\n * It extends from `WJElement`.\n * @summary This element represents a reorder.\n * @documentation https://elements.webjet.sk/components/reorder\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder.\n * @slot - The default slot for the reorder.\n * // @fires wje-reorder:change - Event fired when the reorder is changed.\n * @tag wje-reorder\n */\n\nexport default class Reorder extends WJElement {\n    /**\n     * Creates an instance of Select.\n     * @class\n     */\n    constructor() {\n        super();\n        this.dragEl = null;\n        this.items = [];\n        this.originalIndex = null;\n        this.isDragging = false;\n        this.offsetX = 0;\n        this.offsetY = 0;\n        this.cloneEl = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Select';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component after it is connected to the DOM.\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        slot.classList.add('reorder-items');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        this.container = container;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        const items = this.querySelectorAll('wje-reorder-item');\n        const dropZones = this.querySelectorAll('wje-reorder-dropzone');\n        this.container.classList.add(this.hasAttribute('reverse') ? 'reversed' : 'basic');\n\n        if (dropZones) {\n            dropZones.forEach((dropZone) => {\n                this.container.classList.remove('container');\n                this.container.classList.add('container-w-dropzones');\n            });\n        }\n\n        if (items) {\n            items.forEach((item) => {\n                const handles = item.querySelectorAll('[slot=handle]');\n                const draggableElement = handles.length > 0 ? handles : [item];\n\n                draggableElement.forEach((element) => {\n                    this.attachEventListeners(element);\n                });\n            });\n        }\n    }\n\n    /**\n     * Attaches event listeners to the element.\n     * @param element\n     */\n    attachEventListeners(element) {\n        element.addEventListener('mousedown', this.mouseDown.bind(this), false);\n        element.addEventListener('touchstart', this.touchStart.bind(this), false);\n        element.addEventListener('dragstart', this.dragStart.bind(this), false);\n    }\n\n    /**\n     * Handles the mouse down event.\n     * @param {object} e\n     */\n    mouseDown(e) {\n        this.startDragging(e.clientX, e.clientY, e.currentTarget);\n        document.addEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.addEventListener('mouseup', this.mouseUp.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param e\n     */\n    touchStart(e) {\n        const touch = e.touches[0];\n        this.startDragging(touch.clientX, touch.clientY, e.currentTarget);\n        document.addEventListener('touchmove', this.touchMove.bind(this), false);\n        document.addEventListener('touchend', this.touchEnd.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Initializes the dragging process for a reorderable item.\n     * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.\n     * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.\n     * @param {HTMLElement} target The target element where the drag event originated.\n     */\n    startDragging(clientX, clientY, target) {\n        if (this.hasAttribute('disabled')) {\n            return;\n        }\n\n        this.isDragging = true;\n        this.dragEl = target.closest('wje-reorder-item');\n\n        this.createClone();\n\n        this.dragEl.style.opacity = '0.3';\n\n        const rect = this.dragEl.getBoundingClientRect();\n        this.offsetX = clientX - rect.left;\n        this.offsetY = clientY - rect.top;\n\n        this.dragEl.classList.add('dragging');\n\n        this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);\n        this.originalParent = this.dragEl.parentNode;\n    }\n\n    /**\n     * Handles the mouse move event.\n     * @param e\n     */\n    mouseMove(e) {\n        if (!this.isDragging) return;\n        this.moveElement(e.pageX, e.pageY);\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;\n            this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;\n        }\n    }\n\n    /**\n     * Handles the `touchmove` event and updates the position of the dragged element.\n     * @param {TouchEvent} e The touch event containing touch position data.\n     */\n    touchMove(e) {\n        if (!this.isDragging) return;\n        const touch = e.touches[0];\n        this.moveElement(touch.pageX, touch.pageY);\n    }\n\n    /**\n     * Updates the position of the dragged element and handles reordering logic based on the mouse position.\n     * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.\n     * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.\n     */\n    moveElement(pageX, pageY) {\n        const scrollX = window.scrollX || document.documentElement.scrollLeft;\n        const scrollY = window.scrollY || document.documentElement.scrollTop;\n        const adjustedPageX = pageX - scrollX;\n        const adjustedPageY = pageY - scrollY;\n\n        this.dragEl.style.left = `${adjustedPageX}px`;\n        this.dragEl.style.top = `${adjustedPageY}px`;\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${adjustedPageX}px`;\n            this.cloneEl.style.top = `${adjustedPageY}px`;\n        }\n\n        const items = this.querySelectorAll('wje-reorder-item');\n        items.forEach((item) => {\n            if (item === this.dragEl) return;\n\n            const boundingBox = item.getBoundingClientRect();\n            const mouseY = adjustedPageY - boundingBox.top;\n            const mouseYPercent = (mouseY / boundingBox.height) * 100;\n\n            if (mouseYPercent > 30 && this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item.nextSibling);\n            } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item);\n            }\n        });\n    }\n\n    /**\n     * Handles the mouse up event.\n     */\n    mouseUp() {\n        this.stopDragging();\n        document.removeEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.removeEventListener('mouseup', this.mouseUp.bind(this), false);\n\n        if (this.cloneEl) {\n            this.cloneEl.remove();\n            this.cloneEl = null;\n        }\n\n        if (this.dragEl) {\n            this.dragEl.style.opacity = '1';\n        }\n    }\n\n    /**\n     * Handles the touch end event.\n     */\n    touchEnd() {\n        this.stopDragging();\n        document.removeEventListener('touchmove', this.touchMove.bind(this), false);\n        document.removeEventListener('touchend', this.touchEnd.bind(this), false);\n    }\n\n    /**\n     * Stops dragging the element.\n     */\n    stopDragging() {\n        if (!this.isDragging) return;\n\n        this.isDragging = false;\n        this.dragEl.classList.remove('dragging');\n        this.dragEl.style.left = '';\n        this.dragEl.style.top = '';\n\n        const parent = this.dragEl.parentNode;\n        const newIndex = Array.from(parent.children).indexOf(this.dragEl);\n\n        const newOrderElements = Array.from(parent.children).map((el) => {\n            const clonedNode = el.cloneNode(true);\n            const handle = clonedNode.querySelector('.handle');\n            if (handle) {\n                handle.remove();\n            }\n            return clonedNode;\n        });\n\n        const newOrder = orderElements.map(el => el.innerText.trim());\n\n        this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);\n\n        document.body.style.userSelect = '';\n    }\n\n    /**\n     * Prevents the default behavior of the `dragstart` event.\n     * @param {DragEvent} e The drag event triggered when a drag operation starts.\n     */\n    dragStart(e) {\n        e.preventDefault();\n    }\n\n    /**\n     * Creates a clone of the element.\n     */\n    createClone() {\n        this.cloneEl = this.dragEl.cloneNode(true);\n        this.cloneEl.style.position = 'absolute';\n        this.cloneEl.style.pointerEvents = 'none';\n        this.cloneEl.style.visibility = 'visible';\n\n        document.body.appendChild(this.cloneEl);\n    }\n\n    /**\n     * Checks if the dragged element is moving down.\n     * @param droppedElement\n     * @returns {boolean}\n     */\n    isMovingDown(droppedElement) {\n        const parent = droppedElement.parentNode;\n        const dragIndex = Array.from(parent.children).indexOf(this.dragEl);\n        const dropIndex = Array.from(parent.children).indexOf(droppedElement);\n\n        return dragIndex < dropIndex;\n    }\n\n    /**\n     * Dispatches a custom event to signal that a reordering operation has occurred.\n     * @param {number} from The original index of the dragged item.\n     * @param {number} to The new index of the dragged item after reordering.\n     * @param {Array<number>} order The updated order of items after the reordering.\n     * // @fires wje-reorder:change - Dispatched when the reordering is completed.\n     * The event includes details about the initial position, the new position, and the new order.\n     */\n    dispatchChange(from, to, order, orderElements) {\n        this.dispatchEvent(\n            new CustomEvent('wje-reorder:change', {\n                detail: { from, to, order, orderElements },\n            })\n        );\n    }\n}\n","import Reorder from './reorder.element.js';\n\nexport default Reorder;\n\nReorder.define('wje-reorder', Reorder);\n"],"names":["orderElements"],"mappings":"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"}
+{"version":3,"file":"wje-reorder.js","sources":["../packages/wje-reorder/reorder.element.js","../packages/wje-reorder/reorder.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Reorder` is a custom web component that represents a reorder.\n * It extends from `WJElement`.\n * @summary This element represents a reorder.\n * @documentation https://elements.webjet.sk/components/reorder\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder.\n * @slot - The default slot for the reorder.\n * // @fires wje-reorder:change - Event fired when the reorder is changed.\n * @tag wje-reorder\n */\n\nexport default class Reorder extends WJElement {\n    /**\n     * Creates an instance of Select.\n     * @class\n     */\n    constructor() {\n        super();\n        this.dragEl = null;\n        this.items = [];\n        this.originalIndex = null;\n        this.isDragging = false;\n        this.offsetX = 0;\n        this.offsetY = 0;\n        this.cloneEl = null;\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Select';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component after it is connected to the DOM.\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        slot.classList.add('reorder-items');\n\n        container.appendChild(slot);\n\n        fragment.appendChild(container);\n\n        this.container = container;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        const items = this.querySelectorAll('wje-reorder-item');\n        const dropZones = this.querySelectorAll('wje-reorder-dropzone');\n        this.container.classList.add(this.hasAttribute('reverse') ? 'reversed' : 'basic');\n\n        if (dropZones) {\n            dropZones.forEach((dropZone) => {\n                this.container.classList.remove('container');\n                this.container.classList.add('container-w-dropzones');\n            });\n        }\n\n        if (items) {\n            items.forEach((item) => {\n                const handles = item.querySelectorAll('[slot=handle]');\n                const draggableElement = handles.length > 0 ? handles : [item];\n\n                draggableElement.forEach((element) => {\n                    this.attachEventListeners(element);\n                });\n            });\n        }\n    }\n\n    /**\n     * Attaches event listeners to the element.\n     * @param element\n     */\n    attachEventListeners(element) {\n        element.addEventListener('mousedown', this.mouseDown.bind(this), false);\n        element.addEventListener('touchstart', this.touchStart.bind(this), false);\n        element.addEventListener('dragstart', this.dragStart.bind(this), false);\n    }\n\n    /**\n     * Handles the mouse down event.\n     * @param {object} e\n     */\n    mouseDown(e) {\n        this.startDragging(e.clientX, e.clientY, e.currentTarget);\n        document.addEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.addEventListener('mouseup', this.mouseUp.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Handles the touch start event.\n     * @param e\n     */\n    touchStart(e) {\n        const touch = e.touches[0];\n        this.startDragging(touch.clientX, touch.clientY, e.currentTarget);\n        document.addEventListener('touchmove', this.touchMove.bind(this), false);\n        document.addEventListener('touchend', this.touchEnd.bind(this), false);\n        document.body.style.userSelect = 'none';\n    }\n\n    /**\n     * Initializes the dragging process for a reorderable item.\n     * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.\n     * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.\n     * @param {HTMLElement} target The target element where the drag event originated.\n     */\n    startDragging(clientX, clientY, target) {\n        if (this.hasAttribute('disabled')) {\n            return;\n        }\n\n        this.isDragging = true;\n        this.dragEl = target.closest('wje-reorder-item');\n\n        this.createClone();\n\n        this.dragEl.style.opacity = '0.3';\n\n        const rect = this.dragEl.getBoundingClientRect();\n        this.offsetX = clientX - rect.left;\n        this.offsetY = clientY - rect.top;\n\n        this.dragEl.classList.add('dragging');\n\n        this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);\n        this.originalParent = this.dragEl.parentNode;\n    }\n\n    /**\n     * Handles the mouse move event.\n     * @param e\n     */\n    mouseMove(e) {\n        if (!this.isDragging) return;\n        this.moveElement(e.pageX, e.pageY);\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;\n            this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;\n        }\n    }\n\n    /**\n     * Handles the `touchmove` event and updates the position of the dragged element.\n     * @param {TouchEvent} e The touch event containing touch position data.\n     */\n    touchMove(e) {\n        if (!this.isDragging) return;\n        const touch = e.touches[0];\n        this.moveElement(touch.pageX, touch.pageY);\n    }\n\n    /**\n     * Updates the position of the dragged element and handles reordering logic based on the mouse position.\n     * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.\n     * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.\n     */\n    moveElement(pageX, pageY) {\n        const scrollX = window.scrollX || document.documentElement.scrollLeft;\n        const scrollY = window.scrollY || document.documentElement.scrollTop;\n        const adjustedPageX = pageX - scrollX;\n        const adjustedPageY = pageY - scrollY;\n\n        this.dragEl.style.left = `${adjustedPageX}px`;\n        this.dragEl.style.top = `${adjustedPageY}px`;\n\n        if (this.cloneEl) {\n            this.cloneEl.style.left = `${adjustedPageX}px`;\n            this.cloneEl.style.top = `${adjustedPageY}px`;\n        }\n\n        const items = this.querySelectorAll('wje-reorder-item');\n        items.forEach((item) => {\n            if (item === this.dragEl) return;\n\n            const boundingBox = item.getBoundingClientRect();\n            const mouseY = adjustedPageY - boundingBox.top;\n            const mouseYPercent = (mouseY / boundingBox.height) * 100;\n\n            if (mouseYPercent > 30 && this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item.nextSibling);\n            } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {\n                item.parentNode.insertBefore(this.dragEl, item);\n            }\n        });\n    }\n\n    /**\n     * Handles the mouse up event.\n     */\n    mouseUp() {\n        this.stopDragging();\n        document.removeEventListener('mousemove', this.mouseMove.bind(this), false);\n        document.removeEventListener('mouseup', this.mouseUp.bind(this), false);\n\n        if (this.cloneEl) {\n            this.cloneEl.remove();\n            this.cloneEl = null;\n        }\n\n        if (this.dragEl) {\n            this.dragEl.style.opacity = '1';\n        }\n    }\n\n    /**\n     * Handles the touch end event.\n     */\n    touchEnd() {\n        this.stopDragging();\n        document.removeEventListener('touchmove', this.touchMove.bind(this), false);\n        document.removeEventListener('touchend', this.touchEnd.bind(this), false);\n    }\n\n    /**\n     * Stops dragging the element.\n     */\n    stopDragging() {\n        if (!this.isDragging) return;\n\n        this.isDragging = false;\n        this.dragEl.classList.remove('dragging');\n        this.dragEl.style.left = '';\n        this.dragEl.style.top = '';\n\n        const parent = this.dragEl.parentNode;\n        const newIndex = Array.from(parent.children).indexOf(this.dragEl);\n\n        const newOrderElements = Array.from(parent.children).map((el) => {\n            const clonedNode = el.cloneNode(true);\n            const handle = clonedNode.querySelector('.handle');\n            if (handle) {\n                handle.remove();\n            }\n            return clonedNode;\n        });\n\n        const newOrder = newOrderElements.map(el => el.innerText.trim());\n\n        this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);\n\n        document.body.style.userSelect = '';\n    }\n\n    /**\n     * Prevents the default behavior of the `dragstart` event.\n     * @param {DragEvent} e The drag event triggered when a drag operation starts.\n     */\n    dragStart(e) {\n        e.preventDefault();\n    }\n\n    /**\n     * Creates a clone of the element.\n     */\n    createClone() {\n        this.cloneEl = this.dragEl.cloneNode(true);\n        this.cloneEl.style.position = 'absolute';\n        this.cloneEl.style.pointerEvents = 'none';\n        this.cloneEl.style.visibility = 'visible';\n\n        document.body.appendChild(this.cloneEl);\n    }\n\n    /**\n     * Checks if the dragged element is moving down.\n     * @param droppedElement\n     * @returns {boolean}\n     */\n    isMovingDown(droppedElement) {\n        const parent = droppedElement.parentNode;\n        const dragIndex = Array.from(parent.children).indexOf(this.dragEl);\n        const dropIndex = Array.from(parent.children).indexOf(droppedElement);\n\n        return dragIndex < dropIndex;\n    }\n\n    /**\n     * Dispatches a custom event to signal that a reordering operation has occurred.\n     * @param {number} from The original index of the dragged item.\n     * @param {number} to The new index of the dragged item after reordering.\n     * @param {Array<number>} order The updated order of items after the reordering.\n     * // @fires wje-reorder:change - Dispatched when the reordering is completed.\n     * The event includes details about the initial position, the new position, and the new order.\n     */\n    dispatchChange(from, to, order, orderElements) {\n        this.dispatchEvent(\n            new CustomEvent('wje-reorder:change', {\n                detail: { from, to, order, orderElements },\n            })\n        );\n    }\n}\n","import Reorder from './reorder.element.js';\n\nexport default Reorder;\n\nReorder.define('wje-reorder', Reorder);\n"],"names":[],"mappings":"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"}

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.194",
+  "version": "0.1.196",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",