@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

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

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as checkResizeObserver } from './helpers.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';
@@ -14,363 +13,380 @@ 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 {
-  constructor() {
-    super();
-    this.__registerHost();
-    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.changePage = (page) => {
-      this.currentPage = page;
-      this.lowerBound =
-        page !== 1 ? (page - 1) * Number(this.itemsPerPage) + 1 : page;
-      this.setUpperBound();
-    };
-    this.goToPage = () => {
-      const input = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
-      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;
-        input.value = "";
-        this.icPageChange.emit({ value: page });
-        tooltip.displayTooltip(false, false);
-        input.validationStatus = "";
-      }
-      else {
-        this.inputError = this.INVALID_PAGE_ERROR;
-        input.validationStatus = "error";
-        input.setFocus();
-      }
-    };
-    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);
-      if ((Number(textField.value) <= this.totalPages &&
-        Number(textField.value) > 0) ||
-        textField.value === "") {
-        textField.validationStatus = "";
-      }
-      tooltip.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);
-      }
-    };
-    this.handleInputChange = () => {
-      const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
-      const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
-      const inputValue = parseInt(textField.value);
-      if (inputValue > this.totalPages || inputValue <= 0) {
-        this.inputError = this.INVALID_PAGE_ERROR;
-        tooltip.displayTooltip(true, true);
-        textField.validationStatus = "error";
-        textField.focus();
-      }
-    };
-    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);
-        }
-        else {
-          this.goToPage();
-        }
-      }
-      else {
-        tooltip.displayTooltip(false, false);
-        textField.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) &&
-        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.paginationShouldWrap = () => {
-      const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
-      if (this.paginationControl === "simple") {
-        if (pagination.clientHeight > 63) {
-          this.paginationWrapped = true;
+    constructor() {
+        super();
+        this.__registerHost();
+        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.changePage = (page) => {
+            this.currentPage = page;
+            this.lowerBound =
+                page !== 1 ? (page - 1) * Number(this.itemsPerPage) + 1 : page;
+            this.setUpperBound();
+        };
+        this.goToPage = () => {
+            const input = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+            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;
+                input.value = "";
+                this.icPageChange.emit({ value: page });
+                tooltip.displayTooltip(false, false);
+                input.validationStatus = "";
+            }
+            else {
+                this.inputError = this.INVALID_PAGE_ERROR;
+                input.validationStatus = "error";
+                input.setFocus();
+            }
+        };
+        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);
+            if ((Number(textField.value) <= this.totalPages &&
+                Number(textField.value) > 0) ||
+                textField.value === "") {
+                textField.validationStatus = "";
+            }
+            tooltip.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);
+            }
+        };
+        this.handleInputChange = () => {
+            const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
+            const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+            const inputValue = parseInt(textField.value);
+            if (inputValue > this.totalPages || inputValue <= 0) {
+                this.inputError = this.INVALID_PAGE_ERROR;
+                tooltip.displayTooltip(true, true);
+                textField.validationStatus = "error";
+                textField.focus();
+            }
+        };
+        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);
+                }
+                else {
+                    this.goToPage();
+                }
+            }
+            else {
+                tooltip.displayTooltip(false, false);
+                textField.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) &&
+                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.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.resizeObserverCallback = (currSize) => {
+            if (currSize - this.paginationWidth > 50 ||
+                currSize - this.paginationWidth < -50) {
+                this.paginationWidth = currSize;
+                this.paginationShouldWrap();
+            }
+        };
+        this.runResizeObserver = () => {
+            this.resizeObserver = new ResizeObserver(() => {
+                const currSize = this.paginationBarEl.clientWidth;
+                this.resizeObserverCallback(currSize);
+            });
+            this.resizeObserver.observe(this.paginationBarEl);
+        };
+        this.setDefaultItemsPerPage = () => {
+            this.itemsPerPage = this.itemsPerPageOptions[0].value;
+        };
+        this.setDefaultItemsPerPageOptions = () => {
+            this.itemsPerPageOptions =
+                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({
+                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));
+                }
+            }
+        };
+        this.currentPage = 1;
+        this.inputError = "Please enter a valid page";
+        this.itemsPerPage = undefined;
+        this.lowerBound = 1;
+        this.paginationWidth = undefined;
+        this.paginationWrapped = false;
+        this.totalPages = undefined;
+        this.upperBound = undefined;
+        this.alignment = "right";
+        this.appearance = "default";
+        this.itemLabel = "Item";
+        this.itemsPerPageOptions = undefined;
+        this.paginationControl = "simple";
+        this.paginationType = "page";
+        this.pageLabel = "Page";
+        this.showGoToPageControl = false;
+        this.showItemsPerPage = true;
+        this.showItemsPerPageControl = false;
+        this.totalItems = undefined;
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver !== null) {
+            this.resizeObserver.disconnect();
         }
