@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.2

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

@@ -1,226 +1,227 @@
 import { h, } from "@stencil/core";
-import { checkResizeObserver } from "../../utils/helpers";
+import { checkResizeObserver, capitalize } 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.setItemsPerPage(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);
+            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;
+                this.paginationEl.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.setItemsPerPage = (newValue) => {
+            if (this.itemsPerPage !== newValue) {
+                this.itemsPerPage = newValue;
+                this.itemsPerPageString = newValue.toString();
+                this.icItemsPerPageChange.emit({ value: this.itemsPerPage });
+            }
+            this.totalPages =
+                this.totalItems > this.itemsPerPage
+                    ? Math.ceil(this.totalItems / this.itemsPerPage)
+                    : 1;
+            this.setUpperBound();
+            if (this.activePage > this.totalPages) {
+                this.paginationEl.setCurrentPage(this.totalPages);
+                this.activePage = this.totalPages;
+            }
+            this.icPageChange.emit({ value: this.activePage, fromItemsPerPage: true });
         };
-        this.setDefaultItemsPerPageOptions = () => {
-            this.itemsPerPageOptions =
-                this.totalItems <= 100
+        this.setPaginationBarContent = () => {
+            var _a;
+            const displayedItemsPerPageOptions = ((_a = this.itemsPerPageOptions) === null || _a === void 0 ? void 0 : _a.slice(0, 3)) ||
+                (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({
+                    ]);
+            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));
-                }
-            }
+            this.displayedItemsPerPageOptions = displayedItemsPerPageOptions.filter(({ value }) => this.totalItems >= Number(value));
+            let lastOptionValue = 0;
+            const updated = this.displayedItemsPerPageOptions.some(({ value }) => {
+                lastOptionValue = Number(value);
+                return this.itemsPerPage <= lastOptionValue;
+            });
+            this.setItemsPerPage(updated || (!updated && this.itemsPerPage > lastOptionValue)
+                ? lastOptionValue
+                : this.itemsPerPage);
         };
-        this.currentPage = 1;
+        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 = 0;
+        this.itemsPerPageString = "0";
         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.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;
     }
+    watchPageNumberHandler() {
+        this.activePage = this.currentPage;
+    }
+    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();
+    }
     disconnectedCallback() {
-        if (this.resizeObserver !== null) {
-            this.resizeObserver.disconnect();
-        }
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
-        if (this.itemsPerPageOptions === undefined ||
-            this.itemsPerPageOptions === null) {
-            this.setDefaultItemsPerPageOptions();
-        }
-        this.trimItemsPerPageOptions();
-        this.setDefaultItemsPerPage();
-        this.setNumberPages();
-        this.setUpperBound();
+        this.watchPageNumberHandler();
+        this.watchPageLabelHandler();
+        this.watchItemLabelHandler();
+        this.setPaginationBarContent();
     }
     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) {
@@ -228,27 +229,25 @@ export class PaginationBar {
         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", { size: "small", 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"))))));
     }
     static get is() { return "ic-pagination-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -273,8 +272,8 @@ export class PaginationBar {
                     "references": {
                         "IcPaginationAlignmentOptions": {
                             "location": "import",
-                            "path": "../ic-pagination/ic-pagination.types",
-                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationAlignmentOptions"
+                            "path": "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types",
+                            "id": "../web-components/dist/types/components/ic-pagination/ic-pagination.types.d.ts::IcPaginationAlignmentOptions"
                         }
                     }
                 },
@@ -312,6 +311,24 @@ export class PaginationBar {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
+            "currentPage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current page number to be displayed on the pagination bar."
+                },
+                "attribute": "current-page",
+                "reflect": false,
+                "defaultValue": "1"
+            },
             "itemLabel": {
                 "type": "string",
                 "mutable": false,
@@ -324,7 +341,7 @@ export class PaginationBar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The label which will be used in place of 'items' if paginationType is data. Should be capitalised."
+                    "text": "The text which will be used in place of 'Item' on the pagination bar."
                 },
                 "attribute": "item-label",
                 "reflect": false,
