wj-elements 0.1.159 → 0.1.161

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.159",
+  "version": "0.1.161",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "create-element": "node wje-cli-script/create-element.cjs",
     "copy-dist": "node wje-cli-script/copy-dist.cjs",
     "build:copy-dist": "npm run build && npm run copy-dist -- /Users/rastislavhrompa/Desktop/Interway-MFE/parcels/node_modules/wj-elements",
-    "target:copy-dist": "npm run copy-dist -- /Users/rastislavhrompa/Desktop/Interway-MFE/root/node_modules/wj-elements",
+    "target:copy-dist": "npm run copy-dist -- /Users/rastislavhrompa/Desktop/Interway-MFE/parcels/node_modules/wj-elements",
     "test": "web-test-runner --group default",
     "test:watch": "web-test-runner --watch --group default",
     "lint": "eslint packages experimental-packages --max-warnings 0",

package/dist/infinite-scroll.element-DUjjOm1e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"infinite-scroll.element-DUjjOm1e.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this._response = {};\n        this.iterate = null;\n        this._infiniteScrollTemplate = null;\n        this._abortController = new AbortController();\n        this._signal = this._abortController.signal;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this._infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this._infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this._response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this._response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component for updates before it is drawn.\n     * This method handles the removal of templates for iteration, adjusts the height styling of the component,\n     * and manages abort signals for loading operations.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        this.iterate = this.querySelector('[iterate]');\n        this.infiniteScrollTemplate = this.iterate?.outerHTML;\n        this.iterate?.remove(); // remove template\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this._loading is not fulfilled then cancel the promise\n        if (this._signal) {\n            this._abortController.abort();\n            this._abortController = new AbortController();\n            this._signal = this._abortController.signal;\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing the structure for an infinite scroll component.\n     * The structure includes native elements, slots for customization, and optional loading content.\n     * @returns {DocumentFragment} The document fragment containing the component's DOM structure.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this._loading = this.loadPages(this.currentPage);\n        await this._loading;\n    }\n\n    /**\n     * Attaches a scroll event listener to the current object.\n     * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event\n     * of the current object. This enables handling of scroll events for\n     * specific functionality such as updating UI elements, loading content dynamically,\n     * or tracking user interaction with scrollable content.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A function that removes the scroll event listener from the current context.\n     * This function is used to unbind the `onScroll` event listener\n     * from the `scroll` event of the current object. It ensures that\n     * the scroll event no longer triggers the `onScroll` handler.\n     * @function\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A scroll event handler function that checks the scroll position and triggers loading additional content\n     * when the user scrolls near the bottom of the page.\n     * Properties accessed:\n     * - `scrollTop`: The number of pixels that the content of an element is scrolled vertically.\n     * - `scrollHeight`: The total height of the element's content.\n     * - `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.\n     * Conditions:\n     * - Determines if the scroll position is within 300 pixels of the bottom of the element.\n     * - Verifies that the current page number is less than or equal to the total number of pages.\n     * - Checks if the current page is already in the loading state.\n     * Actions:\n     * - Increments the current page number when the conditions are met.\n     * - Initiates loading for the next page by calling the `loadPages` function.\n     * @param {Event} e The scroll event object.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this._loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this._signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Displays the loader element by adding the 'show' class to its class list.\n     * This method is useful for indicating a loading or processing state in the UI.\n     * @returns {void} No return value.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this._signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = response?.totalPages;\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n\n                this.customForeach(this.objectName ? response[this.objectName] : response);\n\n                this.isLoading.push(page);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.log(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    /**\n     * Converts a data item into an HTML element based on a template.\n     * This function takes a data item, interpolates it into a predefined template,\n     * parses the resulting HTML string, and returns the first child element of the parsed HTML content.\n     * @param {object} item The data object to interpolate into the HTML template.\n     * @returns {Element} The first child element generated from the interpolated HTML string.\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n\n        return element;\n    };\n\n    /**\n     * A custom implementation of the forEach method designed to iterate over an array of data,\n     * transform each item into an HTML element, and append the element to a specified placement object.\n     * Additionally, it adds an event listener to each generated element for handling click events.\n     * @param {Array} data An array of items to process. Each item is transformed into an HTML element\n     * and appended to the placement object specified in the context of `this`.\n     */\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates a string template with values from the provided parameters object.\n     * The template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,\n     * which are replaced with the corresponding values from the `params` object.\n     * Placeholders support dot notation for accessing nested properties within the `params` object.\n     * @param {string} template The string template containing placeholders to be replaced.\n     * @param {object} params The object containing key-value pairs used for substitution in the template.\n     * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n}\n"],"names":[],"mappings":"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"}