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

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

@@ -1,543 +1,543 @@
 import { h, } from "@stencil/core";
 import { checkResizeObserver } from "../../utils/helpers";
 export class PaginationBar {
-  constructor() {
-    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();
-    }
-  }
-  componentWillLoad() {
-    if (this.itemsPerPageOptions === undefined ||
-      this.itemsPerPageOptions === null) {
-      this.setDefaultItemsPerPageOptions();
-    }
-    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"))))));
-  }
-  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 {
-      "alignment": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcPaginationAlignmentOptions",
-          "resolved": "\"left\" | \"right\" | \"space-between\"",
-          "references": {
-            "IcPaginationAlignmentOptions": {
-              "location": "import",
-              "path": "../ic-pagination/ic-pagination.types",
-              "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationAlignmentOptions"
+    constructor() {
+        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;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Sets the alignment of the items in the pagination bar."
-        },
-        "attribute": "alignment",
-        "reflect": false,
-        "defaultValue": "\"right\""
-      },
-      "appearance": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcThemeForeground",
-          "resolved": "\"dark\" | \"default\" | \"light\"",
-          "references": {
-            "IcThemeForeground": {
-              "location": "import",
-              "path": "../../interface",
-              "id": "src/interface.d.ts::IcThemeForeground"
+            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 = "";
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Sets the styling for the items in the pagination bar."
-        },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "itemLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The label which will be used in place of 'items' if paginationType is data. Should be capitalised."
-        },
-        "attribute": "item-label",
-        "reflect": false,
-        "defaultValue": "\"Item\""
-      },
-      "itemsPerPageOptions": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "{\n    label: string;\n    value: string;\n  }[]",
-          "resolved": "{ label: string; value: string; }[]",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items."
-        }
-      },
-      "paginationControl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcPaginationControlTypes",
-          "resolved": "\"complex\" | \"simple\"",
-          "references": {
-            "IcPaginationControlTypes": {
-              "location": "import",
-              "path": "../ic-pagination/ic-pagination.types",
-              "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationControlTypes"
+            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;
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the displayed pagination is simple or complex."
-        },
-        "attribute": "pagination-control",
-        "reflect": false,
-        "defaultValue": "\"simple\""
-      },
-      "paginationType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcPaginationTypes",
-          "resolved": "\"data\" | \"page\"",
-          "references": {
-            "IcPaginationTypes": {
-              "location": "import",
-              "path": "../ic-pagination/ic-pagination.types",
-              "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationTypes"
+        };
+        this.resizeObserverCallback = (currSize) => {
+            if (currSize - this.paginationWidth > 50 ||
+                currSize - this.paginationWidth < -50) {
+                this.paginationWidth = currSize;
+                this.paginationShouldWrap();
             }
-          }
-        },
-        "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."
-        },
-        "attribute": "pagination-type",
-        "reflect": false,
-        "defaultValue": "\"page\""
-      },
-      "pageLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The label which will be used in place of 'Page' if paginationType is page. Should be capitalised."
-        },
-        "attribute": "page-label",
-        "reflect": false,
-        "defaultValue": "\"Page\""
-      },
-      "showGoToPageControl": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the 'go to page' control should be displayed."
-        },
-        "attribute": "show-go-to-page-control",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "showItemsPerPage": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "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 should be displayed."
-        },
-        "attribute": "show-items-per-page",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "showItemsPerPageControl": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the select input to control 'items per page' should be displayed."
-        },
-        "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."
-        },
-        "attribute": "total-items",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "currentPage": {},
-      "inputError": {},
-      "itemsPerPage": {},
-      "lowerBound": {},
-      "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."
-        },
-        "complexType": {
-          "original": "{ value: number }",
-          "resolved": "{ value: number; }",
-          "references": {}
+        };
+        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();
         }
-      }, {
-        "method": "icItemsPerPageChange",
-        "name": "icItemsPerPageChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the items per page option is changed."
-        },
-        "complexType": {
-          "original": "{ value: number }",
-          "resolved": "{ value: number; }",
-          "references": {}
+    }
+    componentWillLoad() {
+        if (this.itemsPerPageOptions === undefined ||
+            this.itemsPerPageOptions === null) {
+            this.setDefaultItemsPerPageOptions();
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "icPageChange",
-        "method": "pageChangeHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        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", 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"))))));
+    }
+    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 {
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcPaginationAlignmentOptions",
+                    "resolved": "\"left\" | \"right\" | \"space-between\"",
+                    "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."
+                },
+                "attribute": "alignment",
+                "reflect": false,
+                "defaultValue": "\"right\""
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeForeground",
+                    "resolved": "\"dark\" | \"default\" | \"light\"",
+                    "references": {
+                        "IcThemeForeground": {
+                            "location": "import",
+                            "path": "@ukic/web-components/dist/types/interface",
+                            "id": "../web-components/dist/types/interface.d.ts::IcThemeForeground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the styling for the items in the pagination bar."
+                },
+                "attribute": "appearance",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "itemLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label which will be used in place of 'items' if paginationType is data. Should be capitalised."
+                },
+                "attribute": "item-label",
+                "reflect": false,
+                "defaultValue": "\"Item\""
+            },
+            "itemsPerPageOptions": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "{\n    label: string;\n    value: string;\n  }[]",
+                    "resolved": "{ label: string; value: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The options which will be displayed for 'items per page' select input. Set a maximum of 4 options including a required 'All' option with value equal to total number of items."
+                }
+            },
+            "paginationControl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcPaginationControlTypes",
+                    "resolved": "\"complex\" | \"simple\"",
+                    "references": {
+                        "IcPaginationControlTypes": {
+                            "location": "import",
+                            "path": "../ic-pagination/ic-pagination.types",
+                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationControlTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the displayed pagination is simple or complex."
+                },
+                "attribute": "pagination-control",
+                "reflect": false,
+                "defaultValue": "\"simple\""
+            },
+            "paginationType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcPaginationTypes",
+                    "resolved": "\"data\" | \"page\"",
+                    "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 total number of items and current item range or total number of pages and current page is displayed."
+                },
+                "attribute": "pagination-type",
+                "reflect": false,
+                "defaultValue": "\"page\""
+            },
+            "pageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label which will be used in place of 'Page' if paginationType is page. Should be capitalised."
+                },
+                "attribute": "page-label",
+                "reflect": false,
+                "defaultValue": "\"Page\""
+            },
+            "showGoToPageControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the 'go to page' control should be displayed."
+                },
+                "attribute": "show-go-to-page-control",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showItemsPerPage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "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 should be displayed."
+                },
+                "attribute": "show-items-per-page",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showItemsPerPageControl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the select input to control 'items per page' should be displayed."
+                },
+                "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."
+                },
+                "attribute": "total-items",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentPage": {},
+            "inputError": {},
+            "itemsPerPage": {},
+            "lowerBound": {},
+            "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."
+                },
+                "complexType": {
+                    "original": "{ value: number }",
+                    "resolved": "{ value: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "icItemsPerPageChange",
+                "name": "icItemsPerPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the items per page option is changed."
+                },
+                "complexType": {
+                    "original": "{ value: number }",
+                    "resolved": "{ value: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "icPageChange",
+                "method": "pageChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=ic-pagination-bar.js.map