wj-elements 0.7.7 → 0.8.0

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

@@ -1 +1 @@
-{"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,UAAK;AAOT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANZ;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,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,IAC9B,OAAO;AACH,cAAQ,aAAa,aAAa,MAAM;AAAA,IAC5C;AAEA,YAAQ,YAAY,OAAO;AAE3B,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AACJ;ACvEA,YAAY,OAAO,oBAAoB,WAAW;"}
+{"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":["ReorderItem","WJElement","super","className","setupAttributes","this","isShadowRoot","draw","fragment","document","createDocumentFragment","wrapper","createElement","classList","add","setAttribute","element","WjElementUtils","hasSlot","handle","appendChild","define"],"mappings":";;;;;AAce,MAAMA,UAAoBC,EAAAA;AAAAA,EAIrC;AACIC,UAAAA;AAOJC,qCAAY;AAAA,EANZ;AAAA,EAYA,WAAA;AACI;EACJ;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAAUF,SAASG,cAAc;AACrCD,IAAAA,GAAQE,UAAUC,IAAI,MAAA,GACtBH,GAAQI,aAAa,QAAQ,qBAAA;AAE7B,QAAIC,IAAUP,SAASG,cAAc,MAAA;AAGrC,QAFAI,EAAQH,UAAUC,IAAI,MAAA,GAElBG,EAAeC,QAAQb,MAAM,WAAW;AACxC,YAAMc,KAASV,SAASG,cAAc;AACtCO,MAAAA,GAAON,UAAUC,IAAI,QAAA,GACrBK,GAAOJ,aAAa,QAAQ,QAAA,GAC5BI,GAAOJ,aAAa,QAAQ,aAAA,GAE5BJ,GAAQE,UAAUC,IAAI,kBACtBH,GAAQS,YAAYD;IACxB,MACIH,GAAQD,aAAa,aAAa,MAAA;AAOtC,WAJAJ,GAAQS,YAAYJ,CAAAA,GAEpBR,GAASY,YAAYT,EAAAA,GAEdH;AAAAA,EACX;AAAA;ACtEJR,EAAYqB,OAAO,oBAAoBrB,CAAAA;"}

package/dist/wje-reorder.js

@@ -1,292 +1,107 @@
 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
-   */
+import e from "./wje-element.js";
+class t extends e {
   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;
+    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;
+    return ".container{position:relative;display:flex;align-items:center;justify-content:center;margin:auto;flex-direction:var(--flex-direction)}.container-w-dropzones{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:row}.reversed{--flex-direction: column-reverse}.basic{--flex-direction: column}.dragging{position:absolute;pointer-events:none;z-index:1000}.reorder-item{transition:top .3s ease,left .3s ease}";
   }
-  /**
-   * 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";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * 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;
+    const e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.classList.add("container"), t2.setAttribute("part", "native");
+    const i = document.createElement("slot");
+    return i.classList.add("reorder-items"), t2.appendChild(i), e2.appendChild(t2), this.container = t2, e2;
   }
-  /**
-   * Adds event listeners after the component is drawn.
-   */
   afterDraw() {
     this.syncAria();
-    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);
-        });
+    const e2 = this.querySelectorAll("wje-reorder-item"), t2 = this.querySelectorAll("wje-reorder-dropzone");
+    this.container.classList.add(this.hasAttribute("reverse") ? "reversed" : "basic"), t2 && t2.forEach((e3) => {
+      this.container.classList.remove("container"), this.container.classList.add("container-w-dropzones");
+    }), e2 && e2.forEach((e3) => {
+      const t3 = e3.querySelectorAll("[slot=handle]");
+      (t3.length > 0 ? t3 : [e3]).forEach((e4) => {
+        this.attachEventListeners(e4);
       });
-    }
+    });
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    if (!this.hasAttribute("role")) {
-      this.setAriaState({ role: "list" });
-    }
+    this.hasAttribute("role") || this.setAriaState({ role: "list" });
   }
