wj-elements 0.1.179 → 0.1.181

package/dist/wje-radio.js

@@ -1,7 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement, { event } from "./wje-element.js";
+import WJElement from "./wje-element.js";
+import { event } from "./event.js";
 const styles = "/*\n[ WJ Radio ]\n*/\n\n:host {\n    --wje-radio-margin-top: 0;\n    --wje-radio-margin-bottom: 0.5rem;\n    --wje-radio-margin-inline: 0;\n\n    display: block;\n    margin-top: var(--wje-radio-margin-top);\n    margin-bottom: var(--wje-radio-margin-bottom);\n    margin-inline: var(--wje-radio-margin-inline);\n    line-height: 100%;\n    padding-left: 0;\n\n    label {\n        display: flex;\n        cursor: pointer;\n        position: relative;\n        padding-left: 1.5rem;\n        min-width: 16px;\n        min-height: 16px;\n        margin-bottom: 0;\n        -webkit-touch-callout: none; /* iOS Safari */\n        -webkit-user-select: none; /* Safari */\n        -moz-user-select: none; /* Old versions of Firefox */\n        -ms-user-select: none; /* Internet Explorer/Edge */\n        user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */\n        align-items: center;\n        &:before {\n            content: '';\n            position: absolute;\n            width: 16px;\n            height: 16px;\n            left: 0;\n            box-sizing: border-box;\n            background-color: var(--wje-color-contrast-1);\n            border: 1px solid var(--wje-color-contrast-4);\n        }\n    }\n}\n\n.native-radio {\n    input[type='radio'] + label {\n        &:before {\n            border-radius: var(--wje-border-radius-circle);\n            transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);\n        }\n    }\n    input[type='radio']:checked {\n        & + label {\n            &:before {\n                border-color: var(--wje-color-contrast-6);\n                border-width: 5px;\n            }\n        }\n    }\n    input[type='radio']:focus {\n        & + label {\n            color: var(--wje-color);\n            &:before {\n                outline: none !important;\n                box-shadow: 0 0 0 0 #78c8fe;\n            }\n        }\n    }\n\n    input[type='radio'] {\n        opacity: 0;\n        position: absolute;\n        top: 3px;\n        width: 16px;\n        height: 16px;\n    }\n\n    input[type='radio'][disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-9);\n            opacity: 0.5;\n            &:before {\n                cursor: not-allowed !important;\n            }\n        }\n    }\n}\n\n:host([placement='end']) {\n    label {\n        padding-left: 0;\n        padding-right: 26px;\n\n        &:before {\n            right: 0;\n            left: auto;\n        }\n    }\n\n    input[type='checkbox']:checked {\n        & + label {\n            position: relative;\n\n            &::after {\n                position: absolute;\n                right: 0;\n                left: auto;\n            }\n        }\n    }\n}\n\n/* Colors */\n\n:host([color='primary']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-primary-9);\n}\n\n:host([color='complete']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-success-9);\n}\n\n:host([color='warning']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input[type='radio']:checked + label:before {\n    border-color: var(--wje-color-info-9);\n}\n";
 class Radio extends WJElement {
   /**

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        this._checked = false;\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        this._checked = value;\n        this.toggleAttribute('checked', value);\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this._checked;\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.hasAttribute('checked');\n        this.input.disabled = this.hasAttribute('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, 'change', 'wje-radio:change');\n            event.addListener(this, 'input', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\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;AA0BX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAjGG,SAAK,WAAW;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,WAAW;AAChB,SAAK,gBAAgB,WAAW,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK;AAAA,EACpB;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,aAAa,SAAS;AAChD,SAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAElD,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,UAAU,kBAAkB;AAC1D,YAAM,YAAY,MAAM,SAAS,iBAAiB;AAAA,IAC9D;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAaI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC7HA,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        this._checked = false;\n    }\n\n    /**\n     * Sets the name of the radio button.\n     * @param value\n     */\n    set checked(value) {\n        this._checked = value;\n        this.toggleAttribute('checked', value);\n    }\n\n    /**\n     * Gets the checked property of the radio button.\n     * @returns {boolean}\n     */\n    get checked() {\n        return this._checked;\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.hasAttribute('checked');\n        this.input.disabled = this.hasAttribute('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, 'change', 'wje-radio:change');\n            event.addListener(this, 'input', 'wje-radio:input');\n        }\n    }\n\n    /**\n     * Called when an attribute changes.\n     * @param {object} e\n     */\n    inputEvent = (e) => {\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;AA0BX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAuEZ;AAAA;AAAA;AAAA;AAAA,sCAAa,CAAC,MAAM;AAChB,WAAK,UAAU,EAAE,OAAO;AAAA,IAC3B;AAjGG,SAAK,WAAW;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,WAAW;AAChB,SAAK,gBAAgB,WAAW,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK;AAAA,EACpB;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,aAAa,SAAS;AAChD,SAAK,MAAM,WAAW,KAAK,aAAa,UAAU;AAElD,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,UAAU,kBAAkB;AAC1D,YAAM,YAAY,MAAM,SAAS,iBAAiB;AAAA,IAC9D;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAaI,mBAAmB;AACf,UAAM,cAAc,IAAI;AAAA,EAChC;AACA;AC7HA,MAAM,OAAO,aAAa,KAAK;"}

package/dist/wje-reorder-item.js

@@ -1,7 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement, { WjElementUtils } from "./wje-element.js";
+import WJElement from "./wje-element.js";
+import { WjElementUtils } from "./element-utils.js";
 const styles = ":host {\n    /*--reorder-background-color: var(--wje-color-contrast-0);*/\n    --reorder-item-spacing: 0.5rem;\n}\n\n.item {\n    width: 134px;\n    height: 19px;\n    display: flex;\n    align-items: center;\n    justify-content: left;\n    position: relative;\n    gap: var(--reorder-item-spacing);\n    padding: var(--reorder-item-spacing);\n    border-radius: var(--wje-border-radius-small);\n    background-color: var(--reorder-background-color);\n    cursor: grab;\n    transition:\n        top 0.3s ease,\n        left 0.3s ease;\n}\n\n.item-w-handle {\n    cursor: default;\n}\n\n.item-w-handle:active {\n    opacity: 0.3;\n}\n\n.item:active:not(.item-w-handle):not(.moving) {\n    background-color: var(--reorder-background-color);\n    cursor: grabbing;\n}\n\n.moving {\n    background-color: lightgrey;\n}\n\n.handle {\n    cursor: grab;\n    gap: 10px;\n}\n\n.handle:active {\n    cursor: grabbing;\n}\n\n.name {\n    width: 108px;\n    height: 19px;\n    text-align: center;\n    font-size: var(--wje-font-size-medium);\n    font-weight: 400;\n    line-height: 19.36px;\n    gap: 10px;\n}\n\n/* .drag--down {\n  --item-transform: translateY(-5px);\n}\n\n.drag--up {\n  --item-transform: translateY(5px);\n} */\n\n.item {\n    transform: var(--item-transform);\n}\n";
 class ReorderItem extends WJElement {
   /**

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

package/dist/wje-select.js

@@ -10,17 +10,18 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _addedOptions, _htmlOptions, _Select_instances, htmlSelectedItem_fn;
-import WJElement, { event } from "./wje-element.js";
+import WJElement from "./wje-element.js";
 import Button from "./wje-button.js";
 import "./wje-popup.js";
-import Icon from "./wje-icon.js";
+import { I as Icon } from "./icon-DY5AZ6xM.js";
 import Label from "./wje-label.js";
 import Chip from "./wje-chip.js";
 import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
-import { P as Popup } from "./popup.element-AaduHP2r.js";
+import { P as Popup } from "./popup.element-Di4nHYij.js";
+import { event } from "./event.js";
 const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 0.5rem);\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n";
 class Select extends WJElement {
   /**

package/dist/wje-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-select.js","sources":["../packages/wje-select/select.element.js","../packages/wje-select/select.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport Popup from '../wje-popup/popup.js';\nimport Icon from '../wje-icon/icon.js';\nimport Label from '../wje-label/label.js';\nimport Chip from '../wje-chip/chip.js';\nimport Input from '../wje-input/input.js';\nimport Option from '../wje-option/option.js';\nimport Options from '../wje-options/options.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Select` is a custom web component that represents a select input.\n * @summary This element represents a select input.\n * @documentation https://elements.webjet.sk/components/select\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the select.\n * @slot anchor - The slot for the anchor.\n * @slot arrow - The slot for the arrow.\n * @csspart native - The native select wrapper.\n * @csspart input - The input field.\n * @csspart clear - The clear button.\n * @property {Array} _selected - An array to store selected items.\n * @property {HTMLElement|null} counterEl - A reference to the counter element, initially null.\n * @property {ElementInternals} internals - The internal element API for managing state and attributes.\n * @property {number} maxOptions - The maximum number of options allowed.\n * @property {boolean} _wasOppened - Tracks whether the select element was previously opened, initially false.\n * @cssproperty [--wje-select-border-width=1px] - Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`).\n * @cssproperty [--wje-select-border-style=solid] - Defines the style of the border for the select component. Accepts standard CSS border styles, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-select-border-color=var(--wje-border-color)] - Sets the color of the border for the select component. Accepts any valid CSS color value, including color variables, named colors, and hex values.\n * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.\n * @cssproperty [--wje-select-options-border-style=var(--wje-border-style)] - Defines the border style for the select options dropdown. Inherits from a defined CSS variable for consistency.\n * @cssproperty [--wje-select-options-border-color=var(--wje-border-color)] - Sets the border color for the select options dropdown. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-line-height=20px] - Defines the line height for the text within the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.\n * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-border-radius=var(--wje-border-radius-medium)] - Specifies the border radius for the select component.Determines the roundness of the corners and accepts any valid CSS length unit or variable.\n * @tag wje-select\n */\n\nexport default class Select extends WJElement {\n\t#addedOptions = []\n\t#htmlOptions = []\n\t/**\n\t * Constructor for the Select class.\n\t * @class\n\t * @description Initializes the Select component.\n\t * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.\n\t * It also tracks whether the select element was previously opened.\n\t * @class\n\t * @augments {WJElement}\n\t * @memberof Select\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t/**\n\t\t * @type {Array}\n\t\t * @description An array to store selected items.\n\t\t */\n\t\tthis._selected = [];\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the counter element, initially null.\n\t\t * @private\n\t\t */\n\t\tthis.counterEl = null;\n\n\t\t/**\n\t\t * @type {ElementInternals}\n\t\t * @description The internal element API for managing state and attributes.\n\t\t * @private\n\t\t * @readonly\n\t\t * @constant\n\t\t * @default {ElementInternals} this.attachInternals()\n\t\t * @description Attaches the internals to the element.\n\t\t */\n\t\tthis.internals = this.attachInternals();\n\n\t\t/**\n\t\t * @type {boolean}\n\t\t * @description Tracks whether the select element was previously opened, initially false.\n\t\t * @private\n\t\t * @default {boolean} false\n\t\t */\n\t\tthis._wasOppened = false;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the native select element, initially null.\n\t\t */\n\t\tthis.native = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the popup element, initially null.\n\t\t */\n\t\tthis.popup = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the label element, initially null.\n\t\t */\n\t\tthis.labelElement = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the slot start element, initially null.\n\t\t */\n\t\tthis.slotStart = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the slot end element, initially null.\n\t\t */\n\t\tthis.slotEnd = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the input element, initially null.\n\t\t */\n\t\tthis.input = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the options wrapper element, initially null.\n\t\t */\n\t\tthis.optionsWrapper = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the chips element, initially null.\n\t\t */\n\t\tthis.chips = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the clear button element, initially null.\n\t\t */\n\t\tthis.clear = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the list element, initially null.\n\t\t */\n\t\tthis.list = null;\n\n\t\tthis.selectedOptions = []\n\t}\n\n\t/**\n\t * An object representing component dependencies with their respective classes.\n\t * Each property in the object maps a custom component name (as a string key)\n\t * to its corresponding class or constructor.\n\t * @typedef {{[key: string]: Function}} Dependencies\n\t * @property {Function} 'wje-button' Represents the Button component class.\n\t * @property {Function} 'wje-popup' Represents the Popup component class.\n\t * @property {Function} 'wje-icon' Represents the Icon component class.\n\t * @property {Function} 'wje-label' Represents the Label component class.\n\t * @property {Function} 'wje-chip' Represents the Chip component class.\n\t * @property {Function} 'wje-input' Represents the Input component class.\n\t * @property {Function} 'wje-option' Represents the Option component class.\n\t * @property {Function} 'wje-options' Represents the Options component class.\n\t * @property {Function} 'wje-checkbox' Represents the Checkbox component class.\n\t */\n\tdependencies = {\n\t\t'wje-button': Button,\n\t\t'wje-popup': Popup,\n\t\t'wje-icon': Icon,\n\t\t'wje-label': Label,\n\t\t'wje-chip': Chip,\n\t\t'wje-input': Input,\n\t\t'wje-option': Option,\n\t\t'wje-options': Options,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tif (this.hasAttribute('multiple')) {\n\t\t\tconst formData = new FormData();\n\t\t\tvalue.forEach(v => formData.append(this.name, v));\n\t\t\tthis.internals.setFormValue(formData);\n\t\t} else {\n\t\t\tthis.internals.setFormValue(value);\n\t\t}\n\t}\n\n\t/**\n\t * Getter for the value attribute.\n\t * @returns {object} The value of the attribute.\n\t */\n\tget value() {\n\t\treturn this.selected;\n\t}\n\n\t/**\n\t * Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/**\n\t * Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/**\n\t * Getter for the invalid attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget invalid() {\n\t\treturn this.hasAttribute('invalid');\n\t}\n\n\t/**\n\t * Setter for the invalid attribute.\n\t * @param {boolean} isInvalid Whether the input is invalid.\n\t */\n\tset invalid(isInvalid) {\n\t\tif (isInvalid) this.setAttribute('invalid', '');\n\t\telse this.removeAttribute('invalid');\n\t}\n\n\t/**\n\t * Sets the maximum number of options allowed.\n\t * @param {string | number | null} value The value to set as the maximum number of options.\n\t * If null, the 'max-options' attribute will be removed.\n\t */\n\tset maxOptions(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('max-options', value);\n\t\t} else {\n\t\t\tthis.removeAttribute('max-options');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the maximum number of options allowed.\n\t * Parses the value of the 'max-options' attribute from the element and converts it to a number.\n\t * If the attribute is not present or cannot be converted to a valid number, defaults to 1.\n\t * @returns {number} The maximum number of options, or 0 if the attribute is not set or invalid.\n\t */\n\tget maxOptions() {\n\t\treturn +this.getAttribute('max-options') || 1;\n\t}\n\n\t/**\n\t * Getter for the form attribute.\n\t * @returns {HTMLFormElement} The form the input is associated with.\n\t */\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\t/**\n\t * Getter for the name attribute.\n\t * @returns {string} The name of the input.\n\t */\n\tget name() {\n\t\treturn this.getAttribute('name');\n\t}\n\n\t/**\n\t * Getter for the type attribute.\n\t * @returns {string} The type of the input.\n\t */\n\tget type() {\n\t\treturn this.localName;\n\t}\n\n\t/**\n\t * Getter for the validity attribute.\n\t * @returns {ValidityState} The validity state of the input.\n\t */\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\t/**\n\t * Getter for the validationMessage attribute.\n\t * @returns {string} The validation message of the input.\n\t */\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\t/**\n\t * Getter for the willValidate attribute.\n\t * @returns {boolean} Whether the input will be validated.\n\t */\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\t/**\n\t * @summary Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t */\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/**\n\t * @summary Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t */\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/**\n\t * Sets the label value.\n\t * @param {Array} value The selected value to set.\n\t */\n\tset selected(value) {\n\t\tthis._selected = value;\n\t}\n\n\t/**\n\t * Returns the selected value.\n\t * @returns {Array} The selected value.\n\t */\n\tget selected() {\n\t\treturn this.getSelected();\n\t}\n\n\t/**\n\t * Retrieves the complete list of options available for the component.\n\t * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.\n\t * If a `wje-options` element is present within the component, its loaded options are included in the merged list.\n\t * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.\n\t * @returns {Array<Object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.\n\t */\n\tget options() {\n\t\tif (this.querySelector('wje-options')) {\n\t\t\tconst allOptions = [...this.querySelector('wje-options').loadedOptions, ...this.#addedOptions, ...this.#htmlOptions]\n\n\t\t\treturn allOptions\n\t\t} else {\n\t\t\tconst allOptions = [...this.#addedOptions, ...this.#htmlOptions]\n\n\t\t\treturn Array.from(\n\t\t\t\tnew Map(allOptions.reverse().map(obj => [obj.value, obj])).values()\n\t\t\t).reverse();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the trigger value.\n\t * @param {string} value The trigger value to set.\n\t */\n\tset trigger(value) {\n\t\tthis.setAttribute('trigger', value);\n\t}\n\n\t/**\n\t * Returns the trigger value.\n\t * @returns {string} The trigger value.\n\t */\n\tget trigger() {\n\t\treturn this.getAttribute('trigger') || 'click';\n\t}\n\n\tclassName = 'Select';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['active', 'value', 'disabled', 'multiple', 'label', 'placeholder', 'max-height', 'max-options', 'variant', 'placement'];\n\t}\n\n\t/**\n\t * Whether the input is associated with a form.\n\t * @type {boolean}\n\t */\n\tstatic formAssociated = true;\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the component for the select.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tthis.classList.add('wje-placement', this.placement ? 'wje-' + this.placement : 'wje-start');\n\n\t\t// zakladny obalovac\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-select', this.variant || 'default');\n\n\t\t// wrapper pre label a inputWrapper\n\t\tlet wrapper = document.createElement('div');\n\t\twrapper.classList.add('wrapper');\n\t\twrapper.setAttribute('slot', 'anchor');\n\n\t\t// label\n\t\tlet label = document.createElement('wje-label');\n\t\tlabel.setAttribute('part', 'label');\n\t\tlabel.innerText = this.label || '';\n\n\t\t// obalovac pre input\n\t\tlet inputWrapper = document.createElement('div');\n\t\tinputWrapper.setAttribute('part', 'input-wrapper');\n\t\tinputWrapper.classList.add('input-wrapper');\n\n\t\tlet slotStart = document.createElement('div');\n\t\tslotStart.classList.add('slot-start');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.setAttribute('type', 'text');\n\t\tinput.setAttribute('part', 'input');\n\t\tinput.setAttribute('autocomplete', 'off');\n\t\tinput.setAttribute('readonly', '');\n\t\tinput.setAttribute('placeholder', this.placeholder || '');\n\n\t\tlet slotEnd = document.createElement('div');\n\t\tslotEnd.classList.add('slot-end');\n\n\t\tlet arrow = document.createElement('wje-icon');\n\t\tarrow.setAttribute('name', 'chevron-down');\n\t\tarrow.setAttribute('slot', 'arrow');\n\n\t\tlet chips = document.createElement('div');\n\t\tchips.classList.add('chips');\n\t\tchips.innerText = this.placeholder || '';\n\n\t\t// obalovac pre option a find\n\t\tlet optionsWrapper = document.createElement('div');\n\t\toptionsWrapper.setAttribute('part', 'options-wrapper');\n\t\toptionsWrapper.classList.add('options-wrapper');\n\t\toptionsWrapper.style.setProperty('height', this.maxHeight || 'auto');\n\n\t\tlet list = document.createElement('div');\n\t\tlist.classList.add('list');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet clear = document.createElement('wje-button');\n\t\tclear.setAttribute('fill', 'link');\n\t\tclear.setAttribute('part', 'clear');\n\t\tclear.setAttribute('stop-propagation', '');\n\n\t\tlet clearIcon = document.createElement('wje-icon');\n\t\tclearIcon.setAttribute('name', 'x');\n\n\t\tclear.appendChild(clearIcon);\n\n\t\t// vytvorime popup\n\t\tlet popup = document.createElement('wje-popup');\n\t\tpopup.setAttribute('placement', 'bottom-start');\n\t\tpopup.setAttribute('manual', '');\n\t\tpopup.setAttribute('size', '');\n\t\tpopup.setAttribute('part', 'popup');\n\n\t\tif (this.hasAttribute('disabled')) popup.setAttribute('disabled', '');\n\n\t\tif (this.variant === 'standard') {\n\t\t\tif (this.hasAttribute('label')) native.appendChild(label);\n\t\t} else {\n\t\t\twrapper.appendChild(label);\n\t\t}\n\n\t\tinputWrapper.appendChild(slotStart);\n\t\tinputWrapper.appendChild(input);\n\t\tif (this.hasAttribute('multiple')) inputWrapper.appendChild(chips);\n\n\t\tif (this.hasAttribute('clearable')) inputWrapper.appendChild(clear);\n\n\t\tinputWrapper.appendChild(slotEnd);\n\t\tinputWrapper.appendChild(arrow);\n\n\t\tlist.appendChild(slot);\n\n\t\tif (this.hasAttribute('find')) {\n\t\t\tlet find = document.createElement('wje-input');\n\t\t\tfind.setAttribute('variant', 'standard');\n\t\t\tfind.setAttribute('placeholder', 'Hľadať');\n\t\t\tfind.setAttribute('part', 'find');\n\t\t\tfind.clearable = true;\n\t\t\tfind.classList.add('find');\n\n\t\t\toptionsWrapper.appendChild(find);\n\n\t\t\tthis.findEl = find;\n\t\t}\n\n\t\tif (this.hasAttribute('lazy')) {\n\t\t\tevent.addListener(popup, 'wje-popup:show', null, (e) => {\n\t\t\t\tif (this._wasOppened) return;\n\t\t\t\tthis._wasOppened = true;\n\n\t\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\t\toptionsElement.setAttribute('lazy', '');\n\t\t\t\toptionsElement.setAttribute('attached', '');\n\t\t\t});\n\t\t} else {\n\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\toptionsElement?.setAttribute('attached', '');\n\t\t}\n\n\t\toptionsWrapper.appendChild(list);\n\n\t\twrapper.appendChild(inputWrapper);\n\n\t\tpopup.appendChild(wrapper);\n\t\tpopup.appendChild(optionsWrapper);\n\n\t\tif (this.trigger === 'click') popup.setAttribute('manual', '');\n\n\t\tnative.appendChild(popup);\n\n\t\tthis.native = native;\n\t\tthis.popup = popup;\n\t\tthis.labelElement = label;\n\t\tthis.slotStart = slotStart;\n\t\tthis.slotEnd = slotEnd;\n\t\tthis.input = input;\n\t\tthis.optionsWrapper = optionsWrapper;\n\t\tthis.chips = chips;\n\t\tthis.clear = clear;\n\t\tthis.list = list;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Performs actions and binds events after the component's markup and state are initialized.\n\t * Actions include setting up event listeners, managing option elements, handling focus and blur behaviors,\n\t * synchronizing the selected options, and managing a find functionality for filtering options.\n\t * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.\n\t */\n\tafterDraw() {\n\t\tthis.getAllOptions()?.forEach((option) => {\n\t\t\tthis.optionCheckSlot(option);\n\t\t});\n\n\t\tthis.#htmlOptions = Array.from(this.querySelectorAll(':scope > wje-option')).map((option) => {\n\t\t\treturn {\n\t\t\t\tvalue: option.value,\n\t\t\t\ttext: option.textContent.trim(),\n\t\t\t};\n\t\t})\n\n\t\tthis.input.addEventListener('focus', (e) => {\n\t\t\tthis.labelElement?.classList.add('fade');\n\t\t\tthis.native.classList.add('focused');\n\t\t});\n\n\t\tthis.input.addEventListener('blur', (e) => {\n\t\t\tthis.native.classList.remove('focused');\n\t\t\tif (!e.target.value) this.labelElement?.classList.remove('fade');\n\t\t});\n\n\t\tthis.addEventListener('wje-option:change', this.optionChange);\n\n\t\t// pridame event listener na kliknutie na button clear\n\t\tthis.clear?.addEventListener('wje-button:click', (e) => {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.selectedOptions = [];\n\n\t\t\tthis.getAllOptions().forEach((option) => {\n\t\t\t\toption.selected = false;\n\t\t\t});\n\t\t\tthis.selections();\n\n\t\t\te.stopPropagation();\n\t\t});\n\n\t\tthis.selectedOptions = this.getSelectedOptions();\n\t\tthis.selections(true);\n\n\t\tthis.list.addEventListener('wje-options:load', (e) => {\n\t\t\t// todo select options from this.selectedOptions\n\t\t\tthis.selectedOptions.forEach((option) => {\n\t\t\t\tthis.getAllOptions().forEach((el) => {\n\t\t\t\t\tif (el.value === option.value) {\n\t\t\t\t\t\tel.selected = true;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t})\n\n\t\t\tthis.list.scrollTo(0, 0);\n\t\t});\n\n\t\t// skontrolujeme ci ma select atribut find\n\t\tif (this.hasAttribute('find') && this.findEl instanceof HTMLElement) {\n\t\t\tevent.addListener(this.findEl, 'keyup', '', (e) => {\n\t\t\t\t// contains wj-options element with options\n\t\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\t\tif (optionsElement && optionsElement.hasAttribute('lazy')) {\n\t\t\t\t\t// pass search value to wj-options element and infinite scroll will handle the rest\n\t\t\t\t\toptionsElement.setAttribute('search', e.target.value);\n\t\t\t\t} else {\n\t\t\t\t\tlet value = e.target.value.trim().toLowerCase();\n\n\t\t\t\t\tthis.getAllOptions().forEach((option) => {\n\t\t\t\t\t\tif (option.textContent.trim().toLowerCase().includes(value)) option.style.display = 'block';\n\t\t\t\t\t\telse option.style.display = 'none';\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Handles the option change event.\n\t * @param {Event} e The event.\n\t */\n\toptionChange = (e) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tlet allOptions = this.getAllOptions();\n\n\t\tif (!this.hasAttribute('multiple')) {\n\t\t\tallOptions.forEach((option) => {\n\t\t\t\tif (option.value === e.target.value) {\n\t\t\t\t\tthis.processClickedOption(option);\n\t\t\t\t} else {\n\t\t\t\t\toption.selected = false;\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.popup.hide(false);\n\t\t} else {\n\t\t\tthis.processClickedOption(e.target, true);\n\t\t}\n\n\t\tthis.selections();\n\t};\n\n\t/**\n\t * Handles the selection and deselection of an option element.\n\t * @param {HTMLElement} option The option element that was clicked.\n\t * @param {boolean} [multiple] Indicates whether multiple selection is allowed.\n\t */\n\tprocessClickedOption = (option, multiple = false) => {\n\t\tconst isSelected = option.hasAttribute('selected');\n\t\toption.selected = !isSelected;\n\n\t\tif (isSelected) {\n\t\t\tthis.filterOutOption(option);\n\t\t} else {\n\t\t\tthis.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];\n\t\t}\n\t}\n\n\t/**\n\t * Filters out a specified option from the `selectedOptions` array.\n\t * This function removes an option from the `selectedOptions` array if its value\n\t * matches the value of the option provided as an argument. It allows for dynamically\n\t * updating the selected options by excluding the specified option.\n\t * @param {object} option The option to be removed from the `selectedOptions` array.\n\t * Should be an object containing a `value` property that is compared to the\n\t * `value` property of objects in the `selectedOptions` array.\n\t */\n\tfilterOutOption = (option) => {\n\t\tthis.selectedOptions = this.selectedOptions.filter((sOption) => {\n\t\t\treturn sOption.value !== option.value;\n\t\t});\n\t}\n\n\t/**\n\t * Returns all the options as HTML.\n\t * @returns {NodeList} The options as HTML.\n\t */\n\tgetAllOptions() {\n\t\treturn this.querySelectorAll('wje-option');\n\t}\n\n\t/**\n\t * Returns the selected options as HTML.\n\t * @returns {NodeList} The selected options as HTML.\n\t */\n\tgetSelectedOptions() {\n\t\treturn Array.from(this.querySelectorAll('wje-option[selected]'));\n\t}\n\n\t/**\n\t * Returns the selected options.\n\t * @returns {Array} The selected options.\n\t */\n\tgetSelected() {\n\t\treturn this.selectedOptions.map((option) => {\n\t\t\treturn {\n\t\t\t\tvalue: option.value,\n\t\t\t\ttext: this.#htmlSelectedItem(option.value) // option.textContent.trim(),\n\t\t\t};\n\t\t});\n\t}\n\n\t/**\n\t * Handles the selection change.\n\t * @param {Element[]} options The option that changed.\n\t * @param {number} length The length of the selected options.\n\t */\n\tselectionChanged(options = null, length = 0) {\n\t\tif (this.hasAttribute('multiple')) {\n\n\t\t\tthis.value = this.selectedOptions.map((el) => el.value).reverse();\n\n\t\t\tif (this.placeholder && length === 0) {\n\t\t\t\tthis.chips.innerHTML = this.placeholder;\n\t\t\t\tthis.input.value = '';\n\t\t\t} else {\n\t\t\t\tif (options !== null) Array.from(options).slice(0, +this.maxOptions).forEach(option => this.chips.appendChild(this.getChip(option)));\n\t\t\t\tif (this.counterEl instanceof HTMLElement || !this.maxOptions || length > +this.maxOptions) {\n\t\t\t\t\tthis.counter();\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tlet option = options?.at(0);\n\t\t\tlet value = (option && this.#htmlSelectedItem(option.value)) ?? \"\"  // option?.textContent.trim() || '';\n\t\t\tthis.value = this.selectedOptions?.map((el) => el.value)?.at(0);\n\t\t\tthis.input.value = value;\n\n\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\tthis.slotStart.innerHTML = '';\n\n\t\t\t\tlet optionSlotStart = option?.querySelector('wje-option > [slot=start]');\n\t\t\t\tif (optionSlotStart) {\n\t\t\t\t\tthis.slotStart.appendChild(optionSlotStart.cloneNode(true));\n\t\t\t\t}\n\n\t\t\t\tthis.slotEnd.innerHTML = '';\n\n\t\t\t\tlet optionSlotEnd = option?.querySelector('wje-option > [slot=end]');\n\t\t\t\tif (optionSlotEnd) {\n\t\t\t\t\tthis.slotEnd.appendChild(optionSlotEnd.cloneNode(true));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Updates the selected options and their corresponding chips.\n\t * @param {boolean} [silence] Determines whether to suppress the \"wje-select:change\" event.\n\t * @returns {void}\n\t * @description\n\t * This method fetches the currently selected options and updates the `selectedOptions` array.\n\t * It clears and rebuilds the chips representing the selected items in the UI.\n\t * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.\n\t * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.\n\t * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.\n\t * @example\n\t * // Call the method and allow event dispatch\n\t * selections();\n\t * @example\n\t * // Call the method without dispatching the event\n\t * selections(true);\n\t */\n\tselections(silence = false) {\n\t\tif (this.selectedOptions.length >= +this.maxOptions) {\n\t\t\tthis.counterEl = null;\n\t\t}\n\n\t\tif (this.chips) {\n\t\t\tthis.chips.innerHTML = '';\n\t\t}\n\n\t\tif (this.selectedOptions.length > 0) {\n\t\t\tthis.selectionChanged(this.selectedOptions, this.selectedOptions.length);\n\n\t\t} else {\n\t\t\tthis.selectionChanged();\n\t\t}\n\n\t\tif (silence) return;\n\t\tevent.dispatchCustomEvent(this, 'wje-select:change');\n\t}\n\n\t/**\n\t * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.\n\t * - If the number of selected items equals the maximum allowed, the counter element is removed.\n\t * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.\n\t */\n\tcounter() {\n\t\t// zmazanie counter (span)\n\t\tif (this.counterEl && this.value.length === +this.maxOptions) {\n\t\t\tthis.counterEl.remove();\n\t\t\tthis.counterEl = null;\n\t\t\treturn;\n\t\t}\n\n\t\t// ak counter nie je, tak ho vytvorime\n\t\tif (!this.counterEl) {\n\t\t\tthis.counterEl = document.createElement('span');\n\t\t\tthis.counterEl.classList.add('counter');\n\n\t\t\tthis.chips.appendChild(this.counterEl);\n\t\t}\n\n\t\t// nastavime hodnotu counter\n\t\tthis.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;\n\t}\n\n\t/**\n\t * Returns a chip element.\n\t * @param {Element} option The option to get the chip for.\n\t * @returns {Element} The chip element.\n\t */\n\tgetChip(option) {\n\t\tlet chip = document.createElement('wje-chip');\n\t\tchip.size = 'small';\n\t\tchip.removable = true;\n\t\tchip.round = true;\n\t\tchip.addEventListener('wje:chip-remove', this.removeChip);\n\t\tchip.option = option;\n\n\t\tlet label = document.createElement('wje-label');\n\t\tlabel.innerText = this.#htmlSelectedItem(option.value) // option.textContent.trim();\n\n\t\tchip.appendChild(label);\n\n\t\treturn chip;\n\t}\n\n\t/**\n\t * Handles the chip remove event.\n\t * @param {Event} e The event.\n\t */\n\tremoveChip = (e) => {\n\t\te.target.parentNode.removeChild(e.target);\n\t\tthis.processClickedOption(e.target.option, true);\n\t\tthis.selections();\n\t};\n\n\t/**\n\t * Generates an HTML option element based on the provided item and mapping.\n\t * @param {object} item The item to generate the option for.\n\t * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.\n\t * @param {string} [map.value] The property of the item to use for the option's value.\n\t * @param {string} [map.text] The property of the item to use for the option's text.\n\t * @returns {HTMLElement} The generated HTML option element.\n\t */\n\thtmlOption(item, map = { value: 'value', text: 'text' }) {\n\t\tlet option = document.createElement('wje-option');\n\n\t\tif (item[map.value] === null) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);\n\t\t}\n\n\t\tif (item[map.text] === null) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);\n\t\t}\n\n\t\toption.setAttribute('value', item[map.value] ?? '');\n\t\toption.innerText = item[map.text] ?? '';\n\n\t\tthis.#addedOptions.push({ [map.value]: item[map.value], [map.text]: item[map.text] });\n\t\treturn option;\n\t}\n\n\t/**\n\t * Adds an option to the select element.\n\t * @param {any} optionData The data for the option to be added.\n\t * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.\n\t * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.\n\t */\n\taddOption(optionData, silent = false, map = { value: 'value', text: 'text' }) {\n\t\tif (!optionData) return;\n\n\t\tconst optionsElement = this.querySelector('wje-options');\n\t\tif (optionsElement) {\n\t\t\toptionsElement.addOption(optionData, silent, map);\n\t\t\treturn;\n\t\t}\n\t\tlet option = this.htmlOption(optionData, map);\n\t\tthis.appendChild(option);\n\t}\n\n\t/**\n\t * Adds options to the select element.\n\t * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.\n\t * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.\n\t * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: \"value\", text: \"text\" }.\n\t */\n\taddOptions(optionsData, silent = false, map = { value: 'value', text: 'text' }) {\n\t\tif (!Array.isArray(optionsData)) {\n\t\t\tthis.addOption(optionsData, silent, map);\n\t\t} else {\n\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\tif (optionsElement) {\n\t\t\t\toptionsElement.addOptions(optionsData, silent, map);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\toptionsData.forEach((item) => {\n\t\t\t\tthis.addOption(item, silent, map);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Selects an option with the specified value.\n\t * @param {string} value The value of the option to be selected.\n\t * @param {boolean} [silent] Whether to suppress firing events.\n\t */\n\tselectOption(value, silent = false) {\n\t\tif (!value) return;\n\n\t\tlet option = this.querySelector(`wje-option[value=\"${value}\"]`);\n\n\t\tif (option) {\n\t\t\tthis.processClickedOption(option, this.hasAttribute('multiple'));\n\t\t}\n\n\t\tif (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);\n\t}\n\n\t/**\n\t * Selects one or multiple options in the select element.\n\t * @param {Array|any} values The value(s) of the option(s) to be selected.\n\t * @param {boolean} [silent] Whether to trigger the change event or not.\n\t */\n\tselectOptions(values, silent = false) {\n\t\tif (!Array.isArray(values)) {\n\t\t\tthis.selectOption(values, silent);\n\t\t} else {\n\t\t\tvalues.forEach((value) => {\n\t\t\t\tthis.selectOption(value, silent);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Processes the provided item to retrieve its corresponding value and text\n\t * based on the configuration of `wje-options`, then updates and returns\n\t * the selected item's HTML representation.\n\t * @param {any} item The input item for which the value and text are determined.\n\t * @returns {string} The HTML representation of the selected item's value.\n\t */\n\t#htmlSelectedItem(item) {\n\t\tconst keyValue = this.querySelector(\"wje-options\")?.itemValue ?? \"value\"\n\t\tconst textValue = this.querySelector(\"wje-options\")?.itemText ?? \"text\"\n\n\t\tconst value = this.options\n\t\t\t.find((option) => option[keyValue] === item)?.[textValue] ?? \"\";\n\n\t\treturn this.htmlSelectedItem(value);\n\t}\n\n\t/**\n\t * Returns the provided item.\n\t * @param {any} item The item to be returned.\n\t * @returns {any} The same item that was passed as input.\n\t */\n\thtmlSelectedItem(item) {\n\t\treturn item;\n\t}\n\n\t/**\n\t * @summary Callback function that is called when the custom element is associated with a form.\n\t * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n\t * @param {HTMLFormElement} form The form the custom element is associated with.\n\t */\n\tformAssociatedCallback(form) {\n\t\tif (form) {\n\t\t\tthis.internals.setFormValue(this.value);\n\t\t}\n\t}\n\n\t/**\n\t * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n\t * This method is responsible for resetting the value of the custom input element to its default value.\n\t * It also resets the form value and validity state in the form internals.\n\t * @function\n\t */\n\tformResetCallback() {\n\t\t// Set the value of the custom input element to its default value\n\t\tthis.value = this.defaultValue;\n\t\t// Reset the form value in the form internals to the default value\n\t\tthis.internals.setFormValue(this.defaultValue);\n\t\t// Reset the validity state in the form internals\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n\t * This method is responsible for restoring the value of the custom input element to its saved state.\n\t * It also restores the form value and validity state in the form internals to their saved states.\n\t * @param {object} state The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateRestoreCallback(state) {\n\t\t// Set the value of the custom input element to its saved value\n\t\tthis.value = state.value;\n\t\t// Restore the form value in the form internals to the saved value\n\t\tthis.internals.setFormValue(state.value);\n\t\t// Restore the validity state in the form internals to the saved state\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n\t * This method is responsible for saving the value of the custom input element.\n\t * @returns {object} The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateSaveCallback() {\n\t\treturn {\n\t\t\tvalue: this.value,\n\t\t};\n\t}\n\n\t/**\n\t * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n\t * This method is not implemented yet.\n\t * @param {boolean} disabled The new disabled state of the custom input element.\n\t * @function\n\t */\n\tformDisabledCallback(disabled) {\n\t\tconsole.warn('formDisabledCallback not implemented yet');\n\t\tthis.native?.classList.toggle('disabled', disabled);\n\t\tthis.toggleAttribute('disabled', disabled);\n\t}\n\n\t/**\n\t * Checks if all elements in the `elements` array are present in the `options` array based on their `option` property.\n\t * @param {Array} elements The array of elements to check. Each element should have an `option` property.\n\t * @param {Array} options The array of options to verify against.\n\t * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.\n\t */\n\tareAllElementsInOptions(elements, options) {\n\t\tif (elements.length === 0) return false;\n\n\t\treturn elements.every(el =>\n\t\t\toptions.some(opt => JSON.stringify(opt) === JSON.stringify(el.option))\n\t\t);\n\t}\n\n\t/**\n\t * Clones and appends an icon from a template with slot \"check\" to the given option element.\n\t * @param {HTMLElement} option The target option element where the \"check\" icon will be added.\n\t * @returns {void}\n\t */\n\toptionCheckSlot(option) {\n\t\tlet icon = this.querySelector('template')?.content.querySelector(`[slot=\"check\"]`);\n\t\tif (!icon) {\n\t\t\tconsole.warn(`Icon with slot \"check\" was not found.`);\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconClone = icon.cloneNode(true);\n\t\toption.append(iconClone);\n\t}\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"wje-select.js","sources":["../packages/wje-select/select.element.js","../packages/wje-select/select.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Button from '../wje-button/button.js';\nimport Popup from '../wje-popup/popup.js';\nimport Icon from '../wje-icon/icon.js';\nimport Label from '../wje-label/label.js';\nimport Chip from '../wje-chip/chip.js';\nimport Input from '../wje-input/input.js';\nimport Option from '../wje-option/option.js';\nimport Options from '../wje-options/options.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Select` is a custom web component that represents a select input.\n * @summary This element represents a select input.\n * @documentation https://elements.webjet.sk/components/select\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the select.\n * @slot anchor - The slot for the anchor.\n * @slot arrow - The slot for the arrow.\n * @csspart native - The native select wrapper.\n * @csspart input - The input field.\n * @csspart clear - The clear button.\n * @property {Array} _selected - An array to store selected items.\n * @property {HTMLElement|null} counterEl - A reference to the counter element, initially null.\n * @property {ElementInternals} internals - The internal element API for managing state and attributes.\n * @property {number} maxOptions - The maximum number of options allowed.\n * @property {boolean} _wasOppened - Tracks whether the select element was previously opened, initially false.\n * @cssproperty [--wje-select-border-width=1px] - Specifies the width of the border around the select component. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`).\n * @cssproperty [--wje-select-border-style=solid] - Defines the style of the border for the select component. Accepts standard CSS border styles, such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-select-border-color=var(--wje-border-color)] - Sets the color of the border for the select component. Accepts any valid CSS color value, including color variables, named colors, and hex values.\n * @cssproperty [--wje-select-options-border-width=1px] - Specifies the width of the border for the select options dropdown. Accepts any valid CSS length unit.\n * @cssproperty [--wje-select-options-border-style=var(--wje-border-style)] - Defines the border style for the select options dropdown. Inherits from a defined CSS variable for consistency.\n * @cssproperty [--wje-select-options-border-color=var(--wje-border-color)] - Sets the border color for the select options dropdown. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-background=var(--wje-background)] - Specifies the background color of the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-line-height=20px] - Defines the line height for the text within the select component. Accepts any valid CSS length value, ensuring consistent vertical alignment.\n * @cssproperty [--wje-select-color=var(--wje-color)] - Sets the text color for the select component. Accepts any valid CSS color value.\n * @cssproperty [--wje-select-border-radius=var(--wje-border-radius-medium)] - Specifies the border radius for the select component.Determines the roundness of the corners and accepts any valid CSS length unit or variable.\n * @tag wje-select\n */\n\nexport default class Select extends WJElement {\n\t#addedOptions = []\n\t#htmlOptions = []\n\t/**\n\t * Constructor for the Select class.\n\t * @class\n\t * @description Initializes the Select component.\n\t * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.\n\t * It also tracks whether the select element was previously opened.\n\t * @class\n\t * @augments {WJElement}\n\t * @memberof Select\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\t/**\n\t\t * @type {Array}\n\t\t * @description An array to store selected items.\n\t\t */\n\t\tthis._selected = [];\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the counter element, initially null.\n\t\t * @private\n\t\t */\n\t\tthis.counterEl = null;\n\n\t\t/**\n\t\t * @type {ElementInternals}\n\t\t * @description The internal element API for managing state and attributes.\n\t\t * @private\n\t\t * @readonly\n\t\t * @constant\n\t\t * @default {ElementInternals} this.attachInternals()\n\t\t * @description Attaches the internals to the element.\n\t\t */\n\t\tthis.internals = this.attachInternals();\n\n\t\t/**\n\t\t * @type {boolean}\n\t\t * @description Tracks whether the select element was previously opened, initially false.\n\t\t * @private\n\t\t * @default {boolean} false\n\t\t */\n\t\tthis._wasOppened = false;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the native select element, initially null.\n\t\t */\n\t\tthis.native = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the popup element, initially null.\n\t\t */\n\t\tthis.popup = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the label element, initially null.\n\t\t */\n\t\tthis.labelElement = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the slot start element, initially null.\n\t\t */\n\t\tthis.slotStart = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the slot end element, initially null.\n\t\t */\n\t\tthis.slotEnd = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the input element, initially null.\n\t\t */\n\t\tthis.input = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the options wrapper element, initially null.\n\t\t */\n\t\tthis.optionsWrapper = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the chips element, initially null.\n\t\t */\n\t\tthis.chips = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the clear button element, initially null.\n\t\t */\n\t\tthis.clear = null;\n\n\t\t/**\n\t\t * @type {HTMLElement|null}\n\t\t * @description A reference to the list element, initially null.\n\t\t */\n\t\tthis.list = null;\n\n\t\tthis.selectedOptions = []\n\t}\n\n\t/**\n\t * An object representing component dependencies with their respective classes.\n\t * Each property in the object maps a custom component name (as a string key)\n\t * to its corresponding class or constructor.\n\t * @typedef {{[key: string]: Function}} Dependencies\n\t * @property {Function} 'wje-button' Represents the Button component class.\n\t * @property {Function} 'wje-popup' Represents the Popup component class.\n\t * @property {Function} 'wje-icon' Represents the Icon component class.\n\t * @property {Function} 'wje-label' Represents the Label component class.\n\t * @property {Function} 'wje-chip' Represents the Chip component class.\n\t * @property {Function} 'wje-input' Represents the Input component class.\n\t * @property {Function} 'wje-option' Represents the Option component class.\n\t * @property {Function} 'wje-options' Represents the Options component class.\n\t * @property {Function} 'wje-checkbox' Represents the Checkbox component class.\n\t */\n\tdependencies = {\n\t\t'wje-button': Button,\n\t\t'wje-popup': Popup,\n\t\t'wje-icon': Icon,\n\t\t'wje-label': Label,\n\t\t'wje-chip': Chip,\n\t\t'wje-input': Input,\n\t\t'wje-option': Option,\n\t\t'wje-options': Options,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tif (this.hasAttribute('multiple')) {\n\t\t\tconst formData = new FormData();\n\t\t\tvalue.forEach(v => formData.append(this.name, v));\n\t\t\tthis.internals.setFormValue(formData);\n\t\t} else {\n\t\t\tthis.internals.setFormValue(value);\n\t\t}\n\t}\n\n\t/**\n\t * Getter for the value attribute.\n\t * @returns {object} The value of the attribute.\n\t */\n\tget value() {\n\t\treturn this.selected;\n\t}\n\n\t/**\n\t * Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/**\n\t * Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/**\n\t * Getter for the invalid attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget invalid() {\n\t\treturn this.hasAttribute('invalid');\n\t}\n\n\t/**\n\t * Setter for the invalid attribute.\n\t * @param {boolean} isInvalid Whether the input is invalid.\n\t */\n\tset invalid(isInvalid) {\n\t\tif (isInvalid) this.setAttribute('invalid', '');\n\t\telse this.removeAttribute('invalid');\n\t}\n\n\t/**\n\t * Sets the maximum number of options allowed.\n\t * @param {string | number | null} value The value to set as the maximum number of options.\n\t * If null, the 'max-options' attribute will be removed.\n\t */\n\tset maxOptions(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('max-options', value);\n\t\t} else {\n\t\t\tthis.removeAttribute('max-options');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the maximum number of options allowed.\n\t * Parses the value of the 'max-options' attribute from the element and converts it to a number.\n\t * If the attribute is not present or cannot be converted to a valid number, defaults to 1.\n\t * @returns {number} The maximum number of options, or 0 if the attribute is not set or invalid.\n\t */\n\tget maxOptions() {\n\t\treturn +this.getAttribute('max-options') || 1;\n\t}\n\n\t/**\n\t * Getter for the form attribute.\n\t * @returns {HTMLFormElement} The form the input is associated with.\n\t */\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\t/**\n\t * Getter for the name attribute.\n\t * @returns {string} The name of the input.\n\t */\n\tget name() {\n\t\treturn this.getAttribute('name');\n\t}\n\n\t/**\n\t * Getter for the type attribute.\n\t * @returns {string} The type of the input.\n\t */\n\tget type() {\n\t\treturn this.localName;\n\t}\n\n\t/**\n\t * Getter for the validity attribute.\n\t * @returns {ValidityState} The validity state of the input.\n\t */\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\t/**\n\t * Getter for the validationMessage attribute.\n\t * @returns {string} The validation message of the input.\n\t */\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\t/**\n\t * Getter for the willValidate attribute.\n\t * @returns {boolean} Whether the input will be validated.\n\t */\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\t/**\n\t * @summary Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t */\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/**\n\t * @summary Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t */\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/**\n\t * Sets the label value.\n\t * @param {Array} value The selected value to set.\n\t */\n\tset selected(value) {\n\t\tthis._selected = value;\n\t}\n\n\t/**\n\t * Returns the selected value.\n\t * @returns {Array} The selected value.\n\t */\n\tget selected() {\n\t\treturn this.getSelected();\n\t}\n\n\t/**\n\t * Retrieves the complete list of options available for the component.\n\t * The options are determined by combining elements from various sources, including loaded options, added options, and HTML-sourced options.\n\t * If a `wje-options` element is present within the component, its loaded options are included in the merged list.\n\t * In the absence of a `wje-options` element, duplicates among the added and HTML options are removed, retaining their order.\n\t * @returns {Array<Object>} An array containing all the available options, combining the loaded, added, and HTML-based options, with duplicates removed where applicable.\n\t */\n\tget options() {\n\t\tif (this.querySelector('wje-options')) {\n\t\t\tconst allOptions = [...this.querySelector('wje-options').loadedOptions, ...this.#addedOptions, ...this.#htmlOptions]\n\n\t\t\treturn allOptions\n\t\t} else {\n\t\t\tconst allOptions = [...this.#addedOptions, ...this.#htmlOptions]\n\n\t\t\treturn Array.from(\n\t\t\t\tnew Map(allOptions.reverse().map(obj => [obj.value, obj])).values()\n\t\t\t).reverse();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the trigger value.\n\t * @param {string} value The trigger value to set.\n\t */\n\tset trigger(value) {\n\t\tthis.setAttribute('trigger', value);\n\t}\n\n\t/**\n\t * Returns the trigger value.\n\t * @returns {string} The trigger value.\n\t */\n\tget trigger() {\n\t\treturn this.getAttribute('trigger') || 'click';\n\t}\n\n\tclassName = 'Select';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['active', 'value', 'disabled', 'multiple', 'label', 'placeholder', 'max-height', 'max-options', 'variant', 'placement'];\n\t}\n\n\t/**\n\t * Whether the input is associated with a form.\n\t * @type {boolean}\n\t */\n\tstatic formAssociated = true;\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the component for the select.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tthis.classList.add('wje-placement', this.placement ? 'wje-' + this.placement : 'wje-start');\n\n\t\t// zakladny obalovac\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-select', this.variant || 'default');\n\n\t\t// wrapper pre label a inputWrapper\n\t\tlet wrapper = document.createElement('div');\n\t\twrapper.classList.add('wrapper');\n\t\twrapper.setAttribute('slot', 'anchor');\n\n\t\t// label\n\t\tlet label = document.createElement('wje-label');\n\t\tlabel.setAttribute('part', 'label');\n\t\tlabel.innerText = this.label || '';\n\n\t\t// obalovac pre input\n\t\tlet inputWrapper = document.createElement('div');\n\t\tinputWrapper.setAttribute('part', 'input-wrapper');\n\t\tinputWrapper.classList.add('input-wrapper');\n\n\t\tlet slotStart = document.createElement('div');\n\t\tslotStart.classList.add('slot-start');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.setAttribute('type', 'text');\n\t\tinput.setAttribute('part', 'input');\n\t\tinput.setAttribute('autocomplete', 'off');\n\t\tinput.setAttribute('readonly', '');\n\t\tinput.setAttribute('placeholder', this.placeholder || '');\n\n\t\tlet slotEnd = document.createElement('div');\n\t\tslotEnd.classList.add('slot-end');\n\n\t\tlet arrow = document.createElement('wje-icon');\n\t\tarrow.setAttribute('name', 'chevron-down');\n\t\tarrow.setAttribute('slot', 'arrow');\n\n\t\tlet chips = document.createElement('div');\n\t\tchips.classList.add('chips');\n\t\tchips.innerText = this.placeholder || '';\n\n\t\t// obalovac pre option a find\n\t\tlet optionsWrapper = document.createElement('div');\n\t\toptionsWrapper.setAttribute('part', 'options-wrapper');\n\t\toptionsWrapper.classList.add('options-wrapper');\n\t\toptionsWrapper.style.setProperty('height', this.maxHeight || 'auto');\n\n\t\tlet list = document.createElement('div');\n\t\tlist.classList.add('list');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet clear = document.createElement('wje-button');\n\t\tclear.setAttribute('fill', 'link');\n\t\tclear.setAttribute('part', 'clear');\n\t\tclear.setAttribute('stop-propagation', '');\n\n\t\tlet clearIcon = document.createElement('wje-icon');\n\t\tclearIcon.setAttribute('name', 'x');\n\n\t\tclear.appendChild(clearIcon);\n\n\t\t// vytvorime popup\n\t\tlet popup = document.createElement('wje-popup');\n\t\tpopup.setAttribute('placement', 'bottom-start');\n\t\tpopup.setAttribute('manual', '');\n\t\tpopup.setAttribute('size', '');\n\t\tpopup.setAttribute('part', 'popup');\n\n\t\tif (this.hasAttribute('disabled')) popup.setAttribute('disabled', '');\n\n\t\tif (this.variant === 'standard') {\n\t\t\tif (this.hasAttribute('label')) native.appendChild(label);\n\t\t} else {\n\t\t\twrapper.appendChild(label);\n\t\t}\n\n\t\tinputWrapper.appendChild(slotStart);\n\t\tinputWrapper.appendChild(input);\n\n\t\tif (this.hasAttribute('multiple')) inputWrapper.appendChild(chips);\n\n\t\tif (this.hasAttribute('clearable')) inputWrapper.appendChild(clear);\n\n\t\tinputWrapper.appendChild(slotEnd);\n\t\tinputWrapper.appendChild(arrow);\n\n\t\tlist.appendChild(slot);\n\n\t\tif (this.hasAttribute('find')) {\n\t\t\tlet find = document.createElement('wje-input');\n\t\t\tfind.setAttribute('variant', 'standard');\n\t\t\tfind.setAttribute('placeholder', 'Hľadať');\n\t\t\tfind.setAttribute('part', 'find');\n\t\t\tfind.clearable = true;\n\t\t\tfind.classList.add('find');\n\n\t\t\toptionsWrapper.appendChild(find);\n\n\t\t\tthis.findEl = find;\n\t\t}\n\n\t\tif (this.hasAttribute('lazy')) {\n\t\t\tevent.addListener(popup, 'wje-popup:show', null, (e) => {\n\t\t\t\tif (this._wasOppened) return;\n\t\t\t\tthis._wasOppened = true;\n\n\t\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\t\toptionsElement.setAttribute('lazy', '');\n\t\t\t\toptionsElement.setAttribute('attached', '');\n\t\t\t});\n\t\t} else {\n\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\toptionsElement?.setAttribute('attached', '');\n\t\t}\n\n\t\toptionsWrapper.appendChild(list);\n\n\t\twrapper.appendChild(inputWrapper);\n\n\t\tpopup.appendChild(wrapper);\n\t\tpopup.appendChild(optionsWrapper);\n\n\t\tif (this.trigger === 'click') popup.setAttribute('manual', '');\n\n\t\tnative.appendChild(popup);\n\n\t\tthis.native = native;\n\t\tthis.popup = popup;\n\t\tthis.labelElement = label;\n\t\tthis.slotStart = slotStart;\n\t\tthis.slotEnd = slotEnd;\n\t\tthis.input = input;\n\t\tthis.optionsWrapper = optionsWrapper;\n\t\tthis.chips = chips;\n\t\tthis.clear = clear;\n\t\tthis.list = list;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Performs actions and binds events after the component's markup and state are initialized.\n\t * Actions include setting up event listeners, managing option elements, handling focus and blur behaviors,\n\t * synchronizing the selected options, and managing a find functionality for filtering options.\n\t * @returns {void} Does not return a value. The method operates by updating the state and behavior of the component.\n\t */\n\tafterDraw() {\n\t\tthis.getAllOptions()?.forEach((option) => {\n\t\t\tthis.optionCheckSlot(option);\n\t\t});\n\n\t\tthis.#htmlOptions = Array.from(this.querySelectorAll(':scope > wje-option')).map((option) => {\n\t\t\treturn {\n\t\t\t\tvalue: option.value,\n\t\t\t\ttext: option.textContent.trim(),\n\t\t\t};\n\t\t})\n\n\t\tthis.input.addEventListener('focus', (e) => {\n\t\t\tthis.labelElement?.classList.add('fade');\n\t\t\tthis.native.classList.add('focused');\n\t\t});\n\n\t\tthis.input.addEventListener('blur', (e) => {\n\t\t\tthis.native.classList.remove('focused');\n\t\t\tif (!e.target.value) this.labelElement?.classList.remove('fade');\n\t\t});\n\n\t\tthis.addEventListener('wje-option:change', this.optionChange);\n\n\t\t// pridame event listener na kliknutie na button clear\n\t\tthis.clear?.addEventListener('wje-button:click', (e) => {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.selectedOptions = [];\n\n\t\t\tthis.getAllOptions().forEach((option) => {\n\t\t\t\toption.selected = false;\n\t\t\t});\n\t\t\tthis.selections();\n\n\t\t\te.stopPropagation();\n\t\t});\n\n\t\tthis.selectedOptions = this.getSelectedOptions();\n\t\tthis.selections(true);\n\n\t\tthis.list.addEventListener('wje-options:load', (e) => {\n\t\t\t// todo select options from this.selectedOptions\n\t\t\tthis.selectedOptions.forEach((option) => {\n\t\t\t\tthis.getAllOptions().forEach((el) => {\n\t\t\t\t\tif (el.value === option.value) {\n\t\t\t\t\t\tel.selected = true;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t})\n\n\t\t\tthis.list.scrollTo(0, 0);\n\t\t});\n\n\t\t// skontrolujeme ci ma select atribut find\n\t\tif (this.hasAttribute('find') && this.findEl instanceof HTMLElement) {\n\t\t\tevent.addListener(this.findEl, 'keyup', '', (e) => {\n\t\t\t\t// contains wj-options element with options\n\t\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\t\tif (optionsElement && optionsElement.hasAttribute('lazy')) {\n\t\t\t\t\t// pass search value to wj-options element and infinite scroll will handle the rest\n\t\t\t\t\toptionsElement.setAttribute('search', e.target.value);\n\t\t\t\t} else {\n\t\t\t\t\tlet value = e.target.value.trim().toLowerCase();\n\n\t\t\t\t\tthis.getAllOptions().forEach((option) => {\n\t\t\t\t\t\tif (option.textContent.trim().toLowerCase().includes(value)) option.style.display = 'block';\n\t\t\t\t\t\telse option.style.display = 'none';\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Handles the option change event.\n\t * @param {Event} e The event.\n\t */\n\toptionChange = (e) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tlet allOptions = this.getAllOptions();\n\n\t\tif (!this.hasAttribute('multiple')) {\n\t\t\tallOptions.forEach((option) => {\n\t\t\t\tif (option.value === e.target.value) {\n\t\t\t\t\tthis.processClickedOption(option);\n\t\t\t\t} else {\n\t\t\t\t\toption.selected = false;\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.popup.hide(false);\n\t\t} else {\n\t\t\tthis.processClickedOption(e.target, true);\n\t\t}\n\n\t\tthis.selections();\n\t};\n\n\t/**\n\t * Handles the selection and deselection of an option element.\n\t * @param {HTMLElement} option The option element that was clicked.\n\t * @param {boolean} [multiple] Indicates whether multiple selection is allowed.\n\t */\n\tprocessClickedOption = (option, multiple = false) => {\n\t\tconst isSelected = option.hasAttribute('selected');\n\t\toption.selected = !isSelected;\n\n\t\tif (isSelected) {\n\t\t\tthis.filterOutOption(option);\n\t\t} else {\n\t\t\tthis.selectedOptions = multiple ? [...this.selectedOptions, option] : [option];\n\t\t}\n\t}\n\n\t/**\n\t * Filters out a specified option from the `selectedOptions` array.\n\t * This function removes an option from the `selectedOptions` array if its value\n\t * matches the value of the option provided as an argument. It allows for dynamically\n\t * updating the selected options by excluding the specified option.\n\t * @param {object} option The option to be removed from the `selectedOptions` array.\n\t * Should be an object containing a `value` property that is compared to the\n\t * `value` property of objects in the `selectedOptions` array.\n\t */\n\tfilterOutOption = (option) => {\n\t\tthis.selectedOptions = this.selectedOptions.filter((sOption) => {\n\t\t\treturn sOption.value !== option.value;\n\t\t});\n\t}\n\n\t/**\n\t * Returns all the options as HTML.\n\t * @returns {NodeList} The options as HTML.\n\t */\n\tgetAllOptions() {\n\t\treturn this.querySelectorAll('wje-option');\n\t}\n\n\t/**\n\t * Returns the selected options as HTML.\n\t * @returns {NodeList} The selected options as HTML.\n\t */\n\tgetSelectedOptions() {\n\t\treturn Array.from(this.querySelectorAll('wje-option[selected]'));\n\t}\n\n\t/**\n\t * Returns the selected options.\n\t * @returns {Array} The selected options.\n\t */\n\tgetSelected() {\n\t\treturn this.selectedOptions.map((option) => {\n\t\t\treturn {\n\t\t\t\tvalue: option.value,\n\t\t\t\ttext: this.#htmlSelectedItem(option.value) // option.textContent.trim(),\n\t\t\t};\n\t\t});\n\t}\n\n\t/**\n\t * Handles the selection change.\n\t * @param {Element[]} options The option that changed.\n\t * @param {number} length The length of the selected options.\n\t */\n\tselectionChanged(options = null, length = 0) {\n\t\tif (this.hasAttribute('multiple')) {\n\n\t\t\tthis.value = this.selectedOptions.map((el) => el.value).reverse();\n\n\t\t\tif (this.placeholder && length === 0) {\n\t\t\t\tthis.chips.innerHTML = this.placeholder;\n\t\t\t\tthis.input.value = '';\n\t\t\t} else {\n\t\t\t\tif (options !== null) Array.from(options).slice(0, +this.maxOptions).forEach(option => this.chips.appendChild(this.getChip(option)));\n\t\t\t\tif (this.counterEl instanceof HTMLElement || !this.maxOptions || length > +this.maxOptions) {\n\t\t\t\t\tthis.counter();\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tlet option = options?.at(0);\n\t\t\tlet value = (option && this.#htmlSelectedItem(option.value)) ?? \"\"  // option?.textContent.trim() || '';\n\t\t\tthis.value = this.selectedOptions?.map((el) => el.value)?.at(0);\n\t\t\tthis.input.value = value;\n\n\t\t\tif (option && option instanceof HTMLElement) {\n\t\t\t\tthis.slotStart.innerHTML = '';\n\n\t\t\t\tlet optionSlotStart = option?.querySelector('wje-option > [slot=start]');\n\t\t\t\tif (optionSlotStart) {\n\t\t\t\t\tthis.slotStart.appendChild(optionSlotStart.cloneNode(true));\n\t\t\t\t}\n\n\t\t\t\tthis.slotEnd.innerHTML = '';\n\n\t\t\t\tlet optionSlotEnd = option?.querySelector('wje-option > [slot=end]');\n\t\t\t\tif (optionSlotEnd) {\n\t\t\t\t\tthis.slotEnd.appendChild(optionSlotEnd.cloneNode(true));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Updates the selected options and their corresponding chips.\n\t * @param {boolean} [silence] Determines whether to suppress the \"wje-select:change\" event.\n\t * @returns {void}\n\t * @description\n\t * This method fetches the currently selected options and updates the `selectedOptions` array.\n\t * It clears and rebuilds the chips representing the selected items in the UI.\n\t * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.\n\t * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.\n\t * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.\n\t * @example\n\t * // Call the method and allow event dispatch\n\t * selections();\n\t * @example\n\t * // Call the method without dispatching the event\n\t * selections(true);\n\t */\n\tselections(silence = false) {\n\t\tif (this.selectedOptions.length >= +this.maxOptions) {\n\t\t\tthis.counterEl = null;\n\t\t}\n\n\t\tif (this.chips) {\n\t\t\tthis.chips.innerHTML = '';\n\t\t}\n\n\t\tif (this.selectedOptions.length > 0) {\n\t\t\tthis.selectionChanged(this.selectedOptions, this.selectedOptions.length);\n\n\t\t} else {\n\t\t\tthis.selectionChanged();\n\t\t}\n\n\t\tif (silence) return;\n\t\tevent.dispatchCustomEvent(this, 'wje-select:change');\n\t}\n\n\t/**\n\t * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.\n\t * - If the number of selected items equals the maximum allowed, the counter element is removed.\n\t * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.\n\t */\n\tcounter() {\n\t\t// zmazanie counter (span)\n\t\tif (this.counterEl && this.value.length === +this.maxOptions) {\n\t\t\tthis.counterEl.remove();\n\t\t\tthis.counterEl = null;\n\t\t\treturn;\n\t\t}\n\n\t\t// ak counter nie je, tak ho vytvorime\n\t\tif (!this.counterEl) {\n\t\t\tthis.counterEl = document.createElement('span');\n\t\t\tthis.counterEl.classList.add('counter');\n\n\t\t\tthis.chips.appendChild(this.counterEl);\n\t\t}\n\n\t\t// nastavime hodnotu counter\n\t\tthis.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;\n\t}\n\n\t/**\n\t * Returns a chip element.\n\t * @param {Element} option The option to get the chip for.\n\t * @returns {Element} The chip element.\n\t */\n\tgetChip(option) {\n\t\tlet chip = document.createElement('wje-chip');\n\t\tchip.size = 'small';\n\t\tchip.removable = true;\n\t\tchip.round = true;\n\t\tchip.addEventListener('wje:chip-remove', this.removeChip);\n\t\tchip.option = option;\n\n\t\tlet label = document.createElement('wje-label');\n\t\tlabel.innerText = this.#htmlSelectedItem(option.value) // option.textContent.trim();\n\n\t\tchip.appendChild(label);\n\n\t\treturn chip;\n\t}\n\n\t/**\n\t * Handles the chip remove event.\n\t * @param {Event} e The event.\n\t */\n\tremoveChip = (e) => {\n\t\te.target.parentNode.removeChild(e.target);\n\t\tthis.processClickedOption(e.target.option, true);\n\t\tthis.selections();\n\t};\n\n\t/**\n\t * Generates an HTML option element based on the provided item and mapping.\n\t * @param {object} item The item to generate the option for.\n\t * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.\n\t * @param {string} [map.value] The property of the item to use for the option's value.\n\t * @param {string} [map.text] The property of the item to use for the option's text.\n\t * @returns {HTMLElement} The generated HTML option element.\n\t */\n\thtmlOption(item, map = { value: 'value', text: 'text' }) {\n\t\tlet option = document.createElement('wje-option');\n\n\t\tif (item[map.value] === null) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);\n\t\t}\n\n\t\tif (item[map.text] === null) {\n\t\t\tconsole.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);\n\t\t}\n\n\t\toption.setAttribute('value', item[map.value] ?? '');\n\t\toption.innerText = item[map.text] ?? '';\n\n\t\tthis.#addedOptions.push({ [map.value]: item[map.value], [map.text]: item[map.text] });\n\t\treturn option;\n\t}\n\n\t/**\n\t * Adds an option to the select element.\n\t * @param {any} optionData The data for the option to be added.\n\t * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.\n\t * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.\n\t */\n\taddOption(optionData, silent = false, map = { value: 'value', text: 'text' }) {\n\t\tif (!optionData) return;\n\n\t\tconst optionsElement = this.querySelector('wje-options');\n\t\tif (optionsElement) {\n\t\t\toptionsElement.addOption(optionData, silent, map);\n\t\t\treturn;\n\t\t}\n\t\tlet option = this.htmlOption(optionData, map);\n\t\tthis.appendChild(option);\n\t}\n\n\t/**\n\t * Adds options to the select element.\n\t * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.\n\t * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.\n\t * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: \"value\", text: \"text\" }.\n\t */\n\taddOptions(optionsData, silent = false, map = { value: 'value', text: 'text' }) {\n\t\tif (!Array.isArray(optionsData)) {\n\t\t\tthis.addOption(optionsData, silent, map);\n\t\t} else {\n\t\t\tconst optionsElement = this.querySelector('wje-options');\n\t\t\tif (optionsElement) {\n\t\t\t\toptionsElement.addOptions(optionsData, silent, map);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\toptionsData.forEach((item) => {\n\t\t\t\tthis.addOption(item, silent, map);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Selects an option with the specified value.\n\t * @param {string} value The value of the option to be selected.\n\t * @param {boolean} [silent] Whether to suppress firing events.\n\t */\n\tselectOption(value, silent = false) {\n\t\tif (!value) return;\n\n\t\tlet option = this.querySelector(`wje-option[value=\"${value}\"]`);\n\n\t\tif (option) {\n\t\t\tthis.processClickedOption(option, this.hasAttribute('multiple'));\n\t\t}\n\n\t\tif (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);\n\t}\n\n\t/**\n\t * Selects one or multiple options in the select element.\n\t * @param {Array|any} values The value(s) of the option(s) to be selected.\n\t * @param {boolean} [silent] Whether to trigger the change event or not.\n\t */\n\tselectOptions(values, silent = false) {\n\t\tif (!Array.isArray(values)) {\n\t\t\tthis.selectOption(values, silent);\n\t\t} else {\n\t\t\tvalues.forEach((value) => {\n\t\t\t\tthis.selectOption(value, silent);\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Processes the provided item to retrieve its corresponding value and text\n\t * based on the configuration of `wje-options`, then updates and returns\n\t * the selected item's HTML representation.\n\t * @param {any} item The input item for which the value and text are determined.\n\t * @returns {string} The HTML representation of the selected item's value.\n\t */\n\t#htmlSelectedItem(item) {\n\t\tconst keyValue = this.querySelector(\"wje-options\")?.itemValue ?? \"value\"\n\t\tconst textValue = this.querySelector(\"wje-options\")?.itemText ?? \"text\"\n\n\t\tconst value = this.options\n\t\t\t.find((option) => option[keyValue] === item)?.[textValue] ?? \"\";\n\n\t\treturn this.htmlSelectedItem(value);\n\t}\n\n\t/**\n\t * Returns the provided item.\n\t * @param {any} item The item to be returned.\n\t * @returns {any} The same item that was passed as input.\n\t */\n\thtmlSelectedItem(item) {\n\t\treturn item;\n\t}\n\n\t/**\n\t * @summary Callback function that is called when the custom element is associated with a form.\n\t * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n\t * @param {HTMLFormElement} form The form the custom element is associated with.\n\t */\n\tformAssociatedCallback(form) {\n\t\tif (form) {\n\t\t\tthis.internals.setFormValue(this.value);\n\t\t}\n\t}\n\n\t/**\n\t * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n\t * This method is responsible for resetting the value of the custom input element to its default value.\n\t * It also resets the form value and validity state in the form internals.\n\t * @function\n\t */\n\tformResetCallback() {\n\t\t// Set the value of the custom input element to its default value\n\t\tthis.value = this.defaultValue;\n\t\t// Reset the form value in the form internals to the default value\n\t\tthis.internals.setFormValue(this.defaultValue);\n\t\t// Reset the validity state in the form internals\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n\t * This method is responsible for restoring the value of the custom input element to its saved state.\n\t * It also restores the form value and validity state in the form internals to their saved states.\n\t * @param {object} state The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateRestoreCallback(state) {\n\t\t// Set the value of the custom input element to its saved value\n\t\tthis.value = state.value;\n\t\t// Restore the form value in the form internals to the saved value\n\t\tthis.internals.setFormValue(state.value);\n\t\t// Restore the validity state in the form internals to the saved state\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n\t * This method is responsible for saving the value of the custom input element.\n\t * @returns {object} The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateSaveCallback() {\n\t\treturn {\n\t\t\tvalue: this.value,\n\t\t};\n\t}\n\n\t/**\n\t * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n\t * This method is not implemented yet.\n\t * @param {boolean} disabled The new disabled state of the custom input element.\n\t * @function\n\t */\n\tformDisabledCallback(disabled) {\n\t\tconsole.warn('formDisabledCallback not implemented yet');\n\t\tthis.native?.classList.toggle('disabled', disabled);\n\t\tthis.toggleAttribute('disabled', disabled);\n\t}\n\n\t/**\n\t * Checks if all elements in the `elements` array are present in the `options` array based on their `option` property.\n\t * @param {Array} elements The array of elements to check. Each element should have an `option` property.\n\t * @param {Array} options The array of options to verify against.\n\t * @returns {boolean} Returns true if all elements in the `elements` array are found within the `options` array, otherwise returns false.\n\t */\n\tareAllElementsInOptions(elements, options) {\n\t\tif (elements.length === 0) return false;\n\n\t\treturn elements.every(el =>\n\t\t\toptions.some(opt => JSON.stringify(opt) === JSON.stringify(el.option))\n\t\t);\n\t}\n\n\t/**\n\t * Clones and appends an icon from a template with slot \"check\" to the given option element.\n\t * @param {HTMLElement} option The target option element where the \"check\" icon will be added.\n\t * @returns {void}\n\t */\n\toptionCheckSlot(option) {\n\t\tlet icon = this.querySelector('template')?.content.querySelector(`[slot=\"check\"]`);\n\t\tif (!icon) {\n\t\t\tconsole.warn(`Icon with slot \"check\" was not found.`);\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconClone = icon.cloneNode(true);\n\t\toption.append(iconClone);\n\t}\n}\n","import Select from './select.element.js';\n\nexport default Select;\n\nSelect.define('wje-select', Select);\n"],"names":["_a"],"mappings":"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"}

package/dist/wje-slider.js

@@ -1,7 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement, { event } from "./wje-element.js";
+import WJElement from "./wje-element.js";
+import { event } from "./event.js";
 const styles = ":host {\n    --wje-slider-track-height: 0.25rem;\n    --wje-slider-color: var(--wje-color-primary-9); /* Predvolená farba */\n    --wje-slider-thumb-color: var(--wje-color-primary-9); /* Farba tiahla */\n    --wje-slider-thumb-border: none; /* Predvolene žiadny border */\n    --wje-slider-thumb-shadow: none; /* Tieň vo výchozom stave */\n    --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n    --wje-slider-track-color: var(--wje-color-contrast-4); /* Farba tracku */\n\n    position: relative;\n    display: flex;\n    align-items: center;\n    max-width: 100%;\n}\n\n.native-slider {\n    display: flex;\n    position: relative;\n    flex-grow: 1;\n    align-items: center;\n    height: inherit;\n}\n\n.slider {\n    display: flex;\n    align-items: center;\n    position: relative;\n    flex: 1 1 0%;\n    width: 100%;\n    height: var(--height);\n    contain: size layout style;\n    cursor: grab;\n    touch-action: pan-y;\n}\n\ninput[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--wje-slider-track-height);\n    margin: 0;\n    border-radius: 5px;\n    background-size: 70% 100%;\n    background-repeat: no-repeat;\n    background-color: var(--wje-slider-track-color);\n    background-image: linear-gradient(var(--wje-slider-color), var(--wje-slider-color));\n}\n\ninput[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: ew-resize;\n    transition:\n        background 0.3s ease-in-out,\n        border 0.3s ease-in-out;\n}\n\ninput[type='range']::-moz-range-thumb {\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: pointer;\n    transition:\n        background 0.3s ease-in-out,\n        border 0.3s ease-in-out;\n}\n\ninput[type='range']::-ms-thumb {\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: ew-resize;\n    transition:\n        background 0.3s ease-in-out,\n        border 0.3s ease-in-out;\n}\n\ninput[type='range']::-webkit-slider-thumb:active,\ninput[type='range']::-moz-range-thumb:active,\ninput[type='range']::-ms-thumb:active {\n    box-shadow: var(--wje-slider-thumb-shadow-active); /* Tieň pri aktívnom stave */\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range']::-moz-range-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range']::-ms-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range'][color='primary'] {\n    --wje-slider-color: var(--wje-color-primary-9);\n    --wje-slider-thumb-color: var(--wje-color-primary-9);\n}\n\ninput[type='range'][color='success'] {\n    --wje-slider-color: var(--wje-color-success-9);\n    --wje-slider-thumb-color: var(--wje-color-success-9);\n}\n\ninput[type='range'][color='complete'] {\n    --wje-slider-color: var(--wje-color-complete-9);\n    --wje-slider-thumb-color: var(--wje-color-complete-9);\n}\n\ninput[type='range'][color='danger'] {\n    --wje-slider-color: var(--wje-color-danger-9);\n    --wje-slider-thumb-color: var(--wje-color-danger-9);\n}\n\ninput[type='range'][color='warning'] {\n    --wje-slider-color: var(--wje-color-warning-9);\n    --wje-slider-thumb-color: var(--wje-color-warning-9);\n}\n\ninput[type='range'][color='dark'] {\n    --wje-slider-color: var(--wje-color-contrast-11);\n    --wje-slider-thumb-color: var(--wje-color-contrast-11);\n}\n\ndatalist {\n    display: flex;\n    justify-content: space-between;\n    height: auto;\n    overflow: hidden;\n    margin-top: 16px;\n\n    option::before {\n        content: '';\n        display: block;\n        width: 0;\n        height: auto;\n        padding-left: 3px;\n        text-indent: 0;\n    }\n}\n\noutput {\n    position: absolute;\n    background: var(--wje-color-contrast-11);\n    color: var(--wje-color-contrast-0);\n    top: -46px;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n::slotted([slot='label']) {\n    margin-inline: 0 0.5rem;\n    font-size: var(--wje-font-size);\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0rem 0.75rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.75rem 0rem;\n}\n";
 class Slider extends WJElement {
   /**

package/dist/wje-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-slider.js","sources":["../packages/wje-slider/slider.element.js","../packages/wje-slider/slider.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * Represents a slider component that extends the WJElement class.\n * This slider supports features such as min, max, step values, bubble display, and event handling.\n * It offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n */\n\nexport default class Slider extends WJElement {\n    /**\n     * Creates an instance of Slider.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the slider.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n\n        if (this.input) {\n            this.input.value = value;\n            this.setHandlePosition();\n        }\n    }\n\n    /**\n     * Returns the value of the slider.\n     * @returns {number} The value of the slider input.\n     */\n    get value() {\n        return this.getAttribute('value') || 0;\n    }\n\n    /**\n     * Sets the minimum value of the slider.\n     * @param {number} value The minimum value to set.\n     */\n    set min(value) {\n        this.setAttribute('min', value);\n    }\n\n    /**\n     * Returns the minimum value of the slider.\n     * @returns {number} The minimum value of the slider.\n     */\n    get min() {\n        return this.getAttribute('min') || 0;\n    }\n\n    /**\n     * Sets the maximum value of the slider.\n     * @param {number} value The maximum value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Returns the maximum value of the slider.\n     * @returns {number} The maximum value of the slider.\n     */\n    get max() {\n        return this.getAttribute('max') || 100;\n    }\n\n    /**\n     * Sets the step value of the slider.\n     * @param {number} value The step value to set.\n     */\n    set step(value) {\n        this.setAttribute('step', value);\n    }\n\n    /**\n     * Returns the step value of the slider.\n     * @returns {number} The step value of the slider.\n     */\n    get step() {\n        return this.getAttribute('step') || 1;\n    }\n\n    className = 'Slider';\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 ['max'];\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 slider.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.className = 'native-slider';\n        element.setAttribute('part', 'native');\n\n        let slider = document.createElement('div');\n        slider.className = 'slider';\n\n        let label = document.createElement('slot');\n        label.name = 'label';\n\n        let start = document.createElement('slot');\n        start.name = 'start';\n\n        let end = document.createElement('slot');\n        end.name = 'end';\n\n        let output = document.createElement('output');\n        output.setAttribute('for', 'slider');\n        output.id = 'output';\n        output.setAttribute('hidden', '');\n\n        let input = document.createElement('input');\n        input.type = 'range';\n        input.min = this.min;\n        input.max = this.max;\n        input.step = this.step;\n        input.value = this.value;\n        input.id = 'slider';\n        input.name = 'slider';\n        input.part = 'slider';\n        input.setAttribute('autocomplete', 'off');\n        input.setAttribute('color', this.color || '');\n\n        input.addEventListener('input', null, (e) => {\n            this.setHandlePosition(e.target);\n        });\n\n        slider.appendChild(input);\n        if (this.hasAttribute('bubble')) {\n            slider.appendChild(output);\n        }\n        element.appendChild(label);\n        element.appendChild(start);\n        element.appendChild(slider);\n        element.appendChild(end);\n\n        fragment.appendChild(element);\n\n        this.input = input;\n        this.output = output;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n     * - Sets the position of the handle.\n     * - Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n     * - Dispatches initialization, movement, and change custom events for the slider input element.\n     * - Updates the bubble position and value dynamically on input changes.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.setHandlePosition();\n\n        if (this.hasAttribute('bubble')) {\n            this.output.innerHTML = this.input.value;\n            this.output.removeAttribute('hidden');\n\n            setTimeout(this.setBubble, 50);\n        }\n\n        event.dispatchCustomEvent(this.input, 'wje-slider:init', {\n            value: this.input.value,\n            output: this.output,\n        });\n\n        event.addListener(this.input, 'input', null, (e) => {\n            this.value = e.target.value;\n\n            event.dispatchCustomEvent(this.input, 'wje-slider:move', {\n                value: e.target.value,\n                output: this.output,\n            });\n\n            if (this.hasAttribute('bubble')) {\n                this.setBubble();\n            }\n        });\n\n        event.addListener(this.input, 'change', null, (e) => {\n            event.dispatchCustomEvent(this.input, 'wje-slider:change', {\n                value: e.target.value,\n                output: this.output,\n            });\n        });\n    }\n\n    /**\n     * Sets the handle position of the slider.\n     */\n    setHandlePosition = () => {\n        this.input.style.backgroundSize =\n            this.getPercentage(this.input.min, this.input.max, this.input.value) + '% 100%';\n    };\n\n    /**\n     * Updates the position and content of a bubble element based on the input value.\n     *\n     * This function calculates the position of the bubble using the percentage representation\n     * of the input's current value relative to its minimum and maximum bounds. It then adjusts\n     * the bubble's left position dynamically for aesthetic purposes and updates its displayed\n     * content to reflect the current input value.\n     *\n     * The function relies on the following elements:\n     * - `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n     * - `this.output`: Represents the bubble element to be positioned and updated.\n     *\n     * The left positioning of the bubble ensures precise alignment with the input value indicator.\n     */\n    setBubble = () => {\n        let newValue = this.getPercentage(this.input.min, this.input.max, this.input.value);\n        this.output.style.left = `calc(${newValue}% + (${8 - newValue * 0.15}px) - ${this.output.offsetWidth / 2}px)`;\n        this.output.innerHTML = this.input.value;\n    };\n\n    /**\n     * Calculates the percentage of a value within a given range.\n     * @param {number} min The minimum value of the range.\n     * @param {number} max The maximum value of the range.\n     * @param {number} [value] The current value within the range. Defaults to 0 if not provided.\n     * @returns {number} The calculated percentage as a number between 0 and 100. Returns 0 if the range is invalid.\n     */\n    getPercentage(min, max, value = 0) {\n        return Number(((value - min) * 100) / (max - min)) || 0;\n    }\n}\n","import Slider from './slider.element.js';\n\nexport default Slider;\n\nSlider.define('wje-slider', Slider);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-slider.js","sources":["../packages/wje-slider/slider.element.js","../packages/wje-slider/slider.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * Represents a slider component that extends the WJElement class.\n * This slider supports features such as min, max, step values, bubble display, and event handling.\n * It offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n */\n\nexport default class Slider extends WJElement {\n    /**\n     * Creates an instance of Slider.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the slider.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n\n        if (this.input) {\n            this.input.value = value;\n            this.setHandlePosition();\n        }\n    }\n\n    /**\n     * Returns the value of the slider.\n     * @returns {number} The value of the slider input.\n     */\n    get value() {\n        return this.getAttribute('value') || 0;\n    }\n\n    /**\n     * Sets the minimum value of the slider.\n     * @param {number} value The minimum value to set.\n     */\n    set min(value) {\n        this.setAttribute('min', value);\n    }\n\n    /**\n     * Returns the minimum value of the slider.\n     * @returns {number} The minimum value of the slider.\n     */\n    get min() {\n        return this.getAttribute('min') || 0;\n    }\n\n    /**\n     * Sets the maximum value of the slider.\n     * @param {number} value The maximum value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Returns the maximum value of the slider.\n     * @returns {number} The maximum value of the slider.\n     */\n    get max() {\n        return this.getAttribute('max') || 100;\n    }\n\n    /**\n     * Sets the step value of the slider.\n     * @param {number} value The step value to set.\n     */\n    set step(value) {\n        this.setAttribute('step', value);\n    }\n\n    /**\n     * Returns the step value of the slider.\n     * @returns {number} The step value of the slider.\n     */\n    get step() {\n        return this.getAttribute('step') || 1;\n    }\n\n    className = 'Slider';\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 ['max'];\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 slider.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.className = 'native-slider';\n        element.setAttribute('part', 'native');\n\n        let slider = document.createElement('div');\n        slider.className = 'slider';\n\n        let label = document.createElement('slot');\n        label.name = 'label';\n\n        let start = document.createElement('slot');\n        start.name = 'start';\n\n        let end = document.createElement('slot');\n        end.name = 'end';\n\n        let output = document.createElement('output');\n        output.setAttribute('for', 'slider');\n        output.id = 'output';\n        output.setAttribute('hidden', '');\n\n        let input = document.createElement('input');\n        input.type = 'range';\n        input.min = this.min;\n        input.max = this.max;\n        input.step = this.step;\n        input.value = this.value;\n        input.id = 'slider';\n        input.name = 'slider';\n        input.part = 'slider';\n        input.setAttribute('autocomplete', 'off');\n        input.setAttribute('color', this.color || '');\n\n        input.addEventListener('input', null, (e) => {\n            this.setHandlePosition(e.target);\n        });\n\n        slider.appendChild(input);\n        if (this.hasAttribute('bubble')) {\n            slider.appendChild(output);\n        }\n        element.appendChild(label);\n        element.appendChild(start);\n        element.appendChild(slider);\n        element.appendChild(end);\n\n        fragment.appendChild(element);\n\n        this.input = input;\n        this.output = output;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n     * - Sets the position of the handle.\n     * - Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n     * - Dispatches initialization, movement, and change custom events for the slider input element.\n     * - Updates the bubble position and value dynamically on input changes.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.setHandlePosition();\n\n        if (this.hasAttribute('bubble')) {\n            this.output.innerHTML = this.input.value;\n            this.output.removeAttribute('hidden');\n\n            setTimeout(this.setBubble, 50);\n        }\n\n        event.dispatchCustomEvent(this.input, 'wje-slider:init', {\n            value: this.input.value,\n            output: this.output,\n        });\n\n        event.addListener(this.input, 'input', null, (e) => {\n            this.value = e.target.value;\n\n            event.dispatchCustomEvent(this.input, 'wje-slider:move', {\n                value: e.target.value,\n                output: this.output,\n            });\n\n            if (this.hasAttribute('bubble')) {\n                this.setBubble();\n            }\n        });\n\n        event.addListener(this.input, 'change', null, (e) => {\n            event.dispatchCustomEvent(this.input, 'wje-slider:change', {\n                value: e.target.value,\n                output: this.output,\n            });\n        });\n    }\n\n    /**\n     * Sets the handle position of the slider.\n     */\n    setHandlePosition = () => {\n        this.input.style.backgroundSize =\n            this.getPercentage(this.input.min, this.input.max, this.input.value) + '% 100%';\n    };\n\n    /**\n     * Updates the position and content of a bubble element based on the input value.\n     *\n     * This function calculates the position of the bubble using the percentage representation\n     * of the input's current value relative to its minimum and maximum bounds. It then adjusts\n     * the bubble's left position dynamically for aesthetic purposes and updates its displayed\n     * content to reflect the current input value.\n     *\n     * The function relies on the following elements:\n     * - `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n     * - `this.output`: Represents the bubble element to be positioned and updated.\n     *\n     * The left positioning of the bubble ensures precise alignment with the input value indicator.\n     */\n    setBubble = () => {\n        let newValue = this.getPercentage(this.input.min, this.input.max, this.input.value);\n        this.output.style.left = `calc(${newValue}% + (${8 - newValue * 0.15}px) - ${this.output.offsetWidth / 2}px)`;\n        this.output.innerHTML = this.input.value;\n    };\n\n    /**\n     * Calculates the percentage of a value within a given range.\n     * @param {number} min The minimum value of the range.\n     * @param {number} max The maximum value of the range.\n     * @param {number} [value] The current value within the range. Defaults to 0 if not provided.\n     * @returns {number} The calculated percentage as a number between 0 and 100. Returns 0 if the range is invalid.\n     */\n    getPercentage(min, max, value = 0) {\n        return Number(((value - min) * 100) / (max - min)) || 0;\n    }\n}\n","import Slider from './slider.element.js';\n\nexport default Slider;\n\nSlider.define('wje-slider', Slider);\n"],"names":[],"mappings":"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"}

package/dist/wje-stepper.js

@@ -2,7 +2,8 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { Localizer } from "./localize.js";
-import WJElement, { event } from "./wje-element.js";
+import WJElement from "./wje-element.js";
+import { event } from "./event.js";
 const styles = '.container {\n	display: flex;\n	flex-direction: column;\n}\n\n.header {\n	display: flex;\n	justify-content: var(--wje-stepper-justify);\n	margin-bottom: var(--wje-spacing-medium);\n}\n\n.step-header {\n	display: flex;\n	padding: var(--wje-spacing-medium);\n	gap: var(--wje-spacing-x-small);\n	color: var(--wje-color-contrast-5);\n	flex-grow: var(--wje-stepper-grow);\n	text-align: center;\n}\n\n.pointer {\n	cursor: pointer;\n}\n\n[active] {\n	color: var(--wje-color-contrast-11);\n}\n\n.content {\n	margin-bottom: var(--wje-spacing-medium);\n}\n\n.arrow-icon {\n	margin-top: var(--wje-stepper-margin);\n}\n\n.step {\n	padding: var(--wje-spacing-medium);\n	text-align: center;\n}\n\n[done] {\n	color: var(--wje-color-contrast-11);\n}\n\n.nav-buttons {\n	display: flex;\n	justify-content: space-between;\n\n	slot[hidden] {\n		visibility: hidden;\n		display: initial;\n	}\n\n	slot[disabled] {\n		opacity: 0.5;\n		pointer-events: none;\n		cursor: not-allowed;\n\n		/* after */\n		::after {\n			content: "";\n			display: block;\n			width: 100%;\n			height: 100%;\n			background-color: var(--wje-color-contrast-2);\n			position: absolute;\n			top: 0;\n			left: 0;\n			opacity: .5;\n		}\n	}\n}';
 class Stepper extends WJElement {
   constructor() {

package/dist/wje-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-stepper.js","sources":["../packages/wje-stepper/stepper.element.js","../packages/wje-stepper/stepper.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Stepper` is a custom web component that represents a stepper.\n * @summary This element represents a stepper.\n * @documentation https://elements.webjet.sk/components/stepper\n * @status stable\n * @augments WJElement\n * @attribute {string} active - The active color for the stepper.\n * @attribute {string} done - The done color for the stepper.\n * @slot - The default slot for the stepper.\n * @csspart native - The native part of the stepper.\n * @csspart header - The header part of the stepper.\n * @csspart content - The content part of the stepper.\n * @tag wje-stepper\n */\nexport default class Stepper extends WJElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.currentStep = 0;\n\n\t\tthis.localizer = new Localizer(this);\n\t\tthis.steps = [];\n\t\tthis.headerSteps = [];\n\n\t}\n\n\tget active() {\n\t\tif (this.hasAttribute('active')) return this.getAttribute('active');\n\n\t\treturn 'primary';\n\t}\n\n\tget done() {\n\t\tif (this.hasAttribute('done')) return this.getAttribute('done');\n\n\t\treturn 'success';\n\t}\n\n\tclassName = 'Stepper';\n\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the component for the stepper.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tconst native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.className = 'native-stepper';\n\n\t\tconst header = document.createElement('div');\n\t\theader.setAttribute('part', 'header');\n\t\theader.className = 'header';\n\n\t\tconst content = document.createElement('div');\n\t\tcontent.setAttribute('part', 'content');\n\t\tcontent.className = 'content';\n\n\t\tconst steps = Array.from(this.children);\n\n\t\tsteps?.forEach((step, index) => {\n\t\t\tif (step.nodeName === 'WJE-STEP') {\n\t\t\t\tthis.headerSteps.push(this.processStep(index, step, header, steps));\n\t\t\t}\n\t\t});\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tconst navButtons = document.createElement('div');\n\t\tnavButtons.className = 'nav-buttons';\n\n\t\tconst prevButton = document.createElement('wje-button');\n\t\tprevButton.setAttribute('label', this.localizer.translate('wj.stepper.button.previous'));\n\t\tprevButton.innerHTML = this.localizer.translate('wj.stepper.button.previous');\n\n\t\tlet nextButton = document.createElement('wje-button');\n\t\tnextButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n\t\tnextButton.innerHTML = this.localizer.translate('wj.stepper.button.next');\n\n\t\tlet finishButton = document.createElement('wje-button');\n\t\tfinishButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n\t\tfinishButton.innerHTML = this.localizer.translate('wj.stepper.button.finish');\n\t\tfinishButton.setAttribute('color', 'primary');\n\n\t\tconst navButtonPrevSlot = document.createElement('slot');\n\t\tnavButtonPrevSlot.setAttribute('name', 'prev');\n\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\tnavButtonPrevSlot.hidden = this.currentStep === 0;\n\n\t\tconst navButtonNextSlot = document.createElement('slot');\n\t\tnavButtonNextSlot.setAttribute('name', 'next');\n\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\tnavButtonNextSlot.hidden = this.currentStep === this.steps.length - 1;\n\n\t\tconst navButtonFinishSlot = document.createElement('slot');\n\t\tnavButtonFinishSlot.setAttribute('name', 'finish');\n\t\tnavButtonFinishSlot.appendChild(nextButton);\n\t\tnavButtonFinishSlot.hidden = this.currentStep !== this.steps.length - 1;\n\n\t\tconst isNextLocked = this.headerSteps[this.currentStep + 1]?.hasAttribute('locked');\n\t\tnavButtonNextSlot.toggleAttribute('disabled', !!isNextLocked);\n\t\tnavButtonFinishSlot.toggleAttribute('disabled', !!isNextLocked);\n\n\t\tif (steps.length > 1) {\n\t\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\t\tnavButtonFinishSlot.appendChild(finishButton);\n\t\t\tnavButtonFinishSlot.style.display = 'none';\n\n\t\t} else {\n\t\t\tnavButtonPrevSlot.hidden = true;\n\t\t\tnavButtonNextSlot.hidden = true;\n\t\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\t\tnavButtonFinishSlot.appendChild(finishButton);\n\t\t}\n\n\t\tcontent.appendChild(slot);\n\n\t\tnative.appendChild(header);\n\t\tnative.appendChild(content);\n\t\tnative.appendChild(navButtons);\n\n\t\tnavButtons.appendChild(navButtonPrevSlot);\n\t\tnavButtons.appendChild(navButtonNextSlot);\n\t\tnavButtons.appendChild(navButtonFinishSlot);\n\n\t\tfragment.appendChild(native);\n\n\t\tthis.header = header;\n\t\tthis.prev = navButtonPrevSlot;\n\t\tthis.next = navButtonNextSlot;\n\t\tthis.finish = navButtonFinishSlot;\n\n\t\treturn fragment;\n\t}\n\n\tprocessStep(index, step, header, steps) {\n\t\tconst nav = document.createElement('div');\n\t\tnav.className = 'step-header';\n\t\tnav.addEventListener('click', (e) => {\n\t\t\tthis.goToStep(index)\n\t\t});\n\n\t\tconst badge = document.createElement('wje-badge');\n\t\tbadge.setAttribute('label', (index + 1).toString());\n\t\tbadge.className = 'step-badge';\n\t\tbadge.innerHTML = index + 1;\n\n\t\tconst label = document.createElement('span');\n\t\tlabel.innerText = step.getAttribute('label') || `${this.localizer.translate('wj.stepper.step')} ${index + 1}`; // default label\n\n\t\t// set active step\n\t\tif (index === this.currentStep || step.hasAttribute('active')) {\n\t\t\tthis.setStepActive(nav, badge);\n\t\t}\n\n\t\tif (step.hasAttribute('disabled')) {\n\t\t\tnav.setAttribute('disabled', '');\n\t\t\tthis.setStepLocked(nav, badge);\n\t\t} else {\n\t\t\tnav.classList.add('pointer');\n\t\t}\n\n\t\tnav.appendChild(badge);\n\t\tnav.appendChild(label);\n\n\t\theader.appendChild(nav);\n\n\t\tif (index < steps.length - 1) {\n\t\t\tconst arrowIcon = document.createElement('wje-icon');\n\t\t\tarrowIcon.setAttribute('name', 'chevron-right');\n\t\t\tarrowIcon.classList.add('arrow-icon');\n\t\t\tarrowIcon.setAttribute('size', 'small');\n\n\t\t\theader.appendChild(arrowIcon);\n\t\t}\n\n\t\tstep.classList.add('step');\n\t\tif (index !== this.currentStep) {\n\t\t\tstep.style.display = 'none';\n\t\t}\n\n\t\tthis.steps.push(step);\n\n\t\treturn nav\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tafterDraw() {\n\t\tif (this.steps.length <= 1) {\n\t\t\tthis.prev.hidden = true;\n\t\t}\n\n\t\tevent.addListener(this.prev, 'click', '', () => this.navigate(-1));\n\t\tevent.addListener(this.next, 'click', '', () => this.navigate(1));\n\t\tevent.addListener(this.finish, 'click', '', () => this.navigate(1));\n\t}\n\n\t/**\n\t * Navigates to a different step in a multi-step process based on the provided direction.\n\t * @param {number} direction The navigation direction.\n\t * Use a positive value to move forward or a negative value to move backward.\n\t */\n\tnavigate(direction) {\n\t\tthis.goToStep(this.currentStep + direction);\n\t}\n\n\t/**\n\t * Navigates to a specific step in a multi-step process and updates the stepper UI accordingly.\n\t * @param {number} stepIndex The index of the step to navigate to.\n\t * //@fires stepper:next Dispatched when navigating to the next step.\n\t * //@fires stepper:prev Dispatched when navigating to the previous step.\n\t * //@fires stepper:finish Dispatched when the final step is completed.\n\t */\n\tgoToStep(stepIndex) {\n\t\tif (stepIndex >= 0 && stepIndex < this.steps.length) {\n\t\t\tif (this.headerSteps[stepIndex].hasAttribute('disabled')) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (stepIndex > this.currentStep) {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('stepper:next', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('stepper:prev', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tthis.headerSteps.forEach((step, index) => {\n\t\t\t\tlet badge = step.querySelector('wje-badge');\n\n\t\t\t\tthis.setStepDefault(step, badge, index);\n\t\t\t\tif (index < stepIndex) this.setStepDone(step, badge);\n\t\t\t\tif (index > stepIndex && step.hasAttribute('disabled')) this.setStepLocked(step, badge, index);\n\t\t\t});\n\n\t\t\tthis.setStepActive(this.headerSteps[stepIndex], null, stepIndex);\n\t\t\tthis.setContentActive(stepIndex);\n\n\t\t\tthis.currentStep = stepIndex;\n\t\t\tthis.prev.hidden = this.currentStep === 0;\n\n\t\t\tconst isNextLocked = this.headerSteps[this.currentStep + 1]?.hasAttribute('locked');\n\t\t\tthis.next.toggleAttribute('disabled', !!isNextLocked);\n\t\t\tthis.finish.toggleAttribute('disabled', !!isNextLocked);\n\n\t\t\tif (this.currentStep === this.steps.length - 1) {\n\t\t\t\tthis.next.hidden = true;\n\t\t\t\tthis.finish.hidden = false;\n\t\t\t\tthis.finish.style.display = 'block';\n\t\t\t} else {\n\t\t\t\tthis.next.hidden = false;\n\t\t\t\tthis.finish.hidden = true;\n\t\t\t\tthis.finish.style.display = 'none';\n\t\t\t}\n\t\t} else if (stepIndex === this.steps.length) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('stepper:finish', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t * Resets a step to its default state by clearing its active and done attributes.\n\t * Updates the step's badge to show its index and removes any color styling.\n\t * @param {HTMLElement} nav The navigation element representing the step.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t * @param {number} [stepIndex] The index of the step, used to set the badge content.\n\t */\n\tsetStepDefault(nav, badge = null, stepIndex = 0) {\n\t\tnav.removeAttribute('active');\n\t\tnav.removeAttribute('done');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = stepIndex + 1;\n\t\tbadge.removeAttribute('color');\n\t}\n\n\t/**\n\t * Sets a step as active by adding the `active` attribute and updating the step's badge.\n\t * @param {HTMLElement} nav The navigation element representing the step to activate.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.\n\t */\n\tsetStepActive(nav, badge = null, stepIndex = null) {\n\t\tnav.setAttribute('active', '');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = stepIndex + 1;\n\t\tbadge.setAttribute('color', this.active);\n\t}\n\n\t/**\n\t * Activates the content of a specific step by displaying it and hiding all others.\n\t * @param {number} stepIndex The index of the step whose content should be displayed.\n\t */\n\tsetContentActive(stepIndex) {\n\t\tthis.steps?.forEach((step, index) => {\n\t\t\tif (index === stepIndex) {\n\t\t\t\tstep.style.display = 'block';\n\t\t\t} else {\n\t\t\t\tstep.style.display = 'none';\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n\t * @param {HTMLElement} nav The navigation element representing the completed step.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t */\n\tsetStepDone(nav, badge = null) {\n\t\tnav.setAttribute('done', '');\n\n\t\tconst checkIcon = document.createElement('wje-icon');\n\t\tcheckIcon.setAttribute('name', 'check');\n\t\tcheckIcon.setAttribute('color', this.done);\n\t\tcheckIcon.setAttribute('size', 'medium');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\n\t\tbadge.setAttribute('color', this.done);\n\t\tbadge.innerHTML = '';\n\t\tbadge.appendChild(checkIcon);\n\t}\n\n\tsetStepLocked(nav, badge = null) {\n\t\tnav.setAttribute('disabled', '');\n\t\tnav.setAttribute('locked', '');\n\n\t\tconst lockIcon = document.createElement('wje-icon');\n\t\tlockIcon.setAttribute('name', 'lock');\n\t\tlockIcon.setAttribute('color', \"danger\");\n\t\tlockIcon.setAttribute('size', 'medium');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = '';\n\t\tbadge.removeAttribute('color');\n\t\tbadge.classList.add('disabled');\n\t\tbadge.appendChild(lockIcon);\n\t}\n}\n","import Stepper from './stepper.element.js';\n\nexport default Stepper;\n\nStepper.define('wje-stepper', Stepper);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-stepper.js","sources":["../packages/wje-stepper/stepper.element.js","../packages/wje-stepper/stepper.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Stepper` is a custom web component that represents a stepper.\n * @summary This element represents a stepper.\n * @documentation https://elements.webjet.sk/components/stepper\n * @status stable\n * @augments WJElement\n * @attribute {string} active - The active color for the stepper.\n * @attribute {string} done - The done color for the stepper.\n * @slot - The default slot for the stepper.\n * @csspart native - The native part of the stepper.\n * @csspart header - The header part of the stepper.\n * @csspart content - The content part of the stepper.\n * @tag wje-stepper\n */\nexport default class Stepper extends WJElement {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.currentStep = 0;\n\n\t\tthis.localizer = new Localizer(this);\n\t\tthis.steps = [];\n\t\tthis.headerSteps = [];\n\n\t}\n\n\tget active() {\n\t\tif (this.hasAttribute('active')) return this.getAttribute('active');\n\n\t\treturn 'primary';\n\t}\n\n\tget done() {\n\t\tif (this.hasAttribute('done')) return this.getAttribute('done');\n\n\t\treturn 'success';\n\t}\n\n\tclassName = 'Stepper';\n\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the component for the stepper.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tconst native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.className = 'native-stepper';\n\n\t\tconst header = document.createElement('div');\n\t\theader.setAttribute('part', 'header');\n\t\theader.className = 'header';\n\n\t\tconst content = document.createElement('div');\n\t\tcontent.setAttribute('part', 'content');\n\t\tcontent.className = 'content';\n\n\t\tconst steps = Array.from(this.children);\n\n\t\tsteps?.forEach((step, index) => {\n\t\t\tif (step.nodeName === 'WJE-STEP') {\n\t\t\t\tthis.headerSteps.push(this.processStep(index, step, header, steps));\n\t\t\t}\n\t\t});\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tconst navButtons = document.createElement('div');\n\t\tnavButtons.className = 'nav-buttons';\n\n\t\tconst prevButton = document.createElement('wje-button');\n\t\tprevButton.setAttribute('label', this.localizer.translate('wj.stepper.button.previous'));\n\t\tprevButton.innerHTML = this.localizer.translate('wj.stepper.button.previous');\n\n\t\tlet nextButton = document.createElement('wje-button');\n\t\tnextButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n\t\tnextButton.innerHTML = this.localizer.translate('wj.stepper.button.next');\n\n\t\tlet finishButton = document.createElement('wje-button');\n\t\tfinishButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n\t\tfinishButton.innerHTML = this.localizer.translate('wj.stepper.button.finish');\n\t\tfinishButton.setAttribute('color', 'primary');\n\n\t\tconst navButtonPrevSlot = document.createElement('slot');\n\t\tnavButtonPrevSlot.setAttribute('name', 'prev');\n\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\tnavButtonPrevSlot.hidden = this.currentStep === 0;\n\n\t\tconst navButtonNextSlot = document.createElement('slot');\n\t\tnavButtonNextSlot.setAttribute('name', 'next');\n\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\tnavButtonNextSlot.hidden = this.currentStep === this.steps.length - 1;\n\n\t\tconst navButtonFinishSlot = document.createElement('slot');\n\t\tnavButtonFinishSlot.setAttribute('name', 'finish');\n\t\tnavButtonFinishSlot.appendChild(nextButton);\n\t\tnavButtonFinishSlot.hidden = this.currentStep !== this.steps.length - 1;\n\n\t\tconst isNextLocked = this.headerSteps[this.currentStep + 1]?.hasAttribute('locked');\n\t\tnavButtonNextSlot.toggleAttribute('disabled', !!isNextLocked);\n\t\tnavButtonFinishSlot.toggleAttribute('disabled', !!isNextLocked);\n\n\t\tif (steps.length > 1) {\n\t\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\t\tnavButtonFinishSlot.appendChild(finishButton);\n\t\t\tnavButtonFinishSlot.style.display = 'none';\n\n\t\t} else {\n\t\t\tnavButtonPrevSlot.hidden = true;\n\t\t\tnavButtonNextSlot.hidden = true;\n\t\t\tnavButtonPrevSlot.appendChild(prevButton);\n\t\t\tnavButtonNextSlot.appendChild(nextButton);\n\t\t\tnavButtonFinishSlot.appendChild(finishButton);\n\t\t}\n\n\t\tcontent.appendChild(slot);\n\n\t\tnative.appendChild(header);\n\t\tnative.appendChild(content);\n\t\tnative.appendChild(navButtons);\n\n\t\tnavButtons.appendChild(navButtonPrevSlot);\n\t\tnavButtons.appendChild(navButtonNextSlot);\n\t\tnavButtons.appendChild(navButtonFinishSlot);\n\n\t\tfragment.appendChild(native);\n\n\t\tthis.header = header;\n\t\tthis.prev = navButtonPrevSlot;\n\t\tthis.next = navButtonNextSlot;\n\t\tthis.finish = navButtonFinishSlot;\n\n\t\treturn fragment;\n\t}\n\n\tprocessStep(index, step, header, steps) {\n\t\tconst nav = document.createElement('div');\n\t\tnav.className = 'step-header';\n\t\tnav.addEventListener('click', (e) => {\n\t\t\tthis.goToStep(index)\n\t\t});\n\n\t\tconst badge = document.createElement('wje-badge');\n\t\tbadge.setAttribute('label', (index + 1).toString());\n\t\tbadge.className = 'step-badge';\n\t\tbadge.innerHTML = index + 1;\n\n\t\tconst label = document.createElement('span');\n\t\tlabel.innerText = step.getAttribute('label') || `${this.localizer.translate('wj.stepper.step')} ${index + 1}`; // default label\n\n\t\t// set active step\n\t\tif (index === this.currentStep || step.hasAttribute('active')) {\n\t\t\tthis.setStepActive(nav, badge);\n\t\t}\n\n\t\tif (step.hasAttribute('disabled')) {\n\t\t\tnav.setAttribute('disabled', '');\n\t\t\tthis.setStepLocked(nav, badge);\n\t\t} else {\n\t\t\tnav.classList.add('pointer');\n\t\t}\n\n\t\tnav.appendChild(badge);\n\t\tnav.appendChild(label);\n\n\t\theader.appendChild(nav);\n\n\t\tif (index < steps.length - 1) {\n\t\t\tconst arrowIcon = document.createElement('wje-icon');\n\t\t\tarrowIcon.setAttribute('name', 'chevron-right');\n\t\t\tarrowIcon.classList.add('arrow-icon');\n\t\t\tarrowIcon.setAttribute('size', 'small');\n\n\t\t\theader.appendChild(arrowIcon);\n\t\t}\n\n\t\tstep.classList.add('step');\n\t\tif (index !== this.currentStep) {\n\t\t\tstep.style.display = 'none';\n\t\t}\n\n\t\tthis.steps.push(step);\n\n\t\treturn nav\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tafterDraw() {\n\t\tif (this.steps.length <= 1) {\n\t\t\tthis.prev.hidden = true;\n\t\t}\n\n\t\tevent.addListener(this.prev, 'click', '', () => this.navigate(-1));\n\t\tevent.addListener(this.next, 'click', '', () => this.navigate(1));\n\t\tevent.addListener(this.finish, 'click', '', () => this.navigate(1));\n\t}\n\n\t/**\n\t * Navigates to a different step in a multi-step process based on the provided direction.\n\t * @param {number} direction The navigation direction.\n\t * Use a positive value to move forward or a negative value to move backward.\n\t */\n\tnavigate(direction) {\n\t\tthis.goToStep(this.currentStep + direction);\n\t}\n\n\t/**\n\t * Navigates to a specific step in a multi-step process and updates the stepper UI accordingly.\n\t * @param {number} stepIndex The index of the step to navigate to.\n\t * //@fires stepper:next Dispatched when navigating to the next step.\n\t * //@fires stepper:prev Dispatched when navigating to the previous step.\n\t * //@fires stepper:finish Dispatched when the final step is completed.\n\t */\n\tgoToStep(stepIndex) {\n\t\tif (stepIndex >= 0 && stepIndex < this.steps.length) {\n\t\t\tif (this.headerSteps[stepIndex].hasAttribute('disabled')) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (stepIndex > this.currentStep) {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('stepper:next', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('stepper:prev', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tthis.headerSteps.forEach((step, index) => {\n\t\t\t\tlet badge = step.querySelector('wje-badge');\n\n\t\t\t\tthis.setStepDefault(step, badge, index);\n\t\t\t\tif (index < stepIndex) this.setStepDone(step, badge);\n\t\t\t\tif (index > stepIndex && step.hasAttribute('disabled')) this.setStepLocked(step, badge, index);\n\t\t\t});\n\n\t\t\tthis.setStepActive(this.headerSteps[stepIndex], null, stepIndex);\n\t\t\tthis.setContentActive(stepIndex);\n\n\t\t\tthis.currentStep = stepIndex;\n\t\t\tthis.prev.hidden = this.currentStep === 0;\n\n\t\t\tconst isNextLocked = this.headerSteps[this.currentStep + 1]?.hasAttribute('locked');\n\t\t\tthis.next.toggleAttribute('disabled', !!isNextLocked);\n\t\t\tthis.finish.toggleAttribute('disabled', !!isNextLocked);\n\n\t\t\tif (this.currentStep === this.steps.length - 1) {\n\t\t\t\tthis.next.hidden = true;\n\t\t\t\tthis.finish.hidden = false;\n\t\t\t\tthis.finish.style.display = 'block';\n\t\t\t} else {\n\t\t\t\tthis.next.hidden = false;\n\t\t\t\tthis.finish.hidden = true;\n\t\t\t\tthis.finish.style.display = 'none';\n\t\t\t}\n\t\t} else if (stepIndex === this.steps.length) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('stepper:finish', { detail: { stepIndex }, bubbles: true, composed: true })\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t * Resets a step to its default state by clearing its active and done attributes.\n\t * Updates the step's badge to show its index and removes any color styling.\n\t * @param {HTMLElement} nav The navigation element representing the step.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t * @param {number} [stepIndex] The index of the step, used to set the badge content.\n\t */\n\tsetStepDefault(nav, badge = null, stepIndex = 0) {\n\t\tnav.removeAttribute('active');\n\t\tnav.removeAttribute('done');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = stepIndex + 1;\n\t\tbadge.removeAttribute('color');\n\t}\n\n\t/**\n\t * Sets a step as active by adding the `active` attribute and updating the step's badge.\n\t * @param {HTMLElement} nav The navigation element representing the step to activate.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.\n\t */\n\tsetStepActive(nav, badge = null, stepIndex = null) {\n\t\tnav.setAttribute('active', '');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = stepIndex + 1;\n\t\tbadge.setAttribute('color', this.active);\n\t}\n\n\t/**\n\t * Activates the content of a specific step by displaying it and hiding all others.\n\t * @param {number} stepIndex The index of the step whose content should be displayed.\n\t */\n\tsetContentActive(stepIndex) {\n\t\tthis.steps?.forEach((step, index) => {\n\t\t\tif (index === stepIndex) {\n\t\t\t\tstep.style.display = 'block';\n\t\t\t} else {\n\t\t\t\tstep.style.display = 'none';\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n\t * @param {HTMLElement} nav The navigation element representing the completed step.\n\t * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n\t */\n\tsetStepDone(nav, badge = null) {\n\t\tnav.setAttribute('done', '');\n\n\t\tconst checkIcon = document.createElement('wje-icon');\n\t\tcheckIcon.setAttribute('name', 'check');\n\t\tcheckIcon.setAttribute('color', this.done);\n\t\tcheckIcon.setAttribute('size', 'medium');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\n\t\tbadge.setAttribute('color', this.done);\n\t\tbadge.innerHTML = '';\n\t\tbadge.appendChild(checkIcon);\n\t}\n\n\tsetStepLocked(nav, badge = null) {\n\t\tnav.setAttribute('disabled', '');\n\t\tnav.setAttribute('locked', '');\n\n\t\tconst lockIcon = document.createElement('wje-icon');\n\t\tlockIcon.setAttribute('name', 'lock');\n\t\tlockIcon.setAttribute('color', \"danger\");\n\t\tlockIcon.setAttribute('size', 'medium');\n\n\t\tif (!badge) {\n\t\t\tbadge = nav.querySelector('wje-badge');\n\t\t}\n\t\tbadge.innerHTML = '';\n\t\tbadge.removeAttribute('color');\n\t\tbadge.classList.add('disabled');\n\t\tbadge.appendChild(lockIcon);\n\t}\n}\n","import Stepper from './stepper.element.js';\n\nexport default Stepper;\n\nStepper.define('wje-stepper', Stepper);\n"],"names":[],"mappings":"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"}

package/dist/wje-tab.js

@@ -1,8 +1,9 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement, { event } from "./wje-element.js";
+import WJElement from "./wje-element.js";
 import { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
+import { event } from "./event.js";
 const styles = `/*
 [ WJ Tab ]
 */