wj-elements 0.7.7 → 0.8.0

package/dist/wje-relative-time.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n */\n\nexport default class RelativeTime extends WJElement {\n    /**\n     * Creates an instance of RelativeTime.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the date of the relative time component.\n     * @param value\n     */\n    set date(value) {\n        this.setAttribute('date', value);\n    }\n\n    /**\n     * Gets the date of the relative time component.\n     * @returns {string}\n     */\n    get date() {\n        return this.getAttribute('date');\n    }\n\n    /**\n     * Sets the object date of the relative time component.\n     * @param value\n     */\n    set objectDate(value) {\n        this.setAttribute('object-date', value);\n    }\n\n    /**\n     * Gets the object date of the relative time component.\n     * @returns {Date}\n     */\n    get objectDate() {\n        let date = new Date();\n        let inputDate = this.date;\n\n        if (!!inputDate && inputDate !== '') {\n            inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1000;\n\n            date = new Date(inputDate);\n        }\n\n        return date;\n    }\n\n    /**\n     * Sets the lang of the relative time component.\n     * @type {string}\n     */\n    className = 'RelativeTime';\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 ['date', 'lang'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (this.native) {\n            this.native.innerText = this.getRelativeTimeString();\n            if (this.date) this.native.setAttribute('datetime', this.date);\n            else this.native.removeAttribute('datetime');\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Draws the component for the relative time.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-relative-time');\n        element.innerText = this.getRelativeTimeString();\n        if (this.date) element.setAttribute('datetime', this.date);\n\n        fragment.appendChild(element);\n        this.native = element;\n\n        return fragment;\n    }\n\n    /**\n     * Returns the relative time string for the given date.\n     */\n    getRelativeTimeString(lang = navigator.language) {\n        if (this.objectDate.toString() === 'Invalid Date' || this.objectDate.toString() === 'NaN') {\n            return '';\n        }\n\n        const timeMs = this.objectDate.getTime();\n\n        const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n        const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];\n\n        const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n        const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n        const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n        return this.localizer.relativeTime(\n            this.getAttribute('lang'),\n            Math.trunc(deltaSeconds / divisor),\n            units[unitIndex],\n            { numeric: 'auto' }\n        );\n    }\n\n    /**\n     * Checks if the given string is an ISO date.\n     * @param {string} str The string to check.\n     * @returns {boolean} True if the string is an ISO date, false otherwise.\n     */\n    isISODate(str) {\n        const date = new Date(str);\n        return !isNaN(date.getTime());\n    }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n */\n\nexport default class RelativeTime extends WJElement {\n    /**\n     * Creates an instance of RelativeTime.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the date of the relative time component.\n     * @param value\n     */\n    set date(value) {\n        this.setAttribute('date', value);\n    }\n\n    /**\n     * Gets the date of the relative time component.\n     * @returns {string}\n     */\n    get date() {\n        return this.getAttribute('date');\n    }\n\n    /**\n     * Sets the object date of the relative time component.\n     * @param value\n     */\n    set objectDate(value) {\n        this.setAttribute('object-date', value);\n    }\n\n    /**\n     * Gets the object date of the relative time component.\n     * @returns {Date}\n     */\n    get objectDate() {\n        let date = new Date();\n        let inputDate = this.date;\n\n        if (!!inputDate && inputDate !== '') {\n            inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1000;\n\n            date = new Date(inputDate);\n        }\n\n        return date;\n    }\n\n    /**\n     * Sets the lang of the relative time component.\n     * @type {string}\n     */\n    className = 'RelativeTime';\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 ['date', 'lang'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (this.native) {\n            this.native.innerText = this.getRelativeTimeString();\n            if (this.date) this.native.setAttribute('datetime', this.date);\n            else this.native.removeAttribute('datetime');\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Draws the component for the relative time.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-relative-time');\n        element.innerText = this.getRelativeTimeString();\n        if (this.date) element.setAttribute('datetime', this.date);\n\n        fragment.appendChild(element);\n        this.native = element;\n\n        return fragment;\n    }\n\n    /**\n     * Returns the relative time string for the given date.\n     */\n    getRelativeTimeString(lang = navigator.language) {\n        if (this.objectDate.toString() === 'Invalid Date' || this.objectDate.toString() === 'NaN') {\n            return '';\n        }\n\n        const timeMs = this.objectDate.getTime();\n\n        const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n        const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];\n\n        const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n        const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n        const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n        return this.localizer.relativeTime(\n            this.getAttribute('lang'),\n            Math.trunc(deltaSeconds / divisor),\n            units[unitIndex],\n            { numeric: 'auto' }\n        );\n    }\n\n    /**\n     * Checks if the given string is an ISO date.\n     * @param {string} str The string to check.\n     * @returns {boolean} True if the string is an ISO date, false otherwise.\n     */\n    isISODate(str) {\n        const date = new Date(str);\n        return !isNaN(date.getTime());\n    }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":["RelativeTime","WJElement","constructor","super","className","this","localizer","Localizer","value","setAttribute","date","getAttribute","objectDate","Date","inputDate","isISODate","observedAttributes","name","oldValue","newValue","attributeChangedCallback","native","innerText","getRelativeTimeString","removeAttribute","setupAttributes","isShadowRoot","setAriaState","role","draw","fragment","document","createDocumentFragment","element","createElement","classList","add","appendChild","lang","navigator","language","toString","timeMs","getTime","deltaSeconds","Math","round","now","cutoffs","Infinity","unitIndex","findIndex","cutoff","abs","divisor","relativeTime","trunc","numeric","str","isNaN","define"],"mappings":";;;;;AAae,MAAMA,UAAqBC,EAAAA;AAAAA,EAKtC,cAAAC;AACIC,UAAAA;AAiDJC,qCAAY;AAhDRC,SAAKC,YAAY,IAAIC,EAAUF,IAAAA;AAAAA,EACnC;AAAA,EAMA,IAAA,KAASG,IAAAA;AACLH,SAAKI,aAAa,QAAQD,EAAAA;AAAAA,EAC9B;AAAA,EAMA,IAAA,OAAIE;AACA,WAAOL,KAAKM,aAAa,MAAA;AAAA,EAC7B;AAAA,EAMA,IAAA,WAAeH,IAAAA;AACXH,SAAKI,aAAa,eAAeD,EAAAA;AAAAA,EACrC;AAAA,EAMA,IAAA,aAAII;AACA,QAAIF,KAAO,oBAAIG,QACXC,KAAYT,KAAKK;AAQrB,WANMI,MAA2B,OAAdA,OACfA,KAAYT,KAAKU,UAAUD,EAAAA,IAAaA,KAAyB,MAAA,CAAZA,IAErDJ,KAAO,IAAIG,KAAKC,EAAAA,IAGbJ;AAAAA,EACX;AAAA,EAaA,WAAA,qBAAWM;AACP,WAAO,CAAC,QAAQ,MAAA;AAAA,EACpB;AAAA,EAEA,yBAAyBC,IAAMC,IAAUC,IAAAA;;AACrChB,gBAAMiB,6BAANjB,8BAAiCc,IAAMC,IAAUC,KAC7CD,OAAaC,MACbd,KAAKgB,WACLhB,KAAKgB,OAAOC,YAAYjB,KAAKkB,yBACzBlB,KAAKK,OAAML,KAAKgB,OAAOZ,aAAa,YAAYJ,KAAKK,IAAAA,IACpDL,KAAKgB,OAAOG,gBAAgB,UAAA;AAAA,EAEzC;AAAA,EAKA,kBAAAC;AACIpB,SAAKqB,eAAe,QACpBrB,KAAKsB,aAAa,EAAEC,MAAM,SAAA,CAAA;AAAA,EAC9B;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,uBAAAA,GAEpBC,KAAUF,SAASG,cAAc,KAAA;AASrC,WARAD,GAAQxB,aAAa,QAAQ,QAAA,GAC7BwB,GAAQE,UAAUC,IAAI,sBAAA,GACtBH,GAAQX,YAAYjB,KAAKkB,sBAAAA,GACrBlB,KAAKK,QAAMuB,GAAQxB,aAAa,YAAYJ,KAAKK,IAAAA,GAErDoB,GAASO,YAAYJ,EAAAA,GACrB5B,KAAKgB,SAASY,IAEPH;AAAAA,EACX;AAAA,EAKA,sBAAsBQ,KAAOC,UAAUC,UAAAA;AACnC,QAAmC,mBAA/BnC,KAAKO,WAAW6B,SAAAA,KAAgE,UAA/BpC,KAAKO,WAAW6B,SAAAA,EACjE,QAAO;AAGX,UAAMC,KAASrC,KAAKO,WAAW+B,QAAAA,GAEzBC,KAAeC,KAAKC,OAAOJ,KAAS7B,KAAKkC,IAAAA,KAAS,GAAA,GAElDC,IAAU,CAAC,IAAI,MAAM,OAAO,QAAW,QAAY,SAAaC,IAAAA,CAAAA,GAGhEC,IAAYF,EAAQG,UAAWC,CAAAA,OAAWA,KAASP,KAAKQ,IAAIT,EAAAA,CAAAA,GAC5DU,IAAUJ,IAAYF,EAAQE,IAAY,CAAA,IAAK;AAErD,WAAO7C,KAAKC,UAAUiD,aAClBlD,KAAKM,aAAa,MAAA,GAClBkC,KAAKW,MAAMZ,KAAeU,CAAAA,GANhB,CAAC,UAAU,UAAU,QAAQ,OAAO,QAAQ,SAAS,MAAA,EAOzDJ,CAAAA,GACN,EAAEO,SAAS,OAAA,CAAA;AAAA,EAEnB;AAAA,EAOA,UAAUC,IAAAA;AACN,UAAMhD,KAAO,IAAIG,KAAK6C,EAAAA;AACtB,WAAA,CAAQC,MAAMjD,GAAKiC,QAAAA,CAAAA;AAAAA,EACvB;AAAA;AClJJ3C,EAAa4D,OAAO,qBAAqB5D,CAAAA;"}