-  /**
-   * 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);
+  attachEventListeners(e2) {
+    e2.addEventListener("mousedown", this.mouseDown.bind(this), false), e2.addEventListener("touchstart", this.touchStart.bind(this), false), e2.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";
+  mouseDown(e2) {
+    this.startDragging(e2.clientX, e2.clientY, e2.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";
+  touchStart(e2) {
+    const t2 = e2.touches[0];
+    this.startDragging(t2.clientX, t2.clientY, e2.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;
+  startDragging(e2, t2, i) {
+    if (this.hasAttribute("disabled")) return;
+    this.isDragging = true, this.dragEl = i.closest("wje-reorder-item"), this.createClone(), this.dragEl.style.opacity = "0.3";
+    const s = this.dragEl.getBoundingClientRect();
+    this.offsetX = e2 - s.left, this.offsetY = t2 - s.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`;
-    }
+  mouseMove(e2) {
+    this.isDragging && (this.moveElement(e2.pageX, e2.pageY), this.cloneEl && (this.cloneEl.style.left = e2.pageX - this.offsetX + "px", this.cloneEl.style.top = e2.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) {
+  touchMove(e2) {
     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);
-      }
+    const t2 = e2.touches[0];
+    this.moveElement(t2.pageX, t2.pageY);
+  }
+  moveElement(e2, t2) {
+    const i = e2 - (window.scrollX || document.documentElement.scrollLeft), s = t2 - (window.scrollY || document.documentElement.scrollTop);
+    this.dragEl.style.left = `${i}px`, this.dragEl.style.top = `${s}px`, this.cloneEl && (this.cloneEl.style.left = `${i}px`, this.cloneEl.style.top = `${s}px`);
+    this.querySelectorAll("wje-reorder-item").forEach((e3) => {
+      if (e3 === this.dragEl) return;
+      const t3 = e3.getBoundingClientRect(), i2 = (s - t3.top) / t3.height * 100;
+      i2 > 30 && this.isMovingDown(e3) ? e3.parentNode.insertBefore(this.dragEl, e3.nextSibling) : i2 < 30 && !this.isMovingDown(e3) && e3.parentNode.insertBefore(this.dragEl, e3);
     });
   }
-  /**
-   * 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";
-    }
+    this.stopDragging(), document.removeEventListener("mousemove", this.mouseMove.bind(this), false), document.removeEventListener("mouseup", this.mouseUp.bind(this), false), this.cloneEl && (this.cloneEl.remove(), this.cloneEl = null), 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);
+    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 newOrderElements = Array.from(parent.children).map((el) => {
-      const clonedNode = el.cloneNode(true);
-      const handle = clonedNode.querySelector(".handle");
-      if (handle) {
-        handle.remove();
-      }
-      return clonedNode;
-    });
-    const newOrder = newOrderElements.map((el) => el.innerText.trim());
-    this.dispatchChange(this.originalIndex, newIndex, newOrder, newOrderElements);
-    document.body.style.userSelect = "";
+    this.isDragging = false, this.dragEl.classList.remove("dragging"), this.dragEl.style.left = "", this.dragEl.style.top = "";
+    const e2 = this.dragEl.parentNode, t2 = Array.from(e2.children).indexOf(this.dragEl), i = Array.from(e2.children).map((e3) => {
+      const t3 = e3.cloneNode(true), i2 = t3.querySelector(".handle");
+      return i2 && i2.remove(), t3;
+    }), s = i.map((e3) => e3.innerText.trim());
+    this.dispatchChange(this.originalIndex, t2, s, i), 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();
+  dragStart(e2) {
+    e2.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);
+    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;
+  isMovingDown(e2) {
+    const t2 = e2.parentNode;
+    return Array.from(t2.children).indexOf(this.dragEl) < Array.from(t2.children).indexOf(e2);
   }
-  /**
-   * 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, orderElements) {
-    this.dispatchEvent(
-      new CustomEvent("wje-reorder:change", {
-        detail: { from, to, order, orderElements }
-      })
-    );
+  dispatchChange(e2, t2, i, s) {
+    this.dispatchEvent(new CustomEvent("wje-reorder:change", { detail: { from: e2, to: t2, order: i, orderElements: s } }));
   }
 }
-Reorder.define("wje-reorder", Reorder);
+t.define("wje-reorder", t);
 export {
-  Reorder as default
+  t as default
 };
 //# sourceMappingURL=wje-reorder.js.map

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        this.syncAria();\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        this.syncAria();\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     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\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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"}
+{"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        this.syncAria();\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        this.syncAria();\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     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'list' });\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":["Reorder","WJElement","super","className","this","dragEl","items","originalIndex","isDragging","offsetX","offsetY","cloneEl","cssStyleSheet","isShadowRoot","syncAria","draw","fragment","document","createDocumentFragment","container","createElement","classList","add","setAttribute","slot","appendChild","querySelectorAll","dropZones","hasAttribute","forEach","dropZone","remove","item","handles","length","element","attachEventListeners","setAriaState","role","addEventListener","mouseDown","bind","touchStart","dragStart","e","startDragging","clientX","clientY","currentTarget","mouseMove","mouseUp","body","style","userSelect","touch","touches","touchMove","touchEnd","target","closest","createClone","opacity","rect","getBoundingClientRect","left","top","parentNode","children","indexOf","originalParent","moveElement","pageX","pageY","adjustedPageX","window","scrollX","documentElement","scrollLeft","adjustedPageY","scrollY","scrollTop","boundingBox","mouseYPercent","height","isMovingDown","insertBefore","nextSibling","stopDragging","removeEventListener","parent","newIndex","Array","from","newOrderElements","map","el","clonedNode","cloneNode","handle","querySelector","newOrder","innerText","trim","dispatchChange","preventDefault","position","pointerEvents","visibility","droppedElement","to","order","orderElements","dispatchEvent","CustomEvent","detail","define"],"mappings":"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"}

package/dist/wje-route.js

@@ -1,43 +1,25 @@
 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";
-class Route extends WJElement {
-  /**
-   * Creates an instance of Route.
-   * @class
-   */
+import e from "./wje-element.js";
+class t extends e {
   constructor() {
     super();
     __publicField(this, "className", "Route");
   }
-  /**
-   * 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 for the route.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let slot = document.createElement("slot");
-    fragment.appendChild(slot);
-    return fragment;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("slot");
+    return e2.appendChild(t2), e2;
   }
 }
-Route.define("wje-route", Route);
+t.define("wje-route", t);
 export {
-  Route as default
+  t as default
 };
 //# sourceMappingURL=wje-route.js.map

package/dist/wje-route.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-route.js","sources":["../packages/wje-route/route.element.js","../packages/wje-route/route.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `Route` is a custom web component that represents a route in a routing system.\n * @summary This element represents a route in a routing system.\n * @documentation https://elements.webjet.sk/components/route\n * @status stable\n * @augments WJElement\n * @tag wje-route\n */\nexport default class Route extends WJElement {\n    /**\n     * Creates an instance of Route.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Route';\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 for the route.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n}\n","import Route from './route.element.js';\n\nexport default Route;\n\nRoute.define('wje-route', Route);\n"],"names":[],"mappings":";;;;AAUe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzC,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,WAAO;AAAA,EACX;AACJ;AC9CA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-route.js","sources":["../packages/wje-route/route.element.js","../packages/wje-route/route.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `Route` is a custom web component that represents a route in a routing system.\n * @summary This element represents a route in a routing system.\n * @documentation https://elements.webjet.sk/components/route\n * @status stable\n * @augments WJElement\n * @tag wje-route\n */\nexport default class Route extends WJElement {\n    /**\n     * Creates an instance of Route.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Route';\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 for the route.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n}\n","import Route from './route.element.js';\n\nexport default Route;\n\nRoute.define('wje-route', Route);\n"],"names":["Route","WJElement","constructor","super","className","setupAttributes","this","isShadowRoot","fragment","document","createDocumentFragment","slot","createElement","appendChild","define"],"mappings":";;;;AAUe,MAAMA,UAAcC;EAK/B,cAAAC;AACIC;AAGJC,qCAAY;AAAA,EAFZ;AAAA,EASA,WAAA;AACI,WAAO,CAAA;AAAA,EACX;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAAOF,SAASG,cAAc,MAAA;AAIlC,WAFAJ,GAASK,YAAYF,EAAAA,GAEdH;AAAAA,EACX;;AC7CJR,EAAMc,OAAO,aAAad,CAAAA;"}

package/dist/wje-router-link.js

@@ -1,64 +1,36 @@
 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 { b as bindRouterLinks } from "./router-links-wjqCnncc.js";
-import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Router Link ]\n*/\n\n:host {\n    display: block;\n    background: transparent !important;\n}\n\n:host(.active) {\n    cursor: pointer;\n    font-weight: bold;\n}\n";
-class RouterLink extends WJElement {
-  /**
-   * Creates an instance of RouterLink.
-   * @class
-   */
+import { b as t } from "./router-links-CNsJ-elb.js";
+import e from "./wje-element.js";
+class r extends e {
   constructor() {
     super();
     __publicField(this, "className", "RouterLink");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{display:block;background:transparent!important}:host(.active){cursor:pointer;font-weight:700}";
   }
-  /**
-   * 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";
-    this.setAttribute("active-class", "active");
+    this.isShadowRoot = "open", this.setAttribute("active-class", "active");
   }
-  /**
-   * Draws the component for the router link.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("slot");
-    fragment.appendChild(element);
-    return fragment;
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("slot");
+    return t2.appendChild(e2), t2;
   }
-  afterDraw(context, appStore, attributes) {
-    this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
+  afterDraw(e2, r2, s) {
+    this.unbindRouterLinks = t(this.parentElement, { selector: false });
   }
-  /**
-   * Cleans up before the component is disconnected.
-   */
   beforeDisconnect() {
     var _a;
     (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
   }
 }
-RouterLink.define("wje-router-link", RouterLink);
+r.define("wje-router-link", r);
 export {
-  RouterLink as default
+  r as default
 };
 //# sourceMappingURL=wje-router-link.js.map

package/dist/wje-router-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-router-link.js","sources":["../packages/wje-router-link/router-link.element.js","../packages/wje-router-link/router-link.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RouterLink` is a custom web component that represents a router link in a routing system.\n * @summary This element represents a router link in a routing system.\n * @documentation https://elements.webjet.sk/components/router-link\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the router link.\n * @tag wje-router-link\n */\nexport default class RouterLink extends WJElement {\n    /**\n     * Creates an instance of RouterLink.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'RouterLink';\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        this.setAttribute('active-class', 'active');\n    }\n\n    /**\n     * Draws the component for the router link.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    afterDraw(context, appStore, attributes) {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import RouterLink from './router-link.element.js';\n\nexport default RouterLink;\n\nRouterLink.define('wje-router-link', RouterLink);\n"],"names":[],"mappings":";;;;;;AAce,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK9C,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAA;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACX;AAAA,EAEA,UAAU,SAAS,UAAU,YAAY;AACrC,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAAA,EACpF;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACJ;AACJ;ACvEA,WAAW,OAAO,mBAAmB,UAAU;"}
+{"version":3,"file":"wje-router-link.js","sources":["../packages/wje-router-link/router-link.element.js","../packages/wje-router-link/router-link.js"],"sourcesContent":["import { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\n\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RouterLink` is a custom web component that represents a router link in a routing system.\n * @summary This element represents a router link in a routing system.\n * @documentation https://elements.webjet.sk/components/router-link\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the router link.\n * @tag wje-router-link\n */\nexport default class RouterLink extends WJElement {\n    /**\n     * Creates an instance of RouterLink.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'RouterLink';\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        this.setAttribute('active-class', 'active');\n    }\n\n    /**\n     * Draws the component for the router link.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    afterDraw(context, appStore, attributes) {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import RouterLink from './router-link.element.js';\n\nexport default RouterLink;\n\nRouterLink.define('wje-router-link', RouterLink);\n"],"names":["RouterLink","WJElement","constructor","super","className","observedAttributes","setupAttributes","this","isShadowRoot","setAttribute","draw","fragment","document","createDocumentFragment","element","createElement","appendChild","context","appStore","attributes","unbindRouterLinks","bindRouterLinks","parentElement","selector","beforeDisconnect","define"],"mappings":";;;;;AAce,MAAMA,UAAmBC,EAAAA;AAAAA,EAKpC,cAAAC;AACIC,UAAAA;AAGJC,qCAAY;AAAA,EAFZ;AAAA,EASA,WAAA;AACI;EACJ;AAAA,EAOA,WAAA,qBAAWC;AACP,WAAO,CAAA;AAAA,EACX;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe,QACpBD,KAAKE,aAAa,gBAAgB,QAAA;AAAA,EACtC;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAAUF,SAASG,cAAc;AAIrC,WAFAJ,GAASK,YAAYF,EAAAA,GAEdH;AAAAA,EACX;AAAA,EAEA,UAAUM,IAASC,IAAUC,GAAAA;AACzBZ,SAAKa,oBAAoBC,EAAgBd,KAAKe,eAAe,EAAEC,gBAAU,CAAA;AAAA,EAC7E;AAAA,EAKA,mBAAAC;;AACIjB,eAAKa,sBAALb;AAAAA,EACJ;AAAA;ACtEJP,EAAWyB,OAAO,mBAAmBzB,CAAAA;"}