wj-elements 0.1.160 → 0.1.161

package/dist/packages/wje-color-picker/color-picker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/wje-element/element.d.ts

@@ -97,7 +97,7 @@ export default class WJElement extends HTMLElement {
      * Gets the rendering context, either the shadow root or the component itself.
      * @returns The rendering context.
      */
-    get context(): this | ShadowRoot;
+    get context(): any;
     /**
      * Gets the store instance.
      * @returns {object} The store instance.

package/dist/packages/wje-options/options.element.d.ts

@@ -95,9 +95,33 @@ export default class Options extends WJElement {
      * @returns {boolean} True if the search attribute is present, false otherwise.
      */
     get hasSearch(): boolean;
+    /**
+     * Sets the value to define search-to-query params behavior.
+     * @param {string} value The value to be set for the search-to-query-params attribute.
+     */
     set searchToQueryParams(value: string);
-    get searchToQueryParams(): string;
+    /**
+     * Retrieves the value of the 'search-to-query-params' attribute from the current instance.
+     * @returns {string | null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.
+     */
+    get searchToQueryParams(): string | null;
+    /**
+     * Determines whether the 'search-to-query-params' attribute is present on the element.
+     * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.
+     */
     get hasSearchToQueryParams(): boolean;
+    /**
+     * Sets the value of the search parameter name attribute.
+     * @param {string} value The string value to set as the search parameter name.
+     */
+    set searchParamName(value: string);
+    /**
+     * Gets the search parameter name used in queries.
+     * Retrieves the value of the 'search-param-name' attribute.
+     * If the attribute is not set, it defaults to 'search'.
+     * @returns {string} The search parameter name used for queries.
+     */
+    get searchParamName(): string;
     /**
      * Sets the lazy attribute.
      * @param {boolean} value The value to set for the lazy attribute.

package/dist/packages/wje-stepper/stepper.element.d.ts

@@ -30,6 +30,7 @@ export default class Stepper extends WJElement {
     headerSteps: NodeListOf<Element>;
     prev: HTMLElement;
     next: HTMLElement;
+    processStep(index: any, step: any, header: any, steps: any): void;
     /**
      * Sets up the attributes for the component.
      */

package/dist/packages/wje-store/pubsub.d.ts

@@ -12,10 +12,11 @@ export default class PubSub {
     /**
      * If the passed event has callbacks attached to it, loop through each one and call it.
      * @param {string} event The name of the event to publish
-     * @param {object} [newData] The data to pass to the callbacks
-     * @param {object} [oldData] The data to pass to the callbacks
-     * @returns {Array} The callbacks for this event, or an empty array if no event exits
+     * @param {any} state The current state to pass to the callbacks
+     * @param {object} [newData] The new data to pass to the callbacks
+     * @param {object} [oldData] The old data to pass to the callbacks
+     * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists
      * @memberof PubSub
      */
-    publish(event: string, newData?: object, oldData?: object): any[];
+    publish(event: string, state: any, newData?: object, oldData?: object): any[];
 }

package/dist/packages/wje-tab/tab.element.d.ts

@@ -28,6 +28,28 @@ export default class Tab extends WJElement {
      * @type {boolean}
      */
     last: boolean;
+    _hasPanel: boolean;
+    /**
+     * Sets the panel attribute to the specified value.
+     * @param {string} value The value to set for the panel attribute.
+     */
+    set panel(value: string);
+    /**
+     * Retrieves the value of the 'panel' attribute of the element.
+     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.
+     */
+    get panel(): string | null;
+    /**
+     * Sets the value of the 'route' attribute for the current object.
+     * @param {string} value The new value to set for the 'route' attribute.
+     */
+    set route(value: string);
+    /**
+     * Retrieves the value of the 'route' attribute.
+     * If the 'route' attribute is not set, it returns null.
+     * @returns {string|null} The value of the 'route' attribute or null if not set.
+     */
+    get route(): string | null;
     /**
      * Draws the component for the tab.
      * @returns {DocumentFragment}
@@ -38,4 +60,5 @@ export default class Tab extends WJElement {
      * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
      */
     afterDraw(): void;
+    unbindRouterLinks: any;
 }

package/dist/packages/wje-tab-group/tab-group.element.d.ts

@@ -31,10 +31,13 @@ export default class TabGroup extends WJElement {
      * @returns {DocumentFragment}
      */
     draw(context: object, store: object, params: object): DocumentFragment;
+    nav: HTMLElement;
+    moreDropdown: HTMLElement;
     /**
      * Sets up the event listeners after the component is drawn.
      */
     afterDraw(): void;
+    checkOverflow(): void;
     /**
      * Removes the active attribute from all tabs and panels.
      */
@@ -64,4 +67,6 @@ export default class TabGroup extends WJElement {
      * @returns {Array<string>} An array of all tab names.
      */
     getPanelAllName(): Array<string>;
+    toggleMoreVisibility(): void;
+    dropdownActive(el: any): void;
 }

package/dist/wje-dialog.js

@@ -19,7 +19,9 @@ class Dialog extends WJElement {
      * @param e
      */
     __publicField(this, "onOpen", (e) => {
-      this.dialog.innerHTML = "";
+      if (this.dialog) {
+        this.dialog.innerHTML = "";
+      }
       Promise.resolve(this.beforeOpen(this, e)).then((res) => {
         this.htmlDialogBody(this.dialog);
         this.dialog.showModal();

package/dist/wje-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set placement(value) {\n        this.setAttribute('placement', value);\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {string|string}\n     */\n    get placement() {\n        return this.getAttribute('placement') || 'slide-up';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set async(value) {\n        this.setAttribute('async', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get async() {\n        return this.hasAttribute('async');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set closeHidden(value) {\n        if (value) this.setAttribute('close-hidden', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get closeHidden() {\n        return !!this.hasAttribute('close-hidden');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @type {string}\n     */\n    className = 'Dialog';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('fade', this.placement, params.size);\n\n        let dialog = document.createElement('dialog');\n        dialog.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n        return fragment;\n    }\n\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n        close.appendChild(icon);\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.getAttribute('headline')}</span>`;\n\n        let slotHeader = document.createElement('slot');\n        slotHeader.setAttribute('name', 'header');\n\n        const headerActions = document.createElement('div');\n        headerActions.classList.add('header-actions');\n        headerActions.setAttribute('part', 'header-actions');\n        headerActions.appendChild(slotHeader);\n\n        header.appendChild(headerActions);\n        if (!this.closeHidden) header.appendChild(close);\n\n        let contentSlot = document.createElement('slot');\n\n        let body = document.createElement('div');\n        body.setAttribute('part', 'body');\n        body.classList.add('dialog-content');\n        body.appendChild(contentSlot);\n\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n\n        footer.appendChild(slotFooter);\n\n        dialog.appendChild(header);\n        dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\n    }\n\n    /**\n     * Draws the component after it has been drawn.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    afterDraw(context, store, params) {\n        if (params.trigger) {\n            event.addListener(document, params.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.addEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the component is disconnected.\n     */\n    beforeDisconnect() {\n        if (this.params?.trigger) {\n            event.removeListener(document, this.params?.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.removeEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen() {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen() {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose() {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose() {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        this.dialog.innerHTML = '';\n\n        Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n            this.htmlDialogBody(this.dialog);\n\n            this.dialog.showModal(); // Now open the dialog\n\n            if (this.dialog.open) {\n                Promise.resolve(this.afterOpen(this, e));\n            }\n        });\n    };\n\n    /**\n     * Closes the dialog.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        Promise.resolve(this.beforeClose(this, e)).then((res) => {\n            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            console.log('Button clicked');\n\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAO;AAuDX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAwKZ;AAAA;AAAA;AAAA;AAAA,kCAAS,CAAC,MAAM;AACZ,WAAK,OAAO,YAAY;AAExB,cAAQ,QAAQ,KAAK,WAAW,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ;AACpD,aAAK,eAAe,KAAK,MAAM;AAE/B,aAAK,OAAO;AAEZ,YAAI,KAAK,OAAO,MAAM;AAClB,kBAAQ,QAAQ,KAAK,UAAU,MAAM,CAAC,CAAC;AAAA,QACvD;AAAA,MACA,CAAS;AAAA,IACJ;AAMD;AAAA;AAAA;AAAA;AAAA,mCAAU,CAAC,MAAM;AACb,cAAQ,QAAQ,KAAK,YAAY,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ;AACrD,aAAK,OAAO;AAEZ,YAAI,CAAC,KAAK,OAAO,MAAM;AACnB,kBAAQ,QAAQ,KAAK,WAAW,MAAM,CAAC,CAAC;AAAA,QACxD;AAAA,MACA,CAAS;AAAA,IACJ;AAAA,EAxPL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,EAAE;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY,OAAO;AACnB,QAAI,MAAO,MAAK,aAAa,gBAAgB,EAAE;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,cAAc;AACd,WAAO,CAAC,CAAC,KAAK,aAAa,cAAc;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,KAAK,SAAS,OAAO,QAAQ;AACzB,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,UAAU,IAAI,QAAQ,KAAK,WAAW,OAAO,IAAI;AAEtD,QAAI,SAAS,SAAS,cAAc,QAAQ;AAC5C,WAAO,UAAU,IAAI,cAAc;AAEnC,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,eAAe,QAAQ;AACnB,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,GAAG;AAC7B,SAAK,aAAa,QAAQ,WAAW;AAErC,QAAI,QAAQ,SAAS,cAAc,YAAY;AAC/C,UAAM,aAAa,QAAQ,MAAM;AACjC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,iBAAiB,SAAS,CAAC,MAAM;AACnC,WAAK,MAAM,CAAC;AAAA,IACxB,CAAS;AACD,UAAM,YAAY,IAAI;AAEtB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AACpC,QAAI,KAAK,aAAa,UAAU;AAC5B,aAAO,YAAY,yBAAyB,KAAK,aAAa,UAAU,CAAC;AAE7E,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,QAAQ;AAExC,UAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,kBAAc,UAAU,IAAI,gBAAgB;AAC5C,kBAAc,aAAa,QAAQ,gBAAgB;AACnD,kBAAc,YAAY,UAAU;AAEpC,WAAO,YAAY,aAAa;AAChC,QAAI,CAAC,KAAK,YAAa,QAAO,YAAY,KAAK;AAE/C,QAAI,cAAc,SAAS,cAAc,MAAM;AAE/C,QAAI,OAAO,SAAS,cAAc,KAAK;AACvC,SAAK,aAAa,QAAQ,MAAM;AAChC,SAAK,UAAU,IAAI,gBAAgB;AACnC,SAAK,YAAY,WAAW;AAE5B,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AACpC,WAAO,YAAY;AAEnB,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,QAAQ;AAExC,WAAO,YAAY,UAAU;AAE7B,WAAO,YAAY,MAAM;AACzB,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,MAAM;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,MAAM,GAAG;AACL,SAAK,QAAQ,CAAC;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,UAAU,SAAS,OAAO,QAAQ;AAC9B,QAAI,OAAO,SAAS;AAChB,YAAM,YAAY,UAAU,OAAO,SAAS,MAAM,KAAK,MAAM;AAAA,IACzE;AAAA,EAGA;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,SAAI,UAAK,WAAL,mBAAa,SAAS;AACtB,YAAM,eAAe,WAAU,UAAK,WAAL,mBAAa,SAAS,MAAM,KAAK,MAAM;AAAA,IAClF;AAAA,EAGA;AAAA;AAAA;AAAA;AAAA,EAKI,aAAa;AAAA,EAEjB;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AAAA,EAEhB;AAAA;AAAA;AAAA;AAAA,EAKI,cAAc;AAAA,EAElB;AAAA;AAAA;AAAA;AAAA,EAKI,aAAa;AAAA,EAEjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwCI,sBAAsB,QAAQ,SAAS;AACnC,WAAO,iBAAiB,oBAAoB,OAAO,MAAM;AACrD,cAAQ,IAAI,gBAAgB;AAE5B,UAAI,kBAAkB,SAAS,cAAc,KAAK;AAClD,sBAAgB,UAAU,IAAI,kBAAkB;AAEhD,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,UAAU;AACpC,WAAK,aAAa,QAAQ,UAAU;AAEpC,sBAAgB,YAAY,IAAI;AAEhC,UAAI,eAAe,KAAK,OAAO;AAC/B,sBAAgB,MAAM,MAAM,GAAG,YAAY;AAC3C,sBAAgB,MAAM,SAAS,IAAI,YAAY;AAE/C,WAAK,OAAO,YAAY,eAAe;AAEvC,YAAM,QAAO,EACR,KAAK,CAAC,QAAQ;AACX,aAAK,MAAO;AACZ,wBAAgB,OAAQ;AAAA,MAC3B,CAAA,EACA,MAAM,CAAC,QAAQ;AACZ,gBAAQ,MAAM,GAAG;AACjB,wBAAgB,OAAQ;AAAA,MAC5C,CAAiB;AAAA,IACjB,CAAS;AAAA,EACT;AACA;AC3TA,OAAO,OAAO,cAAc,MAAM;"}
+{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set placement(value) {\n        this.setAttribute('placement', value);\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {string|string}\n     */\n    get placement() {\n        return this.getAttribute('placement') || 'slide-up';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set async(value) {\n        this.setAttribute('async', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get async() {\n        return this.hasAttribute('async');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set closeHidden(value) {\n        if (value) this.setAttribute('close-hidden', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get closeHidden() {\n        return !!this.hasAttribute('close-hidden');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @type {string}\n     */\n    className = 'Dialog';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('fade', this.placement, params.size);\n\n        let dialog = document.createElement('dialog');\n        dialog.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n        return fragment;\n    }\n\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n        close.appendChild(icon);\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.getAttribute('headline')}</span>`;\n\n        let slotHeader = document.createElement('slot');\n        slotHeader.setAttribute('name', 'header');\n\n        const headerActions = document.createElement('div');\n        headerActions.classList.add('header-actions');\n        headerActions.setAttribute('part', 'header-actions');\n        headerActions.appendChild(slotHeader);\n\n        header.appendChild(headerActions);\n        if (!this.closeHidden) header.appendChild(close);\n\n        let contentSlot = document.createElement('slot');\n\n        let body = document.createElement('div');\n        body.setAttribute('part', 'body');\n        body.classList.add('dialog-content');\n        body.appendChild(contentSlot);\n\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n\n        footer.appendChild(slotFooter);\n\n        dialog.appendChild(header);\n        dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\n    }\n\n    /**\n     * Draws the component after it has been drawn.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    afterDraw(context, store, params) {\n        if (params.trigger) {\n            event.addListener(document, params.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.addEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the component is disconnected.\n     */\n    beforeDisconnect() {\n        if (this.params?.trigger) {\n            event.removeListener(document, this.params?.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.removeEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen() {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen() {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose() {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose() {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        if (this.dialog) {\n            this.dialog.innerHTML = '';\n        }\n\n        Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n            this.htmlDialogBody(this.dialog);\n\n            this.dialog.showModal(); // Now open the dialog\n\n            if (this.dialog.open) {\n                Promise.resolve(this.afterOpen(this, e));\n            }\n        });\n    }\n\n    /**\n     * Closes the dialog.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        Promise.resolve(this.beforeClose(this, e)).then((res) => {\n            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            console.log('Button clicked');\n\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":"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"}

package/dist/wje-options.js

@@ -175,15 +175,43 @@ class Options extends WJElement {
   get hasSearch() {
     return this.hasAttribute("search");
   }
+  /**
+   * Retrieves the value of the 'search-to-query-params' attribute from the current instance.
+   * @returns {string | null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.
+   */
   get searchToQueryParams() {
     return this.getAttribute("search-to-query-params");
   }
+  /**
+   * Sets the value to define search-to-query params behavior.
+   * @param {string} value The value to be set for the search-to-query-params attribute.
+   */
   set searchToQueryParams(value) {
     this.setAttribute("search-to-query-params", value);
   }
+  /**
+   * Determines whether the 'search-to-query-params' attribute is present on the element.
+   * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.
+   */
   get hasSearchToQueryParams() {
     return this.hasAttribute("search-to-query-params");
   }
+  /**
+   * Sets the value of the search parameter name attribute.
+   * @param {string} value The string value to set as the search parameter name.
+   */
+  set searchParamName(value) {
+    this.setAttribute("search-param-name", value);
+  }
+  /**
+   * Gets the search parameter name used in queries.
+   * Retrieves the value of the 'search-param-name' attribute.
+   * If the attribute is not set, it defaults to 'search'.
+   * @returns {string} The search parameter name used for queries.
+   */
+  get searchParamName() {
+    return this.getAttribute("search-param-name") || "search";
+  }
   /**
    * Checks if the lazy attribute is present.
    * @returns {boolean} True if the lazy attribute is present, false otherwise.
@@ -254,7 +282,7 @@ class Options extends WJElement {
       infiniteScroll.setCustomData = async (page, signal) => {
         let processedUrl = `${this.url}${this.search ? `/${this.search}` : ""}?page=${page}&size=${this.lazyLoadSize}`;
         if (this.hasSearchToQueryParams) {
-          processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&search=${this.search}` : ""}`;
+          processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&${this.searchParamName}=${this.search}` : ""}`;
         }
         let res = await this.service.get(processedUrl, null, false, signal);
         const filteredOptions = this.filterOutDrawnOptions(res);

package/dist/wje-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/**\n * `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n */\nexport default class Options extends WJElement {\n    /**\n     * Creates an instance of Options.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._loadedOptions = [];\n    }\n\n    dependencies = {\n        'wje-option': Option,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-list': List,\n    };\n\n    className = 'Options';\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 ['search'];\n    }\n\n    /**\n     * Sets the option array path attribute.\n     * @param {string} value The value to set for the option array path.\n     */\n    set optionArrayPath(value) {\n        this.setAttribute('option-array-path', value);\n    }\n\n    /**\n     * Gets the option array path attribute.\n     * @returns {string} The value of the option array path attribute or \"data\" if not set.\n     */\n    get optionArrayPath() {\n        return this.getAttribute('option-array-path');\n    }\n\n    /**\n     * Checks if the option array path attribute is present.\n     * @returns {boolean} True if the option array path attribute is present, false otherwise.\n     */\n    get hasOptionArrayPath() {\n        return this.hasAttribute('option-array-path');\n    }\n\n    /**\n     * Gets the dropdown height attribute.\n     * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n     */\n    get dropdownHeight() {\n        return this.getAttribute('dropdown-height') || '100%';\n    }\n\n    /**\n     * Sets the dropdown height attribute.\n     * @param {string} value The value to set for the dropdown height.\n     */\n    set dropdownHeight(value) {\n        this.setAttribute('dropdown-height', value);\n    }\n\n    /**\n     * Sets the item value attribute.\n     * @param {string} value The value to set for the item value.\n     */\n    set itemValue(value) {\n        this.setAttribute('item-value', value);\n    }\n\n    /**\n     * Gets the item value attribute.\n     * @returns {string} The value of the item value attribute or \"value\" if not set.\n     */\n    get itemValue() {\n        return this.getAttribute('item-value') || 'value';\n    }\n\n    /**\n     * Sets the item text attribute.\n     * @param {string} value The value to set for the item text.\n     */\n    set itemText(value) {\n        this.setAttribute('item-text', value);\n    }\n\n    /**\n     * Gets the item text attribute.\n     * @returns {string} The value of the item text attribute or \"text\" if not set.\n     */\n    get itemText() {\n        return this.getAttribute('item-text') || 'text';\n    }\n\n    /**\n     * Gets the lazy load size attribute.\n     * @returns {number} The value of the lazy load size attribute or 10 if not set.\n     */\n    get lazyLoadSize() {\n        return this.getAttribute('lazy-load-size') || 10;\n    }\n\n    /**\n     * Sets the lazy load size attribute.\n     * @param {number} value The value to set for the lazy load size.\n     */\n    set lazyLoadSize(value) {\n        this.setAttribute('lazy-load-size', value);\n    }\n\n    /**\n     * Sets the search attribute.\n     * @param {string} value The value to set for the search.\n     */\n    set search(value) {\n        this.setAttribute('search', value);\n    }\n\n    /**\n     * Gets the search attribute.\n     * @returns {string} The value of the search attribute.\n     */\n    get search() {\n        return this.getAttribute('search');\n    }\n\n    /**\n     * Checks if the search attribute is present.\n     * @returns {boolean} True if the search attribute is present, false otherwise.\n     */\n    get hasSearch() {\n        return this.hasAttribute('search');\n    }\n\n    get searchToQueryParams() {\n        return this.getAttribute('search-to-query-params');\n    }\n\n    set searchToQueryParams(value) {\n        this.setAttribute('search-to-query-params', value);\n    }\n\n    get hasSearchToQueryParams() {\n        return this.hasAttribute('search-to-query-params');\n    }\n\n    /**\n     * Checks if the lazy attribute is present.\n     * @returns {boolean} True if the lazy attribute is present, false otherwise.\n     */\n    get lazy() {\n        return this.hasAttribute('lazy');\n    }\n\n    /**\n     * Sets the lazy attribute.\n     * @param {boolean} value The value to set for the lazy attribute.\n     */\n    set lazy(value) {\n        this.setAttribute('lazy', value);\n    }\n\n    /**\n     * Gets the loaded options.\n     * @returns {Array} The loaded options.\n     */\n    get options() {\n        return this.loadedOptions?.flat();\n    }\n\n    get loadedOptions() {\n        return this._loadedOptions;\n    }\n\n    set loadedOptions(loadedOptions) {\n        this._loadedOptions = loadedOptions;\n    }\n\n    /**\n     * Lifecycle method, called whenever an observed property changes.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (this.infiniteScroll && name === 'search' && oldValue !== newValue) {\n            this.loadedOptions = [];\n            this.infiniteScroll.placementObj.innerHTML = '';\n            this.infiniteScroll.totalPages = 0;\n            this.infiniteScroll.refresh();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     * Fetches the pages and creates the options elements.\n     */\n    afterDraw() {\n        event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    async draw() {\n        let fragment = document.createDocumentFragment();\n\n        const slot = document.createElement('slot');\n\n        if (this.hasAttribute('lazy')) {\n            const list = document.createElement('wje-list');\n\n            const infiniteScroll = document.createElement('wje-infinite-scroll');\n            infiniteScroll.setAttribute('placement', 'wje-list');\n            infiniteScroll.setAttribute('height', this.dropdownHeight);\n            infiniteScroll.setAttribute('object-name', this.optionArrayPath);\n            infiniteScroll.append(list);\n\n            infiniteScroll.dataToHtml = this.htmlItem;\n\n            infiniteScroll.setCustomData = async (page, signal) => {\n                let processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}`;\n\n                if (this.hasSearchToQueryParams) {\n                    processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&search=${this.search}` : ''}`;\n                }\n\n                let res = await this.service.get(processedUrl, null, false, signal);\n                const filteredOptions = this.filterOutDrawnOptions(res);\n                this.loadedOptions.push(...this.processData(filteredOptions));\n\n                return filteredOptions;\n            };\n\n            if (!this.contains(infiniteScroll)) {\n                this.appendChild(infiniteScroll);\n            }\n\n            this.infiniteScroll = infiniteScroll;\n        } else {\n            this.response = await this.getPages();\n            let optionsData = this.filterOutDrawnOptions(this.response);\n            optionsData = this.processData(optionsData);\n\n            this.loadedOptions.push(...optionsData);\n\n            this.append(...optionsData.map(this.htmlItem));\n        }\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n\n    /**\n     * Processes the given data and returns the options based on the option array path.\n     * @param {any} data The data to be processed.\n     * @returns {any} - The options based on the option array path.\n     */\n    processData(data) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n        let options = data;\n\n        splittedOptionArrayPath?.forEach((path) => {\n            options = options[path];\n        });\n\n        return options ?? [];\n    }\n\n    /**\n     * Filters out drawn options from the response.\n     * @param {object | null} response The response to filter.\n     * @returns {object} The filtered response.\n     */\n    filterOutDrawnOptions(response) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n        let filteredResponse = structuredClone(response);\n\n        filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n        return filteredResponse;\n    }\n\n    /**\n     * Recursively updates the object based on the provided path to the property.\n     * @param {object | Array | null} object\n     * @param {Array<string> | null} pathToProperty\n     * @returns {object | Array | null}\n     */\n    recursiveUpdate = (object, pathToProperty) => {\n        if (pathToProperty.length === 0) {\n            if (Array.isArray(object)) {\n                return object.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                );\n            } else {\n                console.error('Expected an array but got:', object, pathToProperty);\n                return [];\n            }\n        }\n\n        const [currentPath, ...remainingPath] = pathToProperty;\n        if (remainingPath.length > 0) {\n            object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n        } else {\n            object[currentPath] =\n                object[currentPath]?.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                ) ?? [];\n        }\n        return object;\n    };\n\n    /**\n     * Generates an HTML option element based on the provided item.\n     * @param {object} item The item to generate the option element for.\n     * @returns {HTMLElement} The generated option element.\n     */\n    htmlItem = (item) => {\n        let option = document.createElement('wje-option');\n\n        if (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n        }\n\n        if (item[this.itemText] === null || item[this.itemText] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n        }\n\n        option.setAttribute('value', item[this.itemValue] ?? '');\n        option.innerText = item[this.itemText] ?? '';\n\n        return option;\n    };\n\n    /**\n     * Fetches the pages from the provided URL.\n     * @param {number} page The page number to fetch.\n     * @returns {Promise<object>} The fetched data.\n     * @throws Will throw an error if the response is not ok.\n     */\n    async getPages(page) {\n        const response = await fetch(this.url);\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Finds the selected option data based on the given selected option values.\n     * @param {Array} selectedOptionValues The array of selected option values.\n     * @returns {Array} - The array of option data that matches the selected option values.\n     */\n    findSelectedOptionData(selectedOptionValues = []) {\n        return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n    }\n\n    /**\n     * Adds an option to the element.\n     * @param {object} optionData The data of the option to be added.\n     */\n    addOption(optionData) {\n        if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n            return;\n        }\n\n        this.prepend(this.htmlItem(optionData));\n        this.loadedOptions.push(optionData);\n    }\n\n    /**\n     * Adds options to the element.\n     * @param {Array} optionsData The array of option data to be added.\n     * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n     */\n    addOptions(optionsData = [], silent = false) {\n        if (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n        else this.addOption(optionsData, silent);\n    }\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/**\n * `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n */\nexport default class Options extends WJElement {\n    /**\n     * Creates an instance of Options.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._loadedOptions = [];\n    }\n\n    dependencies = {\n        'wje-option': Option,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-list': List,\n    };\n\n    className = 'Options';\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 ['search'];\n    }\n\n    /**\n     * Sets the option array path attribute.\n     * @param {string} value The value to set for the option array path.\n     */\n    set optionArrayPath(value) {\n        this.setAttribute('option-array-path', value);\n    }\n\n    /**\n     * Gets the option array path attribute.\n     * @returns {string} The value of the option array path attribute or \"data\" if not set.\n     */\n    get optionArrayPath() {\n        return this.getAttribute('option-array-path');\n    }\n\n    /**\n     * Checks if the option array path attribute is present.\n     * @returns {boolean} True if the option array path attribute is present, false otherwise.\n     */\n    get hasOptionArrayPath() {\n        return this.hasAttribute('option-array-path');\n    }\n\n    /**\n     * Gets the dropdown height attribute.\n     * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n     */\n    get dropdownHeight() {\n        return this.getAttribute('dropdown-height') || '100%';\n    }\n\n    /**\n     * Sets the dropdown height attribute.\n     * @param {string} value The value to set for the dropdown height.\n     */\n    set dropdownHeight(value) {\n        this.setAttribute('dropdown-height', value);\n    }\n\n    /**\n     * Sets the item value attribute.\n     * @param {string} value The value to set for the item value.\n     */\n    set itemValue(value) {\n        this.setAttribute('item-value', value);\n    }\n\n    /**\n     * Gets the item value attribute.\n     * @returns {string} The value of the item value attribute or \"value\" if not set.\n     */\n    get itemValue() {\n        return this.getAttribute('item-value') || 'value';\n    }\n\n    /**\n     * Sets the item text attribute.\n     * @param {string} value The value to set for the item text.\n     */\n    set itemText(value) {\n        this.setAttribute('item-text', value);\n    }\n\n    /**\n     * Gets the item text attribute.\n     * @returns {string} The value of the item text attribute or \"text\" if not set.\n     */\n    get itemText() {\n        return this.getAttribute('item-text') || 'text';\n    }\n\n    /**\n     * Gets the lazy load size attribute.\n     * @returns {number} The value of the lazy load size attribute or 10 if not set.\n     */\n    get lazyLoadSize() {\n        return this.getAttribute('lazy-load-size') || 10;\n    }\n\n    /**\n     * Sets the lazy load size attribute.\n     * @param {number} value The value to set for the lazy load size.\n     */\n    set lazyLoadSize(value) {\n        this.setAttribute('lazy-load-size', value);\n    }\n\n    /**\n     * Sets the search attribute.\n     * @param {string} value The value to set for the search.\n     */\n    set search(value) {\n        this.setAttribute('search', value);\n    }\n\n    /**\n     * Gets the search attribute.\n     * @returns {string} The value of the search attribute.\n     */\n    get search() {\n        return this.getAttribute('search');\n    }\n\n    /**\n     * Checks if the search attribute is present.\n     * @returns {boolean} True if the search attribute is present, false otherwise.\n     */\n    get hasSearch() {\n        return this.hasAttribute('search');\n    }\n\n    /**\n     * Retrieves the value of the 'search-to-query-params' attribute from the current instance.\n     * @returns {string | null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.\n     */\n    get searchToQueryParams() {\n        return this.getAttribute('search-to-query-params');\n    }\n\n    /**\n     * Sets the value to define search-to-query params behavior.\n     * @param {string} value The value to be set for the search-to-query-params attribute.\n     */\n    set searchToQueryParams(value) {\n        this.setAttribute('search-to-query-params', value);\n    }\n\n    /**\n     * Determines whether the 'search-to-query-params' attribute is present on the element.\n     * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.\n     */\n    get hasSearchToQueryParams() {\n        return this.hasAttribute('search-to-query-params');\n    }\n\n    /**\n     * Sets the value of the search parameter name attribute.\n     * @param {string} value The string value to set as the search parameter name.\n     */\n    set searchParamName(value) {\n        this.setAttribute('search-param-name', value);\n    }\n\n    /**\n     * Gets the search parameter name used in queries.\n     * Retrieves the value of the 'search-param-name' attribute.\n     * If the attribute is not set, it defaults to 'search'.\n     * @returns {string} The search parameter name used for queries.\n     */\n    get searchParamName() {\n        return this.getAttribute('search-param-name') || 'search';\n    }\n    /**\n     * Checks if the lazy attribute is present.\n     * @returns {boolean} True if the lazy attribute is present, false otherwise.\n     */\n    get lazy() {\n        return this.hasAttribute('lazy');\n    }\n\n    /**\n     * Sets the lazy attribute.\n     * @param {boolean} value The value to set for the lazy attribute.\n     */\n    set lazy(value) {\n        this.setAttribute('lazy', value);\n    }\n\n    /**\n     * Gets the loaded options.\n     * @returns {Array} The loaded options.\n     */\n    get options() {\n        return this.loadedOptions?.flat();\n    }\n\n    get loadedOptions() {\n        return this._loadedOptions;\n    }\n\n    set loadedOptions(loadedOptions) {\n        this._loadedOptions = loadedOptions;\n    }\n\n    /**\n     * Lifecycle method, called whenever an observed property changes.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (this.infiniteScroll && name === 'search' && oldValue !== newValue) {\n            this.loadedOptions = [];\n            this.infiniteScroll.placementObj.innerHTML = '';\n            this.infiniteScroll.totalPages = 0;\n            this.infiniteScroll.refresh();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     * Fetches the pages and creates the options elements.\n     */\n    afterDraw() {\n        event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    async draw() {\n        let fragment = document.createDocumentFragment();\n\n        const slot = document.createElement('slot');\n\n        if (this.hasAttribute('lazy')) {\n            const list = document.createElement('wje-list');\n\n            const infiniteScroll = document.createElement('wje-infinite-scroll');\n            infiniteScroll.setAttribute('placement', 'wje-list');\n            infiniteScroll.setAttribute('height', this.dropdownHeight);\n            infiniteScroll.setAttribute('object-name', this.optionArrayPath);\n            infiniteScroll.append(list);\n\n            infiniteScroll.dataToHtml = this.htmlItem;\n\n            infiniteScroll.setCustomData = async (page, signal) => {\n                let processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}`;\n\n                if (this.hasSearchToQueryParams) {\n                    processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&${this.searchParamName}=${this.search}` : ''}`;\n                }\n\n                let res = await this.service.get(processedUrl, null, false, signal);\n                const filteredOptions = this.filterOutDrawnOptions(res);\n                this.loadedOptions.push(...this.processData(filteredOptions));\n\n                return filteredOptions;\n            };\n\n            if (!this.contains(infiniteScroll)) {\n                this.appendChild(infiniteScroll);\n            }\n\n            this.infiniteScroll = infiniteScroll;\n        } else {\n            this.response = await this.getPages();\n            let optionsData = this.filterOutDrawnOptions(this.response);\n            optionsData = this.processData(optionsData);\n\n            this.loadedOptions.push(...optionsData);\n\n            this.append(...optionsData.map(this.htmlItem));\n        }\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n\n    /**\n     * Processes the given data and returns the options based on the option array path.\n     * @param {any} data The data to be processed.\n     * @returns {any} - The options based on the option array path.\n     */\n    processData(data) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n        let options = data;\n\n        splittedOptionArrayPath?.forEach((path) => {\n            options = options[path];\n        });\n\n        return options ?? [];\n    }\n\n    /**\n     * Filters out drawn options from the response.\n     * @param {object | null} response The response to filter.\n     * @returns {object} The filtered response.\n     */\n    filterOutDrawnOptions(response) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n        let filteredResponse = structuredClone(response);\n\n        filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n        return filteredResponse;\n    }\n\n    /**\n     * Recursively updates the object based on the provided path to the property.\n     * @param {object | Array | null} object\n     * @param {Array<string> | null} pathToProperty\n     * @returns {object | Array | null}\n     */\n    recursiveUpdate = (object, pathToProperty) => {\n        if (pathToProperty.length === 0) {\n            if (Array.isArray(object)) {\n                return object.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                );\n            } else {\n                console.error('Expected an array but got:', object, pathToProperty);\n                return [];\n            }\n        }\n\n        const [currentPath, ...remainingPath] = pathToProperty;\n        if (remainingPath.length > 0) {\n            object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n        } else {\n            object[currentPath] =\n                object[currentPath]?.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                ) ?? [];\n        }\n        return object;\n    };\n\n    /**\n     * Generates an HTML option element based on the provided item.\n     * @param {object} item The item to generate the option element for.\n     * @returns {HTMLElement} The generated option element.\n     */\n    htmlItem = (item) => {\n        let option = document.createElement('wje-option');\n\n        if (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n        }\n\n        if (item[this.itemText] === null || item[this.itemText] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n        }\n\n        option.setAttribute('value', item[this.itemValue] ?? '');\n        option.innerText = item[this.itemText] ?? '';\n\n        return option;\n    };\n\n    /**\n     * Fetches the pages from the provided URL.\n     * @param {number} page The page number to fetch.\n     * @returns {Promise<object>} The fetched data.\n     * @throws Will throw an error if the response is not ok.\n     */\n    async getPages(page) {\n        const response = await fetch(this.url);\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Finds the selected option data based on the given selected option values.\n     * @param {Array} selectedOptionValues The array of selected option values.\n     * @returns {Array} - The array of option data that matches the selected option values.\n     */\n    findSelectedOptionData(selectedOptionValues = []) {\n        return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n    }\n\n    /**\n     * Adds an option to the element.\n     * @param {object} optionData The data of the option to be added.\n     */\n    addOption(optionData) {\n        if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n            return;\n        }\n\n        this.prepend(this.htmlItem(optionData));\n        this.loadedOptions.push(optionData);\n    }\n\n    /**\n     * Adds options to the element.\n     * @param {Array} optionsData The array of option data to be added.\n     * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n     */\n    addOptions(optionsData = [], silent = false) {\n        if (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n        else this.addOption(optionsData, silent);\n    }\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":"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"}

package/dist/wje-stepper.js

@@ -42,40 +42,9 @@ class Stepper extends WJElement {
     content.setAttribute("part", "content");
     content.className = "content";
     const steps = Array.from(this.children);
-    steps.forEach((step, index) => {
+    steps == null ? void 0 : steps.forEach((step, index) => {
       if (step.nodeName === "WJE-STEP") {
-        const nav = document.createElement("div");
-        nav.className = "step-header";
-        nav.addEventListener("click", () => this.goToStep(index));
-        const badge = document.createElement("wje-badge");
-        badge.setAttribute("label", (index + 1).toString());
-        badge.className = "step-badge";
-        badge.innerHTML = index + 1;
-        const label = document.createElement("span");
-        label.innerText = step.getAttribute("label") || `${this.localizer.translate("wj.stepper.step")} ${index + 1}`;
-        if (index === this.currentStep || step.hasAttribute("active")) {
-          this.setStepActive(nav, badge);
-        }
-        if (step.hasAttribute("disabled")) {
-          nav.setAttribute("disabled", "");
-        } else {
-          nav.classList.add("pointer");
-        }
-        nav.appendChild(badge);
-        nav.appendChild(label);
-        header.appendChild(nav);
-        if (index < steps.length - 1) {
-          const arrowIcon = document.createElement("wje-icon");
-          arrowIcon.setAttribute("name", "chevron-right");
-          arrowIcon.classList.add("arrow-icon");
-          arrowIcon.setAttribute("size", "small");
-          header.appendChild(arrowIcon);
-        }
-        step.classList.add("step");
-        if (index !== this.currentStep) {
-          step.style.display = "none";
-        }
-        this.steps.push(step);
+        this.processStep(index, step, header, steps);
       }
     });
     let slot = document.createElement("slot");
@@ -85,12 +54,22 @@ class Stepper extends WJElement {
     prevButton.setAttribute("label", this.localizer.translate("wj.stepper.button.previous"));
     prevButton.disabled = this.currentStep === 0;
     prevButton.innerHTML = "Prev";
-    const nextButton = document.createElement("wje-button");
+    let nextButton = document.createElement("wje-button");
     nextButton.setAttribute("label", this.localizer.translate("wj.stepper.button.next"));
     nextButton.disabled = this.currentStep === this.steps.length - 1;
     nextButton.innerHTML = "Next";
-    navButtons.appendChild(prevButton);
-    navButtons.appendChild(nextButton);
+    if (steps.length > 1) {
+      navButtons.appendChild(prevButton);
+      navButtons.appendChild(nextButton);
+    } else {
+      nextButton = document.createElement("wje-button");
+      nextButton.setAttribute("label", this.localizer.translate("wj.stepper.button.finish"));
+      nextButton.innerHTML = this.localizer.translate("wj.stepper.button.finish");
+      nextButton.setAttribute("color", "primary");
+      prevButton.hidden = true;
+      navButtons.appendChild(prevButton);
+      navButtons.appendChild(nextButton);
+    }
     content.appendChild(slot);
     native.appendChild(header);
     native.appendChild(content);
@@ -102,10 +81,47 @@ class Stepper extends WJElement {
     this.next = nextButton;
     return fragment;
   }
+  processStep(index, step, header, steps) {
+    const nav = document.createElement("div");
+    nav.className = "step-header";
+    nav.addEventListener("click", () => this.goToStep(index));
+    const badge = document.createElement("wje-badge");
+    badge.setAttribute("label", (index + 1).toString());
+    badge.className = "step-badge";
+    badge.innerHTML = index + 1;
+    const label = document.createElement("span");
+    label.innerText = step.getAttribute("label") || `${this.localizer.translate("wj.stepper.step")} ${index + 1}`;
+    if (index === this.currentStep || step.hasAttribute("active")) {
+      this.setStepActive(nav, badge);
+    }
+    if (step.hasAttribute("disabled")) {
+      nav.setAttribute("disabled", "");
+    } else {
+      nav.classList.add("pointer");
+    }
+    nav.appendChild(badge);
+    nav.appendChild(label);
+    header.appendChild(nav);
+    if (index < steps.length - 1) {
+      const arrowIcon = document.createElement("wje-icon");
+      arrowIcon.setAttribute("name", "chevron-right");
+      arrowIcon.classList.add("arrow-icon");
+      arrowIcon.setAttribute("size", "small");
+      header.appendChild(arrowIcon);
+    }
+    step.classList.add("step");
+    if (index !== this.currentStep) {
+      step.style.display = "none";
+    }
+    this.steps.push(step);
+  }
   /**
    * Sets up the attributes for the component.
    */
   afterDraw() {
+    if (this.steps.length <= 1) {
+      this.prev.hidden = true;
+    }
     event.addListener(this.prev, "click", "", () => this.navigate(-1));
     event.addListener(this.next, "click", "", () => this.navigate(1));
   }

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    constructor() {\n        super();\n        this.currentStep = 0;\n\n        this.localizer = new Localizer(this);\n        this.steps = [];\n    }\n\n    get active() {\n        if (this.hasAttribute('active')) return this.getAttribute('active');\n\n        return 'primary';\n    }\n\n    get done() {\n        if (this.hasAttribute('done')) return this.getAttribute('done');\n\n        return 'success';\n    }\n\n    className = 'Stepper';\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the stepper.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.className = 'native-stepper';\n\n        const header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.className = 'header';\n\n        const content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.className = 'content';\n\n        const steps = Array.from(this.children);\n\n        steps.forEach((step, index) => {\n            if (step.nodeName === 'WJE-STEP') {\n                const nav = document.createElement('div');\n                nav.className = 'step-header';\n                nav.addEventListener('click', () => this.goToStep(index));\n\n                const badge = document.createElement('wje-badge');\n                badge.setAttribute('label', (index + 1).toString());\n                badge.className = 'step-badge';\n                badge.innerHTML = index + 1;\n\n                const label = document.createElement('span');\n                label.innerText =\n                    step.getAttribute('label') || `${this.localizer.translate('wj.stepper.step')} ${index + 1}`; // default label\n\n                // set active step\n                if (index === this.currentStep || step.hasAttribute('active')) {\n                    this.setStepActive(nav, badge);\n                }\n\n                if (step.hasAttribute('disabled')) {\n                    nav.setAttribute('disabled', '');\n                } else {\n                    nav.classList.add('pointer');\n                }\n\n                nav.appendChild(badge);\n                nav.appendChild(label);\n\n                header.appendChild(nav);\n\n                if (index < steps.length - 1) {\n                    const arrowIcon = document.createElement('wje-icon');\n                    arrowIcon.setAttribute('name', 'chevron-right');\n                    arrowIcon.classList.add('arrow-icon');\n                    arrowIcon.setAttribute('size', 'small');\n\n                    header.appendChild(arrowIcon);\n                }\n\n                step.classList.add('step');\n                if (index !== this.currentStep) {\n                    step.style.display = 'none';\n                }\n\n                this.steps.push(step);\n            }\n        });\n\n        let slot = document.createElement('slot');\n\n        const navButtons = document.createElement('div');\n        navButtons.className = 'nav-buttons';\n\n        const prevButton = document.createElement('wje-button');\n        prevButton.setAttribute('label', this.localizer.translate('wj.stepper.button.previous'));\n        prevButton.disabled = this.currentStep === 0;\n        prevButton.innerHTML = 'Prev';\n\n        const nextButton = document.createElement('wje-button');\n        nextButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n        nextButton.disabled = this.currentStep === this.steps.length - 1;\n        nextButton.innerHTML = 'Next';\n\n        navButtons.appendChild(prevButton);\n        navButtons.appendChild(nextButton);\n\n        content.appendChild(slot);\n\n        native.appendChild(header);\n        native.appendChild(content);\n        native.appendChild(navButtons);\n\n        fragment.appendChild(native);\n\n        this.header = header;\n        this.headerSteps = header.querySelectorAll('.step-header');\n        this.prev = prevButton;\n        this.next = nextButton;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    afterDraw() {\n        event.addListener(this.prev, 'click', '', () => this.navigate(-1));\n        event.addListener(this.next, 'click', '', () => this.navigate(1));\n    }\n\n    /**\n     * Navigates to a different step in a multi-step process based on the provided direction.\n     * @param {number} direction The navigation direction.\n     * Use a positive value to move forward or a negative value to move backward.\n     */\n    navigate(direction) {\n        this.goToStep(this.currentStep + direction, direction);\n    }\n\n    /**\n     * Navigates to a specific step in a multi-step process and updates the stepper UI accordingly.\n     * @param {number} stepIndex The index of the step to navigate to.\n     * @param {number} direction The navigation direction. A positive value indicates forward navigation, and a negative value indicates backward navigation.\n     * //@fires stepper:next Dispatched when navigating to the next step.\n     * //@fires stepper:prev Dispatched when navigating to the previous step.\n     * //@fires stepper:finish Dispatched when the final step is completed.\n     */\n    goToStep(stepIndex, direction) {\n        if (stepIndex >= 0 && stepIndex < this.steps.length) {\n            if (direction > 0) {\n                this.dispatchEvent(\n                    new CustomEvent('stepper:next', { detail: { stepIndex }, bubbles: true, composed: true })\n                );\n            } else {\n                this.dispatchEvent(\n                    new CustomEvent('stepper:prev', { detail: { stepIndex }, bubbles: true, composed: true })\n                );\n            }\n\n            if (this.headerSteps[stepIndex].hasAttribute('disabled')) stepIndex += direction;\n\n            this.headerSteps.forEach((step, index) => {\n                let badge = step.querySelector('wje-badge');\n\n                this.setStepDefault(step, badge, index);\n                if (index < stepIndex) this.setStepDone(step, badge);\n            });\n\n            this.setStepActive(this.headerSteps[stepIndex], null, stepIndex);\n            this.setContentActive(stepIndex);\n\n            this.currentStep = stepIndex;\n\n            this.prev.disabled = this.currentStep === 0;\n            if (this.currentStep === this.steps.length - 1) {\n                this.next.innerHTML = this.localizer.translate('wj.stepper.button.finish');\n                this.next.setAttribute('color', 'primary');\n                this.next.refresh();\n            } else {\n                this.next.innerHTML = this.localizer.translate('wj.stepper.button.next');\n                this.next.removeAttribute('color');\n                this.next.refresh();\n            }\n        } else if (stepIndex === this.steps.length) {\n            this.dispatchEvent(\n                new CustomEvent('stepper:finish', { detail: { stepIndex }, bubbles: true, composed: true })\n            );\n        }\n    }\n\n    /**\n     * Resets a step to its default state by clearing its active and done attributes.\n     * Updates the step's badge to show its index and removes any color styling.\n     * @param {HTMLElement} nav The navigation element representing the step.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     * @param {number} [stepIndex] The index of the step, used to set the badge content.\n     */\n    setStepDefault(nav, badge = null, stepIndex = 0) {\n        nav.removeAttribute('active');\n        nav.removeAttribute('done');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n        badge.innerHTML = stepIndex + 1;\n        badge.removeAttribute('color');\n    }\n\n    /**\n     * Sets a step as active by adding the `active` attribute and updating the step's badge.\n     * @param {HTMLElement} nav The navigation element representing the step to activate.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.\n     */\n    setStepActive(nav, badge = null, stepIndex = null) {\n        nav.setAttribute('active', '');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n        badge.innerHTML = stepIndex + 1;\n        badge.setAttribute('color', this.active);\n    }\n\n    /**\n     * Activates the content of a specific step by displaying it and hiding all others.\n     * @param {number} stepIndex The index of the step whose content should be displayed.\n     */\n    setContentActive(stepIndex) {\n        this.steps?.forEach((step, index) => {\n            if (index === stepIndex) {\n                step.style.display = 'block';\n            } else {\n                step.style.display = 'none';\n            }\n        });\n    }\n\n    /**\n     * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n     * @param {HTMLElement} nav The navigation element representing the completed step.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     */\n    setStepDone(nav, badge = null) {\n        nav.setAttribute('done', '');\n\n        const checkIcon = document.createElement('wje-icon');\n        checkIcon.setAttribute('name', 'check');\n        checkIcon.setAttribute('color', this.done);\n        checkIcon.setAttribute('size', 'medium');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n\n        badge.setAttribute('color', this.done);\n        badge.innerHTML = '';\n        badge.appendChild(checkIcon);\n    }\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    constructor() {\n        super();\n        this.currentStep = 0;\n\n        this.localizer = new Localizer(this);\n        this.steps = [];\n    }\n\n    get active() {\n        if (this.hasAttribute('active')) return this.getAttribute('active');\n\n        return 'primary';\n    }\n\n    get done() {\n        if (this.hasAttribute('done')) return this.getAttribute('done');\n\n        return 'success';\n    }\n\n    className = 'Stepper';\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the stepper.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.className = 'native-stepper';\n\n        const header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.className = 'header';\n\n        const content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.className = 'content';\n\n        const steps = Array.from(this.children);\n\n        steps?.forEach((step, index) => {\n            if (step.nodeName === 'WJE-STEP') {\n                this.processStep(index, step, header, steps);\n            }\n        });\n\n        let slot = document.createElement('slot');\n\n        const navButtons = document.createElement('div');\n        navButtons.className = 'nav-buttons';\n\n        const prevButton = document.createElement('wje-button');\n        prevButton.setAttribute('label', this.localizer.translate('wj.stepper.button.previous'));\n        prevButton.disabled = this.currentStep === 0;\n        prevButton.innerHTML = 'Prev';\n\n        let nextButton = document.createElement('wje-button');\n        nextButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n        nextButton.disabled = this.currentStep === this.steps.length - 1;\n        nextButton.innerHTML = 'Next';\n\n        if (steps.length > 1) {\n            navButtons.appendChild(prevButton);\n            navButtons.appendChild(nextButton);\n        } else {\n            nextButton = document.createElement('wje-button');\n            nextButton.setAttribute('label', this.localizer.translate('wj.stepper.button.finish'));\n            nextButton.innerHTML = this.localizer.translate('wj.stepper.button.finish');\n            nextButton.setAttribute('color', 'primary');\n\n            prevButton.hidden = true;\n            navButtons.appendChild(prevButton);\n            navButtons.appendChild(nextButton);\n        }\n\n        content.appendChild(slot);\n\n        native.appendChild(header);\n        native.appendChild(content);\n        native.appendChild(navButtons);\n\n        fragment.appendChild(native);\n\n        this.header = header;\n        this.headerSteps = header.querySelectorAll('.step-header');\n        this.prev = prevButton;\n        this.next = nextButton;\n\n        return fragment;\n    }\n\n    processStep(index, step, header, steps) {\n        const nav = document.createElement('div');\n        nav.className = 'step-header';\n        nav.addEventListener('click', () => this.goToStep(index));\n\n        const badge = document.createElement('wje-badge');\n        badge.setAttribute('label', (index + 1).toString());\n        badge.className = 'step-badge';\n        badge.innerHTML = index + 1;\n\n        const label = document.createElement('span');\n        label.innerText = step.getAttribute('label') || `${this.localizer.translate('wj.stepper.step')} ${index + 1}`; // default label\n\n        // set active step\n        if (index === this.currentStep || step.hasAttribute('active')) {\n            this.setStepActive(nav, badge);\n        }\n\n        if (step.hasAttribute('disabled')) {\n            nav.setAttribute('disabled', '');\n        } else {\n            nav.classList.add('pointer');\n        }\n\n        nav.appendChild(badge);\n        nav.appendChild(label);\n\n        header.appendChild(nav);\n\n        if (index < steps.length - 1) {\n            const arrowIcon = document.createElement('wje-icon');\n            arrowIcon.setAttribute('name', 'chevron-right');\n            arrowIcon.classList.add('arrow-icon');\n            arrowIcon.setAttribute('size', 'small');\n\n            header.appendChild(arrowIcon);\n        }\n\n        step.classList.add('step');\n        if (index !== this.currentStep) {\n            step.style.display = 'none';\n        }\n\n        this.steps.push(step);\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    afterDraw() {\n        if (this.steps.length <= 1) {\n            this.prev.hidden = true;\n        }\n\n        event.addListener(this.prev, 'click', '', () => this.navigate(-1));\n        event.addListener(this.next, 'click', '', () => this.navigate(1));\n    }\n\n    /**\n     * Navigates to a different step in a multi-step process based on the provided direction.\n     * @param {number} direction The navigation direction.\n     * Use a positive value to move forward or a negative value to move backward.\n     */\n    navigate(direction) {\n        this.goToStep(this.currentStep + direction, direction);\n    }\n\n    /**\n     * Navigates to a specific step in a multi-step process and updates the stepper UI accordingly.\n     * @param {number} stepIndex The index of the step to navigate to.\n     * @param {number} direction The navigation direction. A positive value indicates forward navigation, and a negative value indicates backward navigation.\n     * //@fires stepper:next Dispatched when navigating to the next step.\n     * //@fires stepper:prev Dispatched when navigating to the previous step.\n     * //@fires stepper:finish Dispatched when the final step is completed.\n     */\n    goToStep(stepIndex, direction) {\n        if (stepIndex >= 0 && stepIndex < this.steps.length) {\n            if (direction > 0) {\n                this.dispatchEvent(\n                    new CustomEvent('stepper:next', { detail: { stepIndex }, bubbles: true, composed: true })\n                );\n            } else {\n                this.dispatchEvent(\n                    new CustomEvent('stepper:prev', { detail: { stepIndex }, bubbles: true, composed: true })\n                );\n            }\n\n            if (this.headerSteps[stepIndex].hasAttribute('disabled')) stepIndex += direction;\n\n            this.headerSteps.forEach((step, index) => {\n                let badge = step.querySelector('wje-badge');\n\n                this.setStepDefault(step, badge, index);\n                if (index < stepIndex) this.setStepDone(step, badge);\n            });\n\n            this.setStepActive(this.headerSteps[stepIndex], null, stepIndex);\n            this.setContentActive(stepIndex);\n\n            this.currentStep = stepIndex;\n\n            this.prev.disabled = this.currentStep === 0;\n            if (this.currentStep === this.steps.length - 1) {\n                this.next.innerHTML = this.localizer.translate('wj.stepper.button.finish');\n                this.next.setAttribute('color', 'primary');\n                this.next.refresh();\n            } else {\n                this.next.innerHTML = this.localizer.translate('wj.stepper.button.next');\n                this.next.removeAttribute('color');\n                this.next.refresh();\n            }\n        } else if (stepIndex === this.steps.length) {\n            this.dispatchEvent(\n                new CustomEvent('stepper:finish', { detail: { stepIndex }, bubbles: true, composed: true })\n            );\n        }\n    }\n\n    /**\n     * Resets a step to its default state by clearing its active and done attributes.\n     * Updates the step's badge to show its index and removes any color styling.\n     * @param {HTMLElement} nav The navigation element representing the step.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     * @param {number} [stepIndex] The index of the step, used to set the badge content.\n     */\n    setStepDefault(nav, badge = null, stepIndex = 0) {\n        nav.removeAttribute('active');\n        nav.removeAttribute('done');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n        badge.innerHTML = stepIndex + 1;\n        badge.removeAttribute('color');\n    }\n\n    /**\n     * Sets a step as active by adding the `active` attribute and updating the step's badge.\n     * @param {HTMLElement} nav The navigation element representing the step to activate.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.\n     */\n    setStepActive(nav, badge = null, stepIndex = null) {\n        nav.setAttribute('active', '');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n        badge.innerHTML = stepIndex + 1;\n        badge.setAttribute('color', this.active);\n    }\n\n    /**\n     * Activates the content of a specific step by displaying it and hiding all others.\n     * @param {number} stepIndex The index of the step whose content should be displayed.\n     */\n    setContentActive(stepIndex) {\n        this.steps?.forEach((step, index) => {\n            if (index === stepIndex) {\n                step.style.display = 'block';\n            } else {\n                step.style.display = 'none';\n            }\n        });\n    }\n\n    /**\n     * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n     * @param {HTMLElement} nav The navigation element representing the completed step.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     */\n    setStepDone(nav, badge = null) {\n        nav.setAttribute('done', '');\n\n        const checkIcon = document.createElement('wje-icon');\n        checkIcon.setAttribute('name', 'check');\n        checkIcon.setAttribute('color', this.done);\n        checkIcon.setAttribute('size', 'medium');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n\n        badge.setAttribute('color', this.done);\n        badge.innerHTML = '';\n        badge.appendChild(checkIcon);\n    }\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-store.js

@@ -81,17 +81,18 @@ class PubSub {
   /**
    * If the passed event has callbacks attached to it, loop through each one and call it.
    * @param {string} event The name of the event to publish
-   * @param {object} [newData] The data to pass to the callbacks
-   * @param {object} [oldData] The data to pass to the callbacks
-   * @returns {Array} The callbacks for this event, or an empty array if no event exits
+   * @param {any} state The current state to pass to the callbacks
+   * @param {object} [newData] The new data to pass to the callbacks
+   * @param {object} [oldData] The old data to pass to the callbacks
+   * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists
    * @memberof PubSub
    */
-  publish(event, newData = {}, oldData = {}) {
+  publish(event, state, newData = {}, oldData = {}) {
     let self = this;
     if (!self.events.hasOwnProperty(event)) {
       return [];
     }
-    return self.events[event].map((callback) => callback(newData, oldData));
+    return self.events[event].map((callback) => callback(state, oldData, newData));
   }
 }
 class Store {
@@ -281,7 +282,7 @@ class Store {
         }
         let oldState = state[key];
         state[key] = value;
-        if (!this._isPause) this.events.publish(key, this._state, oldState);
+        if (!this._isPause) this.events.publish(key, this._state, state[key], oldState);
         if (this.status !== "mutation") {
           console.warn(`You should use a mutation to set ${key}`);
         }

package/dist/wje-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js","../packages/wje-store/pubsub.js","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/ADD`,\n            payload: payload2,\n            actionType: 'ADD',\n        };\n    };\n};\n\nconst addManyAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/ADD_MANY`,\n            payload: payload2,\n            actionType: 'ADD_MANY',\n        };\n    };\n};\n\nconst updateAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/UPDATE`,\n            payload: payload2,\n            actionType: 'UPDATE',\n        };\n    };\n};\n\nconst deleteAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/DELETE`,\n            payload: payload2,\n            actionType: 'DELETE',\n        };\n    };\n};\n\nconst loadAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/LOAD`,\n            payload: payload2,\n            actionType: 'LOAD',\n        };\n    };\n};\n\nexport { addAction, deleteAction, loadAction, updateAction, addManyAction };\n","export default class PubSub {\n    constructor() {\n        this.events = {};\n    }\n\n    /**\n     * Either create a new event instance for passed `event` name.\n     * or push a new callback into the existing collection.\n     * @param {string} event The event name to subscribe to\n     * @param {Function} callback The callback function to subscribe to the event\n     * @returns {number} A count of callbacks for this event\n     * @memberof PubSub\n     */\n    subscribe(event, callback) {\n        let self = this;\n        let index;\n\n        // If there's not already an event with this name set in our collection\n        // go ahead and create a new one and set it with an empty array, so we don't\n        // have to type check it later down-the-line\n        if (!self.events.hasOwnProperty(event)) {\n            self.events[event] = [];\n        }\n\n        index = self.events[event].push(callback) - 1;\n\n        return {\n            unsubscribe() {\n                self.events[event].splice(self.events[event].indexOf(callback), 1);\n            },\n        };\n    }\n\n    /**\n     * If the passed event has callbacks attached to it, loop through each one and call it.\n     * @param {string} event The name of the event to publish\n     * @param {object} [newData] The data to pass to the callbacks\n     * @param {object} [oldData] The data to pass to the callbacks\n     * @returns {Array} The callbacks for this event, or an empty array if no event exits\n     * @memberof PubSub\n     */\n    publish(event, newData = {}, oldData = {}) {\n        let self = this;\n\n        // There's no event to publish to, so bail out\n        if (!self.events.hasOwnProperty(event)) {\n            return [];\n        }\n\n        // Get each subscription and call its callback with the passed data\n        return self.events[event].map((callback) => callback(newData, oldData));\n    }\n}\n","import * as defaultStoreActions from './default-store-actions.js';\nimport PubSub from './pubsub.js';\n\n/**\n * @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n *   reducer: (state, action) => { ... },\n *   state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n */\nclass Store {\n    _state;\n    _reducer;\n    events;\n    status;\n\n    /**\n     * Initializes the store with optional reducer and state.\n     * @param {object} [params] Configuration for the store.\n     * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n     * @param {object} [params.state] Initial state of the store.\n     */\n    constructor(params = {}) {\n        this._isPause = false;\n        this._state = {};\n        this._reducer = () => {\n            return {};\n        };\n\n        // A status enum to set during actions and mutations\n        this.status = 'resting';\n\n        // Attach our PubSub module as an `events` element\n        this.events = new PubSub();\n\n        if (params?.hasOwnProperty('reducer')) {\n            this._reducer = params.reducer;\n        }\n\n        this.refreshProxy(params?.state);\n    }\n\n    /**\n     * Dispatches an action to update the state by invoking the reducer function.\n     * @param {object} action The action object containing the type and any associated payload.\n     * @param {string} action.type The type of the action being dispatched.\n     * @returns {boolean} Returns `true` after the state has been successfully updated.\n     * @example\n     * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n     * store.dispatch(action);\n     */\n    dispatch(action) {\n        // Create a console group which will contain the logs from our Proxy etc\n        // console.groupCollapsed(`ACTION: ${action.type}`);\n\n        // Let anything that's watching the status know that we're dispatching an action\n        this.status = 'action';\n\n        let newState = this._reducer(this._state, action);\n\n        this.status = 'mutation';\n        // Merge the old and new together to create a new state and set it\n        this._state = Object.assign(this._state, newState);\n\n        // Close our console group to keep things nice and neat\n        // console.groupEnd();\n\n        return true;\n    }\n\n    /**\n     * Retrieves a deep copy of the current state to ensure immutability.\n     * @returns {object} A deep copy of the current state.\n     * @example\n     * const currentState = store.getState();\n     * console.log(currentState);\n     */\n    getState() {\n        return JSON.parse(JSON.stringify(this._state));\n    }\n\n    /**\n     * Subscribes to a specific event with a provided callback function.\n     * @param {string} eventName The name of the event to subscribe to.\n     * @param {Function} callbackFn The function to execute when the event is triggered.\n     * @returns {Function} - A function to unsubscribe from the event.\n     * @example\n     * const unsubscribe = store.subscribe('stateChange', (newState) => {\n     *   console.log('State changed:', newState);\n     * });\n     * // Later, to unsubscribe\n     * unsubscribe();\n     */\n    subscribe(eventName, callbackFn) {\n        return this.events.subscribe(eventName, callbackFn);\n    }\n\n    /**\n     * Unsubscribes from a specific event by removing all associated listeners.\n     * @param {string} eventName The name of the event to unsubscribe from.\n     * @returns {void}\n     * @example\n     * store.unsubscribe('stateChange');\n     */\n    unsubscribe(eventName) {\n        delete this.events[eventName];\n    }\n\n    /**\n     * Pauses event handling or other operations.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.pause().doSomething();\n     */\n    pause() {\n        this._isPause = true;\n        return this;\n    }\n\n    /**\n     * Resumes event handling or other operations.\n     * @param {*} [val] Optional value to pass while resuming.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.play().doSomething();\n     */\n    play(val) {\n        this._isPause = false;\n        return this;\n    }\n\n    /**\n     * Merges a new reducer function into the existing reducer for a specific state property.\n     * @param {string} stateValueName The key in the state object that the new reducer will manage.\n     * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n     * @returns {void}\n     * @example\n     * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n     * store.mergeReducers('user', newReducer);\n     */\n    mergeReducers(stateValueName, newReducer) {\n        let reducerCopy = this._reducer;\n        this._reducer = (state, newState) => {\n            let preState = reducerCopy(state, newState);\n            return {\n                ...preState,\n                [stateValueName]: newReducer(newState, state[stateValueName]),\n            };\n        };\n    }\n\n    /**\n     * Synchronizes each entry in an array with the store by defining or updating state entries.\n     * @param {string} storeKey The key prefix used for defining or updating store entries.\n     * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n     * @param {string} [identificator] The property name used as a unique identifier for each entry.\n     * @returns {void}\n     * @example\n     * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n     * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n     */\n    makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n        array.forEach((entry) => {\n            if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n                this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n            } else {\n                this.define(\n                    `${storeKey}-${entry.id || entry.source || entry[identificator]}`,\n                    entry,\n                    null,\n                    identificator\n                );\n            }\n        });\n    }\n\n    /**\n     * Defines a new state variable and associates it with a reducer.\n     * @param {string} stateValueName The name of the state variable to define.\n     * @param {*} defaultValue The initial value of the state variable.\n     * @param {Function|null} [reducer] An optional reducer function to manage updates for the state variable.\n     * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n     * @returns {void}\n     * @example\n     * // Define a new state with a custom reducer\n     * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n     * @example\n     * // Define a new state with default array reducer\n     * store.define('items', [], null, 'itemId');\n     */\n    define(stateValueName, defaultValue, reducer, key = 'id') {\n        if (this._state.hasOwnProperty(stateValueName)) {\n            console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n            return;\n        }\n\n        if (reducer instanceof Function) {\n            this.mergeReducers(stateValueName, reducer);\n        } else {\n            if (defaultValue instanceof Array) {\n                this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n            } else {\n                this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n            }\n        }\n\n        this.refreshProxy({\n            ...this._state,\n            [stateValueName]: defaultValue,\n        });\n    }\n\n    /**\n     * Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n     * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n     * @returns {void}\n     * @example\n     * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n     */\n    refreshProxy(newState) {\n        // Set our state to be a Proxy. We are setting the default state by\n        // checking the params and defaulting to an empty object if no default\n        // state is passed in\n        this._state = new Proxy(newState || {}, {\n            set: (state, key, value) => {\n                if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n                    return true;\n                }\n\n                //Set the value as we would normally\n                let oldState = state[key];\n                state[key] = value;\n\n                // Trace out to the console. This will be grouped by the related action\n                // console.log(`stateChange: ${key}: `, value);\n\n                // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n                // Publish the change event for the components that are listening\n                if (!this._isPause) this.events.publish(key, this._state, oldState);\n\n                // Give the user a little telling off if they set a value directly\n                if (this.status !== 'mutation') {\n                    console.warn(`You should use a mutation to set ${key}`);\n                }\n\n                // Reset the status ready for the next operation\n                this.status = 'resting';\n\n                return true;\n            },\n        });\n    }\n\n    /**\n     * Creates a reducer function to manage an object state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n     * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n     * @example\n     * const userReducer = store.createObjectReducer('user');\n     * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n     */\n    createObjectReducer(stateValueName) {\n        return (action, state = {}) => {\n            if (\n                Array.isArray(action.payload) &&\n                (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)\n            ) {\n                console.error(`Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`);\n            }\n\n            const actionType = action.type.split('/')[1];\n\n            if (!['ADD', 'UPDATE', 'DELETE'].includes(actionType)) {\n                console.error(\n                    `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n                );\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    return {\n                        ...action.payload,\n                    };\n                case `${stateValueName}/UPDATE`:\n                    return {\n                        ...state,\n                        ...action.payload,\n                    };\n                case `${stateValueName}/DELETE`:\n                    return {};\n                default:\n                    return state;\n            }\n        };\n    }\n\n    /**\n     * Creates a reducer function to manage an array state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @param {string} key The unique key used to identify items in the array for updates and deletions.\n     * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n     * @throws {Error} If `action.payload` is not an array when required.\n     * @example\n     * const itemsReducer = store.createArrayReducer('items', 'id');\n     * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n     */\n    createArrayReducer(stateValueName, key) {\n        return (action, state = []) => {\n            if (action.actionType === 'LOAD' && action.type?.includes(stateValueName)) {\n                if (!Array.isArray(action.payload)) {\n                    console.error(`Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`);\n\n                    return [...state];\n                }\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    if (Array.isArray(action.payload)) {\n                        return [...state, ...action.payload];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/ADD_MANY`:\n                    return [...state, ...action.payload];\n                case `${stateValueName}/UPDATE`:\n                    if (state.some((obj) => obj[key] === action.payload[key])) {\n                        return [\n                            ...state.map((obj) => {\n                                if (obj[key] === action.payload[key]) {\n                                    return action.payload;\n                                }\n                                return obj;\n                            }),\n                        ];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/DELETE`:\n                    if (Array.isArray(action.payload)) {\n                        return [\n                            ...state.filter(\n                                (obj) =>\n                                    !action.payload.some(\n                                        (item) =>\n                                            (obj.hasOwnProperty(key) && obj[key] !== item[key]) ||\n                                            (!obj.hasOwnProperty(key) && obj !== item)\n                                    )\n                            ),\n                        ];\n                    }\n\n                    return [\n                        ...state.filter(\n                            (obj) =>\n                                (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) ||\n                                (!obj.hasOwnProperty(key) && obj !== action.payload)\n                        ),\n                    ];\n\n                case `${stateValueName}/LOAD`:\n                    return [...action.payload];\n                default:\n                    return state;\n            }\n        };\n    }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":["defaultStoreActions.updateAction"],"mappings":"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"}
+{"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js","../packages/wje-store/pubsub.js","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/ADD`,\n            payload: payload2,\n            actionType: 'ADD',\n        };\n    };\n};\n\nconst addManyAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/ADD_MANY`,\n            payload: payload2,\n            actionType: 'ADD_MANY',\n        };\n    };\n};\n\nconst updateAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/UPDATE`,\n            payload: payload2,\n            actionType: 'UPDATE',\n        };\n    };\n};\n\nconst deleteAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/DELETE`,\n            payload: payload2,\n            actionType: 'DELETE',\n        };\n    };\n};\n\nconst loadAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/LOAD`,\n            payload: payload2,\n            actionType: 'LOAD',\n        };\n    };\n};\n\nexport { addAction, deleteAction, loadAction, updateAction, addManyAction };\n","export default class PubSub {\n    constructor() {\n        this.events = {};\n    }\n\n    /**\n     * Either create a new event instance for passed `event` name.\n     * or push a new callback into the existing collection.\n     * @param {string} event The event name to subscribe to\n     * @param {Function} callback The callback function to subscribe to the event\n     * @returns {number} A count of callbacks for this event\n     * @memberof PubSub\n     */\n    subscribe(event, callback) {\n        let self = this;\n        let index;\n\n        // If there's not already an event with this name set in our collection\n        // go ahead and create a new one and set it with an empty array, so we don't\n        // have to type check it later down-the-line\n        if (!self.events.hasOwnProperty(event)) {\n            self.events[event] = [];\n        }\n\n        index = self.events[event].push(callback) - 1;\n\n        return {\n            unsubscribe() {\n                self.events[event].splice(self.events[event].indexOf(callback), 1);\n            },\n        };\n    }\n\n    /**\n     * If the passed event has callbacks attached to it, loop through each one and call it.\n     * @param {string} event The name of the event to publish\n     * @param {any} state The current state to pass to the callbacks\n     * @param {object} [newData] The new data to pass to the callbacks\n     * @param {object} [oldData] The old data to pass to the callbacks\n     * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists\n     * @memberof PubSub\n     */\n    publish(event, state, newData = {}, oldData = {}) {\n        let self = this;\n\n        // There's no event to publish to, so bail out\n        if (!self.events.hasOwnProperty(event)) {\n            return [];\n        }\n\n        // Get each subscription and call its callback with the passed data\n        return self.events[event].map((callback) => callback(state, oldData, newData));\n    }\n}\n","import * as defaultStoreActions from './default-store-actions.js';\nimport PubSub from './pubsub.js';\n\n/**\n * @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n *   reducer: (state, action) => { ... },\n *   state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n */\nclass Store {\n    _state;\n    _reducer;\n    events;\n    status;\n\n    /**\n     * Initializes the store with optional reducer and state.\n     * @param {object} [params] Configuration for the store.\n     * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n     * @param {object} [params.state] Initial state of the store.\n     */\n    constructor(params = {}) {\n        this._isPause = false;\n        this._state = {};\n        this._reducer = () => {\n            return {};\n        };\n\n        // A status enum to set during actions and mutations\n        this.status = 'resting';\n\n        // Attach our PubSub module as an `events` element\n        this.events = new PubSub();\n\n        if (params?.hasOwnProperty('reducer')) {\n            this._reducer = params.reducer;\n        }\n\n        this.refreshProxy(params?.state);\n    }\n\n    /**\n     * Dispatches an action to update the state by invoking the reducer function.\n     * @param {object} action The action object containing the type and any associated payload.\n     * @param {string} action.type The type of the action being dispatched.\n     * @returns {boolean} Returns `true` after the state has been successfully updated.\n     * @example\n     * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n     * store.dispatch(action);\n     */\n    dispatch(action) {\n        // Create a console group which will contain the logs from our Proxy etc\n        // console.groupCollapsed(`ACTION: ${action.type}`);\n\n        // Let anything that's watching the status know that we're dispatching an action\n        this.status = 'action';\n\n        let newState = this._reducer(this._state, action);\n\n        this.status = 'mutation';\n        // Merge the old and new together to create a new state and set it\n        this._state = Object.assign(this._state, newState);\n\n        // Close our console group to keep things nice and neat\n        // console.groupEnd();\n\n        return true;\n    }\n\n    /**\n     * Retrieves a deep copy of the current state to ensure immutability.\n     * @returns {object} A deep copy of the current state.\n     * @example\n     * const currentState = store.getState();\n     * console.log(currentState);\n     */\n    getState() {\n        return JSON.parse(JSON.stringify(this._state));\n    }\n\n    /**\n     * Subscribes to a specific event with a provided callback function.\n     * @param {string} eventName The name of the event to subscribe to.\n     * @param {Function} callbackFn The function to execute when the event is triggered.\n     * @returns {Function} - A function to unsubscribe from the event.\n     * @example\n     * const unsubscribe = store.subscribe('stateChange', (newState) => {\n     *   console.log('State changed:', newState);\n     * });\n     * // Later, to unsubscribe\n     * unsubscribe();\n     */\n    subscribe(eventName, callbackFn) {\n        return this.events.subscribe(eventName, callbackFn);\n    }\n\n    /**\n     * Unsubscribes from a specific event by removing all associated listeners.\n     * @param {string} eventName The name of the event to unsubscribe from.\n     * @returns {void}\n     * @example\n     * store.unsubscribe('stateChange');\n     */\n    unsubscribe(eventName) {\n        delete this.events[eventName];\n    }\n\n    /**\n     * Pauses event handling or other operations.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.pause().doSomething();\n     */\n    pause() {\n        this._isPause = true;\n        return this;\n    }\n\n    /**\n     * Resumes event handling or other operations.\n     * @param {*} [val] Optional value to pass while resuming.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.play().doSomething();\n     */\n    play(val) {\n        this._isPause = false;\n        return this;\n    }\n\n    /**\n     * Merges a new reducer function into the existing reducer for a specific state property.\n     * @param {string} stateValueName The key in the state object that the new reducer will manage.\n     * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n     * @returns {void}\n     * @example\n     * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n     * store.mergeReducers('user', newReducer);\n     */\n    mergeReducers(stateValueName, newReducer) {\n        let reducerCopy = this._reducer;\n        this._reducer = (state, newState) => {\n            let preState = reducerCopy(state, newState);\n            return {\n                ...preState,\n                [stateValueName]: newReducer(newState, state[stateValueName]),\n            };\n        };\n    }\n\n    /**\n     * Synchronizes each entry in an array with the store by defining or updating state entries.\n     * @param {string} storeKey The key prefix used for defining or updating store entries.\n     * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n     * @param {string} [identificator] The property name used as a unique identifier for each entry.\n     * @returns {void}\n     * @example\n     * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n     * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n     */\n    makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n        array.forEach((entry) => {\n            if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n                this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n            } else {\n                this.define(\n                    `${storeKey}-${entry.id || entry.source || entry[identificator]}`,\n                    entry,\n                    null,\n                    identificator\n                );\n            }\n        });\n    }\n\n    /**\n     * Defines a new state variable and associates it with a reducer.\n     * @param {string} stateValueName The name of the state variable to define.\n     * @param {*} defaultValue The initial value of the state variable.\n     * @param {Function|null} [reducer] An optional reducer function to manage updates for the state variable.\n     * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n     * @returns {void}\n     * @example\n     * // Define a new state with a custom reducer\n     * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n     * @example\n     * // Define a new state with default array reducer\n     * store.define('items', [], null, 'itemId');\n     */\n    define(stateValueName, defaultValue, reducer, key = 'id') {\n        if (this._state.hasOwnProperty(stateValueName)) {\n            console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n            return;\n        }\n\n        if (reducer instanceof Function) {\n            this.mergeReducers(stateValueName, reducer);\n        } else {\n            if (defaultValue instanceof Array) {\n                this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n            } else {\n                this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n            }\n        }\n\n        this.refreshProxy({\n            ...this._state,\n            [stateValueName]: defaultValue,\n        });\n    }\n\n    /**\n     * Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n     * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n     * @returns {void}\n     * @example\n     * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n     */\n    refreshProxy(newState) {\n        // Set our state to be a Proxy. We are setting the default state by\n        // checking the params and defaulting to an empty object if no default\n        // state is passed in\n        this._state = new Proxy(newState || {}, {\n            set: (state, key, value) => {\n                if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n                    return true;\n                }\n\n                //Set the value as we would normally\n                let oldState = state[key];\n                state[key] = value;\n\n                // Trace out to the console. This will be grouped by the related action\n                // console.log(`stateChange: ${key}: `, value);\n\n                // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n                // Publish the change event for the components that are listening\n                if (!this._isPause) this.events.publish(key, this._state, state[key], oldState);\n\n                // Give the user a little telling off if they set a value directly\n                if (this.status !== 'mutation') {\n                    console.warn(`You should use a mutation to set ${key}`);\n                }\n\n                // Reset the status ready for the next operation\n                this.status = 'resting';\n\n                return true;\n            },\n        });\n    }\n\n    /**\n     * Creates a reducer function to manage an object state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n     * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n     * @example\n     * const userReducer = store.createObjectReducer('user');\n     * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n     */\n    createObjectReducer(stateValueName) {\n        return (action, state = {}) => {\n            if (\n                Array.isArray(action.payload) &&\n                (action.type === `${stateValueName}/ADD` || action.type === `${stateValueName}/UPDATE`)\n            ) {\n                console.error(`Nemôžete pridať do objektu ${stateValueName} hodnotu, ktorá je pole.`);\n            }\n\n            const actionType = action.type.split('/')[1];\n\n            if (!['ADD', 'UPDATE', 'DELETE'].includes(actionType)) {\n                console.error(\n                    `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n                );\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    return {\n                        ...action.payload,\n                    };\n                case `${stateValueName}/UPDATE`:\n                    return {\n                        ...state,\n                        ...action.payload,\n                    };\n                case `${stateValueName}/DELETE`:\n                    return {};\n                default:\n                    return state;\n            }\n        };\n    }\n\n    /**\n     * Creates a reducer function to manage an array state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @param {string} key The unique key used to identify items in the array for updates and deletions.\n     * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n     * @throws {Error} If `action.payload` is not an array when required.\n     * @example\n     * const itemsReducer = store.createArrayReducer('items', 'id');\n     * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n     */\n    createArrayReducer(stateValueName, key) {\n        return (action, state = []) => {\n            if (action.actionType === 'LOAD' && action.type?.includes(stateValueName)) {\n                if (!Array.isArray(action.payload)) {\n                    console.error(`Snažíte sa použiť \"LOAD\" akciu na pole, ale payload nie je pole.`);\n\n                    return [...state];\n                }\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    if (Array.isArray(action.payload)) {\n                        return [...state, ...action.payload];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/ADD_MANY`:\n                    return [...state, ...action.payload];\n                case `${stateValueName}/UPDATE`:\n                    if (state.some((obj) => obj[key] === action.payload[key])) {\n                        return [\n                            ...state.map((obj) => {\n                                if (obj[key] === action.payload[key]) {\n                                    return action.payload;\n                                }\n                                return obj;\n                            }),\n                        ];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/DELETE`:\n                    if (Array.isArray(action.payload)) {\n                        return [\n                            ...state.filter(\n                                (obj) =>\n                                    !action.payload.some(\n                                        (item) =>\n                                            (obj.hasOwnProperty(key) && obj[key] !== item[key]) ||\n                                            (!obj.hasOwnProperty(key) && obj !== item)\n                                    )\n                            ),\n                        ];\n                    }\n\n                    return [\n                        ...state.filter(\n                            (obj) =>\n                                (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) ||\n                                (!obj.hasOwnProperty(key) && obj !== action.payload)\n                        ),\n                    ];\n\n                case `${stateValueName}/LOAD`:\n                    return [...action.payload];\n                default:\n                    return state;\n            }\n        };\n    }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":["defaultStoreActions.updateAction"],"mappings":"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"}

package/dist/wje-tab-group.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Tab Group ]\n*/\n\n:host {\n    --wje-tab-top: 0;\n    --wje-tab-start: 0;\n    --wje-tab-end: 0;\n    --wje-tab-bottom: 0;\n}\n.native-tab-group {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n    position: relative;\n}\n\n.native-tab-group > header {\n    display: flex;\n    flex-direction: column;\n\n    & > nav {\n        display: flex;\n    }\n}\n\n.native-tab-group > section {\n    width: 100%;\n\n    & > article {\n        scroll-snap-align: start;\n        overflow-y: auto;\n        overscroll-behavior-y: contain;\n    }\n}\n\n/*TOP*/\n:host([variant='top']) {\n    --wje-tab-top: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column;\n    }\n    nav {\n        border-bottom: 1px solid var(--wje-border-color);\n    }\n}\n\n/*START*/\n:host([variant='start']) {\n    --wje-tab-start: auto !important;\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row;\n    }\n    nav {\n        flex-direction: column;\n        border-right: 1px solid var(--wje-border-color);\n    }\n}\n\n/*END*/\n:host([variant='end']) {\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row-reverse;\n    }\n    nav {\n        flex-direction: column;\n        border-left: 1px solid var(--wje-border-color);\n    }\n}\n\n/*BOTTOM*/\n:host([variant='bottom']) {\n    --wje-tab-bottom: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column-reverse;\n    }\n    nav {\n        border-top: 1px solid var(--wje-border-color);\n    }\n}\n";
+const styles = "/*\n[ WJ Tab Group ]\n*/\n\n:host {\n    --wje-tab-top: 0;\n    --wje-tab-start: 0;\n    --wje-tab-end: 0;\n    --wje-tab-bottom: 0;\n    width: 100%;\n}\n.native-tab-group {\n    display: flex;\n    flex-direction: column;\n\n    overflow: hidden;\n    position: relative;\n}\n\n.native-tab-group > header {\n    display: flex;\n    flex-direction: column;\n\n    & > nav {\n        display: flex;\n        align-items: center;\n    }\n}\n\n.native-tab-group > section {\n    width: 100%;\n\n    & > article {\n        scroll-snap-align: start;\n        overflow-y: auto;\n        overscroll-behavior-y: contain;\n    }\n}\n\n/*TOP*/\n:host([variant='top']) {\n    --wje-tab-top: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column;\n    }\n    nav {\n        border-bottom: 1px solid var(--wje-border-color);\n    }\n}\n\n/*START*/\n:host([variant='start']) {\n    --wje-tab-start: auto !important;\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row;\n    }\n    nav {\n        flex-direction: column;\n        border-right: 1px solid var(--wje-border-color);\n    }\n}\n\n/*END*/\n:host([variant='end']) {\n    --wje-tab-writing-mode: vertical-rl;\n    .native-tab-group {\n        flex-direction: row-reverse;\n    }\n    nav {\n        flex-direction: column;\n        border-left: 1px solid var(--wje-border-color);\n    }\n}\n\n/*BOTTOM*/\n:host([variant='bottom']) {\n    --wje-tab-bottom: auto !important;\n    --wje-tab-writing-mode: horizontal-tb;\n    .native-tab-group {\n        flex-direction: column-reverse;\n    }\n    nav {\n        border-top: 1px solid var(--wje-border-color);\n    }\n}\n\n.dropdown-active {\n    wje-button{\n        &::part(native) {\n            color: var(--wje-color-primary-8);\n        }\n    }\n}";
 class TabGroup extends WJElement {
   /**
    * Creates an instance of TabGroup.
@@ -60,12 +60,32 @@ class TabGroup extends WJElement {
     let slot = document.createElement("slot");
     let slotNav = document.createElement("slot");
     slotNav.setAttribute("name", "nav");
-    header.appendChild(nav);
-    nav.appendChild(slotNav);
-    section.appendChild(slot);
-    native.appendChild(header);
-    native.appendChild(section);
-    fragment.appendChild(native);
+    let icon = document.createElement("wje-icon");
+    icon.setAttribute("name", "dots");
+    let button = document.createElement("wje-button");
+    button.setAttribute("slot", "trigger");
+    button.setAttribute("fill", "link");
+    let menu = document.createElement("wje-menu");
+    menu.setAttribute("variant", "context");
+    let slotMore = document.createElement("slot");
+    slotMore.setAttribute("name", "more");
+    let moreDropdown = document.createElement("wje-dropdown");
+    moreDropdown.setAttribute("placement", "bottom-end");
+    moreDropdown.setAttribute("collapsible", "");
+    moreDropdown.classList.add("more-tabs");
+    button.append(icon);
+    menu.append(slotMore);
+    moreDropdown.append(button);
+    moreDropdown.append(menu);
+    header.append(nav);
+    nav.append(slotNav);
+    nav.append(moreDropdown);
+    section.append(slot);
+    native.append(header);
+    native.append(section);
+    fragment.append(native);
+    this.nav = nav;
+    this.moreDropdown = moreDropdown;
     return fragment;
   }
   /**
@@ -77,18 +97,22 @@ class TabGroup extends WJElement {
     this.setActiveTab(activeTabName);
     this.addEventListener("wje-tab:change", (e) => {
       if (e.detail.context.hasAttribute("disabled")) return;
+      console.log("tab change");
       this.setActiveTab(e.detail.context.panel);
     });
+    this.checkOverflow = this.checkOverflow.bind(this);
+    window.addEventListener("resize", this.checkOverflow);
+    requestAnimationFrame(() => this.checkOverflow());
   }
   /**
    * Removes the active attribute from all tabs and panels.
    */
   removeActiveTab() {
     this.getPanelAll().forEach((el) => {
-      el.removeAttribute("active");
+      el.classList.remove("active");
     });
     this.getTabAll().forEach((el) => {
-      el.removeAttribute("active");
+      el.classList.remove("active");
     });
   }
   /**
@@ -96,16 +120,19 @@ class TabGroup extends WJElement {
    * @param {string} tab The name of the tab to set as active.
    */
   setActiveTab(tab) {
+    var _a;
     this.removeActiveTab();
-    this.querySelector(`[panel="${tab}"]`).setAttribute("active", "");
-    this.querySelector(`[name="${tab}"]`).setAttribute("active", "");
+    const el = this.querySelector(`[panel="${tab}"]`);
+    el == null ? void 0 : el.classList.add("active");
+    (_a = this.querySelector(`[name="${tab}"]`)) == null ? void 0 : _a.classList.add("active");
+    this.dropdownActive(el);
   }
   /**
    * Returns the currently active tab.
    * @returns {Element|null} The active tab, or null if no tab is active.
    */
   getActiveTab() {
-    let activeTabs = Array.from(this.querySelectorAll("wje-tab[active]"));
+    let activeTabs = Array.from(this.querySelectorAll("wje-tab.active"));
     return activeTabs.length > 0 ? activeTabs : null;
   }
   /**
@@ -129,6 +156,39 @@ class TabGroup extends WJElement {
   getPanelAllName() {
     return this.getPanelAll().map((el) => el.getAttribute("name"));
   }
+  toggleMoreVisibility() {
+    const hasTabsInMore = this.querySelector('wje-tab[slot="more"]');
+    this.moreDropdown.hidden = !hasTabsInMore;
+  }
+  checkOverflow() {
+    const nav = this.nav;
+    const moreBtn = this.moreDropdown;
+    const moreWidth = moreBtn.offsetWidth || 48;
+    const tabs = Array.from(this.querySelectorAll("wje-tab"));
+    tabs.forEach((tab) => tab.setAttribute("slot", "nav"));
+    requestAnimationFrame(() => {
+      const navRight = nav.getBoundingClientRect().right;
+      let overflowStarted = false;
+      for (const tab of tabs) {
+        const tabRect = tab.getBoundingClientRect();
+        const fits = tabRect.right + moreWidth <= navRight;
+        if (!fits || overflowStarted) {
+          tab.setAttribute("slot", "more");
+          this.dropdownActive(tab);
+          overflowStarted = true;
+        }
+      }
+      this.toggleMoreVisibility();
+    });
+  }
+  dropdownActive(el) {
+    if (el.classList.contains("active")) {
+      if (el.getAttribute("slot") === "more")
+        this.moreDropdown.classList.add("dropdown-active");
+      else
+        this.moreDropdown.classList.remove("dropdown-active");
+    }
+  }
 }
 TabGroup.define("wje-tab-group", TabGroup);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'TabGroup';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            // window.addEventListener('hashchange', (e) => {\n            //     this.setActiveTab(activeTabName);\n            // });\n\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        header.appendChild(nav);\n        nav.appendChild(slotNav);\n        section.appendChild(slot);\n\n        native.appendChild(header);\n        native.appendChild(section);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0].panel : this.getTabAll()[0].panel;\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n\n            this.setActiveTab(e.detail.context.panel);\n        });\n    }\n\n    /**\n     * Removes the active attribute from all tabs and panels.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.removeAttribute('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.removeAttribute('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n        this.querySelector(`[panel=\"${tab}\"]`).setAttribute('active', '');\n        this.querySelector(`[name=\"${tab}\"]`).setAttribute('active', '');\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab[active]'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'TabGroup';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            // window.addEventListener('hashchange', (e) => {\n            //     console.log('hashchange');\n            //     this.setActiveTab(activeTabName);\n            // });\n\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'dots');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        let slotMore = document.createElement('slot');\n        slotMore.setAttribute('name', 'more');\n\n        let moreDropdown = document.createElement('wje-dropdown');\n        moreDropdown.setAttribute('placement', 'bottom-end');\n        moreDropdown.setAttribute('collapsible', '');\n        moreDropdown.classList.add('more-tabs');\n\n        button.append(icon);\n\n        menu.append(slotMore);\n\n        moreDropdown.append(button);\n        moreDropdown.append(menu);\n\n        header.append(nav);\n\n        nav.append(slotNav);\n        nav.append(moreDropdown);\n\n        section.append(slot);\n\n        native.append(header);\n        native.append(section);\n\n        fragment.append(native);\n\n        this.nav = nav;\n        this.moreDropdown = moreDropdown;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0].panel : this.getTabAll()[0].panel;\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n            console.log('tab change');\n            this.setActiveTab(e.detail.context.panel);\n        });\n\n        // this.checkOverflow = this.checkOverflow.bind(this);\n        // window.addEventListener('resize', this.checkOverflow);\n\n        // this.setupTabObserver();\n        // this.toggleMoreVisibility();\n\n        this.checkOverflow = this.checkOverflow.bind(this);\n\n        window.addEventListener('resize', this.checkOverflow);\n\n        requestAnimationFrame(() => this.checkOverflow());\n    }\n\n    /**\n     * Removes the active attribute from all tabs and panels.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.classList.remove('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n        const el = this.querySelector(`[panel=\"${tab}\"]`)\n        el?.classList.add('active');\n        this.querySelector(`[name=\"${tab}\"]`)?.classList.add('active');\n\n        this.dropdownActive(el);\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab.active'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n\n    toggleMoreVisibility() {\n        const hasTabsInMore = this.querySelector('wje-tab[slot=\"more\"]');\n        this.moreDropdown.hidden = !hasTabsInMore;\n    }\n\n    checkOverflow() {\n        const nav = this.nav;\n        const moreBtn = this.moreDropdown;\n        const moreWidth = moreBtn.offsetWidth || 48; // fallback ak ešte nie je vykreslený\n\n        const tabs = Array.from(this.querySelectorAll('wje-tab'));\n\n        // Reset: presunieme všetky taby naspäť do nav slotu\n        tabs.forEach(tab => tab.setAttribute('slot', 'nav'));\n\n        // Vykreslíme nanovo, aby sa more button správne umiestnil\n        requestAnimationFrame(() => {\n            const navRight = nav.getBoundingClientRect().right;\n            let overflowStarted = false;\n\n            for (const tab of tabs) {\n                const tabRect = tab.getBoundingClientRect();\n\n                // Ak by pretekal vrátane rezervy na more, presunieme ho\n                const fits = tabRect.right + moreWidth <= navRight;\n\n                if (!fits || overflowStarted) {\n                    tab.setAttribute('slot', 'more');\n                    this.dropdownActive(tab);\n                    overflowStarted = true;\n                }\n            }\n\n            this.toggleMoreVisibility();\n        });\n    }\n\n    dropdownActive(el) {\n        if(el.classList.contains('active')) {\n            if(el.getAttribute('slot') === 'more')\n                this.moreDropdown.classList.add('dropdown-active');\n            else\n                this.moreDropdown.classList.remove('dropdown-active');\n        }\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-tab-panel.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Tab Panel ]\n*/\n\n:host {\n    display: none;\n    flex-wrap: wrap;\n    align-items: center;\n    padding: 1rem;\n}\n\n:host([active]) {\n    display: block;\n}\n";
+const styles = "/*\n[ WJ Tab Panel ]\n*/\n\n:host {\n    display: none;\n    flex-wrap: wrap;\n    align-items: center;\n    padding: 1rem;\n}\n\n:host(.active) {\n    display: block;\n}\n";
 class TabPanel extends WJElement {
   /**
    * Creates an instance of TabPanel.

package/dist/wje-tab.js

@@ -2,7 +2,113 @@ 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";
-const styles = "/*\n[ WJ Tab ]\n*/\n\n:host {\n    display: block;\n    position: relative;\n    .native-tab {\n        display: flex;\n        align-items: center;\n        white-space: nowrap;\n        font-family: var(--wje-tab-font-family);\n        font-size: var(--wje-tab-font-size);\n        letter-spacing: var(--wje-tab-letter-spacing);\n        text-transform: var(--wje-tab-text-transfrom);\n        font-weight: var(--wje-tab-font-weight);\n        text-decoration: none;\n        padding-inline: var(--wje-tab-padding-inline);\n        padding-top: var(--wje-tab-padding-top);\n        padding-bottom: var(--wje-tab-padding-bottom);\n        border-radius: var(--wje-tab-border-radius);\n        color: var(--wje-color);\n        line-height: var(--wje-tab-line-height);\n        & > svg {\n            inline-size: 1.5em;\n            pointer-events: none;\n        }\n\n        &:hover {\n            background: var(--wje-tab-color-hover);\n            &:after {\n                display: block;\n            }\n        }\n\n        &:after {\n            content: ' ';\n            display: none;\n            block-size: 0.15rem;\n            writing-mode: var(--wje-tab-writing-mode);\n            background: var(--wje-tab-color-active);\n            position: absolute;\n            bottom: var(--wje-tab-bottom);\n            left: var(--wje-tab-start);\n            right: var(--wje-tab-end);\n            top: var(--wje-tab-top);\n        }\n    }\n}\n\n:host([disabled]) a {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background: inherit;\n    &:after {\n        display: none;\n    }\n}\n\n:host([active]) a:after {\n    display: block;\n}\n";
+import { b as bindRouterLinks } from "./router-links-CJnOdbas.js";
+const styles = `/*
+[ WJ Tab ]
+*/
+
+:host(:not([slot="more"])) {
+    display: block;
+    position: relative;
+    .native-tab {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        font-family: var(--wje-tab-font-family);
+        font-size: var(--wje-tab-font-size);
+        letter-spacing: var(--wje-tab-letter-spacing);
+        text-transform: var(--wje-tab-text-transfrom);
+        font-weight: var(--wje-tab-font-weight);
+        text-decoration: none;
+        padding-inline: var(--wje-tab-padding-inline);
+        padding-top: var(--wje-tab-padding-top);
+        padding-bottom: var(--wje-tab-padding-bottom);
+        border-radius: var(--wje-tab-border-radius);
+        color: var(--wje-color);
+        line-height: var(--wje-tab-line-height);
+        & > svg {
+            inline-size: 1.5em;
+            pointer-events: none;
+        }
+
+        &:hover {
+            background: var(--wje-tab-color-hover);
+            &:after {
+                display: block;
+            }
+        }
+
+        &:after {
+            content: ' ';
+            display: none;
+            block-size: 0.15rem;
+            writing-mode: var(--wje-tab-writing-mode);
+            background: var(--wje-tab-color-active);
+            position: absolute;
+            bottom: var(--wje-tab-bottom);
+            left: var(--wje-tab-start);
+            right: var(--wje-tab-end);
+            top: var(--wje-tab-top);
+        }
+    }
+}
+
+:host([slot="more"]) {
+    --wje-menu-item-safe-triangle-cursor-x: 0;
+    --wje-menu-item-safe-triangle-cursor-y: 0;
+    --wje-menu-item-safe-triangle-submenu-start-x: 0;
+    --wje-menu-item-safe-triangle-submenu-start-y: 0;
+    --wje-menu-item-safe-triangle-submenu-end-x: 0;
+    --wje-menu-item-safe-triangle-submenu-end-y: 0;
+
+    display: block;
+    .native-tab {
+        background: var(--wje-menu-item-background);
+        position: relative;
+        display: block;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: center;
+        color: var(--wje-menu-item-color);
+        padding-top: var(--wje-menu-item-padding-top);
+        padding-bottom: var(--wje-menu-item-padding-bottom);
+        padding-inline: var(--wje-spacing-large);
+        transition: var(--wje-transition-fast) fill;
+        user-select: none;
+        white-space: nowrap;
+        cursor: pointer;
+        text-decoration: none;
+
+        &:hover {
+            color: var(--wje-menu-item-color-hover);
+            background: var(--wje-menu-item-background-hover);
+        }
+
+        &:focus {
+            color: var(--wje-menu-item-color-focus);
+            background: var(--wje-menu-item-background-focus);
+        }
+
+        &:active {
+            color: var(--wje-menu-item-color-active);
+            background: var(--wje-menu-item-background-active);
+        }
+    }
+}
+
+:host([disabled]) a {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: inherit;
+    &:after {
+        display: none;
+    }
+}
+
+:host(:not([slot="more"]).active) a:after {
+    display: block;
+}
+`;
 class Tab extends WJElement {
   /**
    * Creates an instance of Tab.
@@ -14,6 +120,36 @@ class Tab extends WJElement {
      */
     __publicField(this, "className", "Tab");
     this.last = false;
+    this._hasPanel = false;
+  }
+  /**
+   * Sets the panel attribute to the specified value.
+   * @param {string} value The value to set for the panel attribute.
+   */
+  set panel(value) {
+    this.setAttribute("panel", value);
+  }
+  /**
+   * Retrieves the value of the 'panel' attribute of the element.
+   * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.
+   */
+  get panel() {
+    return this.getAttribute("panel") || null;
+  }
+  /**
+   * Sets the value of the 'route' attribute for the current object.
+   * @param {string} value The new value to set for the 'route' attribute.
+   */
+  set route(value) {
+    this.setAttribute("route", value);
+  }
+  /**
+   * Retrieves the value of the 'route' attribute.
+   * If the 'route' attribute is not set, it returns null.
+   * @returns {string|null} The value of the 'route' attribute or null if not set.
+   */
+  get route() {
+    return this.getAttribute("route") || null;
   }
   /**
    * Returns the CSS styles for the component.
@@ -28,6 +164,7 @@ class Tab extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAttribute("active-class", "active");
   }
   /**
    * Draws the component for the tab.
@@ -49,8 +186,16 @@ class Tab extends WJElement {
    * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
    */
   afterDraw() {
+    this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });
     event.addListener(this, "click", "wje-tab:change");
   }
+  /**
+   * Cleans up before the component is disconnected.
+   */
+  beforeDisconnect() {
+    var _a;
+    (_a = this.unbindRouterLinks) == null ? void 0 : _a.call(this);
+  }
 }
 Tab.define("wje-tab", Tab);
 export {

package/dist/wje-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let a = document.createElement('a');\n        a.setAttribute('href', '#' + this.panel);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', 'wje-tab:change');\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;AAoBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV,UAAO;AAYX;AAAA;AAAA;AAAA,qCAAY;AANR,SAAK,OAAO;AAAA,EACpB;AAAA;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,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,QAAQ,MAAM,KAAK,KAAK;AACvC,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,gBAAgB;AAAA,EACzD;AACA;AC9EA,IAAI,OAAO,WAAW,GAAG;"}
+{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport { bindRouterLinks } from 'slick-router/middlewares/router-links.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n        this._hasPanel = false;\n    }\n\n    /**\n     * Sets the panel attribute to the specified value.\n     * @param {string} value The value to set for the panel attribute.\n     */\n    set panel(value) {\n        this.setAttribute('panel', value);\n    }\n\n    /**\n     * Retrieves the value of the 'panel' attribute of the element.\n     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.\n     */\n    get panel() {\n        return this.getAttribute('panel') || null;\n    }\n\n    /**\n     * Sets the value of the 'route' attribute for the current object.\n     * @param {string} value The new value to set for the 'route' attribute.\n     */\n    set route(value) {\n        this.setAttribute('route', value);\n    }\n\n    /**\n     * Retrieves the value of the 'route' attribute.\n     * If the 'route' attribute is not set, it returns null.\n     * @returns {string|null} The value of the 'route' attribute or null if not set.\n     */\n    get route() {\n        return this.getAttribute('route') || null;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAttribute('active-class', 'active');\n    }\n\n    /**\n     * Draws the component for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let a = document.createElement('a');\n        a.setAttribute('href', '#' + this.panel);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        this.unbindRouterLinks = bindRouterLinks(this.parentElement, { selector: false });\n        event.addListener(this, 'click', 'wje-tab:change');\n    }\n\n    /**\n     * Cleans up before the component is disconnected.\n     */\n    beforeDisconnect() {\n        this.unbindRouterLinks?.();\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV,UAAO;AA8CX;AAAA;AAAA;AAAA,qCAAY;AAxCR,SAAK,OAAO;AACZ,SAAK,YAAY;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,gBAAgB,QAAQ;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,QAAQ,MAAM,KAAK,KAAK;AACvC,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,YAAY;AACR,SAAK,oBAAoB,gBAAgB,KAAK,eAAe,EAAE,UAAU,OAAO;AAChF,UAAM,YAAY,MAAM,SAAS,gBAAgB;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;;AACf,eAAK,sBAAL;AAAA,EACR;AACA;AC1HA,IAAI,OAAO,WAAW,GAAG;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.160",
+  "version": "0.1.161",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",