package/dist/wje-reorder-dropzone.js

@@ -1,49 +1,27 @@
 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 = ".dropzone {\n    border: 1px dashed lightgrey;\n    border-radius: var(--wje-border-radius-small);\n    margin: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    overflow: hidden;\n    justify-content: center;\n    min-height: 250px;\n    width: 200px;\n}\n";
-class ReorderDropzone extends WJElement {
-  /**
-   * Creates an instance of ReorderDropzone.
-   */
+import e from "./wje-element.js";
+class t extends e {
   constructor() {
     super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
     __publicField(this, "className", "ReorderDropzone");
   }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @returns {CSSStyleSheet} The CSS stylesheet.
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ".dropzone{border:1px dashed lightgrey;border-radius:var(--wje-border-radius-small);margin:.5rem;display:flex;flex-direction:column;align-items:center;overflow:hidden;justify-content:center;min-height:250px;width:200px}";
   }
-  /**
-   * 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 dropzone = document.createElement("div");
-    dropzone.classList.add("dropzone");
-    let slot = document.createElement("slot");
-    dropzone.appendChild(slot);
-    fragment.appendChild(dropzone);
-    return fragment;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.classList.add("dropzone");
+    let r = document.createElement("slot");
+    return t2.appendChild(r), e2.appendChild(t2), e2;
   }
 }
-ReorderDropzone.define("wje-reorder-dropzone", ReorderDropzone);
+t.define("wje-reorder-dropzone", t);
 export {
-  ReorderDropzone as default
+  t as default
 };
 //# sourceMappingURL=wje-reorder-dropzone.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"wje-reorder-dropzone.js","sources":["../packages/wje-reorder-dropzone/reorder-dropzone.element.js","../packages/wje-reorder-dropzone/reorder-dropzone.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ReorderDropzone` is a custom web component that represents a reorder dropzone.\n * @summary This element represents a reorder dropzone.\n * @documentation https://elements.webjet.sk/components/reorder-dropzone\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder dropzone.\n * @slot - The default slot for the reorder dropzone.\n * @tag wje-reorder-dropzone\n */\nexport default class ReorderDropzone extends WJElement {\n    /**\n     * Creates an instance of ReorderDropzone.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ReorderDropzone';\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 dropzone = document.createElement('div');\n        dropzone.classList.add('dropzone');\n\n        let slot = document.createElement('slot');\n\n        dropzone.appendChild(slot);\n\n        fragment.appendChild(dropzone);\n\n        return fragment;\n    }\n}\n","import ReorderDropzone from './reorder-dropzone.element';\n\nexport default ReorderDropzone;\n\nReorderDropzone.define('wje-reorder-dropzone', ReorderDropzone);\n"],"names":[],"mappings":";;;;;AAae,MAAM,wBAAwB,UAAU;AAAA;AAAA;AAAA;AAAA,EAInD,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,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,UAAU,IAAI,UAAU;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,aAAS,YAAY,IAAI;AAEzB,aAAS,YAAY,QAAQ;AAE7B,WAAO;AAAA,EACX;AACJ;ACxDA,gBAAgB,OAAO,wBAAwB,eAAe;"}
+{"version":3,"file":"wje-reorder-dropzone.js","sources":["../packages/wje-reorder-dropzone/reorder-dropzone.element.js","../packages/wje-reorder-dropzone/reorder-dropzone.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ReorderDropzone` is a custom web component that represents a reorder dropzone.\n * @summary This element represents a reorder dropzone.\n * @documentation https://elements.webjet.sk/components/reorder-dropzone\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the reorder dropzone.\n * @slot - The default slot for the reorder dropzone.\n * @tag wje-reorder-dropzone\n */\nexport default class ReorderDropzone extends WJElement {\n    /**\n     * Creates an instance of ReorderDropzone.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ReorderDropzone';\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 dropzone = document.createElement('div');\n        dropzone.classList.add('dropzone');\n\n        let slot = document.createElement('slot');\n\n        dropzone.appendChild(slot);\n\n        fragment.appendChild(dropzone);\n\n        return fragment;\n    }\n}\n","import ReorderDropzone from './reorder-dropzone.element';\n\nexport default ReorderDropzone;\n\nReorderDropzone.define('wje-reorder-dropzone', ReorderDropzone);\n"],"names":["ReorderDropzone","WJElement","super","className","cssStyleSheet","setupAttributes","this","isShadowRoot","draw","fragment","document","createDocumentFragment","dropzone","createElement","classList","add","slot","appendChild","define"],"mappings":";;;;AAae,MAAMA,UAAwBC,EAAAA;AAAAA,EAIzC;AACIC,UAAAA;AAOJC,qCAAY;AAAA,EANZ;AAAA,EAYA,WAAA,gBAAWC;AACP;EACJ;AAAA,EAKA,kBAAAC;AACIC,SAAKC,eAAe;AAAA,EACxB;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,0BAEpBC,KAAWF,SAASG,cAAc,KAAA;AACtCD,IAAAA,GAASE,UAAUC,IAAI,UAAA;AAEvB,QAAIC,IAAON,SAASG,cAAc,MAAA;AAMlC,WAJAD,GAASK,YAAYD,CAAAA,GAErBP,GAASQ,YAAYL,EAAAA,GAEdH;AAAAA,EACX;AAAA;ACvDJT,EAAgBkB,OAAO,wBAAwBlB,CAAAA;"}

package/dist/wje-reorder-handle.js

@@ -1,251 +1,114 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-const styles = ".disabled {\n    opacity: 0.3;\n}\n";
-class ReorderHandle extends WJElement {
-  /**
-   * Creates an instance of ReorderHandle.
-   */
+import t from "./wje-element.js";
+import { event as e } from "./event.js";
+class s extends t {
   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));
+    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;
+    return ".disabled{opacity:.3}";
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @returns {string[]}
-   */
   static get observedAttributes() {
     return ["dropzone", "parent"];
   }
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * 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;
+    const t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.classList.add("container"), e2.setAttribute("part", "native");
+    const s2 = document.createElement("slot");
+    return e2.appendChild(s2), t2.appendChild(e2), t2;
   }
-  /**
-   * Draws the component after it is connected to the DOM.
-   */
   afterDraw() {
-    this.syncAria();
-    if (this.hasAttribute("disabled")) {
-      this.style.opacity = ".3";
-    }
+    this.syncAria(), this.hasAttribute("disabled") && (this.style.opacity = ".3");
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    if (!this.hasAttribute("role")) {
-      this.setAriaState({ role: "button" });
-    }
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", "0");
-    }
-    if (this.hasAttribute("disabled")) {
-      this.setAriaState({ disabled: true });
-    }
-    const ariaLabel = this.getAttribute("aria-label");
-    const label = this.getAttribute("label") || "Reorder item";
-    if (!ariaLabel && label) {
-      this.setAriaState({ label });
-    }
+    this.hasAttribute("role") || this.setAriaState({ role: "button" }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.hasAttribute("disabled") && this.setAriaState({ disabled: true });
+    const t2 = this.getAttribute("aria-label"), e2 = this.getAttribute("label") || "Reorder item";
+    !t2 && e2 && this.setAriaState({ label: e2 });
   }
-  /**
-   * Handles the attribute changes.
-   * @param {DragEvent} e
-   */
-  startDrag(e) {
-    if (this.hasAttribute("disabled") || this.hasAttribute("locked")) return;
-    this.startDragAction(e.clientX, e.clientY);
-    event.dispatchCustomEvent(this, "wje-reorder-handle:start", { draggable: this.getDraggable() });
+  startDrag(t2) {
+    this.hasAttribute("disabled") || this.hasAttribute("locked") || (this.startDragAction(t2.clientX, t2.clientY), e.dispatchCustomEvent(this, "wje-reorder-handle:start", { draggable: this.getDraggable() }));
   }
-  /**
-   * Handles the touch start event.
-   * @param {TouchEvent} e
-   */
-  startTouchDrag(e) {
+  startTouchDrag(t2) {
     if (this.hasAttribute("disabled") || this.hasAttribute("locked")) return;
-    const touch = e.touches[0];
-    this.startDragAction(touch.clientX, touch.clientY);
+    const e2 = t2.touches[0];
+    this.startDragAction(e2.clientX, e2.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 = this.getDraggable();
-    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`;
+  startDragAction(t2, s2) {
+    let i = this.getDraggable();
+    const r = this.getDropzone(i);
+    this.getAttribute("dropzone") || this.setAttribute("dropzone", r.localName);
+    const n = i.getBoundingClientRect(), o = t2 - n.left, a = s2 - n.top;
+    let l = document.createElement("div");
+    l.classList.add("sortable-item"), l.style.visibility = "hidden", l.style.height = `${n.height}px`, i.classList.add("dragging"), i.style.position = "fixed", i.style.zIndex = "1000", i.style.width = `${n.width}px`;
+    const d = (t3, e2) => {
+      i.style.left = t3 - o - document.documentElement.scrollLeft + "px", i.style.top = e2 - a - document.documentElement.scrollTop + "px";
     };
-    moveAt(clientX, clientY);
-    const onMouseMove = (e) => {
+    d(t2, s2);
+    const h = (t3) => {
       var _a;
-      moveAt(e.pageX, e.pageY);
-      const dropzone = this.getClosestDropzone(e.clientX, e.clientY);
-      if (!dropzone) return;
-      const siblings = Array.from(dropzone.children).filter(
-        (child) => child !== draggable && child !== placeholder
-      );
-      for (const sibling of siblings) {
-        const siblingRect = sibling.getBoundingClientRect();
-        if ((_a = sibling.children[0]) == null ? void 0 : _a.hasAttribute("locked")) continue;
-        if (e.clientY > siblingRect.top && e.clientY < siblingRect.bottom) {
-          if (e.clientY < siblingRect.top + siblingRect.height / 2) {
-            dropzone.insertBefore(placeholder, sibling);
-          } else {
-            dropzone.insertBefore(placeholder, sibling.nextSibling);
-          }
+      d(t3.pageX, t3.pageY);
+      const e2 = this.getClosestDropzone(t3.clientX, t3.clientY);
+      if (!e2) return;
+      const s3 = Array.from(e2.children).filter((t4) => t4 !== i && t4 !== l);
+      for (const i2 of s3) {
+        const s4 = i2.getBoundingClientRect();
+        if (!((_a = i2.children[0]) == null ? void 0 : _a.hasAttribute("locked")) && (t3.clientY > s4.top && t3.clientY < s4.bottom)) {
+          t3.clientY < s4.top + s4.height / 2 ? e2.insertBefore(l, i2) : e2.insertBefore(l, i2.nextSibling);
           break;
         }
       }
+    }, c = () => {
+      document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", c), i.classList.remove("dragging"), i.style.position = "", i.style.zIndex = "", i.style.left = "", i.style.top = "", i.style.width = "";
+      const t3 = l.parentElement;
+      t3.insertBefore(i, l), t3.removeChild(l), this.reIndexItems(t3), e.dispatchCustomEvent(this, "wje-reorder-handle:change", { finalContainer: t3, draggable: i });
     };
-    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);
-      event.dispatchCustomEvent(this, "wje-reorder-handle:change", { finalContainer, draggable });
-    };
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-    initialContainer.insertBefore(placeholder, draggable);
+    document.addEventListener("mousemove", h), document.addEventListener("mouseup", c), r.insertBefore(l, i);
   }
-  /**
-   * Retrieves the closest draggable element based on attribute conditions.
-   * If the element has a "parent" attribute, the method attempts to find the closest ancestor
-   * matching the CSS selector specified in the attribute. If no such ancestor exists,
-   * the method defaults to returning the immediate parent element.
-   * @returns {Element|null} The closest matching ancestor or the immediate parent element if no match is found, or null if the element has no parent.
-   */
   getDraggable() {
     if (this.hasAttribute("parent")) {
-      let parent = this.closest(this.getAttribute("parent"));
-      if (parent) return parent;
+      let t2 = this.closest(this.getAttribute("parent"));
+      if (t2) return t2;
     }
     return this.parentElement;
   }
-  /**
-   * Retrieves the nearest dropzone element based on the element's attributes or its parent element.
-   * @param {HTMLElement} element The HTML element for which the dropzone is being determined.
-   * @returns {HTMLElement|null} The nearest dropzone element if found; otherwise, the parent element or null.
-   */
-  getDropzone(element) {
-    this.getAttribute("dropzone");
-    if (this.hasAttribute("dropzone")) {
-      let dropzone = element.closest(this.getAttribute("dropzone"));
-      if (dropzone) return dropzone;
+  getDropzone(t2) {
+    if (this.getAttribute("dropzone"), this.hasAttribute("dropzone")) {
+      let e2 = t2.closest(this.getAttribute("dropzone"));
+      if (e2) return e2;
     }
-    return element.parentElement;
+    return t2.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;
-      }
-    }
+  getClosestDropzone(t2, e2) {
+    const s2 = this.getElementsFromPointAll(t2, e2);
+    for (const t3 of s2) if (t3.matches(this.getAttribute("dropzone"))) return t3;
     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;
+  getElementsFromPointAll(t2, e2, s2 = document, i = /* @__PURE__ */ new Set()) {
+    if (i.has(s2)) return [];
+    i.add(s2);
+    const r = s2.elementsFromPoint(t2, e2);
+    let n = [...r];
+    for (const s3 of r) s3.shadowRoot && !i.has(s3.shadowRoot) && (n = n.concat(this.getElementsFromPointAll(t2, e2, s3.shadowRoot, i)));
+    return n;
   }
-  /**
-   * Re-indexes child elements of the given container by setting their dataset index.
-   * @param {HTMLElement} container The container element whose children are to be re-indexed.
-   * @returns {void}
-   */
-  reIndexItems(container) {
-    const items = Array.from(container.children);
-    let index = 0;
-    items.forEach((child) => {
+  reIndexItems(t2) {
+    const e2 = Array.from(t2.children);
+    let s2 = 0;
+    e2.forEach((t3) => {
       var _a;
-      if ((_a = child.children[0]) == null ? void 0 : _a.hasAttribute("locked")) {
-        child.dataset.index = index;
-      } else {
-        child.dataset.index = index;
-      }
-      index++;
+      (_a = t3.children[0]) == null ? void 0 : _a.hasAttribute("locked"), t3.dataset.index = s2, s2++;
     });
   }
 }
-ReorderHandle.define("wje-reorder-handle", ReorderHandle);
+s.define("wje-reorder-handle", s);
 export {
-  ReorderHandle as default
+  s as default
 };
 //# sourceMappingURL=wje-reorder-handle.js.map

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

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

package/dist/wje-reorder-item.js

@@ -1,62 +1,32 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { WjElementUtils } from "./element-utils.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);\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.
-   */
+import e from "./wje-element.js";
+import { WjElementUtils as t } from "./element-utils.js";
+class r extends e {
   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;
+    return ":host{--reorder-item-spacing: .5rem}.item{width:134px;height:19px;display:flex;align-items:center;justify-content:left;position:relative;gap:var(--reorder-item-spacing);padding:var(--reorder-item-spacing);border-radius:var(--wje-border-radius-small);background-color:var(--reorder-background-color);cursor:grab;transition:top .3s ease,left .3s ease}.item-w-handle{cursor:default}.item-w-handle:active{opacity:.3}.item:active:not(.item-w-handle):not(.moving){background-color:var(--reorder-background-color);cursor:grabbing}.moving{background-color:#d3d3d3}.handle{cursor:grab;gap:10px}.handle:active{cursor:grabbing}.name{width:108px;height:19px;text-align:center;font-size:var(--wje-font-size);font-weight:400;line-height:19.36px;gap:10px}.item{transform:var(--item-transform)}";
   }
-  /**
-   * 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;
+    let e2 = document.createDocumentFragment(), r2 = document.createElement("div");
+    r2.classList.add("item"), r2.setAttribute("part", "native-reorder-item");
+    let a = document.createElement("slot");
+    if (a.classList.add("name"), t.hasSlot(this, "handle")) {
+      const e3 = document.createElement("slot");
+      e3.classList.add("handle"), e3.setAttribute("name", "handle"), e3.setAttribute("part", "handle-part"), r2.classList.add("item-w-handle"), r2.appendChild(e3);
+    } else a.setAttribute("draggable", "true");
+    return r2.appendChild(a), e2.appendChild(r2), e2;
   }
 }
-ReorderItem.define("wje-reorder-item", ReorderItem);
+r.define("wje-reorder-item", r);
 export {
-  ReorderItem as default
+  r as default
 };
 //# sourceMappingURL=wje-reorder-item.js.map