@ukic/canary-web-components 2.0.0-canary.14 → 2.0.0-canary.16

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

@@ -1,87 +1,67 @@
 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.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.paginationEl.setCurrentPage(page);
                 this.currentPage = 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 textField = this.pageInputEl;
             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.setInputError(textField, 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);
+            const tooltip = this.pageInputTooltipEl;
+            const textField = this.pageInputEl;
             if (ev.key === "Enter") {
                 if (textField.validationStatus === "error") {
                     tooltip.displayTooltip(true, true);
@@ -96,23 +76,23 @@ export class PaginationBar {
             }
         };
         this.handleKeyUp = (ev) => {
-            const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
-            const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+            const textField = this.pageInputEl;
             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.setInputError(textField, this.NAN_ERROR, false);
+                this.pageInputTooltipEl.displayTooltip(true, false);
             }
         };
+        this.itemsPerPageLabelClickHandler = () => {
+            this.focusElFromLabel("ic-select");
+        };
         this.paginationShouldWrap = () => {
-            const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
-            if (this.paginationControl === "simple") {
-                if (pagination.clientHeight > 63) {
+            if (this.type === "simple") {
+                if (this.paginationEl.clientHeight > 63) {
                     this.paginationWrapped = true;
                 }
                 else {
@@ -134,24 +114,25 @@ export class PaginationBar {
             });
             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.setDisplayedItemsPerPageOptions = () => {
+            if (this.itemsPerPageOptions === undefined ||
+                this.itemsPerPageOptions === null) {
+                this.displayedItemsPerPageOptions =
+                    this.totalItems <= 100
+                        ? [
+                            { label: "10", value: "10" },
+                            { label: "25", value: "25" },
+                            { label: "50", value: "50" },
+                        ]
+                        : [
+                            { label: "25", value: "25" },
+                            { label: "100", value: "100" },
+                            { label: "1000", value: "1000" },
+                        ];
+            }
+            else {
+                this.displayedItemsPerPageOptions = this.itemsPerPageOptions.slice(0, 3);
+            }
         };
         this.setGoToPageInputStyles = () => {
             var _a, _b;
@@ -164,28 +145,81 @@ export class PaginationBar {
                 }
             }
         };
+        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.setNumberPages();
+            this.setUpperBound();
+            if (this.currentPage > this.totalPages) {
+                this.paginationEl.setCurrentPage(this.totalPages);
+                this.currentPage = this.totalPages;
+            }
+            this.icPageChange.emit({ value: this.currentPage });
+        };
         this.setNumberPages = () => {
-            this.totalPages = Math.ceil(this.totalItems / Number(this.itemsPerPage));
+            const numItemsPerPage = this.itemsPerPage;
+            if (this.totalItems <= numItemsPerPage) {
+                this.totalPages = 1;
+            }
+            else {
+                this.totalPages = Math.ceil(this.totalItems / numItemsPerPage);
+            }
+        };
+        this.setPaginationBarContent = () => {
+            this.setDisplayedItemsPerPageOptions();
+            this.trimItemsPerPageOptions();
+            this.updateItemsPerPage();
         };
         this.setUpperBound = () => {
-            this.upperBound = Math.min(this.lowerBound + Number(this.itemsPerPage) - 1, this.totalItems);
+            this.upperBound = Math.min(this.lowerBound + this.itemsPerPage - 1, this.totalItems);
         };
         this.trimItemsPerPageOptions = () => {
-            this.itemsPerPageOptions = this.itemsPerPageOptions.slice(0, 3);
-            this.itemsPerPageOptions.push({
+            this.displayedItemsPerPageOptions.push({
                 label: "All",
                 value: String(this.totalItems),
             });
-            for (let i = 0; i < this.itemsPerPageOptions.length - 1; i++) {
-                if (this.totalItems <= Number(this.itemsPerPageOptions[i].value)) {
-                    this.itemsPerPageOptions.splice(i, this.itemsPerPageOptions.length - (i + 1));
+            for (let i = 0; i < this.displayedItemsPerPageOptions.length - 1; i++) {
+                if (this.totalItems <= Number(this.displayedItemsPerPageOptions[i].value)) {
+                    this.displayedItemsPerPageOptions.splice(i, this.displayedItemsPerPageOptions.length - (i + 1));
                 }
             }
         };
+        this.updateItemsPerPage = () => {
+            let newItemsPerPage = this.itemsPerPage;
+            let updated = false;
+            let lastOptionValue = 0;
+            for (let i = 0; i < this.displayedItemsPerPageOptions.length; i++) {
+                lastOptionValue = Number(this.displayedItemsPerPageOptions[i].value);
+                if (this.itemsPerPage <= lastOptionValue) {
+                    newItemsPerPage = lastOptionValue;
+                    updated = true;
+                    i = this.displayedItemsPerPageOptions.length;
+                }
+            }
+            if (!updated && this.itemsPerPage > lastOptionValue) {
+                newItemsPerPage = lastOptionValue;
+            }
+            this.setItemsPerPage(newItemsPerPage);
+        };
+        this.capitalizedItemLabel = undefined;
+        this.capitalizedPageLabel = undefined;
         this.currentPage = 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;
@@ -194,28 +228,37 @@ export class PaginationBar {
         this.appearance = "default";
         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;
     }
+    watchItemLabelHandler() {
+        this.capitalizedItemLabel = capitalize(this.itemLabel);
+        this.lowerCaseItemLabel = this.itemLabel.toLowerCase();
+    }
+    watchItemsPerPageOptionsHandler() {
+        this.setPaginationBarContent();
+    }
+    watchPageLabelHandler() {
+        this.capitalizedPageLabel = capitalize(this.pageLabel);
+        this.lowerCasePageLabel = this.pageLabel.toLowerCase();
+    }
+    watchTotalItemsHandler() {
+        this.setPaginationBarContent();
+    }
     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();
+        this.watchPageLabelHandler();
+        this.watchItemLabelHandler();
+        this.setPaginationBarContent();
     }
     componentDidLoad() {
         this.paginationWidth = this.paginationBarEl.clientWidth;
@@ -228,27 +271,24 @@ 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, currentPage, 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: {
+            }, variant: "label", onClick: this.itemsPerPageLabelClickHandler }, capitalizedItemLabel, "s per ", lowerCasePageLabel), h("ic-select", { small: true, label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: displayedItemsPerPageOptions, value: itemsPerPageString, onIcChange: this.changeItemsPerPage, ref: (el) => (this.pageDropdownEl = el) }))), !hideRangeLabel && rangeLabelType === "data" ? (h("ic-typography", { class: {
                 [`pagination-text-${appearance}`]: true,
                 ["item-pagination-label"]: true,
-            }, variant: "label", "aria-live": "polite" }, this.lowerBound, " - ", this.upperBound, " of ", this.totalItems, " ", this.itemLabel.toLowerCase(), this.totalItems > 1 ? "s" : "")) : (showItemsPerPage && (h("ic-typography", { class: {
+            }, 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" : ""}`)) : (!hideRangeLabel && (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", "aria-live": "polite" }, capitalizedPageLabel, " ", currentPage, " 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) })), 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 +313,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"
                         }
                     }
                 },
@@ -324,7 +364,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 +372,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 +385,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 +405,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 +429,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 +445,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 +469,7 @@ export class PaginationBar {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "showItemsPerPage": {
+            "hideRangeLabel": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -441,11 +481,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 +526,16 @@ export class PaginationBar {
     }
     static get states() {
         return {
+            "capitalizedItemLabel": {},
+            "capitalizedPageLabel": {},
             "currentPage": {},
+            "displayedItemsPerPageOptions": {},
             "inputError": {},
             "itemsPerPage": {},
+            "itemsPerPageString": {},
             "lowerBound": {},
+            "lowerCaseItemLabel": {},
+            "lowerCasePageLabel": {},
             "paginationWidth": {},
             "paginationWrapped": {},
             "totalPages": {},
@@ -530,6 +576,21 @@ export class PaginationBar {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "itemLabel",
+                "methodName": "watchItemLabelHandler"
+            }, {
+                "propName": "itemsPerPageOptions",
+                "methodName": "watchItemsPerPageOptionsHandler"
+            }, {
+                "propName": "pageLabel",
+                "methodName": "watchPageLabelHandler"
+            }, {
+                "propName": "totalItems",
+                "methodName": "watchTotalItemsHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "icPageChange",