wj-elements 0.1.135 → 0.1.136

package/dist/wje-reorder-handle.js

@@ -1,218 +0,0 @@
-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 = ".disabled {\n    opacity: 0.3;\n}\n";
-class ReorderHandle extends WJElement {
-  /**
-   * Creates an instance of ReorderHandle.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
-    __publicField(this, "className", "ReorderHandle");
-    this.addEventListener("mousedown", this.startDrag.bind(this));
-    this.addEventListener("touchstart", this.startTouchDrag.bind(this));
-  }
-  /**
-   * Returns the CSS styles for the component.
-   * @returns {*}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @returns {string[]}
-   */
-  static get observedAttributes() {
-    return ["dropzone", "parent"];
-  }
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    const fragment = document.createDocumentFragment();
-    const container = document.createElement("div");
-    container.classList.add("container");
-    container.setAttribute("part", "native");
-    const slot = document.createElement("slot");
-    container.appendChild(slot);
-    fragment.appendChild(container);
-    return fragment;
-  }
-  /**
-   * Draws the component after it is connected to the DOM.
-   */
-  afterDraw() {
-    if (this.hasAttribute("disabled")) {
-      this.style.opacity = ".3";
-    }
-  }
-  /**
-   * Handles the attribute changes.
-   * @param {DragEvent} event
-   */
-  startDrag(event) {
-    if (this.hasAttribute("disabled") || this.hasAttribute("locked")) return;
-    this.startDragAction(event.clientX, event.clientY);
-  }
-  /**
-   * Handles the touch start event.
-   * @param {TouchEvent} event
-   */
-  startTouchDrag(event) {
-    if (this.hasAttribute("disabled") || this.hasAttribute("locked")) return;
-    const touch = event.touches[0];
-    this.startDragAction(touch.clientX, touch.clientY);
-  }
-  /**
-   * 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.
-   * @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;
-    }
-    const initialContainer = this.getDropzone(draggable);
-    if (!this.getAttribute("dropzone")) {
-      this.setAttribute("dropzone", initialContainer.localName);
-    }
-    const rect = draggable.getBoundingClientRect();
-    const offsetX = clientX - rect.left;
-    const offsetY = clientY - rect.top;
-    let placeholder = document.createElement("div");
-    placeholder.classList.add("sortable-item");
-    placeholder.style.visibility = "hidden";
-    placeholder.style.height = `${rect.height}px`;
-    draggable.classList.add("dragging");
-    draggable.style.position = "fixed";
-    draggable.style.zIndex = "1000";
-    draggable.style.width = `${rect.width}px`;
-    const moveAt = (pageX, pageY) => {
-      draggable.style.left = `${pageX - offsetX - document.documentElement.scrollLeft}px`;
-      draggable.style.top = `${pageY - offsetY - document.documentElement.scrollTop}px`;
-    };
-    moveAt(clientX, clientY);
-    const onMouseMove = (event) => {
-      var _a;
-      moveAt(event.pageX, event.pageY);
-      const dropzone = this.getClosestDropzone(event.clientX, event.clientY);
-      if (!dropzone) return;
-      const siblings = Array.from(dropzone.children).filter(
-        (child) => child !== draggable && child !== placeholder
-      );
-      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) {
-            dropzone.insertBefore(placeholder, sibling);
-          } else {
-            dropzone.insertBefore(placeholder, sibling.nextSibling);
-          }
-          break;
-        }
-      }
-    };
-    const onMouseUp = () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener("mouseup", onMouseUp);
-      draggable.classList.remove("dragging");
-      draggable.style.position = "";
-      draggable.style.zIndex = "";
-      draggable.style.left = "";
-      draggable.style.top = "";
-      draggable.style.width = "";
-      const finalContainer = placeholder.parentElement;
-      finalContainer.insertBefore(draggable, placeholder);
-      finalContainer.removeChild(placeholder);
-      this.reIndexItems(finalContainer);
-    };
-    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.
-   */
-  getDropzone(element) {
-    const dropzoneAttr = this.getAttribute("dropzone");
-    if (dropzoneAttr) {
-      let dropzone = element.closest(dropzoneAttr);
-      if (dropzone) return dropzone;
-    }
-    return element.parentElement;
-  }
-  /**
-   * Retrieves the closest dropzone element at the specified coordinates.
-   * @param {number} clientX The x-coordinate relative to the viewport.
-   * @param {number} clientY The y-coordinate relative to the viewport.
-   * @returns {HTMLElement|null} - The closest dropzone element matching the `dropzone` attribute, or `null` if none is found.
-   */
-  getClosestDropzone(clientX, clientY) {
-    const elements = this.getElementsFromPointAll(clientX, clientY);
-    for (const element of elements) {
-      if (element.matches(this.getAttribute("dropzone"))) {
-        return element;
-      }
-    }
-    return null;
-  }
-  /**
-   * Retrieves all elements at the specified coordinates, including those within shadow DOMs.
-   * @param {number} x The x-coordinate relative to the viewport.
-   * @param {number} y The y-coordinate relative to the viewport.
-   * @param {Document|ShadowRoot} [root] The root context in which to search. Defaults to the main document.
-   * @param {Set<Node>} [visited] A set of already visited nodes to avoid infinite recursion in nested shadow DOMs.
-   * @returns {HTMLElement[]} An array of all elements found at the specified coordinates, including shadow DOM elements.
-   */
-  getElementsFromPointAll(x, y, root = document, visited = /* @__PURE__ */ new Set()) {
-    if (visited.has(root)) return [];
-    visited.add(root);
-    const elements = root.elementsFromPoint(x, y);
-    let allElements = [...elements];
-    for (const element of elements) {
-      if (element.shadowRoot && !visited.has(element.shadowRoot)) {
-        allElements = allElements.concat(this.getElementsFromPointAll(x, y, element.shadowRoot, visited));
-      }
-    }
-    return allElements;
-  }
-  /**
-   * Re-indexes the items in the container.
-   * @param container
-   */
-  reIndexItems(container) {
-    const items = Array.from(container.children);
-    let index = 0;
-    items.forEach((child) => {
-      var _a;
-      if ((_a = child.children[0]) == null ? void 0 : _a.hasAttribute("locked")) {
-        child.dataset.index = index;
-      } else {
-        child.dataset.index = index;
-      }
-      index++;
-    });
-  }
-}
-ReorderHandle.define("wje-reorder-handle", ReorderHandle);
-export {
-  ReorderHandle as default
-};
-//# sourceMappingURL=wje-reorder-handle.js.map

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

