wj-elements 0.2.0-alpha.9 → 0.3.0-alpha.2

package/dist/wje-radio-group.js

@@ -8,7 +8,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var _internalValue;
-import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
+import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
 import Radio from "./wje-radio.js";
 const styles = "/*\n[ WJ Radio Group ]\n*/\n:host {\n    position: relative;\n    .input-hidden {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 0;\n        height: 0;\n        padding: 0;\n        margin: 0;\n        opacity: 0;\n        z-index: -1;\n    }\n}\n\n:host([invalid]) {\n    color: var(--wje-input-color-invalid);\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    top: 0;\n    width: max-content;\n    line-height: normal;\n    position: static;\n    background: transparent;\n    padding: 0.25rem 0;\n    left: auto;\n    transform: none;\n    color: var(--wje-input-color-invalid);\n    font-size: 12px;\n}\n\n.wje-inline {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n}\n\n";
@@ -59,6 +59,24 @@ class RadioGroup extends FormAssociatedElement {
   get required() {
     return this.hasAttribute("required");
   }
+  /**
+   * Setter for the label attribute.
+   * @param {string} value The label to set.
+   */
+  set label(value) {
+    if (value === null || value === void 0) {
+      this.removeAttribute("label");
+    } else {
+      this.setAttribute("label", value);
+    }
+  }
+  /**
+   * Getter for the label attribute.
+   * @returns {string|null}
+   */
+  get label() {
+    return this.getAttribute("label");
+  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -68,7 +86,17 @@ class RadioGroup extends FormAssociatedElement {
     return styles;
   }
   static get observedAttributes() {
-    return [];
+    return ["required", "value", "disabled", "invalid", "label"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    if (oldValue === newValue) return;
+    if (["required", "disabled", "invalid", "label"].includes(name)) this.syncAria();
+    if (name === "value" && this.pristine) {
+      const radio = this.getRadioByValue(this.value);
+      if (radio) this.checkRadio(radio);
+    }
   }
   /**
    * Sets up the attributes for the component.
@@ -78,6 +106,7 @@ class RadioGroup extends FormAssociatedElement {
     if (this.pristine) {
       this.pristine = false;
     }
+    this.syncAria();
   }
   /**
    * Draws the component for the radio group.
@@ -132,6 +161,7 @@ class RadioGroup extends FormAssociatedElement {
         this.invalid = false;
         this.internals.setValidity({}, "");
       }
+      this.syncAria();
     });
     this.input.addEventListener("input", (e) => {
       this.validate();
@@ -145,6 +175,22 @@ class RadioGroup extends FormAssociatedElement {
       this.showInvalidMessage();
     });
   }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    var _a;
+    const label = (_a = this.label) == null ? void 0 : _a.trim();
+    const requiredInvalid = this.required && !this.value;
+    const invalid = this.invalid || requiredInvalid;
+    this.setAriaState({
+      role: "radiogroup",
+      required: this.required,
+      invalid,
+      disabled: this.disabled,
+      ...label ? { label } : {}
+    });
+  }
   /**
    * Returns the radio button with the given value.
    * @param {string} value The value of the radio button.
@@ -171,6 +217,7 @@ class RadioGroup extends FormAssociatedElement {
       this.value = radio.value;
       this.input.value = radio.value;
       this.input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      this.syncAria();
       return true;
     }
     console.error(`Radio with value ${radio.value} not found`);

package/dist/wje-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n    #internalValue = '';\n\n    /**\n     * Creates an instance of RadioGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        this.pristine = false;\n        this.internals.setFormValue(value);\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.getAttribute('value');\n    }\n    /**\n     * Setter for the name attribute.\n     * @param {string} value The name to set.\n     */\n    set required(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('required');\n        } else {\n            this.setAttribute('required', '');\n        }\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {boolean}\n     */\n    get required() {\n        return this.hasAttribute('required');\n    }\n\n    className = 'RadioGroup';\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    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        if (this.pristine) {\n            this.pristine = false;\n        }\n    }\n\n    /**\n     * Draws the component for the radio group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n        let input = document.createElement('input');\n        input.type =  'text';\n        input.name = this.name;\n        input.disabled = this.disabled;\n        input.required = this.required;\n        input.value = this.value || '';\n        input.classList.add('input-hidden');\n\n        let slot = document.createElement('slot');\n\n        let label = document.createElement('label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        if (this.label) {\n            native.append(label);\n        }\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        native.append(input);\n        native.append(slot);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.append(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n     */\n    afterDraw() {\n        if(this.value)\n            this.checkRadio(this.getRadioByValue(this.value));\n\n        // this.addEventListener('wje-radio:input', (e) => {\n        //     this.value = e.detail.context.value;\n        // });\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.addEventListener('wje-radio:change', (e) => {\n            this.checkRadio(e.target);\n\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            if (this.invalid) {\n                this.invalid = false;\n                // this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            event.dispatchCustomEvent(this, 'wje-radio-group:change');\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n        });\n\n    }\n\n    /**\n     * Returns the radio button with the given value.\n     * @param {string} value The value of the radio button.\n     * @returns {Radio} The radio button.\n     */\n    getRadioByValue(value) {\n        return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n    }\n\n    /**\n     * Removes the check from all radio buttons.\n     */\n    removeCheck() {\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) el.checked = false;\n        });\n    }\n\n    /**\n     * Sets the given radio button to checked.\n     */\n    checkRadio(radio) {\n        this.removeCheck();\n\n        if (radio) {\n            // debugger\n            radio.checked = true;\n            this.value = radio.value;\n            this.input.value = radio.value;\n            this.input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n            return true;\n        }\n\n        console.error(`Radio with value ${radio.value} not found`);\n        return false;\n    }\n\n    /**\n     * Retrieves all direct child elements of the current element.\n     * @returns {HTMLElement[]} An array of child elements.\n     */\n    getAllElements() {\n        return Array.from(this.children);\n    }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAee,MAAM,mBAAmB,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA,EAO1D,cAAc;AACV,UAAO;AAPX,uCAAiB;AAmDjB,qCAAY;AA1CR,SAAK,UAAU;AACf,SAAK,WAAW;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,uBAAK,gBAAiB;AACtB,SAAK,WAAW;AAChB,SAAK,UAAU,aAAa,KAAK;AACjC,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKI,IAAI,SAAS,OAAO;AAChB,QAAI,UAAU,QAAQ,UAAU,QAAW;AACvC,WAAK,gBAAgB,UAAU;AAAA,IAC3C,OAAe;AACH,WAAK,aAAa,YAAY,EAAE;AAAA,IAC5C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA,EAEI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,QAAI,KAAK,UAAU;AACf,WAAK,WAAW;AAAA,IAC5B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,sBAAsB,KAAK,aAAa,QAAQ,IAAI,eAAe,KAAK;AAE7F,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,OAAQ;AACd,UAAM,OAAO,KAAK;AAClB,UAAM,WAAW,KAAK;AACtB,UAAM,WAAW,KAAK;AACtB,UAAM,QAAQ,KAAK,SAAS;AAC5B,UAAM,UAAU,IAAI,cAAc;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,YAAY,KAAK;AACvB,QAAI,KAAK,SAAS,CAAC,KAAK,aAAa,OAAO,EAAG,OAAM,UAAU,IAAI,MAAM;AAEzE,QAAI,KAAK,OAAO;AACZ,aAAO,OAAO,KAAK;AAAA,IAC/B;AAGQ,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,OAAO;AAEtC,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAElC,WAAO,OAAO,KAAK;AACnB,WAAO,OAAO,IAAI;AAClB,WAAO,OAAO,SAAS;AAEvB,SAAK,OAAO,KAAK;AAEjB,aAAS,OAAO,MAAM;AAEtB,SAAK,QAAQ;AAEb,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAG,KAAK;AACJ,WAAK,WAAW,KAAK,gBAAgB,KAAK,KAAK,CAAC;AAMpD,SAAK,SAAU;AAEf,QAAI,KAAK,SAAS;AACd,WAAK,mBAAoB;AAAA,IACrC;AAEQ,SAAK,iBAAiB,oBAAoB,CAAC,MAAM;AAC7C,WAAK,WAAW,EAAE,MAAM;AAExB,WAAK,SAAU;AAEf,WAAK,WAAW;AAChB,WAAK,oBAAqB;AAE1B,UAAI,KAAK,SAAS;AACd,aAAK,UAAU;AAEf,aAAK,UAAU,YAAY,CAAA,GAAI,EAAE;AAAA,MACjD;AAAA,IACA,CAAS;AAED,SAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,WAAK,SAAU;AAEf,WAAK,WAAW;AAChB,WAAK,oBAAqB;AAE1B,YAAM,oBAAoB,MAAM,wBAAwB;AAAA,IACpE,CAAS;AAED,SAAK,iBAAiB,WAAW,CAAC,MAAM;AACpC,WAAK,UAAU;AACf,WAAK,WAAW;AAEhB,WAAK,mBAAoB;AAAA,IACrC,CAAS;AAAA,EAET;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,gBAAgB,OAAO;AACnB,WAAO,KAAK,iBAAiB,KAAK,CAAC,OAAO,cAAc,SAAS,GAAG,UAAU,KAAK;AAAA,EAC3F;AAAA;AAAA;AAAA;AAAA,EAKI,cAAc;AACV,SAAK,eAAc,EAAG,QAAQ,CAAC,OAAO;AAClC,UAAI,cAAc,MAAO,IAAG,UAAU;AAAA,IAClD,CAAS;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKI,WAAW,OAAO;AACd,SAAK,YAAa;AAElB,QAAI,OAAO;AAEP,YAAM,UAAU;AAChB,WAAK,QAAQ,MAAM;AACnB,WAAK,MAAM,QAAQ,MAAM;AACzB,WAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM,UAAU,KAAM,CAAA,CAAC;AAC9E,aAAO;AAAA,IACnB;AAEQ,YAAQ,MAAM,oBAAoB,MAAM,KAAK,YAAY;AACzD,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,QAAQ;AAAA,EACvC;AACA;AA1NI;ACZJ,WAAW,OAAO,mBAAmB,UAAU;"}
+{"version":3,"file":"wje-radio-group.js","sources":["../packages/wje-radio-group/radio-group.element.js","../packages/wje-radio-group/radio-group.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport Radio from '../wje-radio/radio.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `RadioGroup` is a custom web component that represents a group of radio buttons.\n * @summary This element represents a group of radio buttons.\n * @documentation https://elements.webjet.sk/components/radio-group\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The default slot for the radio group.\n * @tag wje-radio-group\n */\n\nexport default class RadioGroup extends FormAssociatedElement {\n    #internalValue = '';\n\n    /**\n     * Creates an instance of RadioGroup.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        this.pristine = false;\n        this.internals.setFormValue(value);\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.getAttribute('value');\n    }\n    /**\n     * Setter for the name attribute.\n     * @param {string} value The name to set.\n     */\n    set required(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('required');\n        } else {\n            this.setAttribute('required', '');\n        }\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {boolean}\n     */\n    get required() {\n        return this.hasAttribute('required');\n    }\n\n    /**\n     * Setter for the label attribute.\n     * @param {string} value The label to set.\n     */\n    set label(value) {\n        if (value === null || value === undefined) {\n            this.removeAttribute('label');\n        } else {\n            this.setAttribute('label', value);\n        }\n    }\n\n    /**\n     * Getter for the label attribute.\n     * @returns {string|null}\n     */\n    get label() {\n        return this.getAttribute('label');\n    }\n\n    className = 'RadioGroup';\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    static get observedAttributes() {\n        return ['required', 'value', 'disabled', 'invalid', 'label'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (['required', 'disabled', 'invalid', 'label'].includes(name)) this.syncAria();\n        if (name === 'value' && this.pristine) {\n            const radio = this.getRadioByValue(this.value);\n            if (radio) this.checkRadio(radio);\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        if (this.pristine) {\n            this.pristine = false;\n        }\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the radio group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio-group', this.hasAttribute('inline') ? 'wje-inline' : 'ddd');\n\n        let input = document.createElement('input');\n        input.type =  'text';\n        input.name = this.name;\n        input.disabled = this.disabled;\n        input.required = this.required;\n        input.value = this.value || '';\n        input.classList.add('input-hidden');\n\n        let slot = document.createElement('slot');\n\n        let label = document.createElement('label');\n        label.innerText = this.label;\n        if (this.value && !this.hasAttribute('error')) label.classList.add('fade');\n\n        if (this.label) {\n            native.append(label);\n        }\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        native.append(input);\n        native.append(slot);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.append(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn. Handles the selection of radio buttons.\n     */\n    afterDraw() {\n        if(this.value)\n            this.checkRadio(this.getRadioByValue(this.value));\n\n        // this.addEventListener('wje-radio:input', (e) => {\n        //     this.value = e.detail.context.value;\n        // });\n\n        this.validate();\n\n        if (this.invalid) {\n            this.showInvalidMessage();\n        }\n\n        this.addEventListener('wje-radio:change', (e) => {\n            this.checkRadio(e.target);\n\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            if (this.invalid) {\n                this.invalid = false;\n                // this.errorMessage.textContent = '';\n                this.internals.setValidity({}, '');\n            }\n            this.syncAria();\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validate();\n\n            this.pristine = false;\n            this.propagateValidation();\n\n            event.dispatchCustomEvent(this, 'wje-radio-group:change');\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n        });\n\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        const label = this.label?.trim();\n        const requiredInvalid = this.required && !this.value;\n        const invalid = this.invalid || requiredInvalid;\n\n        this.setAriaState({\n            role: 'radiogroup',\n            required: this.required,\n            invalid,\n            disabled: this.disabled,\n            ...(label ? { label } : {}),\n        });\n    }\n\n    /**\n     * Returns the radio button with the given value.\n     * @param {string} value The value of the radio button.\n     * @returns {Radio} The radio button.\n     */\n    getRadioByValue(value) {\n        return this.getAllElements().find((el) => el instanceof Radio && el.value === value);\n    }\n\n    /**\n     * Removes the check from all radio buttons.\n     */\n    removeCheck() {\n        this.getAllElements().forEach((el) => {\n            if (el instanceof Radio) el.checked = false;\n        });\n    }\n\n    /**\n     * Sets the given radio button to checked.\n     */\n    checkRadio(radio) {\n        this.removeCheck();\n\n        if (radio) {\n            // debugger\n            radio.checked = true;\n            this.value = radio.value;\n            this.input.value = radio.value;\n            this.input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n            this.syncAria();\n            return true;\n        }\n\n        console.error(`Radio with value ${radio.value} not found`);\n        return false;\n    }\n\n    /**\n     * Retrieves all direct child elements of the current element.\n     * @returns {HTMLElement[]} An array of child elements.\n     */\n    getAllElements() {\n        return Array.from(this.children);\n    }\n}\n","import RadioGroup from './radio-group.element.js';\n\nexport default RadioGroup;\n\nRadioGroup.define('wje-radio-group', RadioGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-radio.js

@@ -80,13 +80,28 @@ class Radio extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["checked"];
+    return ["checked", "disabled", "value"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    if (oldValue === newValue) return;
+    if (this.input) {
+      if (name === "checked") this.input.checked = this.checked;
+      if (name === "disabled") this.input.disabled = this.disabled;
+      if (name === "value") {
+        this.input.id = this.value + "-radio";
+        this.input.name = this.value + "-radio";
+      }
+    }
+    if (["checked", "disabled"].includes(name)) this.syncAria();
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the radio button.
@@ -118,6 +133,17 @@ class Radio extends WJElement {
     if (!this.hasAttribute("disabled")) {
       event.addListener(this.input, "input", "wje-radio:change");
     }
+    this.syncAria();
+  }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "radio",
+      checked: this.checked,
+      disabled: this.disabled
+    });
   }
   /**
    * Toggles the radio button.

package/dist/wje-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n    }\n\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n        } else {\n            this.removeAttribute('checked');\n        }\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Get disabled attribute value.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = this.value + '-radio';\n        this.input.name = this.value + '-radio';\n        this.input.checked = this.checked;\n        this.input.disabled = this.disabled;\n\n        let label = document.createElement('label');\n        label.htmlFor = this.value + '-radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this.input, 'input', 'wje-radio:change');\n            // event.addListener(this, 'click', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":";;;;;;AAiBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV,UAAO;AAwDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,QAAE,eAAgB;AAClB,QAAE,gBAAiB;AACnB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAAA,EAjIL;AAAA,EAEI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA,EAEI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,QAAI,OAAO;AACP,WAAK,aAAa,WAAW,EAAE;AAAA,IAC3C,OAAe;AACH,WAAK,gBAAgB,SAAS;AAAA,IAC1C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IAC5C,OAAe;AACH,WAAK,gBAAgB,UAAU;AAAA,IAC3C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,KAAK,MAAO,QAAO,UAAU,IAAI,KAAK,KAAK;AAE/C,SAAK,QAAQ,SAAS,cAAc,OAAO;AAC3C,SAAK,MAAM,OAAO;AAClB,SAAK,MAAM,KAAK,KAAK,QAAQ;AAC7B,SAAK,MAAM,OAAO,KAAK,QAAQ;AAC/B,SAAK,MAAM,UAAU,KAAK;AAC1B,SAAK,MAAM,WAAW,KAAK;AAE3B,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK,KAAK;AAC7B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAChC,YAAM,YAAY,KAAK,OAAO,SAAS,kBAAkB;AAAA,IAErE;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAeI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC7JA,MAAM,OAAO,aAAa,KAAK;"}
+{"version":3,"file":"wje-radio.js","sources":["../packages/wje-radio/radio.element.js","../packages/wje-radio/radio.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Radio button element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/radio\n * @status stable\n * @augments WJElement\n * @slot - Default slot for the radio button label content.\n * @csspart native-radio - The native wrapper for the radio button.\n * @cssproperty [--wje-radio-margin-inline=0] - Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`) to control spacing on both sides of the component.\n * @cssproperty [--wje-radio-margin-top=0] - Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component.\n * @cssproperty [--wje-radio-margin-bottom=0] - Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component.\n * // @fires wje-radio:change - Dispatched when the radio button's state changes.\n * // @fires wje-radio:input - Dispatched when the radio button is interacted with.\n */\n\nexport default class Radio extends WJElement {\n    /**\n     * Creates an instance of Radio.\n     */\n    constructor() {\n        super();\n\n    }\n\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    get value() {\n        return this.getAttribute('value');\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n        } else {\n            this.removeAttribute('checked');\n        }\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set disabled(value) {\n        if (value) {\n            this.setAttribute('disabled', '');\n        } else {\n            this.removeAttribute('disabled');\n        }\n    }\n\n    /**\n     * Get disabled attribute value.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Sets the color of the radio button.\n     * @type {string}\n     */\n    className = 'Radio';\n\n    /**\n     * Returns the CSS styles for the component.\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 ['checked', 'disabled', 'value'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (this.input) {\n            if (name === 'checked') this.input.checked = this.checked;\n            if (name === 'disabled') this.input.disabled = this.disabled;\n            if (name === 'value') {\n                this.input.id = this.value + '-radio';\n                this.input.name = this.value + '-radio';\n            }\n        }\n        if (['checked', 'disabled'].includes(name)) this.syncAria();\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 radio button.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-radio');\n\n        if (this.color) native.classList.add(this.color);\n\n        this.input = document.createElement('input');\n        this.input.type = 'radio';\n        this.input.id = this.value + '-radio';\n        this.input.name = this.value + '-radio';\n        this.input.checked = this.checked;\n        this.input.disabled = this.disabled;\n\n        let label = document.createElement('label');\n        label.htmlFor = this.value + '-radio';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(this.input);\n        native.appendChild(label);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners for the component.\n     */\n    afterDraw() {\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this.input, 'input', 'wje-radio:change');\n            // event.addListener(this, 'click', 'wje-radio:input');\n        }\n        this.syncAria();\n    }\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'radio',\n            checked: this.checked,\n            disabled: this.disabled,\n        });\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        this.checked = e.target.checked;\n    };\n\n    /**\n     * Toggles the radio button.\n     */\n    beforeDisconnect() {\n        event.removeElement(this);\n    }\n}\n","import Radio from './radio.element.js';\n\nexport default Radio;\n\nRadio.define('wje-radio', Radio);\n"],"names":[],"mappings":"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"}

package/dist/wje-rate.js

@@ -151,7 +151,7 @@ class Rate extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["is-hover"];
+    return ["is-hover", "value", "max", "disabled", "readonly"];
   }
   /**
    * Called when an attribute changes.
@@ -160,12 +160,19 @@ class Rate extends WJElement {
    * @param {string} newName The new value of the attribute.
    */
   attributeChangedCallback(name, old, newName) {
+    if (super.attributeChangedCallback) {
+      super.attributeChangedCallback(name, old, newName);
+    }
+    if (old !== newName && name !== "is-hover") {
+      this.syncAria();
+    }
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the rating component.
@@ -195,6 +202,7 @@ class Rate extends WJElement {
    * Adds event listeners after the component is drawn.
    */
   afterDraw() {
+    this.syncAria();
     if (this.hasAttribute("disabled") || this.hasAttribute("readonly")) {
       return;
     }
@@ -256,6 +264,20 @@ class Rate extends WJElement {
       icon.setAttribute("data-index", i);
       icon.setAttribute("data-rate", rateValue);
     }
+    this.syncAria();
+  }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "slider",
+      valuemin: 0,
+      valuemax: this.max,
+      valuenow: this.value,
+      disabled: this.hasAttribute("disabled"),
+      readonly: this.hasAttribute("readonly")
+    });
   }
   /**
    * Returns the icons for the rating component.

package/dist/wje-rate.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-rate.js","sources":["../packages/wje-rate/rate.element.js","../packages/wje-rate/rate.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Rate` is a custom web component that represents a rating component.\n * @summary This element represents a rating component.\n * @documentation https://elements.webjet.sk/components/rate\n * @status stable\n * @augments {WJElement}\n * @attribute {number} precision - The precision of the rating component.\n * @attribute {number} max - The maximum value of the rating component.\n * @attribute {Array<string>} icons - The icons of the rating component.\n * @csspart native - The native part of the rating component.\n * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.\n * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.\n * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.\n * @tag wje-rate\n */\n\nexport default class Rate extends WJElement {\n    /**\n     * Creates an instance of Rate.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the precision of the rating component.\n     * @param {number} value The value to set.\n     */\n    set precision(value) {\n        this.setAttribute('precision', value);\n    }\n\n    /**\n     * Gets the precision of the rating component.\n     * @returns {number} The value of the precision.\n     */\n    get precision() {\n        return this.hasAttribute('precision') ? +this.getAttribute('precision') : 1;\n    }\n\n    /**\n     * Sets the maximum value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Gets the maximum value of the rating component.\n     * @returns {number} The value of the maximum value.\n     */\n    get max() {\n        return this.hasAttribute('icons') ? this.icons.length : +this.getAttribute('max');\n    }\n\n    /**\n     * Sets the icons of the rating component.\n     * @param {Array<string>} value The value to set.\n     */\n    set icons(value) {\n        return value;\n    }\n\n    /**\n     * Gets the icons of the rating component.\n     * @returns {Array<string>} The value of the icons.\n     */\n    get icons() {\n        return this.hasAttribute('icons') ? JSON.parse(this.getAttribute('icons').replace(/'/g, '\"')) : ['star'];\n    }\n\n    /**\n     * Sets the value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Gets the value of the rating component.\n     * @returns {number} The value of the rating component.\n     */\n    get value() {\n        return this.hasAttribute('value') ? +this.getAttribute('value') : 0;\n    }\n\n    /**\n     * Sets the hover value of the rating component.\n     * @type {string}\n     */\n    className = 'Rate';\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 ['is-hover'];\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {string} name The name of the attribute that changed.\n     * @param {string} old The old value of the attribute.\n     * @param {string} newName The new value of the attribute.\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (name === 'is-hover') {\n            // this.draw();\n        }\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 rating component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-rate');\n\n        this.native = native;\n\n        if (this.hasAttribute('icons')) {\n            let icons = this.icons;\n            for (let i = 0; i < icons.length; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        } else {\n            for (let i = 0; i < this.max; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        }\n\n        this.changeRate();\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {\n            return;\n        }\n\n        this.addEventListener('mouseenter', this.onMouseEnter);\n        this.addEventListener('mouseleave', this.onMouseLeave);\n        this.addEventListener('mousemove', this.onMouseMove);\n        this.addEventListener('touchstart', this.onTouchStart);\n        this.addEventListener('touchend', this.onTouchEnd);\n        this.addEventListener('touchmove', this.onTouchMove);\n        this.addEventListener('click', this.onClick);\n    }\n\n    /**\n     * Creates the icons for the rating component.\n     * @param {number} i The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    createIcons(i) {\n        let div = document.createElement('div');\n        div.classList.add('wje-rate-icon');\n\n        let icon = this.getIcons(i);\n        let clone = icon.cloneNode(true);\n\n        div.appendChild(icon);\n        div.appendChild(clone);\n\n        return div;\n    }\n\n    /**\n     * Changes the rate of the rating component.\n     */\n    changeRate() {\n        const icons = this.native.children;\n        const rateValue =\n            this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== undefined\n                ? this.hoverValue\n                : this.value;\n\n        for (let i = 0; i < icons.length; i++) {\n            const icon = icons[i];\n            const firstIcon = icon.querySelector('wje-icon:first-child');\n            const lastIcon = icon.querySelector('wje-icon:last-child');\n\n            const isSelected = i < rateValue;\n            const isPartial = rateValue > i && rateValue < i + 1;\n\n            if (isSelected) {\n                icon.classList.add('selected');\n                if (this.hasAttribute('selected') && this.getAttribute('selected') === 'filled') {\n                    lastIcon.setAttribute('filled', '');\n                }\n            } else {\n                icon.classList.remove('selected');\n                lastIcon.removeAttribute('filled');\n            }\n\n            if (isPartial) {\n                const percent = ((rateValue - i) * 100).toFixed(2);\n                icon.classList.add('half');\n\n                firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;\n                lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\n\n                lastIcon.removeAttribute('hidden');\n            } else {\n                icon.classList.remove('half');\n                firstIcon.style.clipPath = ``;\n                lastIcon.style.clipPath = ``;\n                lastIcon.setAttribute('hidden', '');\n            }\n\n            icon.setAttribute('data-index', i);\n            icon.setAttribute('data-rate', rateValue);\n        }\n    }\n\n    /**\n     * Event handler for the mouse enter event.\n     * @param {Event} e The event.\n     */\n    onMouseEnter = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse leave event.\n     * @param {Event} e The event.\n     */\n    onMouseLeave = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse move event.\n     * @param {Event} e The event.\n     */\n    onMouseMove = (e) => {\n        e.preventDefault();\n\n        let newValue = +this.getValueFromXPosition(e.clientX);\n        if (newValue !== +this.hoverValue) {\n            this.hoverValue = newValue;\n            this.changeRate();\n        }\n    };\n\n    /**\n     * Event handler for the touch start event.\n     * @param {Event} e The event.\n     */\n    onTouchStart = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch end event.\n     * @param {Event} e The event.\n     */\n    onTouchEnd = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch move event.\n     * @param {Event} e The event.\n     */\n    onTouchMove = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the click event.\n     * @param {Event} e The event.\n     */\n    onClick = (e) => {\n        e.preventDefault();\n\n        this.value = +this.hoverValue;\n    };\n\n    /**\n     * Returns the icons for the rating component.\n     * @param {number} index The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    getIcons(index) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', this.max ? this.icons[0] : this.icons[index]);\n\n        if (this.hasAttribute('filled')) icon.setAttribute('filled', '');\n\n        return icon;\n    }\n\n    /**\n     * Returns the value from the x position.\n     * @param {number} coordinate The x coordinate.\n     * @returns {number} The value from the x position.\n     */\n    getValueFromXPosition(coordinate) {\n        const { left, right, width } = this.native.getBoundingClientRect();\n        const value = this.roundToPrecision(((coordinate - left) / width) * this.max, this.precision);\n\n        return Math.min(Math.max(value, 0), this.max);\n    }\n\n    /**\n     * Rounds a given number to the nearest specified precision.\n     * @param {number} numberToRound The number to be rounded.\n     * @param {number} [precision] The precision to which the number should be rounded.\n     * @returns {number} - The rounded number.\n     * @example\n     * roundToPrecision(2.3); // Returns 2.5\n     * roundToPrecision(2.3, 0.1); // Returns 2.3\n     * roundToPrecision(2.6, 1); // Returns 3\n     */\n    roundToPrecision(numberToRound, precision = 0.5) {\n        const multiplier = 1 / precision;\n        return Math.ceil(numberToRound * multiplier) / multiplier;\n    }\n}\n","import Rate from './rate.element.js';\n\nexport default Rate;\n\nRate.define('wje-rate', Rate);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-rate.js","sources":["../packages/wje-rate/rate.element.js","../packages/wje-rate/rate.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Rate` is a custom web component that represents a rating component.\n * @summary This element represents a rating component.\n * @documentation https://elements.webjet.sk/components/rate\n * @status stable\n * @augments {WJElement}\n * @attribute {number} precision - The precision of the rating component.\n * @attribute {number} max - The maximum value of the rating component.\n * @attribute {Array<string>} icons - The icons of the rating component.\n * @csspart native - The native part of the rating component.\n * @cssproperty [--wje-rate-gap=.25rem] - Defines the spacing (gap) between individual items in the rating component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`) to adjust the distance between rating elements.\n * @cssproperty [--wje-rate-color=var(--wje-color-contrast-11)] - Specifies the default color of the rating items. Accepts any valid CSS color value, including named colors, hex values, RGB, or CSS variables.\n * @cssproperty [--wje-rate-selected-color=var(--wje-color-danger-9)] - Sets the color for selected or highlighted rating items. This property helps visually distinguish selected ratings. Accepts any valid CSS color value.\n * @tag wje-rate\n */\n\nexport default class Rate extends WJElement {\n    /**\n     * Creates an instance of Rate.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the precision of the rating component.\n     * @param {number} value The value to set.\n     */\n    set precision(value) {\n        this.setAttribute('precision', value);\n    }\n\n    /**\n     * Gets the precision of the rating component.\n     * @returns {number} The value of the precision.\n     */\n    get precision() {\n        return this.hasAttribute('precision') ? +this.getAttribute('precision') : 1;\n    }\n\n    /**\n     * Sets the maximum value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Gets the maximum value of the rating component.\n     * @returns {number} The value of the maximum value.\n     */\n    get max() {\n        return this.hasAttribute('icons') ? this.icons.length : +this.getAttribute('max');\n    }\n\n    /**\n     * Sets the icons of the rating component.\n     * @param {Array<string>} value The value to set.\n     */\n    set icons(value) {\n        return value;\n    }\n\n    /**\n     * Gets the icons of the rating component.\n     * @returns {Array<string>} The value of the icons.\n     */\n    get icons() {\n        return this.hasAttribute('icons') ? JSON.parse(this.getAttribute('icons').replace(/'/g, '\"')) : ['star'];\n    }\n\n    /**\n     * Sets the value of the rating component.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Gets the value of the rating component.\n     * @returns {number} The value of the rating component.\n     */\n    get value() {\n        return this.hasAttribute('value') ? +this.getAttribute('value') : 0;\n    }\n\n    /**\n     * Sets the hover value of the rating component.\n     * @type {string}\n     */\n    className = 'Rate';\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 ['is-hover', 'value', 'max', 'disabled', 'readonly'];\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {string} name The name of the attribute that changed.\n     * @param {string} old The old value of the attribute.\n     * @param {string} newName The new value of the attribute.\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (super.attributeChangedCallback) {\n            super.attributeChangedCallback(name, old, newName);\n        }\n\n        if (name === 'is-hover') {\n            // this.draw();\n        }\n\n        if (old !== newName && name !== 'is-hover') {\n            this.syncAria();\n        }\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 for the rating component.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-rate');\n\n        this.native = native;\n\n        if (this.hasAttribute('icons')) {\n            let icons = this.icons;\n            for (let i = 0; i < icons.length; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        } else {\n            for (let i = 0; i < this.max; i++) {\n                native.appendChild(this.createIcons(i));\n            }\n        }\n\n        this.changeRate();\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.syncAria();\n        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {\n            return;\n        }\n\n        this.addEventListener('mouseenter', this.onMouseEnter);\n        this.addEventListener('mouseleave', this.onMouseLeave);\n        this.addEventListener('mousemove', this.onMouseMove);\n        this.addEventListener('touchstart', this.onTouchStart);\n        this.addEventListener('touchend', this.onTouchEnd);\n        this.addEventListener('touchmove', this.onTouchMove);\n        this.addEventListener('click', this.onClick);\n    }\n\n    /**\n     * Creates the icons for the rating component.\n     * @param {number} i The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    createIcons(i) {\n        let div = document.createElement('div');\n        div.classList.add('wje-rate-icon');\n\n        let icon = this.getIcons(i);\n        let clone = icon.cloneNode(true);\n\n        div.appendChild(icon);\n        div.appendChild(clone);\n\n        return div;\n    }\n\n    /**\n     * Changes the rate of the rating component.\n     */\n    changeRate() {\n        const icons = this.native.children;\n        const rateValue =\n            this.value !== this.hoverValue && this.hoverValue !== 0 && this.hoverValue !== undefined\n                ? this.hoverValue\n                : this.value;\n\n        for (let i = 0; i < icons.length; i++) {\n            const icon = icons[i];\n            const firstIcon = icon.querySelector('wje-icon:first-child');\n            const lastIcon = icon.querySelector('wje-icon:last-child');\n\n            const isSelected = i < rateValue;\n            const isPartial = rateValue > i && rateValue < i + 1;\n\n            if (isSelected) {\n                icon.classList.add('selected');\n                if (this.hasAttribute('selected') && this.getAttribute('selected') === 'filled') {\n                    lastIcon.setAttribute('filled', '');\n                }\n            } else {\n                icon.classList.remove('selected');\n                lastIcon.removeAttribute('filled');\n            }\n\n            if (isPartial) {\n                const percent = ((rateValue - i) * 100).toFixed(2);\n                icon.classList.add('half');\n\n                firstIcon.style.clipPath = `inset(0 0 0 ${percent}%)`;\n                lastIcon.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;\n\n                lastIcon.removeAttribute('hidden');\n            } else {\n                icon.classList.remove('half');\n                firstIcon.style.clipPath = ``;\n                lastIcon.style.clipPath = ``;\n                lastIcon.setAttribute('hidden', '');\n            }\n\n            icon.setAttribute('data-index', i);\n            icon.setAttribute('data-rate', rateValue);\n        }\n\n        this.syncAria();\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'slider',\n            valuemin: 0,\n            valuemax: this.max,\n            valuenow: this.value,\n            disabled: this.hasAttribute('disabled'),\n            readonly: this.hasAttribute('readonly'),\n        });\n    }\n\n    /**\n     * Event handler for the mouse enter event.\n     * @param {Event} e The event.\n     */\n    onMouseEnter = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse leave event.\n     * @param {Event} e The event.\n     */\n    onMouseLeave = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the mouse move event.\n     * @param {Event} e The event.\n     */\n    onMouseMove = (e) => {\n        e.preventDefault();\n\n        let newValue = +this.getValueFromXPosition(e.clientX);\n        if (newValue !== +this.hoverValue) {\n            this.hoverValue = newValue;\n            this.changeRate();\n        }\n    };\n\n    /**\n     * Event handler for the touch start event.\n     * @param {Event} e The event.\n     */\n    onTouchStart = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch end event.\n     * @param {Event} e The event.\n     */\n    onTouchEnd = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = 0;\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the touch move event.\n     * @param {Event} e The event.\n     */\n    onTouchMove = (e) => {\n        e.preventDefault();\n\n        this.hoverValue = this.getValueFromXPosition(e.touches[0].clientX);\n        this.changeRate();\n    };\n\n    /**\n     * Event handler for the click event.\n     * @param {Event} e The event.\n     */\n    onClick = (e) => {\n        e.preventDefault();\n\n        this.value = +this.hoverValue;\n    };\n\n    /**\n     * Returns the icons for the rating component.\n     * @param {number} index The index of the icon.\n     * @returns {Element} The icon element.\n     */\n    getIcons(index) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', this.max ? this.icons[0] : this.icons[index]);\n\n        if (this.hasAttribute('filled')) icon.setAttribute('filled', '');\n\n        return icon;\n    }\n\n    /**\n     * Returns the value from the x position.\n     * @param {number} coordinate The x coordinate.\n     * @returns {number} The value from the x position.\n     */\n    getValueFromXPosition(coordinate) {\n        const { left, right, width } = this.native.getBoundingClientRect();\n        const value = this.roundToPrecision(((coordinate - left) / width) * this.max, this.precision);\n\n        return Math.min(Math.max(value, 0), this.max);\n    }\n\n    /**\n     * Rounds a given number to the nearest specified precision.\n     * @param {number} numberToRound The number to be rounded.\n     * @param {number} [precision] The precision to which the number should be rounded.\n     * @returns {number} - The rounded number.\n     * @example\n     * roundToPrecision(2.3); // Returns 2.5\n     * roundToPrecision(2.3, 0.1); // Returns 2.3\n     * roundToPrecision(2.6, 1); // Returns 3\n     */\n    roundToPrecision(numberToRound, precision = 0.5) {\n        const multiplier = 1 / precision;\n        return Math.ceil(numberToRound * multiplier) / multiplier;\n    }\n}\n","import Rate from './rate.element.js';\n\nexport default Rate;\n\nRate.define('wje-rate', Rate);\n"],"names":[],"mappings":"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"}

package/dist/wje-relative-time.js

@@ -57,13 +57,24 @@ class RelativeTime extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return [];
+    return ["date", "lang"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    if (oldValue === newValue) return;
+    if (this.native) {
+      this.native.innerText = this.getRelativeTimeString();
+      if (this.date) this.native.setAttribute("datetime", this.date);
+      else this.native.removeAttribute("datetime");
+    }
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "status" });
   }
   /**
    * Draws the component for the relative time.
@@ -75,7 +86,9 @@ class RelativeTime extends WJElement {
     element.setAttribute("part", "native");
     element.classList.add("native-relative-time");
     element.innerText = this.getRelativeTimeString();
+    if (this.date) element.setAttribute("datetime", this.date);
     fragment.appendChild(element);
+    this.native = element;
     return fragment;
   }
   /**

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 [];\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 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\n        fragment.appendChild(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.floor(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":";;;;;AAae,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,UAAO;AAiDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAhDR,SAAK,YAAY,IAAI,UAAU,IAAI;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW,OAAO;AAClB,SAAK,aAAa,eAAe,KAAK;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,aAAa;AACb,QAAI,OAAO,oBAAI,KAAM;AACrB,QAAI,YAAY,KAAK;AAErB,QAAI,CAAC,CAAC,aAAa,cAAc,IAAI;AACjC,kBAAY,KAAK,UAAU,SAAS,IAAI,YAAY,CAAC,YAAY;AAEjE,aAAO,IAAI,KAAK,SAAS;AAAA,IACrC;AAEQ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,sBAAsB;AAC5C,YAAQ,YAAY,KAAK,sBAAuB;AAEhD,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,sBAAsB,OAAO,UAAU,UAAU;AAC7C,QAAI,KAAK,WAAW,eAAe,kBAAkB,KAAK,WAAW,SAAU,MAAK,OAAO;AACvF,aAAO;AAAA,IACnB;AAEQ,UAAM,SAAS,KAAK,WAAW,QAAS;AAExC,UAAM,eAAe,KAAK,OAAO,SAAS,KAAK,IAAK,KAAI,GAAI;AAE5D,UAAM,UAAU,CAAC,IAAI,MAAM,OAAO,QAAQ,GAAG,QAAQ,IAAI,QAAQ,KAAK,QAAQ;AAE9E,UAAM,QAAQ,CAAC,UAAU,UAAU,QAAQ,OAAO,QAAQ,SAAS,MAAM;AACzE,UAAM,YAAY,QAAQ,UAAU,CAAC,WAAW,SAAS,KAAK,IAAI,YAAY,CAAC;AAC/E,UAAM,UAAU,YAAY,QAAQ,YAAY,CAAC,IAAI;AAErD,WAAO,KAAK,UAAU;AAAA,MAClB,KAAK,aAAa,MAAM;AAAA,MACxB,KAAK,MAAM,eAAe,OAAO;AAAA,MACjC,MAAM,SAAS;AAAA,MACf,EAAE,SAAS,OAAM;AAAA,IACpB;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,UAAU,KAAK;AACX,UAAM,OAAO,IAAI,KAAK,GAAG;AACzB,WAAO,CAAC,MAAM,KAAK,SAAS;AAAA,EACpC;AACA;ACtIA,aAAa,OAAO,qBAAqB,YAAY;"}
+{"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.floor(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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"}

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,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,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,EACf;AACA;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":[],"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;"}

package/dist/wje-reorder-handle.js

@@ -34,6 +34,7 @@ class ReorderHandle extends WJElement {
   }
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component.
@@ -53,10 +54,30 @@ class ReorderHandle extends WJElement {
    * Draws the component after it is connected to the DOM.
    */
   afterDraw() {
+    this.syncAria();
     if (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 });
+    }
+  }
   /**
    * Handles the attribute changes.
    * @param {DragEvent} e

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

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,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,MAAM;AAC5B,YAAQ,aAAa,QAAQ,qBAAqB;AAElD,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,UAAU,IAAI,MAAM;AAE5B,QAAI,eAAe,QAAQ,MAAM,QAAQ,GAAG;AACxC,YAAM,SAAS,SAAS,cAAc,MAAM;AAC5C,aAAO,UAAU,IAAI,QAAQ;AAC7B,aAAO,aAAa,QAAQ,QAAQ;AACpC,aAAO,aAAa,QAAQ,aAAa;AAEzC,cAAQ,UAAU,IAAI,eAAe;AACrC,cAAQ,YAAY,MAAM;AAAA,IACtC,OAAe;AACH,cAAQ,aAAa,aAAa,MAAM;AAAA,IACpD;AAEQ,YAAQ,YAAY,OAAO;AAE3B,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AACA;ACvEA,YAAY,OAAO,oBAAoB,WAAW;"}
+{"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;"}