@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

package/dist/components/ic-pagination-bar2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { k as capitalize, h as checkResizeObserver } from './helpers2.js';
 import { d as defineCustomElement$d } from './ic-button2.js';
 import { d as defineCustomElement$c } from './ic-input-component-container2.js';
 import { d as defineCustomElement$b } from './ic-input-container2.js';
@@ -13,23 +14,6 @@ import { d as defineCustomElement$3 } from './ic-text-field2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
-// Build does not recognise this function being passed via @ukic/web-components so it has been added locally
-const checkResizeObserver = (callbackFn) => {
-    if (typeof window !== "undefined" &&
-        typeof window.ResizeObserver !== "undefined") {
-        callbackFn();
-    }
-};
-const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
-({
-    XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
-    S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
-    M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
-    L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
-    XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
-    UNDEFINED: 1200,
-});
-
 const icPaginationBarCss = ":host(){display:block}.pagination-bar{height:3.5rem;display:flex;align-items:center;justify-content:flex-end;gap:var(--ic-space-xl);padding:var(--ic-space-xs) var(--ic-space-md);box-sizing:border-box}.pagination-bar-left{justify-content:flex-start}.item-controls{display:flex;align-items:center;gap:var(--ic-space-xl)}.pagination-bar-space-between .item-controls{margin-right:auto}.items-per-page-holder{display:flex;align-items:center;gap:var(--ic-space-xs)}.items-per-page-input{--input-width:5rem}.pagination-controls{display:flex;align-items:center;gap:var(--ic-space-xl)}.pagination-controls-wrap{flex-direction:column;align-items:flex-end;gap:var(--ic-space-xs)}.pagination-bar-space-between .pagination-controls{margin-left:auto}.go-to-page-holder{display:flex;align-items:center;gap:var(--ic-space-xs)}.go-to-page-input{--input-width:var(--ic-space-xl)}.go-to-page-button{--min-width:var(--ic-space-xl)}.pagination-text-default,.pagination-text-dark,.pagination-text-light{white-space:nowrap}.pagination-text-light{color:var(--ic-color-white-text)}@media screen and (max-width: 768px){.pagination-bar{flex-direction:column;align-items:flex-end;height:-moz-fit-content;height:fit-content;gap:var(--ic-space-xs)}.pagination-bar-left{align-items:flex-start}}@media screen and (max-width: 320px){.item-controls,.pagination-controls{flex-direction:column;align-items:flex-end;gap:var(--ic-space-xs)}.pagination-bar-left .item-controls,.pagination-bar-left .pagination-controls,.pagination-bar-space-between .item-controls,.pagination-bar-space-between .pagination-controls{align-items:flex-start}}";
 
 const PaginationBar = /*@__PURE__*/ proxyCustomElement(class PaginationBar extends HTMLElement {
@@ -39,225 +23,297 @@ const PaginationBar = /*@__PURE__*/ proxyCustomElement(class PaginationBar exten
         this.__attachShadow();
         this.icPageChange = createEvent(this, "icPageChange", 7);
         this.icItemsPerPageChange = createEvent(this, "icItemsPerPageChange", 7);
-        this.PAGINATION = "ic-pagination";
-        this.TEXT_FIELD = "ic-text-field";
-        this.TOOLTIP = "ic-tooltip";
         this.PAGE_INPUT_FIELD_ID = "go-to-page-input";
         this.INVALID_PAGE_ERROR = "Please enter a valid page";
-        this.NAN_ERROR = "Please enter a number";
         this.resizeObserver = null;
         this.changeItemsPerPage = () => {
-            const select = this.el.shadowRoot.querySelector("ic-select");
-            const value = select.value;
-            this.itemsPerPage = value;
-            this.setNumberPages();
-            this.setUpperBound();
-            const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
-            if (this.currentPage > this.totalPages) {
-                pagination.setCurrentPage(this.totalPages);
-                this.currentPage = this.totalPages;
-            }
-            this.icItemsPerPageChange.emit({ value: Number(this.itemsPerPage) });
-            this.icPageChange.emit({ value: this.currentPage });
+            this.setItemsPerPage(Number(this.pageDropdownEl.value));
+            this.userSetItemsPerPage = Number(this.pageDropdownEl.value);
         };
         this.changePage = (page) => {
-            this.currentPage = page;
-            this.lowerBound =
-                page !== 1 ? (page - 1) * Number(this.itemsPerPage) + 1 : page;
+            this.activePage = page;
+            this.lowerBound = page !== 1 ? (page - 1) * this.itemsPerPage + 1 : page;
             this.setUpperBound();
         };
+        this.focusElFromLabel = (el) => {
+            var _a;
+            (_a = this.paginationBarEl.querySelector(el)) === null || _a === void 0 ? void 0 : _a.setFocus();
+        };
         this.goToPage = () => {
-            const input = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+            var _a;
+            const input = this.pageInputEl;
             const page = Number(input.value);
-            const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
             if (page <= this.totalPages && page > 0) {
                 this.changePage(page);
-                const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
-                pagination.setCurrentPage(page);
-                this.currentPage = page;
+                (_a = this.paginationEl) === null || _a === void 0 ? void 0 : _a.setCurrentPage(page);
+                this.activePage = page;
                 input.value = "";
                 this.icPageChange.emit({ value: page });
-                tooltip.displayTooltip(false, false);
+                this.pageInputTooltipEl.displayTooltip(false, false);
                 input.validationStatus = "";
             }
             else {
-                this.inputError = this.INVALID_PAGE_ERROR;
-                input.validationStatus = "error";
-                input.setFocus();
+                this.setInputError(input, this.INVALID_PAGE_ERROR);
             }
         };
+        this.goToPageLabelClickHandler = () => {
+            this.focusElFromLabel("ic-text-field");
+        };
         this.handleBlur = () => {
-            var _a, _b;
-            const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.TEXT_FIELD);
-            const tooltip = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.TOOLTIP);
+            const textField = this.pageInputEl;
             if ((Number(textField.value) <= this.totalPages &&
                 Number(textField.value) > 0) ||
                 textField.value === "") {
                 textField.validationStatus = "";
             }
-            tooltip.displayTooltip(false, false);
+            this.pageInputTooltipEl.displayTooltip(false, false);
         };
         this.handleFocus = () => {
-            var _a, _b;
-            const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.TEXT_FIELD);
-            const tooltip = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.TOOLTIP);
-            if (textField.validationStatus === "error") {
-                tooltip.displayTooltip(true, true);
+            if (this.pageInputEl.validationStatus === "error") {
+                this.pageInputTooltipEl.displayTooltip(true, true);
             }
         };
         this.handleInputChange = () => {
-            const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
-            const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
-            const inputValue = parseInt(textField.value);
+            const inputValue = parseInt(this.pageInputEl.value);
             if (inputValue > this.totalPages || inputValue <= 0) {
-                this.inputError = this.INVALID_PAGE_ERROR;
-                tooltip.displayTooltip(true, true);
-                textField.validationStatus = "error";
-                textField.focus();
+                this.setInputError(this.pageInputEl, this.INVALID_PAGE_ERROR);
+                this.pageInputTooltipEl.displayTooltip(true, true);
             }
         };
         this.handleKeydown = (ev) => {
-            const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
-            const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
             if (ev.key === "Enter") {
-                if (textField.validationStatus === "error") {
-                    tooltip.displayTooltip(true, true);
+                if (this.pageInputEl.validationStatus === "error") {
+                    this.pageInputTooltipEl.displayTooltip(true, true);
                 }
                 else {
                     this.goToPage();
                 }
             }
             else {
-                tooltip.displayTooltip(false, false);
-                textField.validationStatus = "";
+                this.pageInputTooltipEl.displayTooltip(false, false);
+                this.pageInputEl.validationStatus = "";
             }
         };
         this.handleKeyUp = (ev) => {
-            const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
-            const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
-            const inputValue = parseInt(textField.value);
-            if (Number.isNaN(inputValue) &&
+            if (Number.isNaN(parseInt(this.pageInputEl.value)) &&
                 ev.key !== "Backspace" &&
                 ev.key !== "Enter" &&
                 ev.key !== "Tab" &&
                 ev.key !== "Shift") {
-                this.inputError = this.NAN_ERROR;
-                tooltip.displayTooltip(true, false);
-                textField.validationStatus = "error";
+                this.setInputError(this.pageInputEl, "Please enter a number", false);
+                this.pageInputTooltipEl.displayTooltip(true, false);
             }
         };
-        this.paginationShouldWrap = () => {
-            const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
-            if (this.paginationControl === "simple") {
-                if (pagination.clientHeight > 63) {
-                    this.paginationWrapped = true;
-                }
-                else {
-                    this.paginationWrapped = false;
-                }
-            }
+        this.itemsPerPageLabelClickHandler = () => {
+            this.focusElFromLabel("ic-select");
         };
-        this.resizeObserverCallback = (currSize) => {
-            if (currSize - this.paginationWidth > 50 ||
-                currSize - this.paginationWidth < -50) {
-                this.paginationWidth = currSize;
-                this.paginationShouldWrap();
+        this.paginationShouldWrap = () => {
+            if (this.type === "simple") {
+                this.paginationWrapped = this.paginationEl.clientHeight > 63;
             }
         };
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
-                const currSize = this.paginationBarEl.clientWidth;
-                this.resizeObserverCallback(currSize);
+                const { clientWidth } = this.paginationBarEl;
+                if (clientWidth - this.paginationWidth > 50 ||
+                    clientWidth - this.paginationWidth < -50) {
+                    this.paginationWidth = clientWidth;
+                    this.paginationShouldWrap();
+                }
             });
             this.resizeObserver.observe(this.paginationBarEl);
         };
-        this.setDefaultItemsPerPage = () => {
-            this.itemsPerPage = this.itemsPerPageOptions[0].value;
+        this.setInputError = (el, error, focus = true) => {
+            this.inputError = error;
+            el.validationStatus = "error";
+            if (focus)
+                el.setFocus();
         };
-        this.setDefaultItemsPerPageOptions = () => {
-            this.itemsPerPageOptions =
-                this.totalItems <= 100
+        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) => {
+            var _a;
+            if (this.itemsPerPage !== newValue) {
+                this.itemsPerPage = newValue;
+                this.itemsPerPageString = newValue.toString();
+                this.icItemsPerPageChange.emit({ value: this.itemsPerPage });
+                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.setItemsPerPageOptions = () => {
+            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: "All", value: String(this.totalItems) },
                     ]
                     : [
                         { label: "25", value: "25" },
                         { label: "100", value: "100" },
                         { label: "1000", value: "1000" },
-                        { label: "All", value: String(this.totalItems) },
-                    ];
-        };
-        this.setGoToPageInputStyles = () => {
-            var _a, _b;
-            const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${this.PAGE_INPUT_FIELD_ID}`);
-            if (textField !== undefined) {
-                const input = (_b = textField === null || textField === void 0 ? void 0 : textField.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("input");
-                if (input !== undefined) {
-                    input.style.textAlign = "center";
-                    input.style.padding = "0";
-                }
-            }
-        };
-        this.setNumberPages = () => {
-            this.totalPages = Math.ceil(this.totalItems / Number(this.itemsPerPage));
-        };
-        this.setUpperBound = () => {
-            this.upperBound = Math.min(this.lowerBound + Number(this.itemsPerPage) - 1, this.totalItems);
-        };
-        this.trimItemsPerPageOptions = () => {
-            this.itemsPerPageOptions = this.itemsPerPageOptions.slice(0, 3);
-            this.itemsPerPageOptions.push({
+                    ]);
+            this.displayedItemsPerPageOptions = displayedItemsPerPageOptions.filter(({ value }) => this.totalItems >= Number(value));
+            const currentItemsLength = this.displayedItemsPerPageOptions.length;
+            const addAllOption = () => this.displayedItemsPerPageOptions.push({
                 label: "All",
                 value: String(this.totalItems),
             });
-            for (let i = 0; i < this.itemsPerPageOptions.length - 1; i++) {
-                if (this.totalItems <= Number(this.itemsPerPageOptions[i].value)) {
-                    this.itemsPerPageOptions.splice(i, this.itemsPerPageOptions.length - (i + 1));
-                }
+            const lastItemsPerPageEqualsTotalItems = () => Number(this.displayedItemsPerPageOptions[currentItemsLength - 1].value) === this.totalItems;
+            const relabelLastOptionToAll = () => (this.displayedItemsPerPageOptions[currentItemsLength - 1].label = "All");
+            if (currentItemsLength === 0) {
+                addAllOption();
+            }
+            else if (lastItemsPerPageEqualsTotalItems()) {
+                relabelLastOptionToAll();
+            }
+            else if (!this.hideAllFromItemsPerPage) {
+                addAllOption();
             }
         };
-        this.currentPage = 1;
+        this.setPaginationBarContent = () => {
+            this.setItemsPerPageOptions();
+            let lastOptionValue = 0;
+            if (this.userSetItemsPerPage) {
+                this.displayedItemsPerPageOptions.some(({ value }) => {
+                    lastOptionValue = Number(value);
+                    return this.userSetItemsPerPage <= lastOptionValue;
+                });
+                this.setItemsPerPage(lastOptionValue);
+            }
+            else {
+                const updated = this.displayedItemsPerPageOptions.some(({ value }) => {
+                    lastOptionValue = Number(value);
+                    return this.itemsPerPage <= lastOptionValue;
+                });
+                this.setItemsPerPage(updated || (!updated && this.itemsPerPage > lastOptionValue)
+                    ? lastOptionValue
+                    : this.itemsPerPage);
+            }
+        };
+        this.setUpperBound = () => {
+            this.upperBound = Math.min(this.lowerBound + this.itemsPerPage - 1, this.totalItems);
+        };
+        this.capitalizedItemLabel = undefined;
+        this.capitalizedPageLabel = undefined;
+        this.activePage = 1;
+        this.displayedItemsPerPageOptions = undefined;
         this.inputError = "Please enter a valid page";
-        this.itemsPerPage = undefined;
+        this.itemsPerPage = 10;
+        this.itemsPerPageString = "10";
         this.lowerBound = 1;
+        this.lowerCaseItemLabel = undefined;
+        this.lowerCasePageLabel = undefined;
         this.paginationWidth = undefined;
         this.paginationWrapped = false;
         this.totalPages = undefined;
         this.upperBound = undefined;
         this.alignment = "right";
         this.appearance = "default";
+        this.currentPage = 1;
+        this.selectedItemsPerPage = undefined;
+        this.hideAllFromItemsPerPage = false;
         this.itemLabel = "Item";
         this.itemsPerPageOptions = undefined;
-        this.paginationControl = "simple";
-        this.paginationType = "page";
+        this.type = "simple";
+        this.rangeLabelType = "page";
         this.pageLabel = "Page";
         this.showGoToPageControl = false;
-        this.showItemsPerPage = true;
+        this.hideRangeLabel = false;
         this.showItemsPerPageControl = false;
         this.totalItems = undefined;
+        this.setToFirstPageOnPaginationChange = false;
     }
-    disconnectedCallback() {
-        if (this.resizeObserver !== null) {
-            this.resizeObserver.disconnect();
+    watchPageNumberHandler() {
+        this.setPaginationBarContent();
+        if (typeof this.currentPage === "number" && this.currentPage) {
+            if (this.currentPage < 1 ||
+                (this.totalPages && this.currentPage > this.totalPages)) {
+                console.error(`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;
+            }
         }
     }
-    componentWillLoad() {
-        if (this.itemsPerPageOptions === undefined ||
-            this.itemsPerPageOptions === null) {
-            this.setDefaultItemsPerPageOptions();
+    watchSelectedItemsPerPageHandler() {
+        var _a;
+        if (this.selectedItemsPerPage !== null &&
+            this.selectedItemsPerPage !== undefined) {
+            if ((_a = this.displayedItemsPerPageOptions) === null || _a === void 0 ? void 0 : _a.filter((option) => option.value === `${this.selectedItemsPerPage}`).length) {
+                this.setItemsPerPage(this.selectedItemsPerPage);
+            }
+            else {
+                console.error(`The selected items per page option "${this.selectedItemsPerPage}" does not exist`);
+            }
         }
-        this.trimItemsPerPageOptions();
-        this.setDefaultItemsPerPage();
-        this.setNumberPages();
-        this.setUpperBound();
+    }
+    watchHideAllFromItemsPerPageHandler() {
+        this.setPaginationBarContent();
+    }
+    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();
+        this.watchSelectedItemsPerPageHandler();
     }
     componentDidLoad() {
+        var _a, _b;
         this.paginationWidth = this.paginationBarEl.clientWidth;
         checkResizeObserver(this.runResizeObserver);
-        this.setGoToPageInputStyles();
+        const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${this.PAGE_INPUT_FIELD_ID}`);
+        if (textField) {
+            const input = (_b = textField === null || textField === void 0 ? void 0 : textField.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("input");
+            if (input) {
+                input.style.textAlign = "center";
+                input.style.padding = "0";
+            }
+        }
         this.paginationShouldWrap();
     }
     pageChangeHandler(ev) {
@@ -265,51 +321,78 @@ const PaginationBar = /*@__PURE__*/ proxyCustomElement(class PaginationBar exten
         this.changePage(page);
     }
     render() {
-        const { appearance, alignment, itemsPerPageOptions, PAGE_INPUT_FIELD_ID, paginationControl, paginationType, showItemsPerPage, showItemsPerPageControl, showGoToPageControl, } = this;
-        const focusElFromLabel = (el) => {
-            var _a;
-            (_a = this.paginationBarEl.querySelector(el)) === null || _a === void 0 ? void 0 : _a.setFocus();
-        };
+        const { appearance, alignment, displayedItemsPerPageOptions, PAGE_INPUT_FIELD_ID, type, rangeLabelType, hideRangeLabel, showItemsPerPageControl, showGoToPageControl, pageLabel, capitalizedPageLabel, lowerCasePageLabel, capitalizedItemLabel, lowerCaseItemLabel, totalPages, activePage, itemsPerPageString, } = this;
         return (h("div", { class: {
                 ["pagination-bar"]: true,
                 [`pagination-bar-${alignment}`]: true,
-            }, ref: (el) => (this.paginationBarEl = el) }, (showItemsPerPage || showItemsPerPageControl) && (h("div", { class: "item-controls" }, showItemsPerPageControl && (h("div", { class: "items-per-page-holder" }, h("ic-typography", { class: {
+            }, ref: (el) => (this.paginationBarEl = el) }, (!hideRangeLabel || showItemsPerPageControl) && (h("div", { class: "item-controls" }, showItemsPerPageControl && (h("div", { class: "items-per-page-holder" }, h("ic-typography", { class: {
                 [`pagination-text-${appearance}`]: true,
                 ["items-per-page-control-label"]: true,
-            }, variant: "label", onClick: () => focusElFromLabel("ic-select") }, this.itemLabel, "s per ", this.pageLabel.toLowerCase()), h("ic-select", { small: true, label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: itemsPerPageOptions, value: this.itemsPerPage, onIcChange: () => this.changeItemsPerPage() }))), showItemsPerPage && paginationType === "data" ? (h("ic-typography", { class: {
-                [`pagination-text-${appearance}`]: true,
-                ["item-pagination-label"]: true,
-            }, variant: "label", "aria-live": "polite" }, this.lowerBound, " - ", this.upperBound, " of ", this.totalItems, " ", this.itemLabel.toLowerCase(), this.totalItems > 1 ? "s" : "")) : (showItemsPerPage && (h("ic-typography", { class: {
-                [`pagination-text-${appearance}`]: true,
-                ["page-pagination-label"]: true,
-            }, variant: "label", "aria-live": "polite" }, this.pageLabel, " ", this.currentPage, " of ", this.totalPages))))), h("div", { class: {
+            }, variant: "label", onClick: this.itemsPerPageLabelClickHandler }, capitalizedItemLabel, "s per ", lowerCasePageLabel), h("ic-select", { small: true, label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: displayedItemsPerPageOptions, value: itemsPerPageString, onIcChange: this.changeItemsPerPage, ref: (el) => (this.pageDropdownEl = el) }))), !hideRangeLabel &&
+            (rangeLabelType === "data" ? (h("ic-typography", { class: {
+                    [`pagination-text-${appearance}`]: true,
+                    ["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: {
+                    [`pagination-text-${appearance}`]: true,
+                    ["page-pagination-label"]: true,
+                }, variant: "label", "aria-live": "polite" }, capitalizedPageLabel, " ", activePage, " of ", totalPages))))), h("div", { class: {
                 ["pagination-controls"]: true,
                 ["pagination-controls-wrap"]: this.paginationWrapped,
-            } }, h("div", { class: "pagination-holder" }, h("ic-pagination", { appearance: appearance, type: paginationControl, pages: this.totalPages })), showGoToPageControl && (h("div", { class: "go-to-page-holder" }, h("ic-typography", { class: { [`pagination-text-${appearance}`]: true }, variant: "label", onClick: () => focusElFromLabel("ic-text-field") }, "Go to ", this.pageLabel.toLowerCase()), h("ic-tooltip", { label: this.inputError, target: `#${PAGE_INPUT_FIELD_ID}`, disableHover: true, disableClick: true }, h("ic-text-field", { type: "number", size: "small", label: PAGE_INPUT_FIELD_ID, class: PAGE_INPUT_FIELD_ID, id: PAGE_INPUT_FIELD_ID, hideLabel: true, onKeyDown: (ev) => this.handleKeydown(ev), onKeyUp: (ev) => this.handleKeyUp(ev), onInput: () => this.handleInputChange(), max: this.totalPages, min: "1", validationInlineInternal: true, onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus() })), h("ic-button", { appearance: appearance, variant: "secondary", onClick: () => this.goToPage(), size: "small", class: "go-to-page-button" }, "Go"))))));
+            } }, h("div", { class: "pagination-holder" }, h("ic-pagination", { appearance: appearance, type: type, pages: totalPages, label: pageLabel, ref: (el) => (this.paginationEl = el), currentPage: activePage })), showGoToPageControl && (h("div", { class: "go-to-page-holder" }, h("ic-typography", { class: { [`pagination-text-${appearance}`]: true }, variant: "label", onClick: this.goToPageLabelClickHandler }, "Go to ", lowerCasePageLabel), h("ic-tooltip", { label: this.inputError, target: `#${PAGE_INPUT_FIELD_ID}`, disableHover: true, disableClick: true, ref: (el) => (this.pageInputTooltipEl = el) }, h("ic-text-field", { 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", { appearance: appearance, variant: "secondary", onClick: this.goToPage, size: "small", class: "go-to-page-button" }, "Go"))))));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "currentPage": ["watchPageNumberHandler"],
+        "selectedItemsPerPage": ["watchSelectedItemsPerPageHandler"],
+        "hideAllFromItemsPerPage": ["watchHideAllFromItemsPerPageHandler"],
+        "itemLabel": ["watchItemLabelHandler"],
+        "itemsPerPageOptions": ["watchItemsPerPageOptionsHandler"],
+        "pageLabel": ["watchPageLabelHandler"],
+        "totalItems": ["watchTotalItemsHandler"],
+        "setToFirstPageOnPaginationChange": ["watchSetToFirstPageOnPaginationChange"]
+    }; }
     static get style() { return icPaginationBarCss; }
 }, [1, "ic-pagination-bar", {
         "alignment": [1],
         "appearance": [1],
+        "currentPage": [2, "current-page"],
+        "selectedItemsPerPage": [2, "selected-items-per-page"],
+        "hideAllFromItemsPerPage": [4, "hide-all-from-items-per-page"],
         "itemLabel": [1, "item-label"],
-        "itemsPerPageOptions": [1040],
-        "paginationControl": [1, "pagination-control"],
-        "paginationType": [1, "pagination-type"],
+        "itemsPerPageOptions": [16],
+        "type": [1],
+        "rangeLabelType": [1, "range-label-type"],
         "pageLabel": [1, "page-label"],
         "showGoToPageControl": [4, "show-go-to-page-control"],
-        "showItemsPerPage": [4, "show-items-per-page"],
+        "hideRangeLabel": [4, "hide-range-label"],
         "showItemsPerPageControl": [4, "show-items-per-page-control"],
         "totalItems": [2, "total-items"],
-        "currentPage": [32],
+        "setToFirstPageOnPaginationChange": [4, "set-to-first-page-on-pagination-change"],
+        "capitalizedItemLabel": [32],
+        "capitalizedPageLabel": [32],
+        "activePage": [32],
+        "displayedItemsPerPageOptions": [32],
         "inputError": [32],
         "itemsPerPage": [32],
+        "itemsPerPageString": [32],
         "lowerBound": [32],
+        "lowerCaseItemLabel": [32],
+        "lowerCasePageLabel": [32],
         "paginationWidth": [32],
         "paginationWrapped": [32],
         "totalPages": [32],
         "upperBound": [32]
-    }, [[0, "icPageChange", "pageChangeHandler"]]]);
+    }, [[0, "icPageChange", "pageChangeHandler"]], {
+        "currentPage": ["watchPageNumberHandler"],
+        "selectedItemsPerPage": ["watchSelectedItemsPerPageHandler"],
+        "hideAllFromItemsPerPage": ["watchHideAllFromItemsPerPageHandler"],
+        "itemLabel": ["watchItemLabelHandler"],
+        "itemsPerPageOptions": ["watchItemsPerPageOptionsHandler"],
+        "pageLabel": ["watchPageLabelHandler"],
+        "totalItems": ["watchTotalItemsHandler"],
+        "setToFirstPageOnPaginationChange": ["watchSetToFirstPageOnPaginationChange"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;