@ukic/web-components 3.20.0 → 3.22.0

package/dist/cjs/ic-pagination.cjs.entry.js

@@ -1,312 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-3a796e7a.js');
-require('./constants-4d389abc.js');
-
-const paginationNextPrevious = `<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.08748 0L0.912476 1.175L4.72914 5L0.912476 8.825L2.08748 10L7.08748 5L2.08748 0Z" fill="currentColor"/>
-</svg>
-`;
-
-const paginationFirstLast = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.1709 8.825L7.34589 5L11.1709 1.175L9.99589 0L4.99589 5L9.99589 10L11.1709 8.825ZM0.829224 0H2.49589V10H0.829224V0Z" fill="currentColour"/>
-</svg>`;
-
-const icPaginationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{box-sizing:border-box;width:100%;display:flex;justify-content:center}nav{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ic-button{cursor:pointer}ic-button.next-previous{--icon-width:var(--ic-space-xs);--icon-height:calc(var(--ic-space-xs) + var(--ic-space-xxxs));padding:0 var(--ic-space-xxs) 0 var(--ic-space-xxxs)}ic-button.first-last{--icon-width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));--icon-height:calc(var(--ic-space-xs) + var(--ic-space-xxxs))}ic-button.first-last::part(button),ic-button.next-previous::part(button){color:var(--ic-pagination-chevron)}:host(.ic-pagination-monochrome) ic-button.first-last::part(button),:host(.ic-pagination-monochrome) ic-button.next-previous::part(button){color:var(--ic-pagination-chevron-monochrome)}ic-button.ic-button-disabled.first-last::part(button),ic-button.ic-button-disabled.next-previous::part(button),:host(.ic-pagination-monochrome) ic-button.ic-button-disabled.first-last::part(button),:host(.ic-pagination-monochrome) ic-button.ic-button-disabled.next-previous::part(button){color:var(--ic-pagination-chevron-disabled)}.disabled{color:var(--ic-color-text-disabled-mid);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.hide-current-page{display:none}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}";
-const IcPaginationStyle0 = icPaginationCss;
-
-const Pagination = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.icPageChange = index.createEvent(this, "icPageChange", 7);
-        this.endEllipsis = false;
-        this.endItems = [];
-        this.midItems = [];
-        this.startEllipsis = false;
-        this.startItems = [];
-        /**
-         * The accessible label of the pagination component to provide context for screen reader users.
-         */
-        this.accessibleLabel = "Pagination Navigation";
-        /**
-         * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
-         */
-        this.adjacentPageCount = 1;
-        /**
-         * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
-         */
-        this.boundaryPageCount = 1;
-        /**
-         * The default page to display.
-         */
-        this.defaultPage = 1;
-        /**
-         * If `true`, the pagination will not allow interaction.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the current page of the simple pagination will not be displayed.
-         */
-        this.hideCurrentPage = false;
-        /**
-         * If `true`, the first and last page buttons will not be displayed.
-         */
-        this.hideFirstAndLastPageButton = false;
-        /**
-         * The label for the pagination item (applicable when simple pagination is being used).
-         */
-        this.label = "Page";
-        /**
-         * If `true`, the pagination will display as black in the light theme, and white in dark theme.
-         */
-        this.monochrome = false;
-        /**
-         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
-         */
-        this.theme = "inherit";
-        /**
-         * The type of pagination to be used.
-         */
-        this.type = "simple";
-        /**
-         * The current page displayed by the pagination.
-         */
-        this.currentPage = this.defaultPage;
-        this.handleClickFirst = () => {
-            this.currentPage = 1;
-            this.icPageChange.emit({ value: this.currentPage });
-        };
-        this.handleClickPrevious = () => {
-            this.currentPage--;
-            this.icPageChange.emit({ value: this.currentPage });
-        };
-        this.handleClickNext = () => {
-            this.currentPage++;
-            this.icPageChange.emit({ value: this.currentPage });
-        };
-        this.handleClickLast = () => {
-            this.currentPage = this.pages;
-            this.icPageChange.emit({ value: this.currentPage });
-        };
-        // button rendering abstracted from component render methods for clarity
-        this.firstButton = () => {
-            return (index.h("ic-button", { id: "first-page-button", "aria-label": "Go to first page", theme: this.theme, onClick: this.handleClickFirst, class: "page-button first-last", disabled: this.currentPage === 1 || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationFirstLast }));
-        };
-        this.previousButton = () => {
-            return (index.h("ic-button", { id: "previous-page-button", "aria-label": "Go to previous page", theme: this.theme, onClick: this.handleClickPrevious, class: "page-button next-previous flip", disabled: this.currentPage === 1 || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationNextPrevious }));
-        };
-        this.nextButton = () => {
-            return (index.h("ic-button", { id: "next-page-button", "aria-label": "Go to next page", theme: this.theme, onClick: this.handleClickNext, class: "page-button next-previous", disabled: this.currentPage === this.pages || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationNextPrevious }));
-        };
-        this.lastButton = () => {
-            return (index.h("ic-button", { id: "last-page-button", "aria-label": "Go to last page", theme: this.theme, onClick: this.handleClickLast, class: "page-button first-last flip", disabled: this.currentPage === this.pages || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationFirstLast }));
-        };
-        this.renderStartEllipsis = () => {
-            return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, type: "ellipsis", id: "start-ellipsis", disabled: this.disabled }));
-        };
-        this.renderEndEllipsis = () => {
-            return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, type: "ellipsis", id: "end-ellipsis", disabled: this.disabled }));
-        };
-        this.renderStartItems = () => {
-            return this.startItems.map((page) => {
-                return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
-            });
-        };
-        this.renderEndItems = () => {
-            return this.endItems.map((page) => {
-                return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
-            });
-        };
-        this.renderMiddleItems = () => {
-            return this.midItems.map((page) => {
-                return (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
-            });
-        };
-    }
-    watchAdjacentPageCountHandler() {
-        if (this.adjacentPageCount > 2) {
-            this.adjacentPageCount = 2;
-        }
-    }
-    watchBoundaryPageCountHandler() {
-        if (this.boundaryPageCount > 2) {
-            this.boundaryPageCount = 2;
-        }
-    }
-    watchDisabledHandler() {
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    watchNumberPagesHandler() {
-        this.watchPageChangeHandler();
-    }
-    watchTypeHandler() {
-        this.watchPageChangeHandler();
-    }
-    watchPageChangeHandler() {
-        if (this.type === "simple") {
-            return;
-        }
-        this.startEllipsis = false;
-        this.endEllipsis = false;
-        this.startItems = [];
-        this.endItems = [];
-        this.midItems = [];
-        const startItems = [];
-        let startItemCount = 0;
-        const endItems = [];
-        let endStart = this.pages;
-        const midItems = [];
-        let midStart;
-        let midEnd;
-        let startEllipsis = false;
-        let endEllipsis = false;
-        if (this.pages <=
-            this.boundaryPageCount * 2 + this.adjacentPageCount * 2 + 3) {
-            this.startEllipsis = false;
-            this.endEllipsis = false;
-            for (let i = 1; i <= this.pages; i++) {
-                startItems.push(i);
-            }
-            this.startItems = startItems;
-            return;
-        }
-        startItemCount = this.boundaryPageCount === 0 ? 1 : this.boundaryPageCount;
-        endStart =
-            this.boundaryPageCount === 0
-                ? this.pages
-                : this.pages - this.boundaryPageCount + 1;
-        if (this.currentPage <=
-            this.adjacentPageCount + this.boundaryPageCount + 2) {
-            startEllipsis = false;
-            endEllipsis = true;
-            let numItems = 2 * this.adjacentPageCount + 1;
-            if (this.boundaryPageCount === 0) {
-                numItems--;
-            }
-            midStart = startItemCount + 1;
-            midEnd = midStart + numItems;
-        }
-        else {
-            startEllipsis = true;
-            if (this.currentPage >
-                this.pages - (this.adjacentPageCount + this.boundaryPageCount + 2)) {
-                let numItems = 2 * this.adjacentPageCount + 1;
-                if (this.boundaryPageCount === 0) {
-                    numItems--;
-                }
-                midEnd =
-                    this.boundaryPageCount === 0
-                        ? this.pages - 1
-                        : this.pages - this.boundaryPageCount;
-                midStart = midEnd - numItems;
-            }
-            else {
-                endEllipsis = true;
-                midStart = this.currentPage - this.adjacentPageCount;
-                midEnd = this.currentPage + this.adjacentPageCount;
-            }
-        }
-        //create array of start items
-        if (this.boundaryPageCount > 0 ||
-            (this.boundaryPageCount === 0 && startEllipsis === false)) {
-            for (let i = 1; i <= startItemCount; i++) {
-                startItems.push(i);
-            }
-        }
-        //create array of end items
-        if (this.boundaryPageCount > 0 ||
-            (this.boundaryPageCount === 0 && endEllipsis === false)) {
-            for (let i = endStart; i <= this.pages; i++) {
-                endItems.push(i);
-            }
-        }
-        //create array of mid items
-        for (let i = midStart; i <= midEnd; i++) {
-            midItems.push(i);
-        }
-        this.startEllipsis = startEllipsis;
-        this.endEllipsis = endEllipsis;
-        this.startItems = startItems;
-        this.endItems = endItems;
-        this.midItems = midItems;
-    }
-    componentWillLoad() {
-        this.watchPageChangeHandler();
-        this.watchBoundaryPageCountHandler();
-        this.watchAdjacentPageCountHandler();
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    componentDidLoad() {
-        helpers.onComponentRequiredPropUndefined([{ prop: this.pages, propName: "pages" }], "Pagination");
-    }
-    /**
-     * Prevents focus lingering on a disabled element. If the currently
-     * focused element is one of the back buttons (and we reach the first page),
-     * move focus to "next" button, and vice versa.
-     * @param ev
-     */
-    icPageChangeHandler(ev) {
-        var _a, _b, _c;
-        const shadow = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        const activeEl = shadow ? shadow.activeElement : document.activeElement;
-        if (!shadow || !activeEl) {
-            return;
-        }
-        if (ev.detail.value === 1 &&
-            ["first-page-button", "previous-page-button"].some((id) => id === (activeEl === null || activeEl === void 0 ? void 0 : activeEl.id))) {
-            const btn = (_b = shadow.querySelector("#next-page-button").shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
-            // When navigating from firstPage->lastPage or vice versa, the to-be-selected element will be disabled. wait a tick so that it can receive focus.
-            setTimeout(() => btn === null || btn === void 0 ? void 0 : btn.focus(), 10);
-        }
-        else if (ev.detail.value === this.pages &&
-            ["last-page-button", "next-page-button"].some((id) => id === (activeEl === null || activeEl === void 0 ? void 0 : activeEl.id))) {
-            const btn = (_c = shadow.querySelector("#previous-page-button").shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
-            setTimeout(() => btn === null || btn === void 0 ? void 0 : btn.focus(), 10);
-        }
-    }
-    paginationItemClickHandler(ev) {
-        const page = ev.detail.page;
-        this.currentPage = page;
-        this.icPageChange.emit({ value: this.currentPage });
-    }
-    /**
-     * Sets the currently displayed page.
-     * @param {number} page The page number to set as the current page
-     */
-    async setCurrentPage(page) {
-        if (typeof page === "number" && page > 0 && page <= this.pages) {
-            this.currentPage = page;
-        }
-        else {
-            console.error("Current page must be a number greater than zero but less than or equal to the total number of pages");
-        }
-    }
-    render() {
-        const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
-        return (index.h(index.Host, { key: '06b3adf0d59e3e20e2192fa3836d13c4577003fe', class: {
-                [`ic-theme-${theme}`]: theme !== "inherit",
-                ["ic-pagination-monochrome"]: !!monochrome,
-            } }, type === "simple" && (index.h("nav", { key: '75f6cfc6bd708870bb6dd4e6b1d44ab63f9f3bf5', class: {
-                ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), index.h("ic-pagination-item", { key: '24ddac40513c65ac26604271f6a1ab268f107dfe', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (index.h("nav", { key: '5c864426c60fced527cf6457aded27e8c29fd26f', class: {
-                ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (index.h("span", { key: '52bb61a07010197513bd02b450b79895cb80030c', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "adjacentPageCount": ["watchAdjacentPageCountHandler"],
-        "boundaryPageCount": ["watchBoundaryPageCountHandler"],
-        "disabled": ["watchDisabledHandler"],
-        "pages": ["watchNumberPagesHandler"],
-        "type": ["watchTypeHandler"],
-        "currentPage": ["watchPageChangeHandler"]
-    }; }
-};
-Pagination.style = IcPaginationStyle0;
-
-exports.ic_pagination = Pagination;
-
-//# sourceMappingURL=ic-pagination.cjs.entry.js.map

package/dist/cjs/ic-pagination.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"ic-pagination.entry.cjs.js","mappings":"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","names":["h","removeDisabledFalse","onComponentRequiredPropUndefined","Host"],"sources":["src/components/ic-pagination/ic-pagination.css?tag=ic-pagination&encapsulation=shadow","src/components/ic-pagination/ic-pagination.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  box-sizing: border-box;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\nnav {\n  width: 100%;\n  display: flex;\n  flex-flow: row wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\nic-button {\n  cursor: pointer;\n}\n\nic-button.next-previous {\n  --icon-width: var(--ic-space-xs);\n  --icon-height: calc(var(--ic-space-xs) + var(--ic-space-xxxs));\n\n  padding: 0 var(--ic-space-xxs) 0 var(--ic-space-xxxs);\n}\n\nic-button.first-last {\n  --icon-width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  --icon-height: calc(var(--ic-space-xs) + var(--ic-space-xxxs));\n}\n\nic-button.first-last::part(button),\nic-button.next-previous::part(button) {\n  color: var(--ic-pagination-chevron);\n}\n\n:host(.ic-pagination-monochrome) ic-button.first-last::part(button),\n:host(.ic-pagination-monochrome) ic-button.next-previous::part(button) {\n  color: var(--ic-pagination-chevron-monochrome);\n}\n\nic-button.ic-button-disabled.first-last::part(button),\nic-button.ic-button-disabled.next-previous::part(button),\n:host(.ic-pagination-monochrome)\n  ic-button.ic-button-disabled.first-last::part(button),\n:host(.ic-pagination-monochrome)\n  ic-button.ic-button-disabled.next-previous::part(button) {\n  color: var(--ic-pagination-chevron-disabled);\n}\n\n.disabled {\n  color: var(--ic-color-text-disabled-mid);\n  pointer-events: none;\n  cursor: none;\n  user-select: none;\n}\n\n.hide-current-page {\n  display: none;\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n  right: -9999px;\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  Listen,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from \"@stencil/core\";\nimport paginationNextPrevious from \"../../assets/pagination-next-previous.svg\";\nimport paginationFirstLast from \"../../assets/pagination-first-last.svg\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { IcPaginationTypes, IcChangeEventDetail } from \"./ic-pagination.types\";\nimport {\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination\",\n  styleUrl: \"ic-pagination.css\",\n  shadow: true,\n})\nexport class Pagination {\n  @Element() el: HTMLIcPaginationElement;\n\n  @State() endEllipsis: boolean = false;\n  @State() endItems: number[] = [];\n  @State() midItems: number[] = [];\n  @State() startEllipsis: boolean = false;\n  @State() startItems: number[] = [];\n\n  /**\n   * The accessible label of the pagination component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string = \"Pagination Navigation\";\n\n  /**\n   * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n   */\n  @Prop({ mutable: true }) adjacentPageCount?: number = 1;\n\n  @Watch(\"adjacentPageCount\")\n  watchAdjacentPageCountHandler(): void {\n    if (this.adjacentPageCount! > 2) {\n      this.adjacentPageCount = 2;\n    }\n  }\n\n  /**\n   * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.\n   */\n  @Prop({ mutable: true }) boundaryPageCount?: number = 1;\n\n  @Watch(\"boundaryPageCount\")\n  watchBoundaryPageCountHandler(): void {\n    if (this.boundaryPageCount! > 2) {\n      this.boundaryPageCount = 2;\n    }\n  }\n\n  /**\n   * The default page to display.\n   */\n  @Prop() defaultPage?: number = 1;\n\n  /**\n   * If `true`, the pagination will not allow interaction.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the current page of the simple pagination will not be displayed.\n   */\n  @Prop() hideCurrentPage?: boolean = false;\n\n  /**\n   * If `true`, the first and last page buttons will not be displayed.\n   */\n  @Prop() hideFirstAndLastPageButton?: boolean = false;\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label?: string = \"Page\";\n\n  /**\n   * If `true`, the pagination will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pages!: number;\n\n  @Watch(\"pages\")\n  watchNumberPagesHandler(): void {\n    this.watchPageChangeHandler();\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of pagination to be used.\n   */\n  @Prop() type?: IcPaginationTypes = \"simple\";\n\n  @Watch(\"type\")\n  watchTypeHandler(): void {\n    this.watchPageChangeHandler();\n  }\n\n  /**\n   * The current page displayed by the pagination.\n   */\n  @Prop({ mutable: true }) currentPage?: number = this.defaultPage;\n\n  @Watch(\"currentPage\")\n  watchPageChangeHandler(): void {\n    if (this.type === \"simple\") {\n      return;\n    }\n\n    this.startEllipsis = false;\n    this.endEllipsis = false;\n    this.startItems = [];\n    this.endItems = [];\n    this.midItems = [];\n\n    const startItems = [];\n    let startItemCount = 0;\n    const endItems = [];\n    let endStart = this.pages;\n    const midItems = [];\n    let midStart;\n    let midEnd;\n    let startEllipsis = false;\n    let endEllipsis = false;\n\n    if (\n      this.pages <=\n      this.boundaryPageCount! * 2 + this.adjacentPageCount! * 2 + 3\n    ) {\n      this.startEllipsis = false;\n      this.endEllipsis = false;\n      for (let i = 1; i <= this.pages; i++) {\n        startItems.push(i);\n      }\n      this.startItems = startItems;\n      return;\n    }\n\n    startItemCount = this.boundaryPageCount === 0 ? 1 : this.boundaryPageCount!;\n    endStart =\n      this.boundaryPageCount === 0\n        ? this.pages\n        : this.pages - this.boundaryPageCount! + 1;\n\n    if (\n      this.currentPage! <=\n      this.adjacentPageCount! + this.boundaryPageCount! + 2\n    ) {\n      startEllipsis = false;\n      endEllipsis = true;\n\n      let numItems = 2 * this.adjacentPageCount! + 1;\n      if (this.boundaryPageCount === 0) {\n        numItems--;\n      }\n      midStart = startItemCount + 1;\n      midEnd = midStart + numItems;\n    } else {\n      startEllipsis = true;\n      if (\n        this.currentPage! >\n        this.pages - (this.adjacentPageCount! + this.boundaryPageCount! + 2)\n      ) {\n        let numItems = 2 * this.adjacentPageCount! + 1;\n        if (this.boundaryPageCount === 0) {\n          numItems--;\n        }\n        midEnd =\n          this.boundaryPageCount === 0\n            ? this.pages - 1\n            : this.pages - this.boundaryPageCount!;\n        midStart = midEnd - numItems;\n      } else {\n        endEllipsis = true;\n        midStart = this.currentPage! - this.adjacentPageCount!;\n        midEnd = this.currentPage! + this.adjacentPageCount!;\n      }\n    }\n\n    //create array of start items\n    if (\n      this.boundaryPageCount! > 0 ||\n      (this.boundaryPageCount === 0 && startEllipsis === false)\n    ) {\n      for (let i = 1; i <= startItemCount; i++) {\n        startItems.push(i);\n      }\n    }\n\n    //create array of end items\n    if (\n      this.boundaryPageCount! > 0 ||\n      (this.boundaryPageCount === 0 && endEllipsis === false)\n    ) {\n      for (let i = endStart; i <= this.pages; i++) {\n        endItems.push(i);\n      }\n    }\n\n    //create array of mid items\n    for (let i = midStart; i <= midEnd; i++) {\n      midItems.push(i);\n    }\n\n    this.startEllipsis = startEllipsis;\n    this.endEllipsis = endEllipsis;\n    this.startItems = startItems;\n    this.endItems = endItems;\n    this.midItems = midItems;\n  }\n\n  /**\n   * Emitted when a page is selected.\n   */\n  @Event() icPageChange: EventEmitter<IcChangeEventDetail>;\n\n  componentWillLoad(): void {\n    this.watchPageChangeHandler();\n    this.watchBoundaryPageCountHandler();\n    this.watchAdjacentPageCountHandler();\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.pages, propName: \"pages\" }],\n      \"Pagination\"\n    );\n  }\n\n  /**\n   * Prevents focus lingering on a disabled element. If the currently\n   * focused element is one of the back buttons (and we reach the first page),\n   * move focus to \"next\" button, and vice versa.\n   * @param ev\n   */\n  @Listen(\"icPageChange\")\n  icPageChangeHandler(ev: CustomEvent<IcChangeEventDetail>) {\n    const shadow = document.activeElement?.shadowRoot;\n\n    const activeEl = shadow ? shadow.activeElement : document.activeElement;\n    if (!shadow || !activeEl) {\n      return;\n    }\n\n    if (\n      ev.detail.value === 1 &&\n      [\"first-page-button\", \"previous-page-button\"].some(\n        (id) => id === activeEl?.id\n      )\n    ) {\n      const btn = (\n        shadow.querySelector(\"#next-page-button\") as HTMLElement\n      ).shadowRoot?.querySelector(\"button\");\n      // When navigating from firstPage->lastPage or vice versa, the to-be-selected element will be disabled. wait a tick so that it can receive focus.\n      setTimeout(() => btn?.focus(), 10);\n    } else if (\n      ev.detail.value === this.pages &&\n      [\"last-page-button\", \"next-page-button\"].some((id) => id === activeEl?.id)\n    ) {\n      const btn = (\n        shadow!.querySelector(\"#previous-page-button\") as HTMLElement\n      ).shadowRoot?.querySelector(\"button\");\n      setTimeout(() => btn?.focus(), 10);\n    }\n  }\n\n  @Listen(\"paginationItemClick\")\n  paginationItemClickHandler(ev: CustomEvent): void {\n    const page = ev.detail.page;\n    this.currentPage = page;\n    this.icPageChange.emit({ value: this.currentPage! });\n  }\n\n  /**\n   * Sets the currently displayed page.\n   * @param {number} page The page number to set as the current page\n   */\n  @Method()\n  async setCurrentPage(page: number): Promise<void> {\n    if (typeof page === \"number\" && page > 0 && page <= this.pages) {\n      this.currentPage = page;\n    } else {\n      console.error(\n        \"Current page must be a number greater than zero but less than or equal to the total number of pages\"\n      );\n    }\n  }\n\n  private handleClickFirst = () => {\n    this.currentPage = 1;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  private handleClickPrevious = (): void => {\n    this.currentPage!--;\n    this.icPageChange.emit({ value: this.currentPage! });\n  };\n\n  private handleClickNext = (): void => {\n    this.currentPage!++;\n    this.icPageChange.emit({ value: this.currentPage! });\n  };\n\n  private handleClickLast = (): void => {\n    this.currentPage = this.pages;\n    this.icPageChange.emit({ value: this.currentPage });\n  };\n\n  // button rendering abstracted from component render methods for clarity\n  private firstButton = () => {\n    return (\n      <ic-button\n        id=\"first-page-button\"\n        aria-label=\"Go to first page\"\n        theme={this.theme}\n        onClick={this.handleClickFirst}\n        class=\"page-button first-last\"\n        disabled={this.currentPage === 1 || this.disabled}\n        variant=\"icon-tertiary\"\n        monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n        innerHTML={paginationFirstLast}\n      />\n    );\n  };\n\n  private previousButton = () => {\n    return (\n      <ic-button\n        id=\"previous-page-button\"\n        aria-label=\"Go to previous page\"\n        theme={this.theme}\n        onClick={this.handleClickPrevious}\n        class=\"page-button next-previous flip\"\n        disabled={this.currentPage === 1 || this.disabled}\n        variant=\"icon-tertiary\"\n        monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n        innerHTML={paginationNextPrevious}\n      />\n    );\n  };\n\n  private nextButton = () => {\n    return (\n      <ic-button\n        id=\"next-page-button\"\n        aria-label=\"Go to next page\"\n        theme={this.theme}\n        onClick={this.handleClickNext}\n        class=\"page-button next-previous\"\n        disabled={this.currentPage === this.pages || this.disabled}\n        variant=\"icon-tertiary\"\n        monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n        innerHTML={paginationNextPrevious}\n      />\n    );\n  };\n\n  private lastButton = () => {\n    return (\n      <ic-button\n        id=\"last-page-button\"\n        aria-label=\"Go to last page\"\n        theme={this.theme}\n        onClick={this.handleClickLast}\n        class=\"page-button first-last flip\"\n        disabled={this.currentPage === this.pages || this.disabled}\n        variant=\"icon-tertiary\"\n        monochrome={this.theme == \"light\" || this.theme == \"dark\"}\n        innerHTML={paginationFirstLast}\n      />\n    );\n  };\n\n  private renderStartEllipsis = () => {\n    return (\n      <ic-pagination-item\n        theme={this.theme}\n        monochrome={this.monochrome}\n        type=\"ellipsis\"\n        id=\"start-ellipsis\"\n        disabled={this.disabled}\n      />\n    );\n  };\n\n  private renderEndEllipsis = () => {\n    return (\n      <ic-pagination-item\n        theme={this.theme}\n        monochrome={this.monochrome}\n        type=\"ellipsis\"\n        id=\"end-ellipsis\"\n        disabled={this.disabled}\n      />\n    );\n  };\n\n  private renderStartItems = () => {\n    return this.startItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          theme={this.theme}\n          monochrome={this.monochrome}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  private renderEndItems = () => {\n    return this.endItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          theme={this.theme}\n          monochrome={this.monochrome}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  private renderMiddleItems = () => {\n    return this.midItems.map((page: number) => {\n      return (\n        <ic-pagination-item\n          theme={this.theme}\n          monochrome={this.monochrome}\n          selected={page === this.currentPage}\n          id={`pagination-item-${page}`}\n          type=\"page\"\n          page={page}\n          disabled={this.disabled}\n        />\n      );\n    });\n  };\n\n  render() {\n    const {\n      type,\n      currentPage,\n      hideCurrentPage,\n      disabled,\n      hideFirstAndLastPageButton,\n      label,\n      theme,\n      monochrome,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-pagination-monochrome\"]: !!monochrome,\n        }}\n      >\n        {type === \"simple\" && (\n          <nav\n            class={{\n              [\"disabled\"]: !!disabled,\n            }}\n            role=\"navigation\"\n            aria-label={this.accessibleLabel}\n          >\n            {hideFirstAndLastPageButton ? null : this.firstButton()}\n            {this.previousButton()}\n            <ic-pagination-item\n              theme={this.theme}\n              monochrome={this.monochrome}\n              type=\"simple-current\"\n              page={currentPage}\n              label={label}\n              class={{ [\"hide-current-page\"]: !!hideCurrentPage }}\n              disabled={disabled}\n            />\n            {this.nextButton()}\n            {hideFirstAndLastPageButton ? null : this.lastButton()}\n          </nav>\n        )}\n        {type === \"complex\" && (\n          <nav\n            class={{\n              [\"disabled\"]: !!disabled,\n            }}\n            role=\"navigation\"\n            aria-label={this.accessibleLabel}\n          >\n            {hideFirstAndLastPageButton ? null : this.firstButton()}\n            {this.previousButton()}\n            {this.renderStartItems()}\n            {this.startEllipsis && this.renderStartEllipsis()}\n            {this.renderMiddleItems()}\n            {this.endEllipsis && this.renderEndEllipsis()}\n            {this.renderEndItems()}\n            {this.nextButton()}\n            {hideFirstAndLastPageButton ? null : this.lastButton()}\n          </nav>\n        )}\n        {type === \"complex\" && (\n          <span class=\"sr-only\" aria-live=\"polite\">\n            Page {this.currentPage}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}