wj-elements 0.1.216 → 0.1.218

package/dist/dark.css

@@ -30,9 +30,6 @@
     --wje-background: var(--wje-color-contrast-2);
     --wje-border-color: var(--wje-color-contrast-4);
 
-    --wje-card-background: var(--wje-color-contrast-3);
-    --wje-card-color: var(--wje-color-white) !important;
-
     --wje-color-primary: var(--wje-color-primary-1);
     --wje-color-complete: var(--wje-color-complete-1);
     --wje-color-success: var(--wje-color-success-1);
@@ -152,6 +149,11 @@
     /* Button */
     --wje-button-border-color: var(--wje-color-contrast-1);
 
+    /* Card */
+    --wje-card-background: var(--wje-color-contrast-0);
+    --wje-card-color: var(--wje-color-white);
+    --wje-card-border-color: transparent;
+
     /* Divider */
     --wje-divider-border-color: var(--wje-border-color);
 

package/dist/light.css

@@ -64,7 +64,8 @@
     --wje-border-radius-small: 0.125rem; /* 2px */
     --wje-border-radius-medium: 0.25rem; /* 4px */
     --wje-border-radius-large: 0.5rem; /* 8px */
-    --wje-border-radius-x-large: 1rem; /* 16px */
+    --wje-border-radius-x-large: 0.75rem; /* 12px */
+    --wje-border-radius-2x-large: 1rem; /* 16px */
     --wje-border-radius-circle: 50%; /* Circle */
     --wje-border-radius-pill: 50rem; /* Pill */
 
@@ -115,9 +116,6 @@
     --wje-background: var(--wje-color-contrast-0);
     --wje-border-color: var(--wje-color-contrast-3);
 
-    --wje-card-background: var(--wje-color-contrast-0);
-    --wje-card-color: var(--wje-color);
-
     --wje-color-menu: hsl(220, 15%, 15%);
     --wje-color-contrast: hsl(0, 0%, 95%);
 
@@ -268,10 +266,12 @@
     --wje-button-group-border-color: var(--wje-color-contrast-3);
 
     /* Card */
-    --wje-card-border-radius: var(--wje-border-radius-large);
+    --wje-card-background: var(--wje-color-contrast-0);
+    --wje-card-color: var(--wje-color-white);
     --wje-card-border-color: transparent;
     --wje-card-border-style: var(--wje-border-style);
     --wje-card-border-width: var(--wje-border-width);
+    --wje-card-border-radius: var(--wje-border-radius-large);
     --wje-card-shadow: var(--wje-shadow-x-large);
 
     /* Card - Header */
@@ -330,7 +330,11 @@
     --wje-chip-background-hover: var(--wje-color-contrast-4);
     --wje-chip-color-hover: var(--wje-color-contrast-11);
     --wje-chip-border-radius: 100px;
-    --wje-chip-margin: 0;
+    --wje-chip-round-border-radius: var(--wje-border-radius-large);
+    --wje-chip-margin-block: 0;
+    --wje-chip-margin-inline: 0;
+    --wje-chip-padding-block: var(--wje-spacing-small);
+    --wje-chip-padding-inline: var(--wje-spacing-small);
 
     /* Dialog */
     --wje-dialog-width: 600px;
@@ -516,6 +520,11 @@
     --wje-orgchart-group-height-line: 10px;
     --wje-orgchart-group-padding: 0.25rem 0;
 
+    /* Radio */
+    --wje-radio-margin-top: 0;
+    --wje-radio-margin-bottom: 0.5rem;
+    --wje-radio-margin-inline: 0;
+
     /* Rate */
     --wje-rate-gap: 0.25rem;
     --wje-rate-color: var(--wje-color-contrast-11);

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

@@ -5,11 +5,13 @@ import { default as WJElement } from '../wje-element/element.js';
  * @status stable
  * @augments WJElement
  * @slot - The card main content.
