wj-elements 0.7.7 → 0.8.0

package/dist/wje-orgchart.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-orgchart.js","sources":["../packages/wje-orgchart/orgchart.element.js","../packages/wje-orgchart/orgchart.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Orgchart is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/Orgchart\n * @status stable\n * @augments WJElement\n * @attribute {boolean} flat - Removes the incoming connector spacing for nested charts that should visually continue on the same level.\n * @csspart - Styles the element.\n * @csspart native - Styles the native element.\n * @tag wje-orgchart\n * @example\n */\nexport default class Orgchart extends WJElement {\n    /**\n     * Creates an instance of Orgchart.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets whether the chart should omit its incoming connector spacing.\n     * @param {boolean} value True when the chart should render without top connector spacing.\n     */\n    set flat(value) {\n        this.toggleAttribute('flat', Boolean(value));\n    }\n\n    /**\n     * Gets whether the chart omits its incoming connector spacing.\n     * @returns {boolean} True when the chart has the flat attribute.\n     */\n    get flat() {\n        return this.hasAttribute('flat');\n    }\n\n    className = 'Orgchart';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns attributes that trigger a redraw when they change.\n     * @returns {Array<string>} Attribute names that require a new template render.\n     */\n    static get observedAttributes() {\n        return ['flat'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the org chart.\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-orgchart');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.defaultSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Syncs flat chart state to direct slotted children.\n     */\n    afterDraw() {\n        this.defaultSlot.addEventListener('slotchange', this.syncFlatChildren);\n        this.syncFlatChildren();\n    }\n\n    /**\n     * Marks direct children that are rendered inside a flat chart.\n     */\n    syncFlatChildren = () => {\n        let children = new Set(this.defaultSlot?.assignedElements({ flatten: true }) || []);\n\n        this.flatChildren?.forEach((child) => {\n            if (!children.has(child)) child.classList.remove('flat-child');\n        });\n\n        children.forEach((child) => child.classList.toggle('flat-child', this.flat));\n        this.flatChildren = children;\n    };\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'tree' });\n        }\n    }\n}\n","import Orgchart from './orgchart.element.js';\n\nexport default Orgchart;\n\nOrgchart.define('wje-orgchart', Orgchart);\n"],"names":[],"mappings":";;;;;AAce,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,cAAc;AACV,UAAK;AAmBT,qCAAY;AA6DZ;AAAA;AAAA;AAAA,4CAAmB,MAAM;;AACrB,UAAI,WAAW,IAAI,MAAI,UAAK,gBAAL,mBAAkB,iBAAiB,EAAE,SAAS,YAAW,EAAE;AAElF,iBAAK,iBAAL,mBAAmB,QAAQ,CAAC,UAAU;AAClC,YAAI,CAAC,SAAS,IAAI,KAAK,EAAG,OAAM,UAAU,OAAO,YAAY;AAAA,MACjE;AAEA,eAAS,QAAQ,CAAC,UAAU,MAAM,UAAU,OAAO,cAAc,KAAK,IAAI,CAAC;AAC3E,WAAK,eAAe;AAAA,IACxB;AAAA,EAxFA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACZ,SAAK,gBAAgB,QAAQ,QAAQ,KAAK,CAAC;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,SAAK,cAAc;AAEnB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,YAAY,iBAAiB,cAAc,KAAK,gBAAgB;AACrE,SAAK,iBAAgB;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAmBA,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,OAAM,CAAE;AAAA,IACtC;AAAA,EACJ;AACJ;ACnHA,SAAS,OAAO,gBAAgB,QAAQ;"}
+{"version":3,"file":"wje-orgchart.js","sources":["../packages/wje-orgchart/orgchart.element.js","../packages/wje-orgchart/orgchart.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Orgchart is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/Orgchart\n * @status stable\n * @augments WJElement\n * @attribute {boolean} flat - Removes the incoming connector spacing for nested charts that should visually continue on the same level.\n * @csspart - Styles the element.\n * @csspart native - Styles the native element.\n * @tag wje-orgchart\n * @example\n */\nexport default class Orgchart extends WJElement {\n    /**\n     * Creates an instance of Orgchart.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets whether the chart should omit its incoming connector spacing.\n     * @param {boolean} value True when the chart should render without top connector spacing.\n     */\n    set flat(value) {\n        this.toggleAttribute('flat', Boolean(value));\n    }\n\n    /**\n     * Gets whether the chart omits its incoming connector spacing.\n     * @returns {boolean} True when the chart has the flat attribute.\n     */\n    get flat() {\n        return this.hasAttribute('flat');\n    }\n\n    className = 'Orgchart';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns attributes that trigger a redraw when they change.\n     * @returns {Array<string>} Attribute names that require a new template render.\n     */\n    static get observedAttributes() {\n        return ['flat'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the org chart.\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-orgchart');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.defaultSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Syncs flat chart state to direct slotted children.\n     */\n    afterDraw() {\n        this.defaultSlot.addEventListener('slotchange', this.syncFlatChildren);\n        this.syncFlatChildren();\n    }\n\n    /**\n     * Marks direct children that are rendered inside a flat chart.\n     */\n    syncFlatChildren = () => {\n        let children = new Set(this.defaultSlot?.assignedElements({ flatten: true }) || []);\n\n        this.flatChildren?.forEach((child) => {\n            if (!children.has(child)) child.classList.remove('flat-child');\n        });\n\n        children.forEach((child) => child.classList.toggle('flat-child', this.flat));\n        this.flatChildren = children;\n    };\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'tree' });\n        }\n    }\n}\n","import Orgchart from './orgchart.element.js';\n\nexport default Orgchart;\n\nOrgchart.define('wje-orgchart', Orgchart);\n"],"names":["Orgchart","WJElement","constructor","super","className","syncFlatChildren","children","Set","this","defaultSlot","assignedElements","flatten","flatChildren","forEach","child","has","classList","remove","toggle","flat","value","toggleAttribute","Boolean","hasAttribute","setupAttributes","isShadowRoot","syncAria","draw","fragment","document","createDocumentFragment","native","createElement","setAttribute","add","slot","appendChild","afterDraw","addEventListener","setAriaState","role","define"],"mappings":";;;;AAce,MAAMA,UAAiBC,EAAAA;AAAAA,EAKlC,cAAAC;AACIC,UAAAA;AAmBJC,qCAAY;AA6DZC,4CAAmB,MAAA;;AACf,UAAIC,KAAW,IAAIC,MAAIC,UAAKC,gBAALD,mBAAkBE,iBAAiB,EAAEC,SAAAA,KAAS,OAAW;AAEhFH,iBAAKI,iBAALJ,mBAAmBK,QAASC,CAAAA,OAAAA;AACnBR,QAAAA,GAASS,IAAID,EAAAA,KAAQA,GAAME,UAAUC,OAAO,YAAA;AAAA,MAAA,IAGrDX,GAASO,QAASC,CAAAA,OAAUA,GAAME,UAAUE,OAAO,cAAcV,KAAKW,IAAAA,CAAAA,GACtEX,KAAKI,eAAeN;AAAAA,IAAAA;AAAAA,EAvFxB;AAAA,EAMA,IAAA,KAASc,IAAAA;AACLZ,SAAKa,gBAAgB,QAAQC,QAAQF,EAAAA,CAAAA;AAAAA,EACzC;AAAA,EAMA,IAAA,OAAID;AACA,WAAOX,KAAKe,aAAa;EAC7B;AAAA,EASA,WAAA;AACI;EACJ;AAAA,EAMA,WAAA;AACI,WAAO,CAAC,MAAA;AAAA,EACZ;AAAA,EAKA,kBAAAC;AACIhB,SAAKiB,eAAe,QACpBjB,KAAKkB,SAAAA;AAAAA,EACT;AAAA,EAMA,OAAAC;AACI,QAAIC,KAAWC,SAASC,0BAEpBC,KAASF,SAASG,cAAc,KAAA;AACpCD,IAAAA,GAAOE,aAAa,QAAQ,QAAA,GAC5BF,GAAOf,UAAUkB,IAAI,iBAAA;AAErB,QAAIC,IAAON,SAASG,cAAc,MAAA;AASlC,WAPAD,GAAOK,YAAYD,CAAAA,GAEnBP,GAASQ,YAAYL,EAAAA,GAErBvB,KAAKuB,SAASA,IACdvB,KAAKC,cAAc0B,GAEZP;AAAAA,EACX;AAAA,EAKA,YAAAS;AACI7B,SAAKC,YAAY6B,iBAAiB,cAAc9B,KAAKH,gBAAAA,GACrDG,KAAKH,iBAAAA;AAAAA,EACT;AAAA,EAmBA,WAAAqB;AACSlB,SAAKe,aAAa,MAAA,KACnBf,KAAK+B,aAAa,EAAEC,MAAM,OAAA,CAAA;AAAA,EAElC;AAAA;AClHJxC,EAASyC,OAAO,gBAAgBzC,CAAAA;"}

package/dist/wje-pagination.js

@@ -1,459 +1,175 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { Localizer } from "./localize.js";
-import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-CReYMzAK.js";
-import Button from "./wje-button.js";
-import { event } from "./event.js";
-function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {
-  const totalPages = Math.ceil(totalItems / pageSize);
-  if (currentPage < 1) {
-    currentPage = 1;
-  } else if (currentPage > totalPages) {
-    currentPage = totalPages;
-  }
-  let startPage;
-  let endPage;
-  const pagesNearEnd = maxPages + 1;
-  const boundary = pagesNearEnd + 3;
-  if (totalPages > boundary) {
-    if (currentPage < pagesNearEnd) {
-      startPage = 1;
-      endPage = Math.min(pagesNearEnd + 1, totalPages);
-    } else if (currentPage >= totalPages - pagesNearEnd) {
-      startPage = Math.max(totalPages - pagesNearEnd, 1);
-      endPage = totalPages;
-    } else {
-      const halfPages = Math.floor(maxPages / 2);
-      startPage = currentPage - halfPages + 1;
-      endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;
-    }
-  } else {
-    startPage = 1;
-    endPage = totalPages;
-  }
-  const startIndex = (currentPage - 1) * pageSize;
-  const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
-  const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
-  return {
-    boundary,
-    currentPage,
-    endIndex,
-    endPage,
-    totalPages,
-    pages,
-    pageSize,
-    startIndex,
-    startPage,
-    totalItems
-  };
-}
-const styles = ":host {\n    --wje-pagination-gap: 1rem;\n    --wje-pagination-summary-gap: 1rem;\n    --wje-pagination-page-size-gap: var(--wje-spacing-small, 0.5rem);\n    --wje-pagination-mobile-gap: var(--wje-spacing-x-large, 2rem);\n    --wje-pagination-page-size-width: 68px;\n    --wje-pagination-page-button-width: 32px;\n    --wje-pagination-page-button-gap: 0.5rem;\n\n    display: block;\n    container: wje-pagination / inline-size;\n\n    .native-pagination {\n        display: flex;\n        align-items: center;\n        gap: var(--wje-pagination-gap);\n\n        .summary,\n        .page-size {\n            display: flex;\n            align-items: center;\n        }\n\n        .summary {\n            gap: var(--wje-pagination-summary-gap);\n        }\n\n        .page-size {\n            gap: var(--wje-pagination-page-size-gap);\n        }\n\n        .page-size-label {\n            display: none;\n            white-space: nowrap;\n        }\n\n        wje-select {\n            width: var(--wje-pagination-page-size-width);\n            margin-block: 0;\n            wje-option {\n                &::part(native) {\n                    padding-inline: var(--wje-spacing-x-small);\n                }\n                &[selected]{\n                    background: var(--wje-option-highlighted);\n                }\n            }\n            wje-option::part(check) {\n                display: none;\n            }\n        }\n\n        .info {\n            font-size: var(--wje-font-size-small);\n        }\n\n        .pages {\n            display: flex;\n            align-items: center;\n            gap: var(--wje-pagination-page-button-gap);\n\n            .dots {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                width: var(--wje-pagination-page-button-width);\n                &::before {\n                    content: '...';\n                }\n            }\n            wje-button {\n                width: var(--wje-pagination-page-button-width);\n                &[disabled] {\n                    cursor: default;\n                }\n            }\n        }\n    }\n}\n\n@container wje-pagination (max-width: 768px) {\n    :host {\n        .native-pagination {\n            width: 100%;\n            flex-direction: column;\n            justify-content: center;\n            gap: var(--wje-pagination-mobile-gap);\n\n            .summary {\n                justify-content: center;\n                flex-wrap: wrap;\n            }\n\n            .page-size-label {\n                display: inline;\n            }\n\n            .pages {\n                width: 100%;\n                max-width: 100%;\n                justify-content: safe center;\n                overflow-x: auto;\n            }\n        }\n    }\n}\n";
-class Pagination extends WJElement {
-  /**
-   * Creates an instance of Pagination.
-   */
+import { Localizer as t } from "./localize.js";
+import e from "./wje-element.js";
+import { I as i } from "./icon-DmsqtDpL.js";
+import a from "./wje-button.js";
+import { event as n } from "./event.js";
+class s extends e {
   constructor() {
     super();
-    /**
-     * Dependencies of the Button element.
-     * @type {object}
-     */
-    __publicField(this, "dependencies", {
-      "wje-icon": Icon,
-      "wje-button": Button
-    });
+    __publicField(this, "dependencies", { "wje-icon": i, "wje-button": a });
     __publicField(this, "className", "Pagination");
-    /**
-     * Handles the click action for pagination and updates the current page.
-     * If the clicked page number is the same as the current page, no action is performed.
-     * Otherwise, the current page is updated to the new page number, and a custom event
-     * 'wje-pagination:page-change' is dispatched with the pagination object.
-     * @param {Event} e The event triggered by the page click.
-     * @param {number} page The page number that was clicked.
-     */
-    __publicField(this, "pageClickAction", (e, page) => {
-      if (+page === this.page || this.page > this.paginateObj.totalPages) return;
-      this.page = page;
-      event.dispatchCustomEvent(this, "wje-pagination:page-change", { page: this.page, pageSize: this.pageSize });
+    __publicField(this, "pageClickAction", (t2, e2) => {
+      +e2 === this.page || this.page > this.paginateObj.totalPages || (this.page = e2, n.dispatchCustomEvent(this, "wje-pagination:page-change", { page: this.page, pageSize: this.pageSize }));
     });
-    this.localizer = new Localizer(this);
-    this._paginateObj = null;
-  }
-  /**
-   * Sets the value of the 'page' attribute for the object.
-   * @param {string} value The value to set for the 'page' attribute.
-   */
-  set page(value) {
-    this.setAttribute("page", value);
-  }
-  /**
-   * Retrieves the current page number as a numeric value.
-   * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.
-   */
+    this.localizer = new t(this), this._paginateObj = null;
+  }
+  set page(t2) {
+    this.setAttribute("page", t2);
+  }
   get page() {
     return +this.getAttribute("page") || 0;
   }
-  /**
-   * Sets the maximum number of pages.
-   * Updates the 'max-pages' attribute with the provided value.
-   * @param {number|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.
-   */
-  set maxPages(value) {
-    this.setAttribute("max-pages", value);
-  }
-  /**
-   * Gets the maximum number of pages.
-   * This getter retrieves the value of the "max-pages" attribute from the element.
-   * If the attribute is not set or is invalid, it defaults to 3.
-   * @returns {number} The maximum number of pages as a numeric value.
-   */
+  set maxPages(t2) {
+    this.setAttribute("max-pages", t2);
+  }
   get maxPages() {
     return +this.getAttribute("max-pages") || 10;
   }
-  /**
-   * Sets the `pageSize` attribute to the specified value.
-   * @param {number|string} value The desired page size value. This can be a number or a string representation of the size.
-   */
-  set pageSize(value) {
-    this.setAttribute("page-size", value);
-  }
-  /**
-   * Retrieves the value of the 'page-size' attribute and converts it to a number.
-   * If the attribute is not set or is invalid, returns the default value of 3.
-   * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.
-   */
+  set pageSize(t2) {
+    this.setAttribute("page-size", t2);
+  }
   get pageSize() {
     return +this.getAttribute("page-size") || 3;
   }
-  /**
-   * Sets the total number of items.
-   * @param {number} value The new total number of items to set.
-   */
-  set totalItems(value) {
-    this.setAttribute("total-items", value);
-  }
-  /**
-   * Retrieves the total number of items represented by the 'total-items' attribute.
-   * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.
-   */
+  set totalItems(t2) {
+    this.setAttribute("total-items", t2);
+  }
   get totalItems() {
     return +this.getAttribute("total-items") || 0;
   }
-  /**
-   * Sets the visibility of the first button based on the provided value.
-   * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.
-   * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.
-   */
-  set showFirstButton(value) {
-    this.removeAttribute("show-first-button");
-    if (value) {
-      this.setAttribute("show-first-button", "");
-    }
-  }
-  /**
-   * Determines whether the 'show-first-button' attribute is present on the element.
-   * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.
-   */
+  set showFirstButton(t2) {
+    this.removeAttribute("show-first-button"), t2 && this.setAttribute("show-first-button", "");
+  }
   get showFirstButton() {
     return this.hasAttribute("show-first-button");
   }
-  /**
-   * Sets the visibility of the "last" button. This method controls the presence
-   * or absence of the "show-last-button" attribute based on the provided value.
-   * @param {boolean} value A boolean value indicating whether to show the "last" button.
-   * If true, the "show-last-button" attribute is added;
-   * if false, the attribute is removed.
-   */
-  set showLastButton(value) {
-    this.removeAttribute("show-last-button");
-    if (value) {
-      this.setAttribute("show-last-button", "");
-    }
-  }
-  /**
-   * Determines if the 'show-last-button' attribute is present on the element.
-   * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.
-   */
+  set showLastButton(t2) {
+    this.removeAttribute("show-last-button"), t2 && this.setAttribute("show-last-button", "");
+  }
   get showLastButton() {
     return this.hasAttribute("show-last-button");
   }
-  /**
-   * Sets the pagination object by calculating the pagination details
-   * based on the total items, current page, page size, and maximum pages.
-   * @param {object} value The value to set the pagination object. The pagination details are computed internally.
-   */
-  set paginateObj(value) {
-    this._paginateObj = value;
-  }
-  /**
-   * Retrieves the pagination object used for managing paginated data.
-   * @returns {object} The pagination object containing details and functionality for paginating data.
-   */
+  set paginateObj(t2) {
+    this._paginateObj = t2;
+  }
   get paginateObj() {
     return this._paginateObj;
   }
-  /**
-   * Sets the 'round' attribute on the element. If the provided value is truthy,
-   * the 'round' attribute is added. If the value is falsy, the attribute is removed.
-   * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.
-   */
-  set round(value) {
-    this.removeAttribute("round");
-    if (value) {
-      this.setAttribute("round", "");
-    }
-  }
-  /**
-   * Retrieves the value of the 'round' attribute for the current element.
-   * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.
-   */
+  set round(t2) {
+    this.removeAttribute("round"), t2 && this.setAttribute("round", "");
+  }
   get round() {
     return this.hasAttribute("round");
   }
-  /**
-   * Sets the `show-info` attribute on the element based on the provided value.
-   * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.
-   */
-  set showInfo(value) {
-    this.removeAttribute("show-info");
-    if (value) {
-      this.setAttribute("show-info", "");
-    }
-  }
-  /**
-   * Retrieves the value of the 'show-info' attribute.
-   * Checks if the 'show-info' attribute is present on the element.
-   * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.
-   */
+  set showInfo(t2) {
+    this.removeAttribute("show-info"), t2 && this.setAttribute("show-info", "");
+  }
   get showInfo() {
     return this.hasAttribute("show-info");
   }
-  set showPageSizeOptions(value) {
-    if (!value) return;
-    this.setAttribute("show-page-size-options", value);
+  set showPageSizeOptions(t2) {
+    t2 && this.setAttribute("show-page-size-options", t2);
   }
   get showPageSizeOptions() {
     return this.hasAttribute("show-page-size-options");
   }
-  set pageSizeOptions(value) {
-    if (!value) return;
-    this.setAttribute("page-size-options", value);
+  set pageSizeOptions(t2) {
+    t2 && this.setAttribute("page-size-options", t2);
   }
-  /**
-   * Retrieves the list of available page size options.
-   * This method is used to fetch the values representing the different page size options
-   * that can be provided or configured in a paginated component or system.
-   * @returns {Array<number>} An array of numbers representing the selectable page size options.
-   */
   get pageSizeOptions() {
-    let options = this.getAttribute("page-size-options");
-    if (!options) return [6, 10, 50, 100, 500];
-    return options.split(",").map((o) => +o).filter((o) => !isNaN(o));
+    let t2 = this.getAttribute("page-size-options");
+    return t2 ? t2.split(",").map((t3) => +t3).filter((t3) => !isNaN(t3)) : [6, 10, 50, 100, 500];
   }
-  set hideEmpty(value) {
-    if (!value) return;
-    this.setAttribute("hide-empty", value);
+  set hideEmpty(t2) {
+    t2 && this.setAttribute("hide-empty", t2);
   }
   get hideEmpty() {
     return this.hasAttribute("hide-empty");
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{--wje-pagination-gap: 1rem;--wje-pagination-summary-gap: 1rem;--wje-pagination-page-size-gap: var(--wje-spacing-small, .5rem);--wje-pagination-mobile-gap: var(--wje-spacing-x-large, 2rem);--wje-pagination-page-size-width: 68px;--wje-pagination-page-button-width: 32px;--wje-pagination-page-button-gap: .5rem;display:block;container:wje-pagination / inline-size}:host .native-pagination{display:flex;align-items:center;gap:var(--wje-pagination-gap)}:host .native-pagination .summary,:host .native-pagination .page-size{display:flex;align-items:center}:host .native-pagination .summary{gap:var(--wje-pagination-summary-gap)}:host .native-pagination .page-size{gap:var(--wje-pagination-page-size-gap)}:host .native-pagination .page-size-label{display:none;white-space:nowrap}:host .native-pagination wje-select{width:var(--wje-pagination-page-size-width);margin-block:0}:host .native-pagination wje-select wje-option::part(native){padding-inline:var(--wje-spacing-x-small)}:host .native-pagination wje-select wje-option[selected]{background:var(--wje-option-highlighted)}:host .native-pagination wje-select wje-option::part(check){display:none}:host .native-pagination .info{font-size:var(--wje-font-size-small)}:host .native-pagination .pages{display:flex;align-items:center;gap:var(--wje-pagination-page-button-gap)}:host .native-pagination .pages .dots{display:flex;justify-content:center;align-items:center;width:var(--wje-pagination-page-button-width)}:host .native-pagination .pages .dots:before{content:"..."}:host .native-pagination .pages wje-button{width:var(--wje-pagination-page-button-width)}:host .native-pagination .pages wje-button[disabled]{cursor:default}@container wje-pagination (max-width: 768px){:host .native-pagination{width:100%;flex-direction:column;justify-content:center;gap:var(--wje-pagination-mobile-gap)}:host .native-pagination .summary{justify-content:center;flex-wrap:wrap}:host .native-pagination .page-size-label{display:inline}:host .native-pagination .pages{width:100%;max-width:100%;justify-content:safe center;overflow-x:auto}}';
   }
-  /**
-   * Getter for the observedAttributes attribute of the input element.
-   * @returns {Array} The attributes to observe for changes.
-   */
   static get observedAttributes() {
     return ["page", "total-items", "page-size"];
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.setAriaState({
-      role: "navigation"
-    });
+    this.isShadowRoot = "open", this.setAriaState({ role: "navigation" });
   }
   async beforeDraw() {
-    this.classList.remove("empty");
-    this.removeAttribute("hidden");
-    if (!this.totalItems || this.totalItems === 0) {
-      this.classList.add("empty");
-      if (this.hideEmpty)
-        this.setAttribute("hidden", "");
-      return;
-    }
-    this.paginateObj = await paginate(this.totalItems, this.page + 1, this.pageSize, this.maxPages) || {};
-  }
-  /**
-   * Creates a document fragment, appends a new slot element to it, and returns the fragment.
-   * @returns {DocumentFragment} A document fragment containing a slot element.
-   */
+    if (this.classList.remove("empty"), this.removeAttribute("hidden"), !this.totalItems || 0 === this.totalItems) return this.classList.add("empty"), void (this.hideEmpty && this.setAttribute("hidden", ""));
+    this.paginateObj = await (function(t2, e2 = 1, i2 = 10, a2 = 5) {
+      const n2 = Math.ceil(t2 / i2);
+      let s2, o;
+      e2 < 1 ? e2 = 1 : e2 > n2 && (e2 = n2);
+      const r = a2 + 1, p = r + 3;
+      if (n2 > p) if (e2 < r) s2 = 1, o = Math.min(r + 1, n2);
+      else if (e2 >= n2 - r) s2 = Math.max(n2 - r, 1), o = n2;
+      else {
+        const t3 = Math.floor(a2 / 2);
+        s2 = e2 - t3 + 1, o = a2 % 2 == 1 ? e2 + t3 + 1 : e2 + t3 - 1;
+      }
+      else s2 = 1, o = n2;
+      const l = (e2 - 1) * i2;
+      return { boundary: p, currentPage: e2, endIndex: Math.min(l + i2 - 1, t2 - 1), endPage: o, totalPages: n2, pages: Array.from({ length: o - s2 + 1 }, (t3, e3) => s2 + e3), pageSize: i2, startIndex: l, startPage: s2, totalItems: t2 };
+    })(this.totalItems, this.page + 1, this.pageSize, this.maxPages) || {};
+  }
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-pagination");
-    native.append(this.htmlPagination());
-    fragment.append(native);
-    return fragment;
-  }
-  /**
-   * Creates a pagination control for navigating between pages of content.
-   * 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.
-   * @returns {DocumentFragment} A document fragment containing the pagination controls.
-   */
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    return e2.setAttribute("part", "native"), e2.classList.add("native-pagination"), e2.append(this.htmlPagination()), t2.append(e2), t2;
+  }
   htmlPagination() {
     var _a, _b, _c, _d;
-    let fragment = document.createDocumentFragment();
-    let summary = document.createElement("div");
-    summary.setAttribute("part", "summary");
-    summary.classList.add("summary");
-    let pageSize = document.createElement("div");
-    pageSize.setAttribute("part", "page-size");
-    pageSize.classList.add("page-size");
-    let pageSizeLabel = document.createElement("span");
-    pageSizeLabel.setAttribute("part", "page-size-label");
-    pageSizeLabel.classList.add("page-size-label");
-    pageSizeLabel.textContent = this.localizer.translate("wj.pagination.itemsPerPage");
-    let select = document.createElement("wje-select");
-    select.setAttribute("part", "page-size-select");
-    select.setAttribute("size", "small");
-    select.setAttribute("variant", "standard");
-    select.setAttribute("value", this.pageSize);
-    select.setAttribute("aria-label", pageSizeLabel.textContent);
-    select.addEventListener("wje-select:change", (e) => {
-      if (+e.detail.context.value[0] !== this.pageSize) {
-        this.pageSize = +e.detail.context.value[0];
-        this.page = 0;
-        event.dispatchCustomEvent(this, "wje-pagination:page-change", { page: this.page, pageSize: this.pageSize });
-      }
-    });
-    let options = this.pageSizeOptions.map((o) => {
-      let option = document.createElement("wje-option");
-      option.value = o;
-      option.textContent = o;
-      return option;
-    });
-    let info = document.createElement("div");
-    info.setAttribute("part", "info");
-    info.classList.add("info");
-    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.setAttribute("part", "pages");
-    pagination.classList.add("pages");
-    const button = document.createElement("wje-button");
-    button.setAttribute("part", "page-button");
-    button.setAttribute("fill", "link");
-    if (this.round) button.setAttribute("round", "");
-    let firstButton = button.cloneNode(true);
-    firstButton.setAttribute("part", "page-button first-button");
-    firstButton.title = this.localizer.translate("wj.pagination.first");
-    firstButton.setAttribute("label", firstButton.title);
-    firstButton.innerHTML = `<wje-icon name="chevron-left-pipe" slot="icon-only"></wje-icon>`;
-    firstButton.addEventListener("click", (e) => this.pageClickAction(e, 0));
-    const prevButton = button.cloneNode(true);
-    prevButton.setAttribute("part", "page-button previous-button");
-    prevButton.title = this.localizer.translate("wj.pagination.prev");
-    prevButton.setAttribute("label", prevButton.title);
-    prevButton.innerHTML = `<wje-icon name="chevron-left" slot="icon-only"></wje-icon>`;
-    if (this.page === 0) prevButton.disabled = true;
-    prevButton.addEventListener("click", (e) => this.pageClickAction(e, this.page - 1));
-    const nextButton = button.cloneNode(true);
-    nextButton.setAttribute("part", "page-button next-button");
-    nextButton.title = this.localizer.translate("wj.pagination.next");
-    nextButton.setAttribute("label", nextButton.title);
-    nextButton.innerHTML = `<wje-icon name="chevron-right" slot="icon-only"></wje-icon>`;
-    if (this.page + 1 >= ((_c = this.paginateObj) == null ? void 0 : _c.totalPages)) nextButton.disabled = true;
-    nextButton.addEventListener("click", (e) => this.pageClickAction(e, this.page + 1));
-    let lastButton = button.cloneNode(true);
-    lastButton.setAttribute("part", "page-button last-button");
-    lastButton.title = this.localizer.translate("wj.pagination.last");
-    lastButton.setAttribute("label", lastButton.title);
-    lastButton.innerHTML = `<wje-icon name="chevron-right-pipe" slot="icon-only"></wje-icon>`;
-    lastButton.disabled = ((_d = this.paginateObj) == null ? void 0 : _d.endIndex) + 1 >= this.totalItems;
-    lastButton.addEventListener(
-      "click",
-      (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);
-    pagination.appendChild(prevButton);
-    pagination.appendChild(this.htmlStackButtons(this.paginateObj));
-    pagination.appendChild(nextButton);
-    if (this.showLastButton) pagination.appendChild(lastButton);
-    if (this.showPageSizeOptions) {
-      pageSize.append(pageSizeLabel, select);
-      summary.append(pageSize);
-    }
-    if (this.showInfo) summary.append(info);
-    if (summary.childElementCount) fragment.append(summary);
-    fragment.appendChild(pagination);
-    return fragment;
-  }
-  /**
-   * Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,
-   * based on the provided pagination object.
-   * @param {object} paginateObj An object containing pagination details.
-   * @param {number} paginateObj.currentPage The current active page index (1-based).
-   * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.
-   * @param {number} paginateObj.totalPages Total number of pages available for pagination.
-   * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.
-   */
-  htmlStackButtons(paginateObj) {
-    let fragment = document.createDocumentFragment();
-    const button = document.createElement("wje-button");
-    button.setAttribute("part", "page-button page-number");
-    button.setAttribute("fill", "link");
-    if (this.round) button.setAttribute("round", "");
-    let dots = document.createElement("span");
-    dots.setAttribute("part", "dots");
-    dots.classList.add("dots");
-    dots.setAttribute("aria-hidden", "true");
-    const first = button.cloneNode(true);
-    first.textContent = "1";
-    first.addEventListener("click", (e) => this.pageClickAction(e, 0));
-    const last = button.cloneNode(true);
-    last.textContent = paginateObj == null ? void 0 : paginateObj.totalPages;
-    last.addEventListener("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 == null ? void 0 : paginateObj.pages.forEach((page) => {
-      let newButton = button.cloneNode(true);
-      newButton.textContent = page;
-      if (page - 1 === this.page) {
-        newButton.removeAttribute("fill");
-        newButton.setAttribute("aria-current", "page");
-        newButton.setAttribute("part", "page-button page-number current-page");
-      } else {
-        newButton.addEventListener("click", (e) => this.pageClickAction(e, page - 1));
-      }
-      fragment.appendChild(newButton);
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.setAttribute("part", "summary"), e2.classList.add("summary");
+    let i2 = document.createElement("div");
+    i2.setAttribute("part", "page-size"), i2.classList.add("page-size");
+    let a2 = document.createElement("span");
+    a2.setAttribute("part", "page-size-label"), a2.classList.add("page-size-label"), a2.textContent = this.localizer.translate("wj.pagination.itemsPerPage");
+    let s2 = document.createElement("wje-select");
+    s2.setAttribute("part", "page-size-select"), s2.setAttribute("size", "small"), s2.setAttribute("variant", "standard"), s2.setAttribute("value", this.pageSize), s2.setAttribute("aria-label", a2.textContent), s2.addEventListener("wje-select:change", (t3) => {
+      +t3.detail.context.value[0] !== this.pageSize && (this.pageSize = +t3.detail.context.value[0], this.page = 0, n.dispatchCustomEvent(this, "wje-pagination:page-change", { page: this.page, pageSize: this.pageSize }));
     });
-    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);
-    }
-    return fragment;
+    let o = this.pageSizeOptions.map((t3) => {
+      let e3 = document.createElement("wje-option");
+      return e3.value = t3, e3.textContent = t3, e3;
+    }), r = document.createElement("div");
+    r.setAttribute("part", "info"), r.classList.add("info"), r.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 p = document.createElement("div");
+    p.setAttribute("part", "pages"), p.classList.add("pages");
+    const l = document.createElement("wje-button");
+    l.setAttribute("part", "page-button"), l.setAttribute("fill", "link"), this.round && l.setAttribute("round", "");
+    let g = l.cloneNode(true);
+    g.setAttribute("part", "page-button first-button"), g.title = this.localizer.translate("wj.pagination.first"), g.setAttribute("label", g.title), g.innerHTML = '<wje-icon name="chevron-left-pipe" slot="icon-only"></wje-icon>', g.addEventListener("click", (t3) => this.pageClickAction(t3, 0));
+    const h = l.cloneNode(true);
+    h.setAttribute("part", "page-button previous-button"), h.title = this.localizer.translate("wj.pagination.prev"), h.setAttribute("label", h.title), h.innerHTML = '<wje-icon name="chevron-left" slot="icon-only"></wje-icon>', 0 === this.page && (h.disabled = true), h.addEventListener("click", (t3) => this.pageClickAction(t3, this.page - 1));
+    const u = l.cloneNode(true);
+    u.setAttribute("part", "page-button next-button"), u.title = this.localizer.translate("wj.pagination.next"), u.setAttribute("label", u.title), u.innerHTML = '<wje-icon name="chevron-right" slot="icon-only"></wje-icon>', this.page + 1 >= ((_c = this.paginateObj) == null ? void 0 : _c.totalPages) && (u.disabled = true), u.addEventListener("click", (t3) => this.pageClickAction(t3, this.page + 1));
+    let c = l.cloneNode(true);
+    return c.setAttribute("part", "page-button last-button"), c.title = this.localizer.translate("wj.pagination.last"), c.setAttribute("label", c.title), c.innerHTML = '<wje-icon name="chevron-right-pipe" slot="icon-only"></wje-icon>', c.disabled = ((_d = this.paginateObj) == null ? void 0 : _d.endIndex) + 1 >= this.totalItems, c.addEventListener("click", (t3) => {
+      var _a2;
+      return this.pageClickAction(t3, ((_a2 = this.paginateObj) == null ? void 0 : _a2.totalPages) - 1);
+    }), s2.append(...o), this.showFirstButton && p.appendChild(g), p.appendChild(h), p.appendChild(this.htmlStackButtons(this.paginateObj)), p.appendChild(u), this.showLastButton && p.appendChild(c), this.showPageSizeOptions && (i2.append(a2, s2), e2.append(i2)), this.showInfo && e2.append(r), e2.childElementCount && t2.append(e2), t2.appendChild(p), t2;
+  }
+  htmlStackButtons(t2) {
+    let e2 = document.createDocumentFragment();
+    const i2 = document.createElement("wje-button");
+    i2.setAttribute("part", "page-button page-number"), i2.setAttribute("fill", "link"), this.round && i2.setAttribute("round", "");
+    let a2 = document.createElement("span");
+    a2.setAttribute("part", "dots"), a2.classList.add("dots"), a2.setAttribute("aria-hidden", "true");
+    const n2 = i2.cloneNode(true);
+    n2.textContent = "1", n2.addEventListener("click", (t3) => this.pageClickAction(t3, 0));
+    const s2 = i2.cloneNode(true);
+    return s2.textContent = t2 == null ? void 0 : t2.totalPages, s2.addEventListener("click", (e3) => this.pageClickAction(e3, (t2 == null ? void 0 : t2.totalPages) - 1)), (t2 == null ? void 0 : t2.currentPage) >= this.maxPages + 1 && (t2 == null ? void 0 : t2.boundary) < (t2 == null ? void 0 : t2.totalPages) && (e2.appendChild(n2), e2.appendChild(a2)), t2 == null ? void 0 : t2.pages.forEach((t3) => {
+      let a3 = i2.cloneNode(true);
+      a3.textContent = t3, t3 - 1 === this.page ? (a3.removeAttribute("fill"), a3.setAttribute("aria-current", "page"), a3.setAttribute("part", "page-button page-number current-page")) : a3.addEventListener("click", (e3) => this.pageClickAction(e3, t3 - 1)), e2.appendChild(a3);
+    }), ((t2 == null ? void 0 : t2.pages.length) === this.maxPages || (t2 == null ? void 0 : t2.currentPage) < this.maxPages + 1) && t2.boundary < (t2 == null ? void 0 : t2.totalPages) && (e2.appendChild(a2.cloneNode(true)), e2.appendChild(s2)), e2;
   }
 }
-Pagination.define("wje-pagination", Pagination);
-Pagination.define("wje-pagination", Pagination);
+s.define("wje-pagination", s), s.define("wje-pagination", s);
 export {
-  Pagination as default
+  s as default
 };
 //# sourceMappingURL=wje-pagination.js.map