@@ -1 +0,0 @@
-{"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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"}

package/dist/wje-reorder-item.js

@@ -1,61 +0,0 @@
-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, { WjElementUtils } from "./wje-element.js";
-const styles = ":host {\n    /*--reorder-background-color: var(--wje-color-contrast-0);*/\n    --reorder-item-spacing: 0.5rem;\n}\n\n.item {\n    width: 134px;\n    height: 19px;\n    display: flex;\n    align-items: center;\n    justify-content: left;\n    position: relative;\n    gap: var(--reorder-item-spacing);\n    padding: var(--reorder-item-spacing);\n    border-radius: var(--wje-border-radius-small);\n    background-color: var(--reorder-background-color);\n    cursor: grab;\n    transition:\n        top 0.3s ease,\n        left 0.3s ease;\n}\n\n.item-w-handle {\n    cursor: default;\n}\n\n.item-w-handle:active {\n    opacity: 0.3;\n}\n\n.item:active:not(.item-w-handle):not(.moving) {\n    background-color: var(--reorder-background-color);\n    cursor: grabbing;\n}\n\n.moving {\n    background-color: lightgrey;\n}\n\n.handle {\n    cursor: grab;\n    gap: 10px;\n}\n\n.handle:active {\n    cursor: grabbing;\n}\n\n.name {\n    width: 108px;\n    height: 19px;\n    text-align: center;\n    font-size: var(--wje-font-size-medium);\n    font-weight: 400;\n    line-height: 19.36px;\n    gap: 10px;\n}\n\n/* .drag--down {\n  --item-transform: translateY(-5px);\n}\n\n.drag--up {\n  --item-transform: translateY(5px);\n} */\n\n.item {\n    transform: var(--item-transform);\n}\n";
-class ReorderItem extends WJElement {
-  /**
-   * Creates an instance of ReorderItem.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
-    __publicField(this, "className", "ReorderItem");
-  }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @returns {CSSStyleSheet} The CSS stylesheet.
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Returns the list of observed attributes.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let wrapper = document.createElement("div");
-    wrapper.classList.add("item");
-    wrapper.setAttribute("part", "native-reorder-item");
-    let element = document.createElement("slot");
-    element.classList.add("name");
-    if (WjElementUtils.hasSlot(this, "handle")) {
-      const handle = document.createElement("slot");
-      handle.classList.add("handle");
-      handle.setAttribute("name", "handle");
-      handle.setAttribute("part", "handle-part");
-      wrapper.classList.add("item-w-handle");
-      wrapper.appendChild(handle);
-    } else {
-      element.setAttribute("draggable", "true");
-    }
-    wrapper.appendChild(element);
-    fragment.appendChild(wrapper);
-    return fragment;
-  }
-}
-ReorderItem.define("wje-reorder-item", ReorderItem);
-export {
-  ReorderItem as default
-};
-//# sourceMappingURL=wje-reorder-item.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"wje-reorder-item.js","sources":["../packages/wje-reorder-item/reorder-item.element.js","../packages/wje-reorder-item/reorder-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ReorderItem` is a custom web component that represents a reorder item.\n * @summary This element represents a reorder item.\n * @documentation https://elements.webjet.sk/components/reorder-item\n * @status stable\n * @augments WJElement\n * @csspart native-reorder-item - The native part of the reorder item.\n * @csspart handle-part - The handle part of the reorder item when the handle slot is present.\n * @slot - The default slot for the reorder item.\n * @tag wje-reorder-item\n */\nexport default class ReorderItem extends WJElement {\n    /**\n     * Creates an instance of ReorderItem.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ReorderItem';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @returns {CSSStyleSheet} The CSS stylesheet.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('item');\n        wrapper.setAttribute('part', 'native-reorder-item');\n\n        let element = document.createElement('slot');\n        element.classList.add('name');\n\n        if (WjElementUtils.hasSlot(this, 'handle')) {\n            const handle = document.createElement('slot');\n            handle.classList.add('handle');\n            handle.setAttribute('name', 'handle');\n            handle.setAttribute('part', 'handle-part');\n\n            wrapper.classList.add('item-w-handle');\n            wrapper.appendChild(handle);\n        } else {\n            element.setAttribute('draggable', 'true');\n        }\n\n        wrapper.appendChild(element);\n\n        fragment.appendChild(wrapper);\n\n        return fragment;\n    }\n}\n","import ReorderItem from './reorder-item.element.js';\n\nexport default ReorderItem;\n\nReorderItem.define('wje-reorder-item', ReorderItem);\n"],"names":[],"mappings":";;;;;AAce,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI/C,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,MAAM;AAC5B,YAAQ,aAAa,QAAQ,qBAAqB;AAElD,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,UAAU,IAAI,MAAM;AAE5B,QAAI,eAAe,QAAQ,MAAM,QAAQ,GAAG;AACxC,YAAM,SAAS,SAAS,cAAc,MAAM;AAC5C,aAAO,UAAU,IAAI,QAAQ;AAC7B,aAAO,aAAa,QAAQ,QAAQ;AACpC,aAAO,aAAa,QAAQ,aAAa;AAEzC,cAAQ,UAAU,IAAI,eAAe;AACrC,cAAQ,YAAY,MAAM;AAAA,IACtC,OAAe;AACH,cAAQ,aAAa,aAAa,MAAM;AAAA,IACpD;AAEQ,YAAQ,YAAY,OAAO;AAE3B,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;ACvEA,YAAY,OAAO,oBAAoB,WAAW;"}

package/dist/wje-reorder.js

@@ -1,281 +0,0 @@
-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 = ".container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: auto;\n    flex-direction: var(--flex-direction);\n}\n\n.container-w-dropzones {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: row;\n}\n\n.reversed {\n    --flex-direction: column-reverse;\n}\n\n.basic {\n    --flex-direction: column;\n}\n\n.dragging {\n    position: absolute;\n    pointer-events: none;\n    z-index: 1000;\n}\n\n.reorder-item {\n    transition:\n        top 0.3s ease,\n        left 0.3s ease;\n}\n";
-class Reorder extends WJElement {
-  /**
-   * Creates an instance of Select.
-   * @class
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
-    __publicField(this, "className", "Select");
-    this.dragEl = null;
-    this.items = [];
-    this.originalIndex = null;
-    this.isDragging = false;
-    this.offsetX = 0;
-    this.offsetY = 0;
-    this.cloneEl = null;
-  }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component after it is connected to the DOM.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    const fragment = document.createDocumentFragment();
-    const container = document.createElement("div");
-    container.classList.add("container");
-    container.setAttribute("part", "native");
-    const slot = document.createElement("slot");
-    slot.classList.add("reorder-items");
-    container.appendChild(slot);
-    fragment.appendChild(container);
-    this.container = container;
-    return fragment;
-  }
-  /**
-   * Adds event listeners after the component is drawn.
-   */
-  afterDraw() {
-    const items = this.querySelectorAll("wje-reorder-item");
-    const dropZones = this.querySelectorAll("wje-reorder-dropzone");
-    this.container.classList.add(this.hasAttribute("reverse") ? "reversed" : "basic");
-    if (dropZones) {
-      dropZones.forEach((dropZone) => {
-        this.container.classList.remove("container");
-        this.container.classList.add("container-w-dropzones");
-      });
-    }
-    if (items) {
-      items.forEach((item) => {
-        const handles = item.querySelectorAll("[slot=handle]");
-        const draggableElement = handles.length > 0 ? handles : [item];
-        draggableElement.forEach((element) => {
-          this.attachEventListeners(element);
-        });
-      });
-    }
-  }
-  /**
-   * Attaches event listeners to the element.
-   * @param element
-   */
-  attachEventListeners(element) {
-    element.addEventListener("mousedown", this.mouseDown.bind(this), false);
-    element.addEventListener("touchstart", this.touchStart.bind(this), false);
-    element.addEventListener("dragstart", this.dragStart.bind(this), false);
-  }
-  /**
-   * Handles the mouse down event.
-   * @param {object} e
-   */
-  mouseDown(e) {
-    this.startDragging(e.clientX, e.clientY, e.currentTarget);
-    document.addEventListener("mousemove", this.mouseMove.bind(this), false);
-    document.addEventListener("mouseup", this.mouseUp.bind(this), false);
-    document.body.style.userSelect = "none";
-  }
-  /**
-   * Handles the touch start event.
-   * @param e
-   */
-  touchStart(e) {
-    const touch = e.touches[0];
-    this.startDragging(touch.clientX, touch.clientY, e.currentTarget);
-    document.addEventListener("touchmove", this.touchMove.bind(this), false);
-    document.addEventListener("touchend", this.touchEnd.bind(this), false);
-    document.body.style.userSelect = "none";
-  }
-  /**
-   * Initializes the dragging process for a reorderable item.
-   * @param {number} clientX The x-coordinate of the mouse pointer when the drag starts.
-   * @param {number} clientY The y-coordinate of the mouse pointer when the drag starts.
-   * @param {HTMLElement} target The target element where the drag event originated.
-   */
-  startDragging(clientX, clientY, target) {
-    if (this.hasAttribute("disabled")) {
-      return;
-    }
-    this.isDragging = true;
-    this.dragEl = target.closest("wje-reorder-item");
-    this.createClone();
-    this.dragEl.style.opacity = "0.3";
-    const rect = this.dragEl.getBoundingClientRect();
-    this.offsetX = clientX - rect.left;
-    this.offsetY = clientY - rect.top;
-    this.dragEl.classList.add("dragging");
-    this.originalIndex = [...this.dragEl.parentNode.children].indexOf(this.dragEl);
-    this.originalParent = this.dragEl.parentNode;
-  }
-  /**
-   * Handles the mouse move event.
-   * @param e
-   */
-  mouseMove(e) {
-    if (!this.isDragging) return;
-    this.moveElement(e.pageX, e.pageY);
-    if (this.cloneEl) {
-      this.cloneEl.style.left = `${e.pageX - this.offsetX}px`;
-      this.cloneEl.style.top = `${e.pageY - this.offsetY}px`;
-    }
-  }
-  /**
-   * Handles the `touchmove` event and updates the position of the dragged element.
-   * @param {TouchEvent} e The touch event containing touch position data.
-   */
-  touchMove(e) {
-    if (!this.isDragging) return;
-    const touch = e.touches[0];
-    this.moveElement(touch.pageX, touch.pageY);
-  }
-  /**
-   * Updates the position of the dragged element and handles reordering logic based on the mouse position.
-   * @param {number} pageX The x-coordinate of the mouse pointer relative to the viewport during the move event.
-   * @param {number} pageY The y-coordinate of the mouse pointer relative to the viewport during the move event.
-   */
-  moveElement(pageX, pageY) {
-    const scrollX = window.scrollX || document.documentElement.scrollLeft;
-    const scrollY = window.scrollY || document.documentElement.scrollTop;
-    const adjustedPageX = pageX - scrollX;
-    const adjustedPageY = pageY - scrollY;
-    this.dragEl.style.left = `${adjustedPageX}px`;
-    this.dragEl.style.top = `${adjustedPageY}px`;
-    if (this.cloneEl) {
-      this.cloneEl.style.left = `${adjustedPageX}px`;
-      this.cloneEl.style.top = `${adjustedPageY}px`;
-    }
-    const items = this.querySelectorAll("wje-reorder-item");
-    items.forEach((item) => {
-      if (item === this.dragEl) return;
-      const boundingBox = item.getBoundingClientRect();
-      const mouseY = adjustedPageY - boundingBox.top;
-      const mouseYPercent = mouseY / boundingBox.height * 100;
-      if (mouseYPercent > 30 && this.isMovingDown(item)) {
-        item.parentNode.insertBefore(this.dragEl, item.nextSibling);
-      } else if (mouseYPercent < 30 && !this.isMovingDown(item)) {
-        item.parentNode.insertBefore(this.dragEl, item);
-      }
-    });
-  }
-  /**
-   * Handles the mouse up event.
-   */
-  mouseUp() {
-    this.stopDragging();
-    document.removeEventListener("mousemove", this.mouseMove.bind(this), false);
-    document.removeEventListener("mouseup", this.mouseUp.bind(this), false);
-    if (this.cloneEl) {
-      this.cloneEl.remove();
-      this.cloneEl = null;
-    }
-    if (this.dragEl) {
-      this.dragEl.style.opacity = "1";
-    }
-  }
-  /**
-   * Handles the touch end event.
-   */
-  touchEnd() {
-    this.stopDragging();
-    document.removeEventListener("touchmove", this.touchMove.bind(this), false);
-    document.removeEventListener("touchend", this.touchEnd.bind(this), false);
-  }
-  /**
-   * Stops dragging the element.
-   */
-  stopDragging() {
-    if (!this.isDragging) return;
-    this.isDragging = false;
-    this.dragEl.classList.remove("dragging");
-    this.dragEl.style.left = "";
-    this.dragEl.style.top = "";
-    const parent = this.dragEl.parentNode;
-    const newIndex = Array.from(parent.children).indexOf(this.dragEl);
-    const newOrder = Array.from(parent.children).map((el) => {
-      const clonedNode = el.cloneNode(true);
-      const handle = clonedNode.querySelector(".handle");
-      if (handle) {
-        handle.remove();
-      }
-      return clonedNode.innerText.trim();
-    });
-    this.dispatchChange(this.originalIndex, newIndex, newOrder);
-    document.body.style.userSelect = "";
-  }
-  /**
-   * Prevents the default behavior of the `dragstart` event.
-   * @param {DragEvent} e The drag event triggered when a drag operation starts.
-   */
-  dragStart(e) {
-    e.preventDefault();
-  }
-  /**
-   * Creates a clone of the element.
-   */
-  createClone() {
-    this.cloneEl = this.dragEl.cloneNode(true);
-    this.cloneEl.style.position = "absolute";
-    this.cloneEl.style.pointerEvents = "none";
-    this.cloneEl.style.visibility = "visible";
-    document.body.appendChild(this.cloneEl);
-  }
-  /**
-   * Checks if the dragged element is moving down.
-   * @param droppedElement
-   * @returns {boolean}
-   */
-  isMovingDown(droppedElement) {
-    const parent = droppedElement.parentNode;
-    const dragIndex = Array.from(parent.children).indexOf(this.dragEl);
-    const dropIndex = Array.from(parent.children).indexOf(droppedElement);
-    return dragIndex < dropIndex;
-  }
-  /**
-   * Dispatches a custom event to signal that a reordering operation has occurred.
-   * @param {number} from The original index of the dragged item.
-   * @param {number} to The new index of the dragged item after reordering.
-   * @param {Array<number>} order The updated order of items after the reordering.
-   * // @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) {
-    this.dispatchEvent(
-      new CustomEvent("wje-reorder:change", {
-        detail: { from, to, order }
-      })
-    );
-  }
-}
-Reorder.define("wje-reorder", Reorder);
-export {
-  Reorder as default
-};
-//# sourceMappingURL=wje-reorder.js.map

package/dist/wje-reorder.js.map

@@ -1 +0,0 @@
-{"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 newOrder = 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.innerText.trim();\n        });\n\n        this.dispatchChange(this.originalIndex, newIndex, newOrder);\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) {\n        this.dispatchEvent(\n            new CustomEvent('wje-reorder:change', {\n                detail: { from, to, order },\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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"}