- * @cssproperty [--wje-card-margin-top=0] - Margin top of the component;
- * @cssproperty [--wje-card-margin-bottom=1rem] - Margin bottom of the component;
- * @cssproperty [--wje-card-margin-inline=0] - Margin inline of the component;
- * @cssproperty [--wje-card-border-color=transparent] - Border color of the component;
  * @cssproperty [--wje-card-background=#fff] - Background of the component;
+ * @cssproperty [--wje-card-color=#000] - Color of the component;
+ * @cssproperty [--wje-card-border-color=transparent] - Border color of the component;
+ * @cssproperty [--wje-card-border-style=solid] - Border style of the component;
+ * @cssproperty [--wje-card-border-width=1px] - Border width of the component;
+ * @cssproperty [--wje-card-border-radius=0.5rem] - Border radius of the component;
+ * @cssproperty [--wje-card-shadow=var(--wje-shadow-x-large)] - Shadow of the component;
  */
 export default class Card extends WJElement {
     /**

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

@@ -65,6 +65,10 @@ export default class Carousel extends WJElement {
      * After draw method for the Carousel.
      */
     afterDraw(): void;
+    /**
+     * Sync `activeSlide` to the slide whose center is closest to the container center.
+     */
+    syncActiveToCenter(): void;
     /**
      * Sets up the IntersectionObserver for the Carousel.
      */
@@ -133,6 +137,10 @@ export default class Carousel extends WJElement {
      * @returns {Array}
      */
     getSlidesWithClones(): any[];
+    /** Maps logical index -> visual index (accounts for leading clone when loop=true) */
+    getVisualIndexForLogical(index: any): any;
+    /** Maps visual index -> logical index (handles clones at 0 and last when loop=true) */
+    getLogicalIndexForVisual(vIndex: any): any;
     /**
      * Goes to the slide.
      * @returns {boolean}

package/dist/wje-card.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 Card ]\n*/\n\n:host {\n    width: 100%;\n}\n\n.native-card {\n    background-color: var(--wje-color-contrast-0);\n    margin: 0;\n    box-shadow: var(--wje-card-shadow);\n    border-color: var(--wje-card-border-color);\n    border-style: var(--wje-card-border-style);\n    border-width: var(--wje-card-border-width);\n    border-radius: var(--wje-card-border-radius);\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    line-height: var(--wje-line-height-normal);\n    position: relative;\n    width: 100%;\n    word-wrap: normal;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n}\n\n/*BG - TEXT*/\n.native-card.wje-color-primary {\n    background: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-primary-9);\n}\n\n.native-card.wje-color-complete {\n    background: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-complete-9);\n}\n\n.native-card.wje-color-success {\n    background: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-success-9);\n}\n\n.native-card.wje-color-warning {\n    background: var(--wje-color-warning-9);\n    color: var(--wje-color);\n    border-color: var(--wje-color-warning-9);\n}\n\n.native-card.wje-color-danger {\n    background: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-danger-9);\n}\n\n.native-card.wje-color-info {\n    background: var(--wje-color-info-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-info-9);\n}\n\n.native-card.wje-color-menu {\n    background: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-9);\n}\n";
+const styles = "/*\n[ WJ Card ]\n*/\n\n:host {\n    width: 100%;\n}\n\n.native-card {\n    background: var(--wje-card-background);\n    color: var(--wje-card-color);\n    margin: 0;\n    box-shadow: var(--wje-card-shadow);\n    border-color: var(--wje-card-border-color);\n    border-style: var(--wje-card-border-style);\n    border-width: var(--wje-card-border-width);\n    border-radius: var(--wje-card-border-radius);\n    font-family: var(--wje-font-family);\n    font-size: var(--wje-font-size);\n    line-height: var(--wje-line-height-normal);\n    position: relative;\n    width: 100%;\n    word-wrap: normal;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n}\n\n/*BG - TEXT*/\n.native-card.wje-color-primary {\n    background: var(--wje-color-primary-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-primary-9);\n}\n\n.native-card.wje-color-complete {\n    background: var(--wje-color-complete-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-complete-9);\n}\n\n.native-card.wje-color-success {\n    background: var(--wje-color-success-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-success-9);\n}\n\n.native-card.wje-color-warning {\n    background: var(--wje-color-warning-9);\n    color: var(--wje-color);\n    border-color: var(--wje-color-warning-9);\n}\n\n.native-card.wje-color-danger {\n    background: var(--wje-color-danger-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-danger-9);\n}\n\n.native-card.wje-color-info {\n    background: var(--wje-color-info-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-info-9);\n}\n\n.native-card.wje-color-menu {\n    background: var(--wje-color-contrast-9);\n    color: var(--wje-color-contrast-0);\n    border-color: var(--wje-color-contrast-9);\n}\n";
 class Card extends WJElement {
   /**
    * Card constructor method.

package/dist/wje-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-card.js","sources":["../packages/wje-card/card.element.js","../packages/wje-card/card.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Card element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/card\n * @status stable\n * @augments WJElement\n * @slot - The card main content.\n * @cssproperty [--wje-card-margin-top=0] - Margin top of the component;\n * @cssproperty [--wje-card-margin-bottom=1rem] - Margin bottom of the component;\n * @cssproperty [--wje-card-margin-inline=0] - Margin inline of the component;\n * @cssproperty [--wje-card-border-color=transparent] - Border color of the component;\n * @cssproperty [--wje-card-background=#fff] - Background of the component;\n */\nexport default class Card extends WJElement {\n    /**\n     * Card constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the Card element.\n     * @type {string}\n     */\n    className = 'Card';\n\n    /**\n     * Get CSS stylesheet for the Card element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Card element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Card element.\n     * @param {object} context The context object\n     * @param {object} store The store object\n     * @param {object} params The parameters\n     * @returns {object} fragment - The document fragment\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-card');\n\n        let slot = document.createElement('slot');\n\n        if (params.color) native.classList.add('wje-color-' + params.color);\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Card from './card.element.js';\n\n// export * from \"./card.element.js\";\nexport default Card;\n\nWJElement.define('wje-card', Card);\n"],"names":[],"mappings":";;;;;AAee,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;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,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,OAAO,MAAO,QAAO,UAAU,IAAI,eAAe,OAAO,KAAK;AAElE,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AACA;AChEA,UAAU,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-card.js","sources":["../packages/wje-card/card.element.js","../packages/wje-card/card.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Card element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/card\n * @status stable\n * @augments WJElement\n * @slot - The card main content.\n * @cssproperty [--wje-card-background=#fff] - Background of the component;\n * @cssproperty [--wje-card-color=#000] - Color of the component;\n * @cssproperty [--wje-card-border-color=transparent] - Border color of the component;\n * @cssproperty [--wje-card-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-card-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-card-border-radius=0.5rem] - Border radius of the component;\n * @cssproperty [--wje-card-shadow=var(--wje-shadow-x-large)] - Shadow of the component;\n */\nexport default class Card extends WJElement {\n    /**\n     * Card constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the Card element.\n     * @type {string}\n     */\n    className = 'Card';\n\n    /**\n     * Get CSS stylesheet for the Card element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Card element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Card element.\n     * @param {object} context The context object\n     * @param {object} store The store object\n     * @param {object} params The parameters\n     * @returns {object} fragment - The document fragment\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-card');\n\n        let slot = document.createElement('slot');\n\n        if (params.color) native.classList.add('wje-color-' + params.color);\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Card from './card.element.js';\n\n// export * from \"./card.element.js\";\nexport default Card;\n\nWJElement.define('wje-card', Card);\n"],"names":[],"mappings":";;;;;AAiBe,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;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,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,OAAO,MAAO,QAAO,UAAU,IAAI,eAAe,OAAO,KAAK;AAElE,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AACA;AClEA,UAAU,OAAO,YAAY,IAAI;"}

package/dist/wje-carousel.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[ Carousel ]\n*/\n\n.native-carousel {\n    position: relative;\n    width: var(--wje-carousel-width, 100%);\n    height: var(--wje-carousel-height, 300px);\n    scroll-behavior: smooth;\n}\n\n.carousel-slides {\n    display: flex;\n    transition: transform 0.5s ease;\n    align-items: center;\n    justify-items: center;\n    overflow: auto;\n    overscroll-behavior-x: contain;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    aspect-ratio: var(--wje-aspect-ratio, 4 / 3);\n    scroll-snap-type: x mandatory;\n    scroll-padding-inline: 0;\n    overflow-y: hidden;\n    padding-inline: var(--wje-spacing-inline, 0);\n    gap: 0.5rem;\n}\n\n.carousel-slides::-webkit-scrollbar {\n    display: none;\n}\n\n::slotted(wje-carousel-item) {\n    flex: 0 0 var(--wje-carousel-size);\n    height: 100%;\n}\n\n/*NAVIGATION*/\n\nwje-button {\n    position: absolute;\n    top: 50%;\n\n    border: none;\n    cursor: pointer;\n    z-index: 2;\n}\n\n.prev {\n    left: -1rem;\n    transform: translate(-100%, -50%);\n}\n\n.next {\n    right: -1rem;\n    transform: translate(100%, -50%);\n}\n\n/*PAGINATION*/\n\n.pagination {\n    position: relative;\n    bottom: -0.5rem;\n    left: 50%;\n    transform: translate(-50%, 100%);\n    display: flex;\n    z-index: 2;\n    justify-content: center;\n}\n.pagination-item {\n    cursor: pointer;\n    height: 15px;\n    width: 15px;\n    margin: 0 2px;\n    background-color: var(--wje-color-contrast-4);\n    display: inline-block;\n    border-radius: 50%;\n}\n.pagination-item.active {\n    background-color: var(--wje-color);\n}\n\n/*THUMBNAILS*/\n\n.thumbnails {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-x: auto;\n    gap: 0.5rem;\n    padding: 0 0.5rem;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    box-sizing: border-box;\n    overflow-y: hidden;\n    wje-thumbnail {\n        --wje-thumbnail-width: 48px;\n        --wje-thumbnail-height: 48px;\n        --wje-thumbnail-border-radius: 0;\n        cursor: pointer;\n        border: 1px solid transparent;\n    }\n    .active {\n        border: 1px solid var(--wje-color-primary-11);\n    }\n}\n";
+const styles = '/*\n[ Carousel ]\n*/\n\n.native-carousel {\n    position: relative;\n    width: var(--wje-carousel-width, 100%);\n    height: var(--wje-carousel-height, 300px);\n    scroll-behavior: smooth;\n}\n\n.slides-wrapper {\n    position: relative;\n    width: var(--wje-carousel-width, 100%);\n    height: var(--wje-carousel-height, 300px);\n}\n\n.carousel-slides {\n    display: flex;\n    transition: transform 0.5s ease;\n    align-items: center;\n    justify-items: center;\n    overflow: auto;\n    overscroll-behavior-x: contain;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    aspect-ratio: var(--wje-aspect-ratio, 4 / 3);\n    scroll-snap-type: x mandatory;\n    scroll-padding-inline: 0;\n    overflow-y: hidden;\n    padding-inline: var(--wje-spacing-inline, 0);\n    gap: 0.5rem;\n}\n\n.carousel-slides::-webkit-scrollbar {\n    display: none;\n}\n\n::slotted(wje-carousel-item) {\n    flex: 0 0 var(--wje-carousel-size);\n    height: 100%;\n}\n\n/*NAVIGATION*/\n\n[name="prev"], [name="next"] {\n    display: block;\n    position: absolute;\n    top: 50%;\n    border: none;\n    cursor: pointer;\n    z-index: 2;\n}\n\n[name="prev"] {\n    left: -1rem;\n    transform: translate(-100%, -50%);\n}\n\n[name="next"] {\n    right: -1rem;\n    transform: translate(100%, -50%);\n}\n\n/*PAGINATION*/\n\n.pagination {\n    position: relative;\n    left: 50%;\n    transform: translate(-50%, 0);\n    display: flex;\n    z-index: 2;\n    justify-content: center;\n    padding-block: 1rem;\n}\n.pagination-item {\n    cursor: pointer;\n    height: 15px;\n    width: 15px;\n    margin: 0 2px;\n    background-color: var(--wje-color-contrast-4);\n    display: inline-block;\n    border-radius: 50%;\n}\n.pagination-item.active {\n    background-color: var(--wje-color);\n}\n\n/*THUMBNAILS*/\n\n.thumbnails {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow-x: auto;\n    gap: 0.5rem;\n    padding: 0 0.5rem;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    box-sizing: border-box;\n    overflow-y: hidden;\n    wje-thumbnail {\n        --wje-thumbnail-width: 48px;\n        --wje-thumbnail-height: 48px;\n        --wje-thumbnail-border-radius: 0;\n        cursor: pointer;\n        border: 1px solid transparent;\n    }\n    .active {\n        border: 1px solid var(--wje-color-primary-11);\n    }\n}\n';
 class Carousel extends WJElement {
   /**
    * Carousel constructor method.
@@ -104,20 +104,29 @@ class Carousel extends WJElement {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-carousel");
+    let wrapper = document.createElement("div");
+    wrapper.classList.add("slides-wrapper");
     let slides = document.createElement("div");
     slides.classList.add("carousel-slides");
     let slot = document.createElement("slot");
-    slides.appendChild(slot);
-    native.appendChild(slides);
+    let slotPrev = document.createElement("slot");
+    slotPrev.setAttribute("name", "prev");
+    let slotNext = document.createElement("slot");
+    slotNext.setAttribute("name", "next");
+    slides.append(slot);
+    native.append(wrapper);
     if (this.navigation) {
       this.prevButton = this.createPreviousButton();
       this.nextButton = this.createNextButton();
-      native.appendChild(this.prevButton);
-      native.appendChild(this.nextButton);
+      this.append(this.prevButton);
+      this.append(this.nextButton);
+      wrapper.append(slotPrev);
+      wrapper.append(slotNext);
     }
-    if (this.pagination) native.appendChild(this.createPagination());
-    if (this.thumbnails) native.appendChild(this.createThumbnails());
-    fragment.appendChild(native);
+    wrapper.append(slides);
+    if (this.pagination) native.append(this.createPagination());
+    if (this.thumbnails) native.append(this.createThumbnails());
+    fragment.append(native);
     this.slides = slides;
     return fragment;
   }
@@ -133,19 +142,39 @@ class Carousel extends WJElement {
     let carouselSize = 100 / +this.slidePerPage;
     this.style.setProperty("--wje-carousel-size", carouselSize + "%");
     this.goToSlide(this.activeSlide, "auto");
+    requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToCenter()));
     this.slides.addEventListener("scrollend", (e) => {
-      const slides = this.getSlides();
-      const entries = [...this.entriesMap.values()];
-      const visibleEntries = entries.find((entry) => entry.isIntersecting);
-      if (visibleEntries == null ? void 0 : visibleEntries.target.classList.contains("clone")) {
-        const cloneIndex = +visibleEntries.target.getAttribute("clone-index");
-        this.goToSlide(cloneIndex, "auto");
-        this.activeSlide = cloneIndex;
-      } else if (visibleEntries) {
-        let slideIndex = slides.indexOf(visibleEntries.target);
-        this.activeSlide = slideIndex;
+      this.syncActiveToCenter();
+    });
+  }
+  /**
+   * Sync `activeSlide` to the slide whose center is closest to the container center.
+   */
+  syncActiveToCenter() {
+    this.getSlides();
+    const withClones = this.getSlidesWithClones();
+    if (!withClones.length) return;
+    const containerRect = this.slides.getBoundingClientRect();
+    const containerCenterX = containerRect.left + containerRect.width / 2;
+    let best = null;
+    let bestDist = Infinity;
+    withClones.forEach((el) => {
+      const r = el.getBoundingClientRect();
+      const center = r.left + r.width / 2;
+      const dist = Math.abs(center - containerCenterX);
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = el;
       }
     });
+    if (!best) return;
+    const vIndex = withClones.indexOf(best);
+    if (vIndex === -1) return;
+    const logicalIndex = this.getLogicalIndexForVisual(vIndex);
+    this.activeSlide = logicalIndex;
+    if (this.loop && (vIndex === 0 || vIndex === withClones.length - 1)) {
+      this.goToSlide(logicalIndex, "auto");
+    }
   }
   /**
    * Sets up the IntersectionObserver for the Carousel.
@@ -176,23 +205,25 @@ class Carousel extends WJElement {
    */
   goToSlide(index, behavior = "smooth", next = true) {
     const slides = this.getSlides();
-    const slideWithClones = this.getSlidesWithClones();
-    slideWithClones.forEach((slide, i) => {
-      slide.classList.remove("active");
-    });
-    let newActiveSlide = this.loop ? (index + slides.length) % slides.length : Math.min(Math.max(index, 0), slides.length - 1);
-    this.activeSlide = newActiveSlide;
-    const nextSlideIndex = Math.min(
-      Math.max(index + (this.loop ? this.slidePerPage : 0), 0),
-      slideWithClones.length - 1
-    );
-    const nextSlideEl = this.getSlidesWithClones()[nextSlideIndex];
-    nextSlideEl.classList.add("active");
-    let nextSlideRect = nextSlideEl.getBoundingClientRect();
-    let slidesContainerRect = this.slides.getBoundingClientRect();
+    const withClones = this.getSlidesWithClones();
+    withClones.forEach((slide) => slide.classList.remove("active"));
+    const maxIndex = Math.max(slides.length - 1, 0);
+    let logical;
+    if (this.loop && slides.length > 0) {
+      logical = (index % slides.length + slides.length) % slides.length;
+    } else {
+      logical = Math.min(Math.max(index, 0), maxIndex);
+    }
+    this.activeSlide = logical;
+    const vIndex = this.getVisualIndexForLogical(logical);
+    const targetEl = withClones[vIndex];
+    if (!targetEl) return;
+    targetEl.classList.add("active");
+    const targetRect = targetEl.getBoundingClientRect();
+    const containerRect = this.slides.getBoundingClientRect();
     this.slides.scrollTo({
-      left: nextSlideRect.left - slidesContainerRect.left + this.slides.scrollLeft,
-      top: nextSlideRect.top - slidesContainerRect.top + this.slides.scrollTop,
+      left: targetRect.left - containerRect.left + this.slides.scrollLeft,
+      top: targetRect.top - containerRect.top + this.slides.scrollTop,
       behavior: behavior === "smooth" ? "smooth" : "auto"
     });
     if (this.navigation && !this.loop) {
@@ -210,12 +241,10 @@ class Carousel extends WJElement {
     if (items.length && this.loop) {
       const firstItemClone = items[0].cloneNode(true);
       firstItemClone.classList.add("clone");
-      firstItemClone.setAttribute("clone-index", 0);
-      this.appendChild(firstItemClone);
+      this.append(firstItemClone);
       const lastItemClone = items[items.length - 1].cloneNode(true);
       lastItemClone.classList.add("clone");
-      lastItemClone.setAttribute("clone-index", items.length - 1);
-      this.insertBefore(lastItemClone, this.firstChild);
+      this.insertBefore(lastItemClone, items[0]);
     }
   }
   /**
@@ -268,10 +297,12 @@ class Carousel extends WJElement {
    */
   createNextButton() {
     const nextButton = document.createElement("wje-button");
-    nextButton.classList.add("next");
-    nextButton.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>';
+    nextButton.setAttribute("part", "next-button");
     nextButton.setAttribute("circle", "");
     nextButton.setAttribute("fill", "link");
+    nextButton.setAttribute("slot", "next");
+    nextButton.innerHTML = '<wje-icon name="chevron-right" size="large"></wje-icon>';
+    nextButton.classList.add("next");
     nextButton.addEventListener("click", (e) => {
       this.nextSlide();
     });
@@ -283,10 +314,12 @@ class Carousel extends WJElement {
    */
   createPreviousButton() {
     const previousButton = document.createElement("wje-button");
-    previousButton.classList.add("prev");
-    previousButton.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>';
+    previousButton.setAttribute("part", "previous-button");
     previousButton.setAttribute("circle", "");
     previousButton.setAttribute("fill", "link");
+    previousButton.setAttribute("slot", "prev");
+    previousButton.innerHTML = '<wje-icon name="chevron-left" size="large"></wje-icon>';
+    previousButton.classList.add("prev");
     previousButton.addEventListener("click", (e) => {
       this.previousSlide();
     });
@@ -298,6 +331,7 @@ class Carousel extends WJElement {
    */
   createPagination() {
     const pagination = document.createElement("div");
+    pagination.setAttribute("part", "pagination");
     pagination.classList.add("pagination");
     const slides = this.getSlides();
     slides.forEach((slide, i) => {
@@ -308,7 +342,7 @@ class Carousel extends WJElement {
         e.target.classList.add("active");
         this.goToSlide(i);
       });
-      pagination.appendChild(paginationItem);
+      pagination.append(paginationItem);
     });
     return pagination;
   }
@@ -328,7 +362,7 @@ class Carousel extends WJElement {
         e.target.closest("wje-thumbnail").classList.add("active");
         this.goToSlide(i);
       });
-      thumbnails.appendChild(thumbnail);
+      thumbnails.append(thumbnail);
     });
     return thumbnails;
   }
@@ -358,19 +392,34 @@ class Carousel extends WJElement {
   getSlidesWithClones() {
     return Array.from(this.querySelectorAll("wje-carousel-item"));
   }
+  /** Maps logical index -> visual index (accounts for leading clone when loop=true) */
+  getVisualIndexForLogical(index) {
+    return this.loop ? index + 1 : index;
+  }
+  /** Maps visual index -> logical index (handles clones at 0 and last when loop=true) */
+  getLogicalIndexForVisual(vIndex) {
+    const slides = this.getSlides();
+    const withClones = this.getSlidesWithClones();
+    if (!this.loop) return vIndex;
+    if (vIndex === 0) return slides.length - 1;
+    if (vIndex === withClones.length - 1) return 0;
+    return vIndex - 1;
+  }
   /**
    * Goes to the slide.
    * @returns {boolean}
    */
   canGoNext() {
-    return this.querySelector(".native-carousel").scrollLeft < this.querySelector(".native-carousel").scrollWidth;
+    const el = this.context.querySelector(".carousel-slides");
+    return el.scrollLeft < el.scrollWidth - el.clientWidth;
   }
   /**
    * Goes to the slide.
    * @returns {boolean}
    */
   canGoPrevious() {
-    return this.querySelector(".native-carousel").scrollLeft > 0;
+    const el = this.context.querySelector(".carousel-slides");
+    return el.scrollLeft > 0;
   }
 }
 WJElement.define("wje-carousel", Carousel);

package/dist/wje-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-carousel.js","sources":["../packages/wje-carousel/carousel.element.js","../packages/wje-carousel/carousel.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Carousel class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/carousel\n * @status stable\n * @augments WJElement\n * @slot - The carousel main content.\n * @cssproperty [--wje-carousel-size=100%] - Size of the carousel component;\n */\nexport default class Carousel extends WJElement {\n    /**\n     * Carousel constructor method.\n     */\n    constructor() {\n        super();\n\n        this.slidePerPage = 1;\n    }\n\n    /**\n     * Active slide attribute.\n     * @param value\n     */\n    set activeSlide(value) {\n        this.setAttribute('active-slide', value);\n    }\n\n    /**\n     * Active slide attribute.\n     * @returns {number|number}\n     */\n    get activeSlide() {\n        return +this.getAttribute('active-slide') || 0;\n    }\n\n    /**\n     * Pagination attribute.\n     * @returns {boolean}\n     */\n    get pagination() {\n        return this.hasAttribute('pagination');\n    }\n\n    /**\n     * Navigation attribute.\n     * @returns {boolean}\n     */\n    get navigation() {\n        return this.hasAttribute('navigation');\n    }\n\n    /**\n     * Thumbnails attribute.\n     * @returns {boolean}\n     */\n    get thumbnails() {\n        return this.hasAttribute('thumbnails');\n    }\n\n    /**\n     * Loop attribute.\n     * @returns {boolean}\n     */\n    get loop() {\n        return this.hasAttribute('loop');\n    }\n\n    /**\n     * Class name for the Carousel.\n     * @type {string}\n     */\n    className = 'Carousel';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active-slide'];\n    }\n\n    /**\n     * Sets up the attributes for the Carousel.\n     * @param name\n     * @param old\n     * @param newName\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (name === 'active-slide') {\n            if (this.pagination) this.changePagination();\n\n            if (this.thumbnails) this.changeThumbnails();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the Carousel.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Before draw method for the Carousel.\n     */\n    beforeDraw() {\n        this.cloneFirstAndLastItems();\n    }\n\n    /**\n     * Draw method for the Carousel.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel');\n\n        let slides = document.createElement('div');\n        slides.classList.add('carousel-slides');\n\n        let slot = document.createElement('slot');\n\n        slides.appendChild(slot);\n        native.appendChild(slides);\n\n        if (this.navigation) {\n            this.prevButton = this.createPreviousButton();\n            this.nextButton = this.createNextButton();\n\n            native.appendChild(this.prevButton);\n            native.appendChild(this.nextButton);\n        }\n\n        if (this.pagination) native.appendChild(this.createPagination());\n\n        if (this.thumbnails) native.appendChild(this.createThumbnails());\n\n        fragment.appendChild(native);\n\n        this.slides = slides;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Carousel.\n     */\n    afterDraw() {\n        this.setIntersectionObserver();\n        this.getSlidesWithClones().forEach((slide, i) => {\n            this.intersectionObserver.observe(slide);\n        });\n\n        this.slidePerPage = this.getAttribute('slide-per-page') || 1;\n        let carouselSize = 100 / +this.slidePerPage;\n        this.style.setProperty('--wje-carousel-size', carouselSize + '%');\n\n        this.goToSlide(this.activeSlide, 'auto');\n\n        this.slides.addEventListener('scrollend', (e) => {\n            const slides = this.getSlides();\n            const entries = [...this.entriesMap.values()];\n            const visibleEntries = entries.find((entry) => entry.isIntersecting);\n\n            if (visibleEntries?.target.classList.contains('clone')) {\n                const cloneIndex = +visibleEntries.target.getAttribute('clone-index');\n                this.goToSlide(cloneIndex, 'auto');\n                this.activeSlide = cloneIndex;\n            } else if (visibleEntries) {\n                let slideIndex = slides.indexOf(visibleEntries.target);\n                this.activeSlide = slideIndex;\n            }\n        });\n    }\n\n    /**\n     * Sets up the IntersectionObserver for the Carousel.\n     */\n    setIntersectionObserver() {\n        this.intersectionObserver = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    this.entriesMap.set(entry.target, entry);\n                });\n            },\n            {\n                root: this.context.querySelector('.carousel-slides'),\n                threshold: 0.5,\n            }\n        );\n\n        this.entriesMap = new Map();\n        this.records = this.intersectionObserver.takeRecords();\n        this.records.forEach((entry) => {\n            this.entriesMap.set(entry.target, entry);\n        });\n    }\n\n    /**\n     * Goes to the slide.\n     * @param index\n     * @param behavior\n     * @param next\n     */\n    goToSlide(index, behavior = 'smooth', next = true) {\n        const slides = this.getSlides();\n        const slideWithClones = this.getSlidesWithClones();\n\n        // remove active class from all slides\n        slideWithClones.forEach((slide, i) => {\n            slide.classList.remove('active');\n        });\n\n        let newActiveSlide = this.loop\n            ? (index + slides.length) % slides.length\n            : Math.min(Math.max(index, 0), slides.length - 1);\n        this.activeSlide = newActiveSlide;\n\n        const nextSlideIndex = Math.min(\n            Math.max(index + (this.loop ? this.slidePerPage : 0), 0),\n            slideWithClones.length - 1\n        );\n        const nextSlideEl = this.getSlidesWithClones()[nextSlideIndex];\n        nextSlideEl.classList.add('active');\n\n        let nextSlideRect = nextSlideEl.getBoundingClientRect();\n        let slidesContainerRect = this.slides.getBoundingClientRect();\n\n        this.slides.scrollTo({\n            left: nextSlideRect.left - slidesContainerRect.left + this.slides.scrollLeft,\n            top: nextSlideRect.top - slidesContainerRect.top + this.slides.scrollTop,\n            behavior: behavior === 'smooth' ? 'smooth' : 'auto',\n        });\n\n        if (this.navigation && !this.loop) {\n            this.nextButton.removeAttribute('disabled');\n            this.prevButton.removeAttribute('disabled');\n\n            if (this.activeSlide === slides.length - 1) this.nextButton.setAttribute('disabled', '');\n\n            if (this.activeSlide === 0) this.prevButton.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Clones the first and last items.\n     */\n    cloneFirstAndLastItems() {\n        const items = this.getSlides();\n\n        if (items.length && this.loop) {\n            // Klonovánie prveho položky a pridanie na koniec\n            const firstItemClone = items[0].cloneNode(true);\n            firstItemClone.classList.add('clone');\n            firstItemClone.setAttribute('clone-index', 0);\n\n            this.appendChild(firstItemClone);\n\n            // Klonovanie poslednej položky a pridanie na zaciatok\n            const lastItemClone = items[items.length - 1].cloneNode(true);\n            lastItemClone.classList.add('clone');\n            lastItemClone.setAttribute('clone-index', items.length - 1);\n\n            this.insertBefore(lastItemClone, this.firstChild);\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    removeActiveSlide() {\n        this.getSlidesWithClones().forEach((slide, i) => {\n            slide.classList.remove('active');\n        });\n\n        if (this.pagination) {\n            this.context.querySelectorAll('.pagination-item').forEach((item) => {\n                item.classList.remove('active');\n            });\n        }\n\n        if (this.thumbnails) {\n            this.context.querySelectorAll('wje-thumbnail').forEach((item) => {\n                item.classList.remove('active');\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    changePagination() {\n        if (this.pagination) {\n            this.removeActiveSlide();\n            this.context.querySelectorAll('.pagination-item').forEach((item, i) => {\n                if (i === this.activeSlide) {\n                    item.classList.add('active');\n                }\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    changeThumbnails() {\n        if (this.thumbnails) {\n            this.removeActiveSlide();\n            this.context.querySelectorAll('wje-thumbnail').forEach((item, i) => {\n                if (i === this.activeSlide) {\n                    item.classList.add('active');\n                }\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createNextButton() {\n        const nextButton = document.createElement('wje-button');\n        nextButton.classList.add('next');\n        nextButton.innerHTML = '<wje-icon name=\"chevron-right\" size=\"large\"></wje-icon>';\n        nextButton.setAttribute('circle', '');\n        nextButton.setAttribute('fill', 'link');\n        nextButton.addEventListener('click', (e) => {\n            this.nextSlide();\n        });\n\n        return nextButton;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createPreviousButton() {\n        const previousButton = document.createElement('wje-button');\n        previousButton.classList.add('prev');\n        previousButton.innerHTML = '<wje-icon name=\"chevron-left\" size=\"large\"></wje-icon>';\n        previousButton.setAttribute('circle', '');\n        previousButton.setAttribute('fill', 'link');\n        previousButton.addEventListener('click', (e) => {\n            this.previousSlide();\n        });\n\n        return previousButton;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createPagination() {\n        const pagination = document.createElement('div');\n        pagination.classList.add('pagination');\n\n        const slides = this.getSlides();\n        slides.forEach((slide, i) => {\n            const paginationItem = document.createElement('div');\n            paginationItem.classList.add('pagination-item');\n            paginationItem.addEventListener('click', (e) => {\n                this.removeActiveSlide();\n                e.target.classList.add('active');\n                this.goToSlide(i);\n            });\n            pagination.appendChild(paginationItem);\n        });\n\n        return pagination;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createThumbnails() {\n        const thumbnails = document.createElement('div');\n        thumbnails.classList.add('thumbnails');\n\n        const slides = this.getSlides();\n        slides.forEach((slide, i) => {\n            const thumbnail = document.createElement('wje-thumbnail');\n            thumbnail.innerHTML = `<img src=\"${slide.querySelector('wje-img').getAttribute('src')}\"></img>`;\n            thumbnail.addEventListener('click', (e) => {\n                this.removeActiveSlide();\n                e.target.closest('wje-thumbnail').classList.add('active');\n                this.goToSlide(i);\n            });\n            thumbnails.appendChild(thumbnail);\n        });\n\n        return thumbnails;\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    nextSlide() {\n        this.goToSlide(this.activeSlide + this.slidePerPage);\n    }\n\n    /**\n     * Goes to the previous slide.\n     */\n    previousSlide() {\n        this.goToSlide(this.activeSlide - this.slidePerPage);\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {Array}\n     */\n    getSlides() {\n        return Array.from(this.querySelectorAll('wje-carousel-item:not(.clone)'));\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {Array}\n     */\n    getSlidesWithClones() {\n        return Array.from(this.querySelectorAll('wje-carousel-item'));\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {boolean}\n     */\n    canGoNext() {\n        return this.querySelector('.native-carousel').scrollLeft < this.querySelector('.native-carousel').scrollWidth;\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {boolean}\n     */\n    canGoPrevious() {\n        return this.querySelector('.native-carousel').scrollLeft > 0;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Carousel from './carousel.element.js';\n\n// export * from \"./carousel.element.js\";\nexport default Carousel;\n\nWJElement.define('wje-carousel', Carousel);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-carousel.js","sources":["../packages/wje-carousel/carousel.element.js","../packages/wje-carousel/carousel.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Carousel class that extends WJElement.\n * @documentation https://elements.webjet.sk/components/carousel\n * @status stable\n * @augments WJElement\n * @slot - The carousel main content.\n * @cssproperty [--wje-carousel-size=100%] - Size of the carousel component;\n */\nexport default class Carousel extends WJElement {\n    /**\n     * Carousel constructor method.\n     */\n    constructor() {\n        super();\n\n        this.slidePerPage = 1;\n    }\n\n    /**\n     * Active slide attribute.\n     * @param value\n     */\n    set activeSlide(value) {\n        this.setAttribute('active-slide', value);\n    }\n\n    /**\n     * Active slide attribute.\n     * @returns {number|number}\n     */\n    get activeSlide() {\n        return +this.getAttribute('active-slide') || 0;\n    }\n\n    /**\n     * Pagination attribute.\n     * @returns {boolean}\n     */\n    get pagination() {\n        return this.hasAttribute('pagination');\n    }\n\n    /**\n     * Navigation attribute.\n     * @returns {boolean}\n     */\n    get navigation() {\n        return this.hasAttribute('navigation');\n    }\n\n    /**\n     * Thumbnails attribute.\n     * @returns {boolean}\n     */\n    get thumbnails() {\n        return this.hasAttribute('thumbnails');\n    }\n\n    /**\n     * Loop attribute.\n     * @returns {boolean}\n     */\n    get loop() {\n        return this.hasAttribute('loop');\n    }\n\n    /**\n     * Class name for the Carousel.\n     * @type {string}\n     */\n    className = 'Carousel';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['active-slide'];\n    }\n\n    /**\n     * Sets up the attributes for the Carousel.\n     * @param name\n     * @param old\n     * @param newName\n     */\n    attributeChangedCallback(name, old, newName) {\n        if (name === 'active-slide') {\n            if (this.pagination) this.changePagination();\n\n            if (this.thumbnails) this.changeThumbnails();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the Carousel.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Before draw method for the Carousel.\n     */\n    beforeDraw() {\n        this.cloneFirstAndLastItems();\n    }\n\n    /**\n     * Draw method for the Carousel.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-carousel');\n\n        let wrapper = document.createElement('div');\n        wrapper.classList.add('slides-wrapper');\n\n        let slides = document.createElement('div');\n        slides.classList.add('carousel-slides');\n\n        let slot = document.createElement('slot');\n\n        let slotPrev = document.createElement('slot');\n        slotPrev.setAttribute('name', 'prev');\n\n        let slotNext = document.createElement('slot');\n        slotNext.setAttribute('name', 'next');\n\n        slides.append(slot);\n        native.append(wrapper);\n\n        if (this.navigation) {\n            this.prevButton = this.createPreviousButton();\n            this.nextButton = this.createNextButton();\n\n            this.append(this.prevButton);\n            this.append(this.nextButton);\n\n            wrapper.append(slotPrev);\n            wrapper.append(slotNext);\n        }\n\n        wrapper.append(slides);\n\n        if (this.pagination) native.append(this.createPagination());\n\n        if (this.thumbnails) native.append(this.createThumbnails());\n\n        fragment.append(native);\n\n        this.slides = slides;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Carousel.\n     */\n    afterDraw() {\n        this.setIntersectionObserver();\n        this.getSlidesWithClones().forEach((slide, i) => {\n            this.intersectionObserver.observe(slide);\n        });\n\n        this.slidePerPage = this.getAttribute('slide-per-page') || 1;\n        let carouselSize = 100 / +this.slidePerPage;\n        this.style.setProperty('--wje-carousel-size', carouselSize + '%');\n\n        this.goToSlide(this.activeSlide, 'auto');\n\n        requestAnimationFrame(() => requestAnimationFrame(() => this.syncActiveToCenter()));\n\n        this.slides.addEventListener('scrollend', (e) => {\n            this.syncActiveToCenter();\n        });\n    }\n\n    /**\n     * Sync `activeSlide` to the slide whose center is closest to the container center.\n     */\n    syncActiveToCenter() {\n        const slides = this.getSlides();\n        const withClones = this.getSlidesWithClones();\n        if (!withClones.length) return;\n\n        const containerRect = this.slides.getBoundingClientRect();\n        const containerCenterX = containerRect.left + containerRect.width / 2;\n\n        let best = null;\n        let bestDist = Infinity;\n        withClones.forEach((el) => {\n            const r = el.getBoundingClientRect();\n            const center = r.left + r.width / 2;\n            const dist = Math.abs(center - containerCenterX);\n            if (dist < bestDist) {\n                bestDist = dist;\n                best = el;\n            }\n        });\n\n        if (!best) return;\n\n        const vIndex = withClones.indexOf(best);\n        if (vIndex === -1) return;\n\n        const logicalIndex = this.getLogicalIndexForVisual(vIndex);\n        this.activeSlide = logicalIndex;\n\n        // If we landed on a clone, silently snap to the corresponding real slide\n        if (this.loop && (vIndex === 0 || vIndex === withClones.length - 1)) {\n            this.goToSlide(logicalIndex, 'auto');\n        }\n    }\n\n    /**\n     * Sets up the IntersectionObserver for the Carousel.\n     */\n    setIntersectionObserver() {\n        this.intersectionObserver = new IntersectionObserver(\n            (entries) => {\n                entries.forEach((entry) => {\n                    this.entriesMap.set(entry.target, entry);\n                });\n            },\n            {\n                root: this.context.querySelector('.carousel-slides'),\n                threshold: 0.5,\n            }\n        );\n\n        this.entriesMap = new Map();\n        this.records = this.intersectionObserver.takeRecords();\n        this.records.forEach((entry) => {\n            this.entriesMap.set(entry.target, entry);\n        });\n    }\n\n    /**\n     * Goes to the slide.\n     * @param index\n     * @param behavior\n     * @param next\n     */\n    goToSlide(index, behavior = 'smooth', next = true) {\n        const slides = this.getSlides();\n        const withClones = this.getSlidesWithClones();\n\n        // remove active class from all slides (including clones)\n        withClones.forEach(slide => slide.classList.remove('active'));\n\n        // compute logical index: wrap when loop=true, else clamp\n        const maxIndex = Math.max(slides.length - 1, 0);\n        let logical;\n        if (this.loop && slides.length > 0) {\n            logical = ((index % slides.length) + slides.length) % slides.length; // safe modulo\n        } else {\n            logical = Math.min(Math.max(index, 0), maxIndex);\n        }\n        this.activeSlide = logical;\n\n        // compute visual target considering clones when loop=true\n        const vIndex = this.getVisualIndexForLogical(logical);\n        const targetEl = withClones[vIndex];\n        if (!targetEl) return;\n\n        targetEl.classList.add('active');\n\n        const targetRect = targetEl.getBoundingClientRect();\n        const containerRect = this.slides.getBoundingClientRect();\n\n        this.slides.scrollTo({\n            left: targetRect.left - containerRect.left + this.slides.scrollLeft,\n            top: targetRect.top - containerRect.top + this.slides.scrollTop,\n            behavior: behavior === 'smooth' ? 'smooth' : 'auto',\n        });\n\n        if (this.navigation && !this.loop) {\n            this.nextButton.removeAttribute('disabled');\n            this.prevButton.removeAttribute('disabled');\n\n            if (this.activeSlide === slides.length - 1) this.nextButton.setAttribute('disabled', '');\n            if (this.activeSlide === 0) this.prevButton.setAttribute('disabled', '');\n        }\n    }\n\n    /**\n     * Clones the first and last items.\n     */\n    cloneFirstAndLastItems() {\n        const items = this.getSlides();\n\n        if (items.length && this.loop) {\n            // Clone first -> append to end\n            const firstItemClone = items[0].cloneNode(true);\n            firstItemClone.classList.add('clone');\n            this.append(firstItemClone);\n\n            // Clone last -> insert before the first original item so it becomes the leading clone\n            const lastItemClone = items[items.length - 1].cloneNode(true);\n            lastItemClone.classList.add('clone');\n            this.insertBefore(lastItemClone, items[0]);\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    removeActiveSlide() {\n        this.getSlidesWithClones().forEach((slide, i) => {\n            slide.classList.remove('active');\n        });\n\n        if (this.pagination) {\n            this.context.querySelectorAll('.pagination-item').forEach((item) => {\n                item.classList.remove('active');\n            });\n        }\n\n        if (this.thumbnails) {\n            this.context.querySelectorAll('wje-thumbnail').forEach((item) => {\n                item.classList.remove('active');\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    changePagination() {\n        if (this.pagination) {\n            this.removeActiveSlide();\n            this.context.querySelectorAll('.pagination-item').forEach((item, i) => {\n                if (i === this.activeSlide) {\n                    item.classList.add('active');\n                }\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    changeThumbnails() {\n        if (this.thumbnails) {\n            this.removeActiveSlide();\n            this.context.querySelectorAll('wje-thumbnail').forEach((item, i) => {\n                if (i === this.activeSlide) {\n                    item.classList.add('active');\n                }\n            });\n        }\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createNextButton() {\n        const nextButton = document.createElement('wje-button');\n        nextButton.setAttribute('part', 'next-button');\n        nextButton.setAttribute('circle', '');\n        nextButton.setAttribute('fill', 'link');\n        nextButton.setAttribute('slot', 'next');\n        nextButton.innerHTML = '<wje-icon name=\"chevron-right\" size=\"large\"></wje-icon>';\n        nextButton.classList.add('next');\n        nextButton.addEventListener('click', (e) => {\n            this.nextSlide();\n        });\n\n        return nextButton;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createPreviousButton() {\n        const previousButton = document.createElement('wje-button');\n        previousButton.setAttribute('part', 'previous-button');\n        previousButton.setAttribute('circle', '');\n        previousButton.setAttribute('fill', 'link');\n        previousButton.setAttribute('slot', 'prev');\n        previousButton.innerHTML = '<wje-icon name=\"chevron-left\" size=\"large\"></wje-icon>';\n        previousButton.classList.add('prev');\n        previousButton.addEventListener('click', (e) => {\n            this.previousSlide();\n        });\n\n        return previousButton;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createPagination() {\n        const pagination = document.createElement('div');\n        pagination.setAttribute('part', 'pagination');\n        pagination.classList.add('pagination');\n\n        const slides = this.getSlides();\n        slides.forEach((slide, i) => {\n            const paginationItem = document.createElement('div');\n            paginationItem.classList.add('pagination-item');\n            paginationItem.addEventListener('click', (e) => {\n                this.removeActiveSlide();\n                e.target.classList.add('active');\n                this.goToSlide(i);\n            });\n            pagination.append(paginationItem);\n        });\n\n        return pagination;\n    }\n\n    /**\n     * Goes to the next slide.\n     * @returns {Element}\n     */\n    createThumbnails() {\n        const thumbnails = document.createElement('div');\n        thumbnails.classList.add('thumbnails');\n\n        const slides = this.getSlides();\n        slides.forEach((slide, i) => {\n            const thumbnail = document.createElement('wje-thumbnail');\n            thumbnail.innerHTML = `<img src=\"${slide.querySelector('wje-img').getAttribute('src')}\"></img>`;\n            thumbnail.addEventListener('click', (e) => {\n                this.removeActiveSlide();\n                e.target.closest('wje-thumbnail').classList.add('active');\n                this.goToSlide(i);\n            });\n            thumbnails.append(thumbnail);\n        });\n\n        return thumbnails;\n    }\n\n    /**\n     * Goes to the next slide.\n     */\n    nextSlide() {\n        this.goToSlide(this.activeSlide + this.slidePerPage);\n    }\n\n    /**\n     * Goes to the previous slide.\n     */\n    previousSlide() {\n        this.goToSlide(this.activeSlide - this.slidePerPage);\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {Array}\n     */\n    getSlides() {\n        return Array.from(this.querySelectorAll('wje-carousel-item:not(.clone)'));\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {Array}\n     */\n    getSlidesWithClones() {\n        return Array.from(this.querySelectorAll('wje-carousel-item'));\n    }\n\n    /** Maps logical index -> visual index (accounts for leading clone when loop=true) */\n    getVisualIndexForLogical(index) {\n        return this.loop ? index + 1 : index;\n    }\n\n    /** Maps visual index -> logical index (handles clones at 0 and last when loop=true) */\n    getLogicalIndexForVisual(vIndex) {\n        const slides = this.getSlides();\n        const withClones = this.getSlidesWithClones();\n        if (!this.loop) return vIndex;\n        if (vIndex === 0) return slides.length - 1;           // leading clone\n        if (vIndex === withClones.length - 1) return 0;       // trailing clone\n        return vIndex - 1;\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {boolean}\n     */\n    canGoNext() {\n        const el = this.context.querySelector('.carousel-slides');\n        return el.scrollLeft < (el.scrollWidth - el.clientWidth);\n    }\n\n    /**\n     * Goes to the slide.\n     * @returns {boolean}\n     */\n    canGoPrevious() {\n        const el = this.context.querySelector('.carousel-slides');\n        return el.scrollLeft > 0;\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Carousel from './carousel.element.js';\n\n// export * from \"./carousel.element.js\";\nexport default Carousel;\n\nWJElement.define('wje-carousel', Carousel);\n"],"names":[],"mappings":"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"}

package/dist/wje-chip.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import WJElement from "./wje-element.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Chip ]\n*/\n\n:host {\n    display: inline-flex;\n    --wje-chip-round-border-radius: var(--wje-border-radius-large);\n    --wje-button-border-radius: var(--wje-chip-round-border-radius);\n}\n\n.native-chip {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    font-size: var(--wje-font-size);\n    line-height: 1;\n    letter-spacing: -0.006em;\n    margin: 0;\n    padding: 0 var(--wje-spacing-small);\n    text-align: center;\n    cursor: pointer;\n    white-space: nowrap;\n    text-shadow: none;\n    box-shadow: none;\n    border: 0 none;\n    width: 100%;\n    height: 28px;\n    max-width: fit-content;\n    position: relative;\n    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    border-radius: var(--wje-border-radius-pill);\n    overflow: hidden;\n    vertical-align: middle;\n    box-sizing: border-box;\n    background-color: var(--wje-chip-background);\n    color: var(--wje-chip-color);\n    &:hover {\n        background-color: var(--wje-chip-background-hover);\n        color: var(--wje-chip-color-hover);\n    }\n}\n\n:host(.focus) {\n    box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n    border: 1px solid var(--wje-color-primary-11);\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n    outline: none !important;\n}\n\n:host([size='small']) .native-chip {\n    font-size: var(--wje-font-size-small);\n    height: 24px;\n    padding: var(--wje-spacing-3x-small)  var(--wje-spacing-x-small);\n    wje-button {\n        --wje-button-margin-inline: var(--wje-spacing-3x-small) calc(-1 * var(--wje-spacing-3x-small));\n    }\n}\n\n:host([size='large']) .native-chip {\n    font-size: var(--wje-font-size-medium);\n    height: 34px;\n    padding: var(--wje-spacing-x-small) var(--wje-spacing-small);\n\n}\n\n:host([round]) .native-chip {\n    border-radius: var(--wje-chip-round-border-radius);\n}\n\n.check {\n    display: none;\n}\n\n:host([active]) {\n    .check {\n        display: block;\n        margin-inline: 4px 0;\n    }\n}\n\n:host([disabled]) {\n    opacity: 0.5;\n    border: 0;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n    width: 22px;\n    height: 22px;\n}\n\n::slotted(wje-avatar:first-child) {\n    margin-inline: -8px 8px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n}\n\n::slotted(wje-icon:first-child) {\n    margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:last-child) {\n    margin: -4px -4px -4px 8px;\n}\n\nslot[name='end'].has-content {\n    display: block;\n    margin-inline-start: 8px;\n}\n\nwje-button {\n    /*--wje-button-border-radius: 50%;*/\n    --wje-button-margin-inline: 0.25rem -0.5rem;\n    --wje-padding-top: 0.15rem;\n    --wje-padding-start: 0.15rem;\n    --wje-padding-end: 0.15rem;\n    --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n    background-color: var(--wje-color-warning-2);\n    color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-9);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n    .native-chip.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-4);\n        color: var(--wje-color-primary-10);\n    }\n\n    .native-chip.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-4);\n        color: var(--wje-color-complete-10);\n    }\n\n    .native-chip.wje-color-success:hover {\n        background-color: var(--wje-color-success-4);\n        color: var(--wje-color-success-10);\n    }\n\n    .native-chip.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-4);\n        color: var(--wje-color-warning-11);\n    }\n\n    .native-chip.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-4);\n        color: var(--wje-color-danger-10);\n    }\n\n    .native-chip.wje-color-info:hover {\n        background-color: var(--wje-color-info-4);\n        color: var(--wje-color-info-10);\n    }\n}\n";
+const styles = "/*\n[ WJ Chip ]\n*/\n\n:host {\n    display: inline-flex;\n    --wje-button-border-radius: var(--wje-chip-round-border-radius);\n}\n\n.native-chip {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    font-size: var(--wje-font-size);\n    line-height: 1;\n    letter-spacing: -0.006em;\n    padding-block: var(--wje-chip-padding-block);\n    padding-inline: var(--wje-chip-padding-inline);\n    margin-block: var(--wje-chip-margin-block);\n    margin-inline: var(--wje-chip-margin-inline);\n    text-align: center;\n    cursor: pointer;\n    white-space: nowrap;\n    text-shadow: none;\n    box-shadow: none;\n    border: 0 none;\n    width: 100%;\n    height: 28px;\n    max-width: fit-content;\n    position: relative;\n    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    border-radius: var(--wje-border-radius-pill);\n    overflow: hidden;\n    vertical-align: middle;\n    box-sizing: border-box;\n    background-color: var(--wje-chip-background);\n    color: var(--wje-chip-color);\n    &:hover {\n        background-color: var(--wje-chip-background-hover);\n        color: var(--wje-chip-color-hover);\n    }\n}\n\n:host(.focus) {\n    box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n    border: 1px solid var(--wje-color-primary-11);\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n    outline: none !important;\n}\n\n:host([size='small']) .native-chip {\n    font-size: var(--wje-font-size-small);\n    height: 24px;\n    padding: var(--wje-spacing-3x-small)  var(--wje-spacing-x-small);\n    wje-button {\n        --wje-button-margin-inline: var(--wje-spacing-3x-small) calc(-1 * var(--wje-spacing-3x-small));\n    }\n}\n\n:host([size='large']) .native-chip {\n    font-size: var(--wje-font-size-medium);\n    height: 34px;\n    padding: var(--wje-spacing-x-small) var(--wje-spacing-small);\n\n}\n\n:host([round]) .native-chip {\n    border-radius: var(--wje-chip-round-border-radius);\n}\n\n.check {\n    display: none;\n}\n\n:host([active]) {\n    .check {\n        display: block;\n        margin-inline: 4px 0;\n    }\n}\n\n:host([disabled]) {\n    opacity: 0.5;\n    border: 0;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n    width: 22px;\n    height: 22px;\n}\n\n::slotted(wje-avatar:first-child) {\n    margin-inline: -8px 8px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n}\n\n::slotted(wje-icon:first-child) {\n    margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:last-child) {\n    margin: -4px -4px -4px 8px;\n}\n\nslot[name='end'].has-content {\n    display: block;\n    margin-inline-start: 8px;\n}\n\nwje-button {\n    /*--wje-button-border-radius: 50%;*/\n    --wje-button-margin-inline: 0.25rem -0.5rem;\n    --wje-padding-top: 0.15rem;\n    --wje-padding-start: 0.15rem;\n    --wje-padding-end: 0.15rem;\n    --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n    background-color: var(--wje-color-warning-2);\n    color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-9);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n    .native-chip.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-4);\n        color: var(--wje-color-primary-10);\n    }\n\n    .native-chip.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-4);\n        color: var(--wje-color-complete-10);\n    }\n\n    .native-chip.wje-color-success:hover {\n        background-color: var(--wje-color-success-4);\n        color: var(--wje-color-success-10);\n    }\n\n    .native-chip.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-4);\n        color: var(--wje-color-warning-11);\n    }\n\n    .native-chip.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-4);\n        color: var(--wje-color-danger-10);\n    }\n\n    .native-chip.wje-color-info:hover {\n        background-color: var(--wje-color-info-4);\n        color: var(--wje-color-info-10);\n    }\n}\n";
 class Chip extends WJElement {
   /**
    * Chip constructor method.
@@ -91,6 +91,7 @@ class Chip extends WJElement {
   draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
+    native.setAttribute("part", "native");
     native.classList.add("native-chip");
     let slot = document.createElement("slot");
     let slotEnd = document.createElement("slot");

package/dist/wje-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n    /**\n     * Chip constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets or removes the \"round\" attribute on the element based on the provided value.\n     * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n     * If true, the \"round\" attribute is added. If false, the \"round\"\n     * attribute is removed.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the 'size' attribute of the current element.\n     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Sets or removes the \"removable\" attribute on the element.\n     * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n     * If true, the \"removable\" attribute is added;\n     * if false, the \"removable\" attribute is removed.\n     */\n    set removable(value) {\n        if (value) {\n            this.setAttribute('removable', '');\n        } else {\n            this.removeAttribute('removable');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'removable' attribute.\n     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n     */\n    get removable() {\n        return this.hasAttribute('removable');\n    }\n\n    /**\n     * Class name for the Chip element.\n     * @type {string}\n     */\n    className = 'Chip';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Chip element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-chip');\n\n        let slot = document.createElement('slot');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        let remove = document.createElement('wje-button');\n        remove.setAttribute('part', 'remove');\n        remove.setAttribute('fill', 'link');\n        remove.setAttribute('color', this.color || 'default');\n        remove.round = !this.round;\n\n        if(this.hasAttribute('size')) {\n            if(this.size === 'small') {\n                remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n            } else if (this.size === 'large') {\n                remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n            }\n        } else {\n            remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n        }\n\n        let active = document.createElement('wje-icon');\n        active.setAttribute('name', 'check');\n        active.classList.add('check');\n\n        // Add color\n        if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n        else native.classList.add('wje-color-default', 'wje-color');\n\n        if (this.disabled) this.classList.add('wje-disabled');\n\n        if (this.outline) this.classList.add('wje-outline');\n\n        native.appendChild(slot);\n        native.appendChild(slotEnd);\n        native.appendChild(active);\n\n        if (this.removable) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        this.slotEnd = slotEnd;\n\n        return fragment;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n        event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n    }\n\n    /**\n     * Before disconnect event for the Chip element.\n     */\n    beforeDisconnect() {\n        event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":";;;;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAmEX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EAlEhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,IAAI,MAAM,OAAO;AACb,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,EAAE;AAAA,IACzC,OAAe;AACH,WAAK,gBAAgB,OAAO;AAAA,IACxC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,IAAI,UAAU,OAAO;AACjB,QAAI,OAAO;AACP,WAAK,aAAa,aAAa,EAAE;AAAA,IAC7C,OAAe;AACH,WAAK,gBAAgB,WAAW;AAAA,IAC5C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW;AAAA,EAC5C;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,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,aAAa,QAAQ,KAAK;AAElC,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,MAAM;AAClC,WAAO,aAAa,SAAS,KAAK,SAAS,SAAS;AACpD,WAAO,QAAQ,CAAC,KAAK;AAErB,QAAG,KAAK,aAAa,MAAM,GAAG;AAC1B,UAAG,KAAK,SAAS,SAAS;AACtB,eAAO,YAAY;AAAA,MACnC,WAAuB,KAAK,SAAS,SAAS;AAC9B,eAAO,YAAY;AAAA,MACnC;AAAA,IACA,OAAe;AACH,aAAO,YAAY;AAAA,IAC/B;AAEQ,QAAI,SAAS,SAAS,cAAc,UAAU;AAC9C,WAAO,aAAa,QAAQ,OAAO;AACnC,WAAO,UAAU,IAAI,OAAO;AAG5B,QAAI,KAAK,aAAa,OAAO,EAAG,QAAO,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAAA,QACtF,QAAO,UAAU,IAAI,qBAAqB,WAAW;AAE1D,QAAI,KAAK,SAAU,MAAK,UAAU,IAAI,cAAc;AAEpD,QAAI,KAAK,QAAS,MAAK,UAAU,IAAI,aAAa;AAElD,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,OAAO;AAC1B,WAAO,YAAY,MAAM;AAEzB,QAAI,KAAK,UAAW,QAAO,YAAY,MAAM;AAE7C,aAAS,YAAY,MAAM;AAE3B,SAAK,gBAAgB;AACrB,SAAK,UAAU;AAEf,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,eAAe,eAAe,KAAK,SAAS,KAAK,EAAG,MAAK,QAAQ,UAAU,IAAI,aAAa;AAEhG,UAAM,YAAY,KAAK,eAAe,SAAS,mBAAmB,MAAM,EAAE,iBAAiB,MAAM;AAAA,EACzG;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,UAAM,eAAe,KAAK,eAAe,SAAS,iBAAiB;AAAA,EAC3E;AACA;ACzKA,UAAU,OAAO,YAAY,IAAI;"}
+{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n    /**\n     * Chip constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets or removes the \"round\" attribute on the element based on the provided value.\n     * @param {boolean} value Determines whether the \"round\" attribute should be set or removed.\n     * If true, the \"round\" attribute is added. If false, the \"round\"\n     * attribute is removed.\n     */\n    set round(value) {\n        if (value) {\n            this.setAttribute('round', '');\n        } else {\n            this.removeAttribute('round');\n        }\n    }\n\n    /**\n     * Checks if the 'round' attribute is present on the element.\n     * @returns {boolean} Returns true if the 'round' attribute exists, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the size attribute of the element.\n     * @param {string} value The value to set for the size attribute.\n     */\n    set size(value) {\n        this.setAttribute('size', value);\n    }\n\n    /**\n     * Retrieves the 'size' attribute of the current element.\n     * @returns {string | null} The value of the 'size' attribute, or null if the attribute is not set.\n     */\n    get size() {\n        return this.getAttribute('size');\n    }\n\n    /**\n     * Sets or removes the \"removable\" attribute on the element.\n     * @param {boolean} value A boolean indicating whether the element should have the \"removable\" attribute.\n     * If true, the \"removable\" attribute is added;\n     * if false, the \"removable\" attribute is removed.\n     */\n    set removable(value) {\n        if (value) {\n            this.setAttribute('removable', '');\n        } else {\n            this.removeAttribute('removable');\n        }\n    }\n\n    /**\n     * Determines if the element has the 'removable' attribute.\n     * @returns {boolean} True if the element has the 'removable' attribute, otherwise false.\n     */\n    get removable() {\n        return this.hasAttribute('removable');\n    }\n\n    /**\n     * Class name for the Chip element.\n     * @type {string}\n     */\n    className = 'Chip';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Chip element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-chip');\n\n        let slot = document.createElement('slot');\n\n        let slotEnd = document.createElement('slot');\n        slotEnd.setAttribute('name', 'end');\n\n        let remove = document.createElement('wje-button');\n        remove.setAttribute('part', 'remove');\n        remove.setAttribute('fill', 'link');\n        remove.setAttribute('color', this.color || 'default');\n        remove.round = !this.round;\n\n        if(this.hasAttribute('size')) {\n            if(this.size === 'small') {\n                remove.innerHTML = `<wje-icon name=\"x\" size=\"small\"></wje-icon>`;\n            } else if (this.size === 'large') {\n                remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n            }\n        } else {\n            remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n        }\n\n        let active = document.createElement('wje-icon');\n        active.setAttribute('name', 'check');\n        active.classList.add('check');\n\n        // Add color\n        if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n        else native.classList.add('wje-color-default', 'wje-color');\n\n        if (this.disabled) this.classList.add('wje-disabled');\n\n        if (this.outline) this.classList.add('wje-outline');\n\n        native.appendChild(slot);\n        native.appendChild(slotEnd);\n        native.appendChild(active);\n\n        if (this.removable) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        this.slotEnd = slotEnd;\n\n        return fragment;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        if (WjElementUtils.hasSlotContent(this.context, 'end')) this.slotEnd.classList.add('has-content');\n\n        event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n    }\n\n    /**\n     * Before disconnect event for the Chip element.\n     */\n    beforeDisconnect() {\n        event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":"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"}

package/dist/wje-pagination.js

@@ -289,7 +289,7 @@ class Pagination extends WJElement {
         this.setAttribute("hidden", "");
       return;
     }
-    this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages);
+    this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages) || {};
   }
   /**
    * Creates a document fragment, appends a new slot element to it, and returns the fragment.
@@ -310,6 +310,7 @@ class Pagination extends WJElement {
    * @returns {DocumentFragment} A document fragment containing the pagination controls.
    */
   htmlPagination() {
+    var _a, _b, _c, _d;
     let fragment = document.createDocumentFragment();
     let select = document.createElement("wje-select");
     select.setAttribute("size", "small");
@@ -330,7 +331,7 @@ class Pagination extends WJElement {
     });
     let info = document.createElement("div");
     info.classList.add("info");
-    info.innerHTML = `${this.paginateObj.startIndex + 1} - ${this.paginateObj.endIndex + 1} ${this.localizer.translate("wj.pagination.of")} ${this.totalItems}`;
+    info.innerHTML = `${((_a = this.paginateObj) == null ? void 0 : _a.startIndex) + 1} - ${((_b = this.paginateObj) == null ? void 0 : _b.endIndex) + 1} ${this.localizer.translate("wj.pagination.of")} ${this.totalItems}`;
     let pagination = document.createElement("div");
     pagination.classList.add("pages");
     const button = document.createElement("wje-button");
@@ -348,15 +349,18 @@ class Pagination extends WJElement {
     const nextButton = button.cloneNode(true);
     nextButton.title = this.localizer.translate("wj.pagination.next");
     nextButton.innerHTML = `<wje-icon name="chevron-right" slot="icon-only"></wje-icon>`;
-    if (this.page + 1 >= this.paginateObj.totalPages) nextButton.disabled = true;
+    if (this.page + 1 >= ((_c = this.paginateObj) == null ? void 0 : _c.totalPages)) nextButton.disabled = true;
     nextButton.addEventListener("wje-button:click", (e) => this.pageClickAction(e, this.page + 1));
     let lastButton = button.cloneNode(true);
     lastButton.title = this.localizer.translate("wj.pagination.last");
     lastButton.innerHTML = `<wje-icon name="chevron-right-pipe" slot="icon-only"></wje-icon>`;
-    lastButton.disabled = this.paginateObj.endIndex + 1 >= this.totalItems;
+    lastButton.disabled = ((_d = this.paginateObj) == null ? void 0 : _d.endIndex) + 1 >= this.totalItems;
     lastButton.addEventListener(
       "wje-button:click",
-      (e) => this.pageClickAction(e, this.paginateObj.totalPages - 1)
+      (e) => {
+        var _a2;
+        return this.pageClickAction(e, ((_a2 = this.paginateObj) == null ? void 0 : _a2.totalPages) - 1);
+      }
     );
     select.append(...options);
     if (this.showFirstButton) pagination.appendChild(firstButton);
@@ -389,13 +393,13 @@ class Pagination extends WJElement {
     first.textContent = "1";
     first.addEventListener("wje-button:click", (e) => this.pageClickAction(e, 0));
     const last = button.cloneNode(true);
-    last.textContent = paginateObj.totalPages;
-    last.addEventListener("wje-button:click", (e) => this.pageClickAction(e, paginateObj.totalPages - 1));
-    if (paginateObj.currentPage >= this.maxPages + 1 && paginateObj.boundary < paginateObj.totalPages) {
+    last.textContent = paginateObj == null ? void 0 : paginateObj.totalPages;
+    last.addEventListener("wje-button:click", (e) => this.pageClickAction(e, (paginateObj == null ? void 0 : paginateObj.totalPages) - 1));
+    if ((paginateObj == null ? void 0 : paginateObj.currentPage) >= this.maxPages + 1 && (paginateObj == null ? void 0 : paginateObj.boundary) < (paginateObj == null ? void 0 : paginateObj.totalPages)) {
       fragment.appendChild(first);
       fragment.appendChild(dots);
     }
-    paginateObj.pages.forEach((page) => {
+    paginateObj == null ? void 0 : paginateObj.pages.forEach((page) => {
       let newButton = button.cloneNode(true);
       newButton.textContent = page;
       if (page - 1 === this.page) {
@@ -405,7 +409,7 @@ class Pagination extends WJElement {
       }
       fragment.appendChild(newButton);
     });
-    if ((paginateObj.pages.length === this.maxPages || paginateObj.currentPage < this.maxPages + 1) && paginateObj.boundary < paginateObj.totalPages) {
+    if (((paginateObj == null ? void 0 : paginateObj.pages.length) === this.maxPages || (paginateObj == null ? void 0 : paginateObj.currentPage) < this.maxPages + 1) && paginateObj.boundary < (paginateObj == null ? void 0 : paginateObj.totalPages)) {
       fragment.appendChild(dots.cloneNode(true));
       fragment.appendChild(last);
     }

package/dist/wje-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-pagination.js","sources":["../packages/wje-pagination/service/service.js","../packages/wje-pagination/pagination.element.js","../packages/wje-pagination/pagination.js"],"sourcesContent":["/**\n * Paginates items based on the total number of items, current page, page size, and maximum number of pages to display.\n * @param {number} totalItems The total number of items to paginate.\n * @param {number} [currentPage] The current page number (default is 1).\n * @param {number} [pageSize] The number of items per page (default is 10).\n * @param {number} [maxPages] The maximum number of pages to display in the pagination control (default is 5).\n * @returns {object} An object containing pagination details including total items, current page, page size, total pages, start/end page, start/end index, and the pages array.\n */\nexport function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {\n    // Calculate total pages\n    const totalPages = Math.ceil(totalItems / pageSize);\n\n    // Ensure current page is within valid range\n    if (currentPage < 1) {\n        currentPage = 1;\n    } else if (currentPage > totalPages) {\n        currentPage = totalPages;\n    }\n\n    let startPage;\n    let endPage;\n\n    const pagesNearEnd = maxPages + 1; // Define how close to the end we switch back to 5 pages 4\n\n    const boundary = pagesNearEnd + 3;\n\n    if (totalPages > boundary) {\n        if (currentPage < pagesNearEnd) {\n            // If in the first 4 pages, show up to 5 pages\n            startPage = 1;\n            endPage = Math.min(pagesNearEnd + 1, totalPages); //5\n        } else if (currentPage >= totalPages - pagesNearEnd) {\n            // If within 4 pages from the end, show last 5 pages\n            startPage = Math.max(totalPages - pagesNearEnd, 1); //4\n            endPage = totalPages;\n        } else {\n            const halfPages = Math.floor(maxPages / 2);\n            // Otherwise, only show 3 pages (current, previous, next)\n            startPage = currentPage - halfPages + 1;\n            endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;\n        }\n    } else {\n        startPage = 1;\n        endPage = totalPages;\n    }\n\n    // Calculate start and end item indexes\n    const startIndex = (currentPage - 1) * pageSize;\n    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n    // Create an array of pages to display\n    const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\n\n    // Return object with all pager properties (preserving original format)\n    return {\n        boundary: boundary,\n        currentPage: currentPage,\n        endIndex: endIndex,\n        endPage: endPage,\n        totalPages: totalPages,\n        pages: pages,\n        pageSize: pageSize,\n        startIndex: startIndex,\n        startPage: startPage,\n        totalItems: totalItems,\n    };\n}\n","import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport { paginate } from './service/service.js';\nimport Icon from '../wje-icon/icon.js';\nimport Button from '../wje-button/button.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n * @documentation https://elements.webjet.sk/components/pagination\n * @status stable\n * @augments WJElement\n * @dependency wje-icon, wje-button\n * @csspart native - The wrapper element for the pagination component.\n */\nexport default class Pagination extends WJElement {\n    /**\n     * Creates an instance of Pagination.\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n\n        this._paginateObj = null;\n    }\n\n    /**\n     * Sets the value of the 'page' attribute for the object.\n     * @param {string} value The value to set for the 'page' attribute.\n     */\n    set page(value) {\n        this.setAttribute('page', value);\n    }\n\n    /**\n     * Retrieves the current page number as a numeric value.\n     * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.\n     */\n    get page() {\n        return +this.getAttribute('page') || 0;\n    }\n\n    /**\n     * Sets the maximum number of pages.\n     * Updates the 'max-pages' attribute with the provided value.\n     * @param {number|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.\n     */\n    set maxPages(value) {\n        this.setAttribute('max-pages', value);\n    }\n\n    /**\n     * Gets the maximum number of pages.\n     * This getter retrieves the value of the \"max-pages\" attribute from the element.\n     * If the attribute is not set or is invalid, it defaults to 3.\n     * @returns {number} The maximum number of pages as a numeric value.\n     */\n    get maxPages() {\n        return +this.getAttribute('max-pages') || 10;\n    }\n\n    /**\n     * Sets the `pageSize` attribute to the specified value.\n     * @param {number|string} value The desired page size value. This can be a number or a string representation of the size.\n     */\n    set pageSize(value) {\n        this.setAttribute('page-size', value);\n    }\n\n    /**\n     * Retrieves the value of the 'page-size' attribute and converts it to a number.\n     * If the attribute is not set or is invalid, returns the default value of 3.\n     * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.\n     */\n    get pageSize() {\n        return +this.getAttribute('page-size') || 3;\n    }\n\n    /**\n     * Sets the total number of items.\n     * @param {number} value The new total number of items to set.\n     */\n    set totalItems(value) {\n        this.setAttribute('total-items', value);\n    }\n\n    /**\n     * Retrieves the total number of items represented by the 'total-items' attribute.\n     * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.\n     */\n    get totalItems() {\n        return +this.getAttribute('total-items') || 0;\n    }\n\n    /**\n     * Sets the visibility of the first button based on the provided value.\n     * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.\n     * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.\n     */\n    set showFirstButton(value) {\n        this.removeAttribute('show-first-button');\n\n        if (value) {\n            this.setAttribute('show-first-button', '');\n        }\n    }\n\n    /**\n     * Determines whether the 'show-first-button' attribute is present on the element.\n     * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.\n     */\n    get showFirstButton() {\n        return this.hasAttribute('show-first-button');\n    }\n\n    /**\n     * Sets the visibility of the \"last\" button. This method controls the presence\n     * or absence of the \"show-last-button\" attribute based on the provided value.\n     * @param {boolean} value A boolean value indicating whether to show the \"last\" button.\n     * If true, the \"show-last-button\" attribute is added;\n     * if false, the attribute is removed.\n     */\n    set showLastButton(value) {\n        this.removeAttribute('show-last-button');\n\n        if (value) {\n            this.setAttribute('show-last-button', '');\n        }\n    }\n\n    /**\n     * Determines if the 'show-last-button' attribute is present on the element.\n     * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.\n     */\n    get showLastButton() {\n        return this.hasAttribute('show-last-button');\n    }\n\n    /**\n     * Sets the pagination object by calculating the pagination details\n     * based on the total items, current page, page size, and maximum pages.\n     * @param {object} value The value to set the pagination object. The pagination details are computed internally.\n     */\n    set paginateObj(value) {\n        this._paginateObj = value;\n    }\n\n    /**\n     * Retrieves the pagination object used for managing paginated data.\n     * @returns {object} The pagination object containing details and functionality for paginating data.\n     */\n    get paginateObj() {\n        return this._paginateObj;\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the provided value is truthy,\n     * the 'round' attribute is added. If the value is falsy, the attribute is removed.\n     * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.\n     */\n    set round(value) {\n        this.removeAttribute('round');\n\n        if (value) {\n            this.setAttribute('round', '');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute for the current element.\n     * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the `show-info` attribute on the element based on the provided value.\n     * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.\n     */\n    set showInfo(value) {\n        this.removeAttribute('show-info');\n\n        if (value) {\n            this.setAttribute('show-info', '');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'show-info' attribute.\n     * Checks if the 'show-info' attribute is present on the element.\n     * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.\n     */\n    get showInfo() {\n        return this.hasAttribute('show-info');\n    }\n\n    set showPageSizeOptions(value) {\n        if (!value) return;\n        this.setAttribute('show-page-size-options', value);\n    }\n\n    get showPageSizeOptions() {\n        return this.hasAttribute('show-page-size-options');\n    }\n\n    set pageSizeOptions(value) {\n        if (!value) return;\n        this.setAttribute('page-size-options', value);\n    }\n\n    /**\n     * Retrieves the list of available page size options.\n     * This method is used to fetch the values representing the different page size options\n     * that can be provided or configured in a paginated component or system.\n     * @returns {Array<number>} An array of numbers representing the selectable page size options.\n     */\n    get pageSizeOptions() {\n        let options = this.getAttribute('page-size-options');\n        if (!options) return [6, 10, 50, 100, 500];\n        return options.split(',').map((o) => +o).filter((o) => !isNaN(o));\n    }\n\n    set hideEmpty(value) {\n        if (!value) return;\n        this.setAttribute('hide-empty', value);\n    }\n\n    get hideEmpty() {\n        return this.hasAttribute('hide-empty');\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n        'wje-button': Button,\n    };\n\n    className = 'Pagination';\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     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['page', 'total-items', 'page-size'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    async beforeDraw() {\n        this.classList.remove('empty');\n        this.removeAttribute(\"hidden\");\n\n        if (!this.totalItems || this.totalItems === 0) {\n            this.classList.add('empty');\n            if (this.hideEmpty)\n                this.setAttribute(\"hidden\", \"\");\n\n            return;\n        }\n\n        this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages);\n    }\n\n    /**\n     * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n     * @returns {DocumentFragment} A document fragment containing a slot element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-pagination');\n\n        native.append(this.htmlPagination());\n\n        fragment.append(native);\n\n        return fragment;\n    }\n\n    /**\n     * Creates a pagination control for navigating between pages of content.\n     * This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n     * @returns {DocumentFragment} A document fragment containing the pagination controls.\n     */\n    htmlPagination() {\n        let fragment = document.createDocumentFragment();\n\n        let select = document.createElement('wje-select');\n        select.setAttribute('size', 'small');\n        select.setAttribute('variant', 'standard');\n        select.setAttribute('value', this.pageSize);\n        select.addEventListener('wje-select:change', (e) => {\n\n            if(+e.detail.context.value[0] !== this.pageSize) {\n                this.pageSize = +e.detail.context.value[0];\n                this.page = 0; // Reset to first page when page size changes\n                event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n            }\n        });\n\n        let options = this.pageSizeOptions.map((o) => {\n            let option = document.createElement('wje-option');\n            option.value = o;\n            option.textContent = o;\n            return option;\n        });\n\n        let info = document.createElement('div');\n        info.classList.add('info');\n        info.innerHTML = `${this.paginateObj.startIndex + 1} - ${this.paginateObj.endIndex + 1} ${this.localizer.translate('wj.pagination.of')} ${this.totalItems}`;\n\n        let pagination = document.createElement('div');\n        pagination.classList.add('pages');\n\n        const button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        if (this.round) button.setAttribute('round', '');\n\n        // First button\n        let firstButton = button.cloneNode(true);\n        firstButton.title = this.localizer.translate('wj.pagination.first');\n        firstButton.innerHTML = `<wje-icon name=\"chevron-left-pipe\" slot=\"icon-only\"></wje-icon>`;\n        firstButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n        // Previous button\n        const prevButton = button.cloneNode(true);\n        prevButton.title = this.localizer.translate('wj.pagination.prev');\n        prevButton.innerHTML = `<wje-icon name=\"chevron-left\" slot=\"icon-only\"></wje-icon>`;\n        if (this.page === 0) prevButton.disabled = true;\n        prevButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page - 1));\n\n        // Next button\n        const nextButton = button.cloneNode(true);\n        nextButton.title = this.localizer.translate('wj.pagination.next');\n        nextButton.innerHTML = `<wje-icon name=\"chevron-right\" slot=\"icon-only\"></wje-icon>`;\n        if (this.page + 1 >= this.paginateObj.totalPages) nextButton.disabled = true;\n        nextButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page + 1));\n\n        // Last button\n        let lastButton = button.cloneNode(true);\n        lastButton.title = this.localizer.translate('wj.pagination.last');\n        lastButton.innerHTML = `<wje-icon name=\"chevron-right-pipe\" slot=\"icon-only\"></wje-icon>`;\n        lastButton.disabled = this.paginateObj.endIndex + 1 >= this.totalItems;\n        lastButton.addEventListener('wje-button:click', (e) =>\n            this.pageClickAction(e, this.paginateObj.totalPages - 1)\n        );\n\n        select.append(...options);\n\n        if (this.showFirstButton) pagination.appendChild(firstButton);\n        pagination.appendChild(prevButton);\n        pagination.appendChild(this.htmlStackButtons(this.paginateObj));\n        pagination.appendChild(nextButton);\n        if (this.showLastButton) pagination.appendChild(lastButton);\n\n        if (this.showPageSizeOptions) fragment.append(select);\n        if (this.showInfo) fragment.appendChild(info);\n        fragment.appendChild(pagination);\n\n        return fragment;\n    }\n\n    /**\n     * Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\n     * based on the provided pagination object.\n     * @param {object} paginateObj An object containing pagination details.\n     * @param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.\n     */\n    htmlStackButtons(paginateObj) {\n        let fragment = document.createDocumentFragment();\n\n        const button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        if (this.round) button.setAttribute('round', '');\n\n        let dots = document.createElement('span');\n        dots.classList.add('dots');\n\n        const first = button.cloneNode(true);\n        first.textContent = '1';\n        first.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n        const last = button.cloneNode(true);\n        last.textContent = paginateObj.totalPages;\n        last.addEventListener('wje-button:click', (e) => this.pageClickAction(e, paginateObj.totalPages - 1));\n\n        if (paginateObj.currentPage >= this.maxPages + 1 && paginateObj.boundary < paginateObj.totalPages) {\n            fragment.appendChild(first);\n            fragment.appendChild(dots);\n        }\n\n        paginateObj.pages.forEach((page) => {\n            let newButton = button.cloneNode(true);\n            newButton.textContent = page;\n\n            if (page - 1 === this.page) {\n                newButton.removeAttribute('fill');\n            } else {\n                newButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, page - 1));\n            }\n\n            fragment.appendChild(newButton);\n        });\n\n        if (\n            (paginateObj.pages.length === this.maxPages || paginateObj.currentPage < this.maxPages + 1) &&\n            paginateObj.boundary < paginateObj.totalPages\n        ) {\n            fragment.appendChild(dots.cloneNode(true));\n            fragment.appendChild(last);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * Handles the click action for pagination and updates the current page.\n     * If the clicked page number is the same as the current page, no action is performed.\n     * Otherwise, the current page is updated to the new page number, and a custom event\n     * 'wje-pagination:page-change' is dispatched with the pagination object.\n     * @param {Event} e The event triggered by the page click.\n     * @param {number} page The page number that was clicked.\n     */\n    pageClickAction = (e, page) => {\n        if (+page === this.page || this.page > this.paginateObj.totalPages) return;\n        this.page = page;\n        event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n    };\n}\n\nPagination.define('wje-pagination', Pagination);\n","import Pagination from './pagination.element.js';\n\nexport default Pagination;\n\nPagination.define('wje-pagination', Pagination);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-pagination.js","sources":["../packages/wje-pagination/service/service.js","../packages/wje-pagination/pagination.element.js","../packages/wje-pagination/pagination.js"],"sourcesContent":["/**\n * Paginates items based on the total number of items, current page, page size, and maximum number of pages to display.\n * @param {number} totalItems The total number of items to paginate.\n * @param {number} [currentPage] The current page number (default is 1).\n * @param {number} [pageSize] The number of items per page (default is 10).\n * @param {number} [maxPages] The maximum number of pages to display in the pagination control (default is 5).\n * @returns {object} An object containing pagination details including total items, current page, page size, total pages, start/end page, start/end index, and the pages array.\n */\nexport function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {\n    // Calculate total pages\n    const totalPages = Math.ceil(totalItems / pageSize);\n\n    // Ensure current page is within valid range\n    if (currentPage < 1) {\n        currentPage = 1;\n    } else if (currentPage > totalPages) {\n        currentPage = totalPages;\n    }\n\n    let startPage;\n    let endPage;\n\n    const pagesNearEnd = maxPages + 1; // Define how close to the end we switch back to 5 pages 4\n\n    const boundary = pagesNearEnd + 3;\n\n    if (totalPages > boundary) {\n        if (currentPage < pagesNearEnd) {\n            // If in the first 4 pages, show up to 5 pages\n            startPage = 1;\n            endPage = Math.min(pagesNearEnd + 1, totalPages); //5\n        } else if (currentPage >= totalPages - pagesNearEnd) {\n            // If within 4 pages from the end, show last 5 pages\n            startPage = Math.max(totalPages - pagesNearEnd, 1); //4\n            endPage = totalPages;\n        } else {\n            const halfPages = Math.floor(maxPages / 2);\n            // Otherwise, only show 3 pages (current, previous, next)\n            startPage = currentPage - halfPages + 1;\n            endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;\n        }\n    } else {\n        startPage = 1;\n        endPage = totalPages;\n    }\n\n    // Calculate start and end item indexes\n    const startIndex = (currentPage - 1) * pageSize;\n    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n    // Create an array of pages to display\n    const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\n\n    // Return object with all pager properties (preserving original format)\n    return {\n        boundary: boundary,\n        currentPage: currentPage,\n        endIndex: endIndex,\n        endPage: endPage,\n        totalPages: totalPages,\n        pages: pages,\n        pageSize: pageSize,\n        startIndex: startIndex,\n        startPage: startPage,\n        totalItems: totalItems,\n    };\n}\n","import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport { paginate } from './service/service.js';\nimport Icon from '../wje-icon/icon.js';\nimport Button from '../wje-button/button.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n * @documentation https://elements.webjet.sk/components/pagination\n * @status stable\n * @augments WJElement\n * @dependency wje-icon, wje-button\n * @csspart native - The wrapper element for the pagination component.\n */\nexport default class Pagination extends WJElement {\n    /**\n     * Creates an instance of Pagination.\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n\n        this._paginateObj = null;\n    }\n\n    /**\n     * Sets the value of the 'page' attribute for the object.\n     * @param {string} value The value to set for the 'page' attribute.\n     */\n    set page(value) {\n        this.setAttribute('page', value);\n    }\n\n    /**\n     * Retrieves the current page number as a numeric value.\n     * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.\n     */\n    get page() {\n        return +this.getAttribute('page') || 0;\n    }\n\n    /**\n     * Sets the maximum number of pages.\n     * Updates the 'max-pages' attribute with the provided value.\n     * @param {number|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.\n     */\n    set maxPages(value) {\n        this.setAttribute('max-pages', value);\n    }\n\n    /**\n     * Gets the maximum number of pages.\n     * This getter retrieves the value of the \"max-pages\" attribute from the element.\n     * If the attribute is not set or is invalid, it defaults to 3.\n     * @returns {number} The maximum number of pages as a numeric value.\n     */\n    get maxPages() {\n        return +this.getAttribute('max-pages') || 10;\n    }\n\n    /**\n     * Sets the `pageSize` attribute to the specified value.\n     * @param {number|string} value The desired page size value. This can be a number or a string representation of the size.\n     */\n    set pageSize(value) {\n        this.setAttribute('page-size', value);\n    }\n\n    /**\n     * Retrieves the value of the 'page-size' attribute and converts it to a number.\n     * If the attribute is not set or is invalid, returns the default value of 3.\n     * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.\n     */\n    get pageSize() {\n        return +this.getAttribute('page-size') || 3;\n    }\n\n    /**\n     * Sets the total number of items.\n     * @param {number} value The new total number of items to set.\n     */\n    set totalItems(value) {\n        this.setAttribute('total-items', value);\n    }\n\n    /**\n     * Retrieves the total number of items represented by the 'total-items' attribute.\n     * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.\n     */\n    get totalItems() {\n        return +this.getAttribute('total-items') || 0;\n    }\n\n    /**\n     * Sets the visibility of the first button based on the provided value.\n     * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.\n     * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.\n     */\n    set showFirstButton(value) {\n        this.removeAttribute('show-first-button');\n\n        if (value) {\n            this.setAttribute('show-first-button', '');\n        }\n    }\n\n    /**\n     * Determines whether the 'show-first-button' attribute is present on the element.\n     * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.\n     */\n    get showFirstButton() {\n        return this.hasAttribute('show-first-button');\n    }\n\n    /**\n     * Sets the visibility of the \"last\" button. This method controls the presence\n     * or absence of the \"show-last-button\" attribute based on the provided value.\n     * @param {boolean} value A boolean value indicating whether to show the \"last\" button.\n     * If true, the \"show-last-button\" attribute is added;\n     * if false, the attribute is removed.\n     */\n    set showLastButton(value) {\n        this.removeAttribute('show-last-button');\n\n        if (value) {\n            this.setAttribute('show-last-button', '');\n        }\n    }\n\n    /**\n     * Determines if the 'show-last-button' attribute is present on the element.\n     * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.\n     */\n    get showLastButton() {\n        return this.hasAttribute('show-last-button');\n    }\n\n    /**\n     * Sets the pagination object by calculating the pagination details\n     * based on the total items, current page, page size, and maximum pages.\n     * @param {object} value The value to set the pagination object. The pagination details are computed internally.\n     */\n    set paginateObj(value) {\n        this._paginateObj = value;\n    }\n\n    /**\n     * Retrieves the pagination object used for managing paginated data.\n     * @returns {object} The pagination object containing details and functionality for paginating data.\n     */\n    get paginateObj() {\n        return this._paginateObj;\n    }\n\n    /**\n     * Sets the 'round' attribute on the element. If the provided value is truthy,\n     * the 'round' attribute is added. If the value is falsy, the attribute is removed.\n     * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.\n     */\n    set round(value) {\n        this.removeAttribute('round');\n\n        if (value) {\n            this.setAttribute('round', '');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'round' attribute for the current element.\n     * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the `show-info` attribute on the element based on the provided value.\n     * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.\n     */\n    set showInfo(value) {\n        this.removeAttribute('show-info');\n\n        if (value) {\n            this.setAttribute('show-info', '');\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'show-info' attribute.\n     * Checks if the 'show-info' attribute is present on the element.\n     * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.\n     */\n    get showInfo() {\n        return this.hasAttribute('show-info');\n    }\n\n    set showPageSizeOptions(value) {\n        if (!value) return;\n        this.setAttribute('show-page-size-options', value);\n    }\n\n    get showPageSizeOptions() {\n        return this.hasAttribute('show-page-size-options');\n    }\n\n    set pageSizeOptions(value) {\n        if (!value) return;\n        this.setAttribute('page-size-options', value);\n    }\n\n    /**\n     * Retrieves the list of available page size options.\n     * This method is used to fetch the values representing the different page size options\n     * that can be provided or configured in a paginated component or system.\n     * @returns {Array<number>} An array of numbers representing the selectable page size options.\n     */\n    get pageSizeOptions() {\n        let options = this.getAttribute('page-size-options');\n        if (!options) return [6, 10, 50, 100, 500];\n        return options.split(',').map((o) => +o).filter((o) => !isNaN(o));\n    }\n\n    set hideEmpty(value) {\n        if (!value) return;\n        this.setAttribute('hide-empty', value);\n    }\n\n    get hideEmpty() {\n        return this.hasAttribute('hide-empty');\n    }\n\n    /**\n     * Dependencies of the Button element.\n     * @type {object}\n     */\n    dependencies = {\n        'wje-icon': Icon,\n        'wje-button': Button,\n    };\n\n    className = 'Pagination';\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     * Getter for the observedAttributes attribute of the input element.\n     * @returns {Array} The attributes to observe for changes.\n     */\n    static get observedAttributes() {\n        return ['page', 'total-items', 'page-size'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    async beforeDraw() {\n        this.classList.remove('empty');\n        this.removeAttribute(\"hidden\");\n\n        if (!this.totalItems || this.totalItems === 0) {\n            this.classList.add('empty');\n            if (this.hideEmpty)\n                this.setAttribute(\"hidden\", \"\");\n\n            return;\n        }\n\n        this.paginateObj = await paginate(this.totalItems, this.page, this.pageSize, this.maxPages) || {};\n    }\n\n    /**\n     * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n     * @returns {DocumentFragment} A document fragment containing a slot element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-pagination');\n\n        native.append(this.htmlPagination());\n\n        fragment.append(native);\n\n        return fragment;\n    }\n\n    /**\n     * Creates a pagination control for navigating between pages of content.\n     * This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n     * @returns {DocumentFragment} A document fragment containing the pagination controls.\n     */\n    htmlPagination() {\n        let fragment = document.createDocumentFragment();\n\n        let select = document.createElement('wje-select');\n        select.setAttribute('size', 'small');\n        select.setAttribute('variant', 'standard');\n        select.setAttribute('value', this.pageSize);\n        select.addEventListener('wje-select:change', (e) => {\n\n            if(+e.detail.context.value[0] !== this.pageSize) {\n                this.pageSize = +e.detail.context.value[0];\n                this.page = 0; // Reset to first page when page size changes\n                event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n            }\n        });\n\n        let options = this.pageSizeOptions.map((o) => {\n            let option = document.createElement('wje-option');\n            option.value = o;\n            option.textContent = o;\n            return option;\n        });\n\n        let info = document.createElement('div');\n        info.classList.add('info');\n        info.innerHTML = `${this.paginateObj?.startIndex + 1} - ${this.paginateObj?.endIndex + 1} ${this.localizer.translate('wj.pagination.of')} ${this.totalItems}`;\n\n        let pagination = document.createElement('div');\n        pagination.classList.add('pages');\n\n        const button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        if (this.round) button.setAttribute('round', '');\n\n        // First button\n        let firstButton = button.cloneNode(true);\n        firstButton.title = this.localizer.translate('wj.pagination.first');\n        firstButton.innerHTML = `<wje-icon name=\"chevron-left-pipe\" slot=\"icon-only\"></wje-icon>`;\n        firstButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n        // Previous button\n        const prevButton = button.cloneNode(true);\n        prevButton.title = this.localizer.translate('wj.pagination.prev');\n        prevButton.innerHTML = `<wje-icon name=\"chevron-left\" slot=\"icon-only\"></wje-icon>`;\n        if (this.page === 0) prevButton.disabled = true;\n        prevButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page - 1));\n\n        // Next button\n        const nextButton = button.cloneNode(true);\n        nextButton.title = this.localizer.translate('wj.pagination.next');\n        nextButton.innerHTML = `<wje-icon name=\"chevron-right\" slot=\"icon-only\"></wje-icon>`;\n        if (this.page + 1 >= this.paginateObj?.totalPages) nextButton.disabled = true;\n        nextButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, this.page + 1));\n\n        // Last button\n        let lastButton = button.cloneNode(true);\n        lastButton.title = this.localizer.translate('wj.pagination.last');\n        lastButton.innerHTML = `<wje-icon name=\"chevron-right-pipe\" slot=\"icon-only\"></wje-icon>`;\n        lastButton.disabled = this.paginateObj?.endIndex + 1 >= this.totalItems;\n        lastButton.addEventListener('wje-button:click', (e) =>\n            this.pageClickAction(e, this.paginateObj?.totalPages - 1)\n        );\n\n        select.append(...options);\n\n        if (this.showFirstButton) pagination.appendChild(firstButton);\n        pagination.appendChild(prevButton);\n        pagination.appendChild(this.htmlStackButtons(this.paginateObj));\n        pagination.appendChild(nextButton);\n        if (this.showLastButton) pagination.appendChild(lastButton);\n\n        if (this.showPageSizeOptions) fragment.append(select);\n        if (this.showInfo) fragment.appendChild(info);\n        fragment.appendChild(pagination);\n\n        return fragment;\n    }\n\n    /**\n     * Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\n     * based on the provided pagination object.\n     * @param {object} paginateObj An object containing pagination details.\n     * @param {number} paginateObj.currentPage The current active page index (1-based).\n     * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n     * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n     * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.\n     */\n    htmlStackButtons(paginateObj) {\n        let fragment = document.createDocumentFragment();\n\n        const button = document.createElement('wje-button');\n        button.setAttribute('fill', 'link');\n        if (this.round) button.setAttribute('round', '');\n\n        let dots = document.createElement('span');\n        dots.classList.add('dots');\n\n        const first = button.cloneNode(true);\n        first.textContent = '1';\n        first.addEventListener('wje-button:click', (e) => this.pageClickAction(e, 0));\n\n        const last = button.cloneNode(true);\n        last.textContent = paginateObj?.totalPages;\n        last.addEventListener('wje-button:click', (e) => this.pageClickAction(e, paginateObj?.totalPages - 1));\n\n        if (paginateObj?.currentPage >= this.maxPages + 1 && paginateObj?.boundary < paginateObj?.totalPages) {\n            fragment.appendChild(first);\n            fragment.appendChild(dots);\n        }\n\n        paginateObj?.pages.forEach((page) => {\n            let newButton = button.cloneNode(true);\n            newButton.textContent = page;\n\n            if (page - 1 === this.page) {\n                newButton.removeAttribute('fill');\n            } else {\n                newButton.addEventListener('wje-button:click', (e) => this.pageClickAction(e, page - 1));\n            }\n\n            fragment.appendChild(newButton);\n        });\n\n        if (\n            (paginateObj?.pages.length === this.maxPages || paginateObj?.currentPage < this.maxPages + 1) &&\n            paginateObj.boundary < paginateObj?.totalPages\n        ) {\n            fragment.appendChild(dots.cloneNode(true));\n            fragment.appendChild(last);\n        }\n\n        return fragment;\n    }\n\n    /**\n     * Handles the click action for pagination and updates the current page.\n     * If the clicked page number is the same as the current page, no action is performed.\n     * Otherwise, the current page is updated to the new page number, and a custom event\n     * 'wje-pagination:page-change' is dispatched with the pagination object.\n     * @param {Event} e The event triggered by the page click.\n     * @param {number} page The page number that was clicked.\n     */\n    pageClickAction = (e, page) => {\n        if (+page === this.page || this.page > this.paginateObj.totalPages) return;\n        this.page = page;\n        event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n    };\n}\n\nPagination.define('wje-pagination', Pagination);\n","import Pagination from './pagination.element.js';\n\nexport default Pagination;\n\nPagination.define('wje-pagination', Pagination);\n"],"names":["_a"],"mappings":";;;;;;;;AAQO,SAAS,SAAS,YAAY,cAAc,GAAG,WAAW,IAAI,WAAW,GAAG;AAE/E,QAAM,aAAa,KAAK,KAAK,aAAa,QAAQ;AAGlD,MAAI,cAAc,GAAG;AACjB,kBAAc;AAAA,EACtB,WAAe,cAAc,YAAY;AACjC,kBAAc;AAAA,EACtB;AAEI,MAAI;AACJ,MAAI;AAEJ,QAAM,eAAe,WAAW;AAEhC,QAAM,WAAW,eAAe;AAEhC,MAAI,aAAa,UAAU;AACvB,QAAI,cAAc,cAAc;AAE5B,kBAAY;AACZ,gBAAU,KAAK,IAAI,eAAe,GAAG,UAAU;AAAA,IAC3D,WAAmB,eAAe,aAAa,cAAc;AAEjD,kBAAY,KAAK,IAAI,aAAa,cAAc,CAAC;AACjD,gBAAU;AAAA,IACtB,OAAe;AACH,YAAM,YAAY,KAAK,MAAM,WAAW,CAAC;AAEzC,kBAAY,cAAc,YAAY;AACtC,gBAAU,WAAW,MAAM,IAAI,cAAc,YAAY,IAAI,cAAc,YAAY;AAAA,IACnG;AAAA,EACA,OAAW;AACH,gBAAY;AACZ,cAAU;AAAA,EAClB;AAGI,QAAM,cAAc,cAAc,KAAK;AACvC,QAAM,WAAW,KAAK,IAAI,aAAa,WAAW,GAAG,aAAa,CAAC;AAGnE,QAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,UAAU,YAAY,EAAG,GAAE,CAAC,GAAG,MAAM,YAAY,CAAC;AAGrF,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACH;AACL;;ACnDe,MAAM,mBAAmB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI9C,cAAc;AACV,UAAO;AAwNX;AAAA;AAAA;AAAA;AAAA,wCAAe;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,IACjB;AAED,qCAAY;AA8MZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2CAAkB,CAAC,GAAG,SAAS;AAC3B,UAAI,CAAC,SAAS,KAAK,QAAQ,KAAK,OAAO,KAAK,YAAY,WAAY;AACpE,WAAK,OAAO;AACZ,YAAM,oBAAoB,MAAM,8BAA8B,EAAE,MAAM,KAAK,MAAM,UAAU,KAAK,SAAQ,CAAE;AAAA,IAC7G;AA9aG,SAAK,YAAY,IAAI,UAAU,IAAI;AAEnC,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,CAAC,KAAK,aAAa,MAAM,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAW,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAW,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW,OAAO;AAClB,SAAK,aAAa,eAAe,KAAK;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,aAAa;AACb,WAAO,CAAC,KAAK,aAAa,aAAa,KAAK;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,gBAAgB,OAAO;AACvB,SAAK,gBAAgB,mBAAmB;AAExC,QAAI,OAAO;AACP,WAAK,aAAa,qBAAqB,EAAE;AAAA,IACrD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,kBAAkB;AAClB,WAAO,KAAK,aAAa,mBAAmB;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,IAAI,eAAe,OAAO;AACtB,SAAK,gBAAgB,kBAAkB;AAEvC,QAAI,OAAO;AACP,WAAK,aAAa,oBAAoB,EAAE;AAAA,IACpD;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,iBAAiB;AACjB,WAAO,KAAK,aAAa,kBAAkB;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,YAAY,OAAO;AACnB,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,cAAc;AACd,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,MAAM,OAAO;AACb,SAAK,gBAAgB,OAAO;AAE5B,QAAI,OAAO;AACP,WAAK,aAAa,SAAS,EAAE;AAAA,IACzC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,gBAAgB,WAAW;AAEhC,QAAI,OAAO;AACP,WAAK,aAAa,aAAa,EAAE;AAAA,IAC7C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,WAAW;AAAA,EAC5C;AAAA,EAEI,IAAI,oBAAoB,OAAO;AAC3B,QAAI,CAAC,MAAO;AACZ,SAAK,aAAa,0BAA0B,KAAK;AAAA,EACzD;AAAA,EAEI,IAAI,sBAAsB;AACtB,WAAO,KAAK,aAAa,wBAAwB;AAAA,EACzD;AAAA,EAEI,IAAI,gBAAgB,OAAO;AACvB,QAAI,CAAC,MAAO;AACZ,SAAK,aAAa,qBAAqB,KAAK;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,IAAI,kBAAkB;AAClB,QAAI,UAAU,KAAK,aAAa,mBAAmB;AACnD,QAAI,CAAC,QAAS,QAAO,CAAC,GAAG,IAAI,IAAI,KAAK,GAAG;AACzC,WAAO,QAAQ,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AAAA,EACxE;AAAA,EAEI,IAAI,UAAU,OAAO;AACjB,QAAI,CAAC,MAAO;AACZ,SAAK,aAAa,cAAc,KAAK;AAAA,EAC7C;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,YAAY;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,QAAQ,eAAe,WAAW;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA,EAEI,MAAM,aAAa;AACf,SAAK,UAAU,OAAO,OAAO;AAC7B,SAAK,gBAAgB,QAAQ;AAE7B,QAAI,CAAC,KAAK,cAAc,KAAK,eAAe,GAAG;AAC3C,WAAK,UAAU,IAAI,OAAO;AAC1B,UAAI,KAAK;AACL,aAAK,aAAa,UAAU,EAAE;AAElC;AAAA,IACZ;AAEQ,SAAK,cAAc,MAAM,SAAS,KAAK,YAAY,KAAK,MAAM,KAAK,UAAU,KAAK,QAAQ,KAAK,CAAE;AAAA,EACzG;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,mBAAmB;AAExC,WAAO,OAAO,KAAK,gBAAgB;AAEnC,aAAS,OAAO,MAAM;AAEtB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,iBAAiB;;AACb,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,OAAO;AACnC,WAAO,aAAa,WAAW,UAAU;AACzC,WAAO,aAAa,SAAS,KAAK,QAAQ;AAC1C,WAAO,iBAAiB,qBAAqB,CAAC,MAAM;AAEhD,UAAG,CAAC,EAAE,OAAO,QAAQ,MAAM,CAAC,MAAM,KAAK,UAAU;AAC7C,aAAK,WAAW,CAAC,EAAE,OAAO,QAAQ,MAAM,CAAC;AACzC,aAAK,OAAO;AACZ,cAAM,oBAAoB,MAAM,8BAA8B,EAAE,MAAM,KAAK,MAAM,UAAU,KAAK,SAAQ,CAAE;AAAA,MAC1H;AAAA,IACA,CAAS;AAED,QAAI,UAAU,KAAK,gBAAgB,IAAI,CAAC,MAAM;AAC1C,UAAI,SAAS,SAAS,cAAc,YAAY;AAChD,aAAO,QAAQ;AACf,aAAO,cAAc;AACrB,aAAO;AAAA,IACnB,CAAS;AAED,QAAI,OAAO,SAAS,cAAc,KAAK;AACvC,SAAK,UAAU,IAAI,MAAM;AACzB,SAAK,YAAY,KAAG,UAAK,gBAAL,mBAAkB,cAAa,CAAC,QAAM,UAAK,gBAAL,mBAAkB,YAAW,CAAC,IAAI,KAAK,UAAU,UAAU,kBAAkB,CAAC,IAAI,KAAK,UAAU;AAE3J,QAAI,aAAa,SAAS,cAAc,KAAK;AAC7C,eAAW,UAAU,IAAI,OAAO;AAEhC,UAAM,SAAS,SAAS,cAAc,YAAY;AAClD,WAAO,aAAa,QAAQ,MAAM;AAClC,QAAI,KAAK,MAAO,QAAO,aAAa,SAAS,EAAE;AAG/C,QAAI,cAAc,OAAO,UAAU,IAAI;AACvC,gBAAY,QAAQ,KAAK,UAAU,UAAU,qBAAqB;AAClE,gBAAY,YAAY;AACxB,gBAAY,iBAAiB,oBAAoB,CAAC,MAAM,KAAK,gBAAgB,GAAG,CAAC,CAAC;AAGlF,UAAM,aAAa,OAAO,UAAU,IAAI;AACxC,eAAW,QAAQ,KAAK,UAAU,UAAU,oBAAoB;AAChE,eAAW,YAAY;AACvB,QAAI,KAAK,SAAS,EAAG,YAAW,WAAW;AAC3C,eAAW,iBAAiB,oBAAoB,CAAC,MAAM,KAAK,gBAAgB,GAAG,KAAK,OAAO,CAAC,CAAC;AAG7F,UAAM,aAAa,OAAO,UAAU,IAAI;AACxC,eAAW,QAAQ,KAAK,UAAU,UAAU,oBAAoB;AAChE,eAAW,YAAY;AACvB,QAAI,KAAK,OAAO,OAAK,UAAK,gBAAL,mBAAkB,YAAY,YAAW,WAAW;AACzE,eAAW,iBAAiB,oBAAoB,CAAC,MAAM,KAAK,gBAAgB,GAAG,KAAK,OAAO,CAAC,CAAC;AAG7F,QAAI,aAAa,OAAO,UAAU,IAAI;AACtC,eAAW,QAAQ,KAAK,UAAU,UAAU,oBAAoB;AAChE,eAAW,YAAY;AACvB,eAAW,aAAW,UAAK,gBAAL,mBAAkB,YAAW,KAAK,KAAK;AAC7D,eAAW;AAAA,MAAiB;AAAA,MAAoB,CAAC,MAAC;;AAC9C,oBAAK,gBAAgB,KAAGA,MAAA,KAAK,gBAAL,gBAAAA,IAAkB,cAAa,CAAC;AAAA;AAAA,IAC3D;AAED,WAAO,OAAO,GAAG,OAAO;AAExB,QAAI,KAAK,gBAAiB,YAAW,YAAY,WAAW;AAC5D,eAAW,YAAY,UAAU;AACjC,eAAW,YAAY,KAAK,iBAAiB,KAAK,WAAW,CAAC;AAC9D,eAAW,YAAY,UAAU;AACjC,QAAI,KAAK,eAAgB,YAAW,YAAY,UAAU;AAE1D,QAAI,KAAK,oBAAqB,UAAS,OAAO,MAAM;AACpD,QAAI,KAAK,SAAU,UAAS,YAAY,IAAI;AAC5C,aAAS,YAAY,UAAU;AAE/B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWI,iBAAiB,aAAa;AAC1B,QAAI,WAAW,SAAS,uBAAwB;AAEhD,UAAM,SAAS,SAAS,cAAc,YAAY;AAClD,WAAO,aAAa,QAAQ,MAAM;AAClC,QAAI,KAAK,MAAO,QAAO,aAAa,SAAS,EAAE;AAE/C,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,UAAU,IAAI,MAAM;AAEzB,UAAM,QAAQ,OAAO,UAAU,IAAI;AACnC,UAAM,cAAc;AACpB,UAAM,iBAAiB,oBAAoB,CAAC,MAAM,KAAK,gBAAgB,GAAG,CAAC,CAAC;AAE5E,UAAM,OAAO,OAAO,UAAU,IAAI;AAClC,SAAK,cAAc,2CAAa;AAChC,SAAK,iBAAiB,oBAAoB,CAAC,MAAM,KAAK,gBAAgB,IAAG,2CAAa,cAAa,CAAC,CAAC;AAErG,SAAI,2CAAa,gBAAe,KAAK,WAAW,MAAK,2CAAa,aAAW,2CAAa,aAAY;AAClG,eAAS,YAAY,KAAK;AAC1B,eAAS,YAAY,IAAI;AAAA,IACrC;AAEQ,+CAAa,MAAM,QAAQ,CAAC,SAAS;AACjC,UAAI,YAAY,OAAO,UAAU,IAAI;AACrC,gBAAU,cAAc;AAExB,UAAI,OAAO,MAAM,KAAK,MAAM;AACxB,kBAAU,gBAAgB,MAAM;AAAA,MAChD,OAAmB;AACH,kBAAU,iBAAiB,oBAAoB,CAAC,MAAM,KAAK,gBAAgB,GAAG,OAAO,CAAC,CAAC;AAAA,MACvG;AAEY,eAAS,YAAY,SAAS;AAAA,IAC1C;AAEQ,UACK,2CAAa,MAAM,YAAW,KAAK,aAAY,2CAAa,eAAc,KAAK,WAAW,MAC3F,YAAY,YAAW,2CAAa,aACtC;AACE,eAAS,YAAY,KAAK,UAAU,IAAI,CAAC;AACzC,eAAS,YAAY,IAAI;AAAA,IACrC;AAEQ,WAAO;AAAA,EACf;AAeA;AAEA,WAAW,OAAO,kBAAkB,UAAU;AClc9C,WAAW,OAAO,kBAAkB,UAAU;"}

package/dist/wje-radio.js

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

package/dist/wje-reorder-item.js

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

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.216",
+  "version": "0.1.218",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",