@@ -332,7 +349,7 @@ export class PaginationBar {
             },
             "itemsPerPageOptions": {
                 "type": "unknown",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "{\n    label: string;\n    value: string;\n  }[]",
                     "resolved": "{ label: string; value: string; }[]",
@@ -345,17 +362,17 @@ export class PaginationBar {
                     "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": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcPaginationControlTypes",
+                    "original": "IcPaginationTypes",
                     "resolved": "\"complex\" | \"simple\"",
                     "references": {
-                        "IcPaginationControlTypes": {
+                        "IcPaginationTypes": {
                             "location": "import",
-                            "path": "../ic-pagination/ic-pagination.types",
-                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationControlTypes"
+                            "path": "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types",
+                            "id": "../web-components/dist/types/components/ic-pagination/ic-pagination.types.d.ts::IcPaginationTypes"
                         }
                     }
                 },
@@ -365,21 +382,21 @@ export class PaginationBar {
                     "tags": [],
                     "text": "Whether the displayed pagination is simple or complex."
                 },
-                "attribute": "pagination-control",
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "\"simple\""
             },
-            "paginationType": {
+            "rangeLabelType": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcPaginationTypes",
+                    "original": "IcPaginationLabelTypes",
                     "resolved": "\"data\" | \"page\"",
                     "references": {
-                        "IcPaginationTypes": {
+                        "IcPaginationLabelTypes": {
                             "location": "import",
-                            "path": "../ic-pagination/ic-pagination.types",
-                            "id": "src/components/ic-pagination/ic-pagination.types.ts::IcPaginationTypes"
+                            "path": "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types",
+                            "id": "../web-components/dist/types/components/ic-pagination/ic-pagination.types.d.ts::IcPaginationLabelTypes"
                         }
                     }
                 },
@@ -389,7 +406,7 @@ export class PaginationBar {
                     "tags": [],
                     "text": "Whether total number of items and current item range or total number of pages and current page is displayed."
                 },
-                "attribute": "pagination-type",
+                "attribute": "range-label-type",
                 "reflect": false,
                 "defaultValue": "\"page\""
             },
@@ -405,7 +422,7 @@ export class PaginationBar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The label which will be used in place of 'Page' if paginationType is page. Should be capitalised."
+                    "text": "The text which will be used in place of 'Page' on the pagination bar."
                 },
                 "attribute": "page-label",
                 "reflect": false,
@@ -429,7 +446,7 @@ export class PaginationBar {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "showItemsPerPage": {
+            "hideRangeLabel": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -441,11 +458,11 @@ export class PaginationBar {
                 "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."
+                    "text": "If `true`, the number of total items and current item range or number of total pages and current page will be hidden."
                 },
-                "attribute": "show-items-per-page",
+                "attribute": "hide-range-label",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "showItemsPerPageControl": {
                 "type": "boolean",
@@ -486,10 +503,16 @@ export class PaginationBar {
     }
     static get states() {
         return {
-            "currentPage": {},
+            "capitalizedItemLabel": {},
+            "capitalizedPageLabel": {},
+            "activePage": {},
+            "displayedItemsPerPageOptions": {},
             "inputError": {},
             "itemsPerPage": {},
+            "itemsPerPageString": {},
             "lowerBound": {},
+            "lowerCaseItemLabel": {},
+            "lowerCasePageLabel": {},
             "paginationWidth": {},
             "paginationWrapped": {},
             "totalPages": {},
@@ -505,12 +528,18 @@ export class PaginationBar {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when a page is navigated to via the 'go to' input."
+                    "text": "Emitted when a page is navigated to via the 'go to' input.\nThe `detail` property contains `value` (i.e. the page number) and a `fromItemsPerPage` flag to indicate if the event was triggered by the `icItemsPerPageChange` event also occurring."
                 },
                 "complexType": {
-                    "original": "{ value: number }",
-                    "resolved": "{ value: number; }",
-                    "references": {}
+                    "original": "IcPageChangeEventDetail",
+                    "resolved": "IcPageChangeEventDetail",
+                    "references": {
+                        "IcPageChangeEventDetail": {
+                            "location": "import",
+                            "path": "./ic-pagination-bar.types",
+                            "id": "src/components/ic-pagination-bar/ic-pagination-bar.types.ts::IcPageChangeEventDetail"
+                        }
+                    }
                 }
             }, {
                 "method": "icItemsPerPageChange",
@@ -530,6 +559,24 @@ export class PaginationBar {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "watchPageNumberHandler"
+            }, {
+                "propName": "itemLabel",
+                "methodName": "watchItemLabelHandler"
+            }, {
+                "propName": "itemsPerPageOptions",
+                "methodName": "watchItemsPerPageOptionsHandler"
+            }, {
+                "propName": "pageLabel",
+                "methodName": "watchPageLabelHandler"
+            }, {
+                "propName": "totalItems",
+                "methodName": "watchTotalItemsHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "icPageChange",