-        else {
-          this.paginationWrapped = false;
+    }
+    componentWillLoad() {
+        if (this.itemsPerPageOptions === undefined ||
+            this.itemsPerPageOptions === null) {
+            this.setDefaultItemsPerPageOptions();
         }
-      }
-    };
-    this.resizeObserverCallback = (currSize) => {
-      if (currSize - this.paginationWidth > 50 ||
-        currSize - this.paginationWidth < -50) {
-        this.paginationWidth = currSize;
+        this.trimItemsPerPageOptions();
+        this.setDefaultItemsPerPage();
+        this.setNumberPages();
+        this.setUpperBound();
+    }
+    componentDidLoad() {
+        this.paginationWidth = this.paginationBarEl.clientWidth;
+        checkResizeObserver(this.runResizeObserver);
+        this.setGoToPageInputStyles();
         this.paginationShouldWrap();
-      }
-    };
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
-        const currSize = this.paginationBarEl.clientWidth;
-        this.resizeObserverCallback(currSize);
-      });
-      this.resizeObserver.observe(this.paginationBarEl);
-    };
-    this.setDefaultItemsPerPage = () => {
-      this.itemsPerPage = this.itemsPerPageOptions[0].value;
-    };
-    this.setDefaultItemsPerPageOptions = () => {
-      this.itemsPerPageOptions =
-        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({
-        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));
-        }
-      }
-    };
-    this.currentPage = 1;
-    this.inputError = "Please enter a valid page";
-    this.itemsPerPage = undefined;
-    this.lowerBound = 1;
-    this.paginationWidth = undefined;
-    this.paginationWrapped = false;
-    this.totalPages = undefined;
-    this.upperBound = undefined;
-    this.alignment = "right";
-    this.appearance = "default";
-    this.itemLabel = "Item";
-    this.itemsPerPageOptions = undefined;
-    this.paginationControl = "simple";
-    this.paginationType = "page";
-    this.pageLabel = "Page";
-    this.showGoToPageControl = false;
-    this.showItemsPerPage = true;
-    this.showItemsPerPageControl = false;
-    this.totalItems = undefined;
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
     }
-  }
-  componentWillLoad() {
-    if (this.itemsPerPageOptions === undefined ||
-      this.itemsPerPageOptions === null) {
-      this.setDefaultItemsPerPageOptions();
+    pageChangeHandler(ev) {
+        const page = ev.detail.value;
+        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();
+        };
+        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: {
+                [`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: {
+                ["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"))))));
     }
-    this.trimItemsPerPageOptions();
-    this.setDefaultItemsPerPage();
-    this.setNumberPages();
-    this.setUpperBound();
-  }
-  componentDidLoad() {
-    this.paginationWidth = this.paginationBarEl.clientWidth;
-    checkResizeObserver(this.runResizeObserver);
-    this.setGoToPageInputStyles();
-    this.paginationShouldWrap();
-  }
-  pageChangeHandler(ev) {
-    const page = ev.detail.value;
-    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();
-    };
-    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: {
-        [`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: {
-        ["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", small: true, 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"))))));
-  }
-  get el() { return this; }
-  static get style() { return icPaginationBarCss; }
+    get el() { return this; }
+    static get style() { return icPaginationBarCss; }
 }, [1, "ic-pagination-bar", {
-    "alignment": [1],
-    "appearance": [1],
-    "itemLabel": [1, "item-label"],
-    "itemsPerPageOptions": [1040],
-    "paginationControl": [1, "pagination-control"],
-    "paginationType": [1, "pagination-type"],
-    "pageLabel": [1, "page-label"],
-    "showGoToPageControl": [4, "show-go-to-page-control"],
-    "showItemsPerPage": [4, "show-items-per-page"],
-    "showItemsPerPageControl": [4, "show-items-per-page-control"],
-    "totalItems": [2, "total-items"],
-    "currentPage": [32],
-    "inputError": [32],
-    "itemsPerPage": [32],
-    "lowerBound": [32],
-    "paginationWidth": [32],
-    "paginationWrapped": [32],
-    "totalPages": [32],
-    "upperBound": [32]
-  }, [[0, "icPageChange", "pageChangeHandler"]]]);
+        "alignment": [1],
+        "appearance": [1],
+        "itemLabel": [1, "item-label"],
+        "itemsPerPageOptions": [1040],
+        "paginationControl": [1, "pagination-control"],
+        "paginationType": [1, "pagination-type"],
+        "pageLabel": [1, "page-label"],
+        "showGoToPageControl": [4, "show-go-to-page-control"],
+        "showItemsPerPage": [4, "show-items-per-page"],
+        "showItemsPerPageControl": [4, "show-items-per-page-control"],
+        "totalItems": [2, "total-items"],
+        "currentPage": [32],
+        "inputError": [32],
+        "itemsPerPage": [32],
+        "lowerBound": [32],
+        "paginationWidth": [32],
+        "paginationWrapped": [32],
+        "totalPages": [32],
+        "upperBound": [32]
+    }, [[0, "icPageChange", "pageChangeHandler"]]]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ic-pagination-bar", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ic-pagination-bar":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PaginationBar);
-      }
-      break;
-    case "ic-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "ic-input-component-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "ic-input-container":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "ic-input-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "ic-input-validation":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "ic-loading-indicator":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "ic-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "ic-pagination":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ic-pagination-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ic-select":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ic-text-field":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ic-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "ic-typography":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-pagination-bar", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-pagination-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PaginationBar);
+            }
+            break;
+        case "ic-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ic-input-component-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ic-input-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ic-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ic-input-validation":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ic-loading-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ic-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ic-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ic-pagination-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ic-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ic-text-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ic-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { PaginationBar as P, defineCustomElement as d };