@ukic/web-components 3.20.0 → 3.22.0

package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js

@@ -0,0 +1,895 @@
+import { h, Host, } from "@stencil/core";
+import { capitalize, checkResizeObserver } from "../../utils/helpers";
+export class PaginationBar {
+    constructor() {
+        this.PAGE_INPUT_FIELD_ID = "go-to-page-input";
+        this.INVALID_PAGE_ERROR = "Please enter a valid page";
+        this.resizeObserver = null;
+        this.activePage = 1;
+        this.inputError = "Please enter a valid page";
+        this.itemsPerPage = 10;
+        this.itemsPerPageString = "10";
+        this.lowerBound = 1;
+        this.paginationWrapped = false;
+        /**
+         * The accessible label passed down to the pagination component to provide context for screen reader users.
+         */
+        this.accessibleLabel = "Pagination Navigation";
+        /**
+         * Sets the alignment of the items in the pagination bar.
+         */
+        this.alignment = "right";
+        /**
+         * The current page number to be displayed on the pagination bar.
+         */
+        this.currentPage = 1;
+        /**
+         * If `true`, the 'All' option will be hidden from the 'items per page' select input.
+         */
+        this.hideAllFromItemsPerPage = 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 text which will be used in place of 'Item' on the pagination bar.
+         */
+        this.itemLabel = "Item";
+        /**
+         * If `true`, the pagination bar 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";
+        /**
+         * Whether the displayed pagination is simple or complex.
+         */
+        this.type = "simple";
+        /**
+         * Whether total number of items and current item range or total number of pages and current page is displayed.
+         */
+        this.rangeLabelType = "page";
+        /**
+         * The text which will be used in place of 'Page' on the pagination bar.
+         */
+        this.pageLabel = "Page";
+        /**
+         * If `true`, the 'go to page' control should be displayed.
+         */
+        this.showGoToPageControl = false;
+        /**
+         * If `true`, the number of total items and current item range or number of total pages and current page will be hidden.
+         */
+        this.hideRangeLabel = false;
+        /**
+         * If `false`, the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed.
+         */
+        this.selectItemsPerPageOnEnter = true;
+        /**
+         * If `true`, the select input to control 'items per page' should be displayed.
+         */
+        this.showItemsPerPageControl = false;
+        /**
+         If `true`, the pagination bar is set to the first page when the 'items per page' changes
+         */
+        this.setToFirstPageOnPaginationChange = false;
+        this.setSelectedItemsPerPage = (selectedItemsPerPage, displayedItemsPerPageOptions = []) => {
+            const isSelectedItemsPerPagePresent = displayedItemsPerPageOptions === null || displayedItemsPerPageOptions === void 0 ? void 0 : displayedItemsPerPageOptions.some(({ value }) => { var _a; return value === ((_a = this.selectedItemsPerPage) === null || _a === void 0 ? void 0 : _a.toString()); });
+            if (isSelectedItemsPerPagePresent) {
+                this.setItemsPerPage(selectedItemsPerPage, false);
+            }
+            else {
+                console.error(`The selected items per page option "${this.selectedItemsPerPage}" does not exist`);
+                this.setItemsPerPage(+this.totalItems, false);
+            }
+        };
+        this.changeItemsPerPage = () => {
+            this.setItemsPerPage(Number(this.pageDropdownEl.value));
+            this.userSetItemsPerPage = Number(this.pageDropdownEl.value);
+        };
+        this.changePage = (page) => {
+            this.activePage = page;
+            this.lowerBound = page !== 1 ? (page - 1) * this.itemsPerPage + 1 : page;
+            this.setUpperBound();
+        };
+        this.focusElFromLabel = (el) => {
+            var _a, _b;
+            (_b = (_a = this.paginationBarEl) === null || _a === void 0 ? void 0 : _a.querySelector(el)) === null || _b === void 0 ? void 0 : _b.setFocus();
+        };
+        this.goToPage = () => {
+            var _a;
+            const input = this.pageInputEl;
+            const page = Number(input.value);
+            if (page <= this.totalPages && page > 0) {
+                this.changePage(page);
+                (_a = this.paginationEl) === null || _a === void 0 ? void 0 : _a.setCurrentPage(page);
+                this.activePage = page;
+                input.value = "";
+                this.icPageChange.emit({ value: page });
+                this.pageInputTooltipEl.displayTooltip(false, false);
+                input.validationStatus = "";
+            }
+            else {
+                this.setInputError(input, this.INVALID_PAGE_ERROR);
+            }
+        };
+        this.goToPageLabelClickHandler = () => {
+            this.focusElFromLabel("ic-text-field");
+        };
+        this.handleBlur = () => {
+            const textField = this.pageInputEl;
+            if ((Number(textField.value) <= this.totalPages &&
+                Number(textField.value) > 0) ||
+                textField.value === "") {
+                textField.validationStatus = "";
+            }
+            this.pageInputTooltipEl.displayTooltip(false, false);
+        };
+        this.handleFocus = () => {
+            if (this.pageInputEl.validationStatus === "error") {
+                this.pageInputTooltipEl.displayTooltip(true, true);
+            }
+        };
+        this.handleInputChange = () => {
+            const inputValue = parseInt(this.pageInputEl.value);
+            if (inputValue > this.totalPages || inputValue <= 0) {
+                this.setInputError(this.pageInputEl, this.INVALID_PAGE_ERROR);
+                this.pageInputTooltipEl.displayTooltip(true, true);
+            }
+        };
+        this.handleKeydown = (ev) => {
+            if (ev.key === "Enter") {
+                if (this.pageInputEl.validationStatus === "error") {
+                    this.pageInputTooltipEl.displayTooltip(true, true);
+                }
+                else {
+                    this.goToPage();
+                }
+            }
+            else {
+                this.pageInputTooltipEl.displayTooltip(false, false);
+                this.pageInputEl.validationStatus = "";
+            }
+        };
+        this.handleKeyUp = (ev) => {
+            if (Number.isNaN(parseInt(this.pageInputEl.value)) &&
+                ev.key !== "Backspace" &&
+                ev.key !== "Enter" &&
+                ev.key !== "Tab" &&
+                ev.key !== "Shift") {
+                this.setInputError(this.pageInputEl, "Please enter a number", false);
+                this.pageInputTooltipEl.displayTooltip(true, false);
+            }
+        };
+        this.itemsPerPageLabelClickHandler = () => {
+            this.focusElFromLabel("ic-select");
+        };
+        this.paginationShouldWrap = () => {
+            if (this.type === "simple") {
+                this.paginationWrapped = this.paginationEl.clientHeight > 63;
+            }
+        };
+        this.runResizeObserver = () => {
+            if (this.paginationBarEl) {
+                this.resizeObserver = new ResizeObserver(() => {
+                    const { clientWidth } = this.paginationBarEl;
+                    if (clientWidth - this.paginationWidth > 50 ||
+                        clientWidth - this.paginationWidth < -50) {
+                        this.paginationWidth = clientWidth;
+                        this.paginationShouldWrap();
+                    }
+                });
+                this.resizeObserver.observe(this.paginationBarEl);
+            }
+        };
+        this.setInputError = (el, error, focus = true) => {
+            this.inputError = error;
+            el.validationStatus = "error";
+            if (focus)
+                el.setFocus();
+        };
+        this.setToFirstPage = () => {
+            var _a;
+            const firstPage = 1;
+            this.changePage(firstPage);
+            (_a = this.paginationEl) === null || _a === void 0 ? void 0 : _a.setCurrentPage(firstPage);
+            this.activePage = firstPage;
+            this.icPageChange.emit({ value: firstPage });
+        };
+        this.setItemsPerPage = (newValue, isUserAction = true) => {
+            var _a;
+            if (this.itemsPerPage !== newValue) {
+                this.itemsPerPage = newValue;
+                this.itemsPerPageString = newValue.toString();
+                this.icItemsPerPageChange.emit({
+                    value: this.itemsPerPage,
+                    isUserAction,
+                });
+                if (this.setToFirstPageOnPaginationChange) {
+                    this.setToFirstPage();
+                }
+            }
+            this.totalPages =
+                this.totalItems > this.itemsPerPage
+                    ? Math.ceil(this.totalItems / this.itemsPerPage)
+                    : 1;
+            this.setUpperBound();
+            if (this.activePage > this.totalPages) {
+                (_a = this.paginationEl) === null || _a === void 0 ? void 0 : _a.setCurrentPage(this.totalPages);
+                this.activePage = this.totalPages;
+            }
+            this.icPageChange.emit({ value: this.activePage, fromItemsPerPage: true });
+        };
+        this.setPaginationBarContent = () => {
+            const clonedItemsPerPageOptions = this.itemsPerPageOptions
+                ? JSON.parse(JSON.stringify(this.itemsPerPageOptions))
+                : null;
+            const displayedItemsPerPageOptions = clonedItemsPerPageOptions ||
+                (this.totalItems <= 100
+                    ? [
+                        { label: "10", value: "10" },
+                        { label: "25", value: "25" },
+                        { label: "50", value: "50" },
+                    ]
+                    : [
+                        { label: "25", value: "25" },
+                        { label: "100", value: "100" },
+                        { label: "1000", value: "1000" },
+                    ]);
+            !this.hideAllFromItemsPerPage &&
+                displayedItemsPerPageOptions.push({
+                    label: "All",
+                    value: String(this.totalItems),
+                });
+            this.displayedItemsPerPageOptions = displayedItemsPerPageOptions.filter(({ value }) => this.totalItems >= Number(value));
+            let lastOptionValue = 0;
+            if (this.userSetItemsPerPage) {
+                this.displayedItemsPerPageOptions.some(({ value }) => {
+                    lastOptionValue = Number(value);
+                    return this.userSetItemsPerPage <= lastOptionValue;
+                });
+                this.setItemsPerPage(lastOptionValue);
+            }
+            else {
+                if (this.selectedItemsPerPage !== null &&
+                    this.selectedItemsPerPage !== undefined) {
+                    this.setSelectedItemsPerPage(this.selectedItemsPerPage, this.displayedItemsPerPageOptions);
+                }
+                else {
+                    const updated = this.displayedItemsPerPageOptions.some(({ value }) => {
+                        lastOptionValue = Number(value);
+                        return this.itemsPerPage <= lastOptionValue;
+                    });
+                    this.setItemsPerPage(updated || (!updated && this.itemsPerPage > lastOptionValue)
+                        ? lastOptionValue
+                        : this.itemsPerPage, false);
+                }
+            }
+        };
+        this.setUpperBound = () => {
+            this.upperBound = Math.min(this.lowerBound + this.itemsPerPage - 1, this.totalItems);
+        };
+    }
+    watchPageNumberHandler() {
+        this.setPaginationBarContent();
+        if (typeof this.currentPage === "number" && this.currentPage) {
+            if (this.currentPage < 1 ||
+                (this.totalPages && this.currentPage > this.totalPages)) {
+                console.warn(`The current page (${this.currentPage}) must be a number greater than zero but less than or equal to the total number of pages (${this.totalPages})`);
+            }
+            else {
+                this.activePage = this.currentPage;
+            }
+        }
+    }
+    watchSelectedItemsPerPageHandler() {
+        if (this.selectedItemsPerPage !== null &&
+            this.selectedItemsPerPage !== undefined) {
+            this.setSelectedItemsPerPage(this.selectedItemsPerPage, this.displayedItemsPerPageOptions);
+        }
+    }
+    watchItemLabelHandler() {
+        this.capitalizedItemLabel = capitalize(this.itemLabel);
+        this.lowerCaseItemLabel = this.itemLabel.toLowerCase();
+    }
+    watchItemsPerPageOptionsHandler(newVal, oldVal) {
+        if (JSON.stringify(newVal) === JSON.stringify(oldVal))
+            return;
+        this.setPaginationBarContent();
+    }
+    watchPageLabelHandler() {
+        this.capitalizedPageLabel = capitalize(this.pageLabel);
+        this.lowerCasePageLabel = this.pageLabel.toLowerCase();
+    }
+    watchTotalItemsHandler() {
+        this.setPaginationBarContent();
+    }
+    watchSetToFirstPageOnPaginationChange() {
+        this.setPaginationBarContent();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentWillLoad() {
+        this.watchPageNumberHandler();
+        this.watchPageLabelHandler();
+        this.watchItemLabelHandler();
+        this.setPaginationBarContent();
+    }
+    componentDidLoad() {
+        var _a, _b, _c;
+        this.paginationWidth = ((_a = this.paginationBarEl) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        checkResizeObserver(this.runResizeObserver);
+        const textField = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.${this.PAGE_INPUT_FIELD_ID}`);
+        if (textField) {
+            const input = (_c = textField === null || textField === void 0 ? void 0 : textField.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("input");
+            if (input) {
+                input.style.textAlign = "center";
+                input.style.padding = "0";
+            }
+        }
+        this.paginationShouldWrap();
+    }
+    pageChangeHandler(ev) {
+        const page = ev.detail.value;
+        this.changePage(page);
+    }
+    render() {
+        const { accessibleLabel, alignment, displayedItemsPerPageOptions, PAGE_INPUT_FIELD_ID, type, rangeLabelType, hideRangeLabel, showItemsPerPageControl, showGoToPageControl, pageLabel, capitalizedPageLabel, lowerCasePageLabel, capitalizedItemLabel, lowerCaseItemLabel, totalPages, activePage, itemsPerPageString, theme, monochrome, selectItemsPerPageOnEnter, hideCurrentPage, hideFirstAndLastPageButton, } = this;
+        return (h(Host, { key: 'c11938d14250e5435166136014565a78c8fbe1b0', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '14cef9faa92a11d48b0f569524f69a75924fcea5', class: {
+                ["pagination-bar"]: true,
+                [`pagination-bar-${alignment}`]: true,
+            }, ref: (el) => (this.paginationBarEl = el) }, (!hideRangeLabel || showItemsPerPageControl) && (h("div", { key: 'ce45782788e8a0fa10c1c4be4c88dd66238abc0d', class: "item-controls" }, showItemsPerPageControl && (h("div", { key: '988fd5587d581f707c859b116c0523a09b1fc629', class: "items-per-page-holder" }, h("ic-typography", { key: '78062c53ca82dcc53fa6de6da987284760a75411', class: {
+                ["items-per-page-control-label"]: true,
+            }, variant: "label", onClick: this.itemsPerPageLabelClickHandler }, capitalizedItemLabel, "s per ", lowerCasePageLabel), h("ic-select", { key: '5f661cc9f2aa0f691d2e099d34531651acfd4623', theme: theme, size: "small", label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: displayedItemsPerPageOptions, selectOnEnter: selectItemsPerPageOnEnter, value: itemsPerPageString, onIcChange: this.changeItemsPerPage, ref: (el) => (this.pageDropdownEl = el) }))), !hideRangeLabel &&
+            (rangeLabelType === "data" ? (h("ic-typography", { class: {
+                    ["item-pagination-label"]: true,
+                }, variant: "label", "aria-live": "polite" }, this.upperBound === 0 && `0 ${lowerCaseItemLabel}s`, this.upperBound > 0 &&
+                `${this.lowerBound} - ${this.upperBound} of ${this.totalItems} ${lowerCaseItemLabel}${this.totalItems > 1 ? "s" : ""}`)) : (h("ic-typography", { class: {
+                    ["page-pagination-label"]: true,
+                }, variant: "label", "aria-live": "polite" }, capitalizedPageLabel, " ", activePage, " of ", totalPages))))), h("div", { key: '2fe098d17de85749fb85b9da97e821c1102e30d5', class: {
+                ["pagination-controls"]: true,
+                ["pagination-controls-wrap"]: this.paginationWrapped,
+            } }, h("div", { key: '2df84c3e3e46f8915c3cc223343af2d628025f9f', class: "pagination-holder" }, h("ic-pagination", { key: 'ad3217739a5828cbd6e438692ca5a987eab25d51', accessibleLabel: accessibleLabel, type: type, pages: totalPages, label: pageLabel, ref: (el) => (this.paginationEl = el), currentPage: activePage, theme: theme, monochrome: monochrome, hideCurrentPage: hideCurrentPage, hideFirstAndLastPageButton: hideFirstAndLastPageButton })), showGoToPageControl && (h("div", { key: '107a7b12ce7d9dd3f3ea2b62bd43c5556dfc2145', class: "go-to-page-holder" }, h("ic-typography", { key: '6042313933f74fa385a6cd5244eb32f650b3efe6', variant: "label", onClick: this.goToPageLabelClickHandler }, "Go to ", lowerCasePageLabel), h("ic-tooltip", { key: '2667de79e971e45b48b17f6479f17c34b94b9630', label: this.inputError, target: `#${PAGE_INPUT_FIELD_ID}`, disableHover: true, disableClick: true, ref: (el) => (this.pageInputTooltipEl = el) }, h("ic-text-field", { key: 'd0039eb822e6bc06d9e9c35c24c962017fffc818', theme: theme, type: "number", size: "small", label: PAGE_INPUT_FIELD_ID, class: PAGE_INPUT_FIELD_ID, id: PAGE_INPUT_FIELD_ID, hideLabel: true, onKeyDown: this.handleKeydown, onKeyUp: this.handleKeyUp, onInput: this.handleInputChange, max: totalPages, min: "1", validationInlineInternal: true, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: (el) => (this.pageInputEl = el) })), h("ic-button", { key: 'a5159ea7b8994d71d04a13e4e7dd2f778b9e6e63', variant: "secondary", onClick: this.goToPage, size: "small", class: "go-to-page-button" }, "Go")))))));
+    }
+    static get is() { return "ic-pagination-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-pagination-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-pagination-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The accessible label passed down to the pagination component to provide context for screen reader users."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "accessible-label",
+                "reflect": false,
+                "defaultValue": "\"Pagination Navigation\""
+            },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcPaginationAlignmentOptions",
+                    "resolved": "\"left\" | \"right\" | \"space-between\" | undefined",
+                    "references": {
+                        "IcPaginationAlignmentOptions": {
+                            "location": "import",
+                            "path": "../ic-pagination/ic-pagination.types",
+                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationAlignmentOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the alignment of the items in the pagination bar."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "alignment",
+                "reflect": false,
+                "defaultValue": "\"right\""
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current page number to be displayed on the pagination bar."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "current-page",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "selectedItemsPerPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The items per page option to be selected."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selected-items-per-page",
+                "reflect": false
+            },
+            "hideAllFromItemsPerPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the 'All' option will be hidden from the 'items per page' select input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-all-from-items-per-page",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideCurrentPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the current page of the simple pagination will not be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-current-page",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideFirstAndLastPageButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the first and last page buttons will not be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-first-and-last-page-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "itemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text which will be used in place of 'Item' on the pagination bar."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "item-label",
+                "reflect": false,
+                "defaultValue": "\"Item\""
+            },
+            "itemsPerPageOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    label: string;\n    value: string;\n  }[]",
+                    "resolved": "undefined | { label: string; value: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The options which will be displayed for 'items per page' select input."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the pagination bar will display as black in the light theme, and white in dark theme."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcPaginationTypes",
+                    "resolved": "\"complex\" | \"simple\" | undefined",
+                    "references": {
+                        "IcPaginationTypes": {
+                            "location": "import",
+                            "path": "../ic-pagination/ic-pagination.types",
+                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the displayed pagination is simple or complex."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "\"simple\""
+            },
+            "rangeLabelType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcPaginationLabelTypes",
+                    "resolved": "\"data\" | \"page\" | undefined",
+                    "references": {
+                        "IcPaginationLabelTypes": {
+                            "location": "import",
+                            "path": "../ic-pagination/ic-pagination.types",
+                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationLabelTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether total number of items and current item range or total number of pages and current page is displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "range-label-type",
+                "reflect": false,
+                "defaultValue": "\"page\""
+            },
+            "pageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text which will be used in place of 'Page' on the pagination bar."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "page-label",
+                "reflect": false,
+                "defaultValue": "\"Page\""
+            },
+            "showGoToPageControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the 'go to page' control should be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-go-to-page-control",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideRangeLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the number of total items and current item range or number of total pages and current page will be hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-range-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selectItemsPerPageOnEnter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `false`, the value in the items per page control will be set immediately on ArrowUp and ArrowDown instead of when Enter is pressed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-items-per-page-on-enter",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showItemsPerPageControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the select input to control 'items per page' should be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-items-per-page-control",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "totalItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of items to be displayed across all pages."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "total-items",
+                "reflect": false
+            },
+            "setToFirstPageOnPaginationChange": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the pagination bar is set to the first page when the 'items per page' changes"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "set-to-first-page-on-pagination-change",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "capitalizedItemLabel": {},
+            "capitalizedPageLabel": {},
+            "activePage": {},
+            "displayedItemsPerPageOptions": {},
+            "inputError": {},
+            "itemsPerPage": {},
+            "itemsPerPageString": {},
+            "lowerBound": {},
+            "lowerCaseItemLabel": {},
+            "lowerCasePageLabel": {},
+            "paginationWidth": {},
+            "paginationWrapped": {},
+            "totalPages": {},
+            "upperBound": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "icPageChange",
+                "name": "icPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a page is navigated to via the 'go to' input.\nThe `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring."
+                },
+                "complexType": {
+                    "original": "IcPageChangeEventDetail",
+                    "resolved": "IcPageChangeEventDetail",
+                    "references": {
+                        "IcPageChangeEventDetail": {
+                            "location": "import",
+                            "path": "./ic-pagination-bar.types",
+                            "id": "src/components/ic-pagination-bar/ic-pagination-bar.types.ts::IcPageChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "icItemsPerPageChange",
+                "name": "icItemsPerPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the items per page option is changed."
+                },
+                "complexType": {
+                    "original": "IcItemsPerPageChangeEventDetail",
+                    "resolved": "IcItemsPerPageChangeEventDetail",
+                    "references": {
+                        "IcItemsPerPageChangeEventDetail": {
+                            "location": "import",
+                            "path": "./ic-pagination-bar.types",
+                            "id": "src/components/ic-pagination-bar/ic-pagination-bar.types.ts::IcItemsPerPageChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "watchPageNumberHandler"
+            }, {
+                "propName": "selectedItemsPerPage",
+                "methodName": "watchSelectedItemsPerPageHandler"
+            }, {
+                "propName": "itemLabel",
+                "methodName": "watchItemLabelHandler"
+            }, {
+                "propName": "itemsPerPageOptions",
+                "methodName": "watchItemsPerPageOptionsHandler"
+            }, {
+                "propName": "pageLabel",
+                "methodName": "watchPageLabelHandler"
+            }, {
+                "propName": "totalItems",
+                "methodName": "watchTotalItemsHandler"
+            }, {
+                "propName": "setToFirstPageOnPaginationChange",
+                "methodName": "watchSetToFirstPageOnPaginationChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "icPageChange",
+                "method": "pageChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=ic-pagination-bar.js.map