carbon-components-angular 5.9.0 → 5.9.1

package/docs/documentation.json

@@ -1293,12 +1293,12 @@
         },
         {
             "name": "PaginationTranslations",
-            "id": "interface-PaginationTranslations-92c40f6c6b9b9452fa5db3a18d43f1aca4449105c0b51275fd87133dffed5507b9763c7ffe0e74c6e8ff7c36bc99fd8b6faa45346fabdbf52081203ccf5497b5",
+            "id": "interface-PaginationTranslations-aba8db2c7d2e16da513a54143fd003228c02176d38f56cbbd52a340eacb547d3fdbe0ed42cdf88f4ca7d2999e9d5e6066b09176ca161695a212d7cd1d881d21e",
             "file": "src/pagination/pagination.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "interface",
-            "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n *\n * ```html\n *\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n */\n@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"cds--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}} {{currentPage}}\n\t\t\t</span>\n\t\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class Pagination {\n\tstatic paginationCounter = 0;\n\n\t/**\n\t * Set to `true` for a loading pagination component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * `PaginationModel` with the information about pages you're controlling.\n\t */\n\t@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t *\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t *\t\t\"BACKWARD\": \"Backward\",\n\t *\t\t\"FORWARD\": \"Forward\",\n\t *\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter<number>();\n\n\tget itemsPerPage() {\n\t\treturn this.model.pageLength;\n\t}\n\tset itemsPerPage(value) {\n\t\tthis.model.pageLength = Number(value);\n\t\tthis.currentPage = 1; // reset page\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\t/**\n\t * The last page number to display in the pagination view.\n\t */\n\tget lastPage(): number {\n\t\tconst last = Math.ceil(this.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.totalDataLength;\n\t}\n\n\t/**\n\t * The previous page number to navigate to, from the current page.\n\t */\n\tget previousPage(): number {\n\t\treturn this.currentPage <= 1 ? 1 : this.currentPage - 1;\n\t}\n\n\t/**\n\t * The next page number to navigate to, from the current page.\n\t */\n\tget nextPage(): number {\n\t\tconst lastPage = this.lastPage;\n\t\treturn this.currentPage >= lastPage ? lastPage : this.currentPage + 1;\n\t}\n\n\tget pageOptions() {\n\t\tif (this.totalDataLength && this._pageOptions.length !== this.totalDataLength) {\n\t\t\tthis._pageOptions = Array(Math.ceil(this.totalDataLength / this.itemsPerPage));\n\t\t}\n\t\treturn this._pageOptions;\n\t}\n\n\titemsPerPageSelectId = `pagination-select-items-per-page-${Pagination.paginationCounter}`;\n\tcurrentPageSelectId = `pagination-select-current-page-${Pagination.paginationCounter}`;\n\n\titemsPerPageText = this.i18n.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n",
+            "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n *\n * ```html\n *\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n */\n@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"cds--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t</span>\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class Pagination {\n\tstatic paginationCounter = 0;\n\n\t/**\n\t * Set to `true` for a loading pagination component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * `PaginationModel` with the information about pages you're controlling.\n\t */\n\t@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t *\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t *\t\t\"BACKWARD\": \"Backward\",\n\t *\t\t\"FORWARD\": \"Forward\",\n\t *\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter<number>();\n\n\tget itemsPerPage() {\n\t\treturn this.model.pageLength;\n\t}\n\tset itemsPerPage(value) {\n\t\tthis.model.pageLength = Number(value);\n\t\tthis.currentPage = 1; // reset page\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\t/**\n\t * The last page number to display in the pagination view.\n\t */\n\tget lastPage(): number {\n\t\tconst last = Math.ceil(this.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.totalDataLength;\n\t}\n\n\t/**\n\t * The previous page number to navigate to, from the current page.\n\t */\n\tget previousPage(): number {\n\t\treturn this.currentPage <= 1 ? 1 : this.currentPage - 1;\n\t}\n\n\t/**\n\t * The next page number to navigate to, from the current page.\n\t */\n\tget nextPage(): number {\n\t\tconst lastPage = this.lastPage;\n\t\treturn this.currentPage >= lastPage ? lastPage : this.currentPage + 1;\n\t}\n\n\tget pageOptions() {\n\t\tif (this.totalDataLength && this._pageOptions.length !== this.totalDataLength) {\n\t\t\tthis._pageOptions = Array(Math.ceil(this.totalDataLength / this.itemsPerPage));\n\t\t}\n\t\treturn this._pageOptions;\n\t}\n\n\titemsPerPageSelectId = `pagination-select-items-per-page-${Pagination.paginationCounter}`;\n\tcurrentPageSelectId = `pagination-select-current-page-${Pagination.paginationCounter}`;\n\n\titemsPerPageText = this.i18n.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n",
             "properties": [
                 {
                     "name": "BACKWARD",
@@ -38521,7 +38521,7 @@
         },
         {
             "name": "Pagination",
-            "id": "component-Pagination-92c40f6c6b9b9452fa5db3a18d43f1aca4449105c0b51275fd87133dffed5507b9763c7ffe0e74c6e8ff7c36bc99fd8b6faa45346fabdbf52081203ccf5497b5",
+            "id": "component-Pagination-aba8db2c7d2e16da513a54143fd003228c02176d38f56cbbd52a340eacb547d3fdbe0ed42cdf88f4ca7d2999e9d5e6066b09176ca161695a212d7cd1d881d21e",
             "file": "src/pagination/pagination.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -38531,7 +38531,7 @@
             "selector": "cds-pagination, ibm-pagination",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\tclass=\"cds--pagination\"\n\t[ngClass]=\"{\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<!-- left skeleton div -->\n\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t</div>\n\n\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t<select\n\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t<option\n\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t</span>\n\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t</span>\n\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t</span>\n\t</div>\n\n\t<!-- right skeleton div -->\n\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t</div>\n\n\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t<input\n\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t<select\n\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t</span>\n\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t</span>\n\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{pageText.subject | async}} {{currentPage}}\n\t\t</span>\n\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\tclass=\"\n\t\t\t\t\tcds--pagination__button\n\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n",
+            "template": "<div\n\tclass=\"cds--pagination\"\n\t[ngClass]=\"{\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<!-- left skeleton div -->\n\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t</div>\n\n\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t<select\n\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t<option\n\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t</span>\n\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t</span>\n\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t</span>\n\t</div>\n\n\t<!-- right skeleton div -->\n\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t</div>\n\n\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{pageText.subject | async}}\n\t\t</span>\n\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t<input\n\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t<select\n\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t</span>\n\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t</span>\n\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\tclass=\"\n\t\t\t\t\tcds--pagination__button\n\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -38789,7 +38789,7 @@
             "description": "<p>Use pagination when you have multiple pages of data to handle.</p>\n<p><a href=\"../../?path=/story/components-pagination--basic\">See demo</a></p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;cds-pagination [model]=&quot;model&quot; (selectPage)=&quot;selectPage($event)&quot;&gt;&lt;/cds-pagination&gt;</code></pre></div><p>In your <code>selectPage()</code> method set the <code>model.currentPage</code> to selected page, <em>after</em>\nyou load the page.</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">selectPage(page) {\n    // ... your code to load the page goes here\n\n    this.model.currentPage = page;\n\n    // ... anything you want to do after page selection changes goes here\n}</code></pre></div>",
             "rawdescription": "\n\nUse pagination when you have multiple pages of data to handle.\n\n[See demo](../../?path=/story/components-pagination--basic)\n\n```html\n\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n```\n\nIn your `selectPage()` method set the `model.currentPage` to selected page, _after_\nyou load the page.\n\n```typescript\nselectPage(page) {\n\t// ... your code to load the page goes here\n\n\tthis.model.currentPage = page;\n\n\t// ... anything you want to do after page selection changes goes here\n}\n```\n",
             "type": "component",
-            "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n *\n * ```html\n *\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n */\n@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"cds--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}} {{currentPage}}\n\t\t\t</span>\n\t\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class Pagination {\n\tstatic paginationCounter = 0;\n\n\t/**\n\t * Set to `true` for a loading pagination component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * `PaginationModel` with the information about pages you're controlling.\n\t */\n\t@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t *\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t *\t\t\"BACKWARD\": \"Backward\",\n\t *\t\t\"FORWARD\": \"Forward\",\n\t *\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter<number>();\n\n\tget itemsPerPage() {\n\t\treturn this.model.pageLength;\n\t}\n\tset itemsPerPage(value) {\n\t\tthis.model.pageLength = Number(value);\n\t\tthis.currentPage = 1; // reset page\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\t/**\n\t * The last page number to display in the pagination view.\n\t */\n\tget lastPage(): number {\n\t\tconst last = Math.ceil(this.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.totalDataLength;\n\t}\n\n\t/**\n\t * The previous page number to navigate to, from the current page.\n\t */\n\tget previousPage(): number {\n\t\treturn this.currentPage <= 1 ? 1 : this.currentPage - 1;\n\t}\n\n\t/**\n\t * The next page number to navigate to, from the current page.\n\t */\n\tget nextPage(): number {\n\t\tconst lastPage = this.lastPage;\n\t\treturn this.currentPage >= lastPage ? lastPage : this.currentPage + 1;\n\t}\n\n\tget pageOptions() {\n\t\tif (this.totalDataLength && this._pageOptions.length !== this.totalDataLength) {\n\t\t\tthis._pageOptions = Array(Math.ceil(this.totalDataLength / this.itemsPerPage));\n\t\t}\n\t\treturn this._pageOptions;\n\t}\n\n\titemsPerPageSelectId = `pagination-select-items-per-page-${Pagination.paginationCounter}`;\n\tcurrentPageSelectId = `pagination-select-current-page-${Pagination.paginationCounter}`;\n\n\titemsPerPageText = this.i18n.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n",
+            "sourceCode": "import { PaginationModel } from \"./pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { ExperimentalService } from \"carbon-components-angular/experimental\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nexport interface PaginationTranslations {\n\tITEMS_PER_PAGE: string;\n\tOPEN_LIST_OF_OPTIONS: string;\n\tBACKWARD: string;\n\tFORWARD: string;\n\tTOTAL_ITEMS_UNKNOWN: string;\n\tTOTAL_ITEMS: string;\n\tTOTAL_ITEM: string;\n\tOF_LAST_PAGES: string;\n\tOF_LAST_PAGE: string;\n}\n\n/**\n * Use pagination when you have multiple pages of data to handle.\n *\n * [See demo](../../?path=/story/components-pagination--basic)\n *\n * ```html\n *\t<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n * ```\n *\n * In your `selectPage()` method set the `model.currentPage` to selected page, _after_\n * you load the page.\n *\n * ```typescript\n * selectPage(page) {\n * \t// ... your code to load the page goes here\n *\n * \tthis.model.currentPage = page;\n *\n * \t// ... anything you want to do after page selection changes goes here\n * }\n * ```\n */\n@Component({\n\tselector: \"cds-pagination, ibm-pagination\",\n\ttemplate: `\n\t<div\n\t\tclass=\"cds--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__left\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__left\">\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<label class=\"cds--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__item-count\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\tclass=\"cds--select-input\">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass=\"cds--select-option\"\n\t\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text\" [ngStyle]=\"{'margin-left': showPageInput ? null : 0}\">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"cds--pagination__right\">\n\t\t\t<p class=\"cds--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--pagination__right\">\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"cds--pagination__text cds--pagination__page-text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t</span>\n\t\t\t<ng-container *ngIf=\"showPageInput\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--select cds--select--inline cds--select__page-number\"\n\t\t\t\t\t[class.cds--select--disabled]=\"pageInputDisabled\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"cds--label cds--visually-hidden\">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"cds--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"cds--pagination__text\">\n\t\t\t\t<ng-container *ngIf=\"!showPageInput\">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<div class=\"cds--pagination__control-buttons\">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"cds--pagination__button cds--pagination__button--backward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--left\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\tclass=\"\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t\t}\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t\t<svg cdsIcon=\"caret--right\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class Pagination {\n\tstatic paginationCounter = 0;\n\n\t/**\n\t * Set to `true` for a loading pagination component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * `PaginationModel` with the information about pages you're controlling.\n\t */\n\t@Input() model: PaginationModel;\n\t/**\n \t * Set to `true` to disable the backward/forward buttons.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` to disable the select box that changes the page.\n\t */\n\t@Input() pageInputDisabled = false;\n\t/**\n\t * Controls wether or not to show the page selects\n\t */\n\t@Input() showPageInput = true;\n\t/**\n\t * Set to `true` if the total number of items is unknown.\n\t */\n\t@Input() pagesUnknown = false;\n\t@Input() pageSelectThreshold = 1000;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t *\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t *\t\t\"BACKWARD\": \"Backward\",\n\t *\t\t\"FORWARD\": \"Forward\",\n\t *\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t *\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t *\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t *\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t *\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations (value: PaginationTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE);\n\t\tthis.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS);\n\t\tthis.backwardText.override(valueWithDefaults.BACKWARD);\n\t\tthis.forwardText.override(valueWithDefaults.FORWARD);\n\t\tthis.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);\n\t\tthis.totalItemText.override(valueWithDefaults.TOTAL_ITEM);\n\t\tthis.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);\n\t\tthis.pageText.override(valueWithDefaults.PAGE);\n\t\tthis.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);\n\t\tthis.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);\n\t}\n\n\t/**\n\t * Options for items per page select\n\t *\n\t * A default array of options will be defined: [10, 20, 30, 40, 50]\n\t */\n\t@Input() itemsPerPageOptions: number[] = [10, 20, 30, 40, 50];\n\n\t/**\n\t * Emits the new page number.\n\t *\n\t * You should tie into this and update `model.currentPage` once the fresh\n\t * data is finally loaded.\n\t */\n\t@Output() selectPage = new EventEmitter<number>();\n\n\tget itemsPerPage() {\n\t\treturn this.model.pageLength;\n\t}\n\tset itemsPerPage(value) {\n\t\tthis.model.pageLength = Number(value);\n\t\tthis.currentPage = 1; // reset page\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\tset currentPage(value) {\n\t\tvalue = Number(value);\n\t\t// emits the value to allow the user to update current page\n\t\t// in the model once the page is loaded\n\t\tthis.selectPage.emit(value);\n\t}\n\n\tget totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\t/**\n\t * The last page number to display in the pagination view.\n\t */\n\tget lastPage(): number {\n\t\tconst last = Math.ceil(this.totalDataLength / this.itemsPerPage);\n\t\treturn last > 0 ? last : 1;\n\t}\n\n\tget startItemIndex() {\n\t\treturn this.endItemIndex > 0 ? (this.currentPage - 1) * this.itemsPerPage + 1 : 0;\n\t}\n\n\tget endItemIndex() {\n\t\tconst projectedEndItemIndex = this.currentPage * this.itemsPerPage;\n\n\t\treturn projectedEndItemIndex < this.totalDataLength ? projectedEndItemIndex : this.totalDataLength;\n\t}\n\n\t/**\n\t * The previous page number to navigate to, from the current page.\n\t */\n\tget previousPage(): number {\n\t\treturn this.currentPage <= 1 ? 1 : this.currentPage - 1;\n\t}\n\n\t/**\n\t * The next page number to navigate to, from the current page.\n\t */\n\tget nextPage(): number {\n\t\tconst lastPage = this.lastPage;\n\t\treturn this.currentPage >= lastPage ? lastPage : this.currentPage + 1;\n\t}\n\n\tget pageOptions() {\n\t\tif (this.totalDataLength && this._pageOptions.length !== this.totalDataLength) {\n\t\t\tthis._pageOptions = Array(Math.ceil(this.totalDataLength / this.itemsPerPage));\n\t\t}\n\t\treturn this._pageOptions;\n\t}\n\n\titemsPerPageSelectId = `pagination-select-items-per-page-${Pagination.paginationCounter}`;\n\tcurrentPageSelectId = `pagination-select-current-page-${Pagination.paginationCounter}`;\n\n\titemsPerPageText = this.i18n.getOverridable(\"PAGINATION.ITEMS_PER_PAGE\");\n\toptionsListText = this.i18n.getOverridable(\"PAGINATION.OPEN_LIST_OF_OPTIONS\");\n\tbackwardText = this.i18n.getOverridable(\"PAGINATION.BACKWARD\");\n\tforwardText = this.i18n.getOverridable(\"PAGINATION.FORWARD\");\n\ttotalItemsText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS\");\n\ttotalItemText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEM\");\n\ttotalItemsUnknownText = this.i18n.getOverridable(\"PAGINATION.TOTAL_ITEMS_UNKNOWN\");\n\tpageText = this.i18n.getOverridable(\"PAGINATION.PAGE\");\n\tofLastPagesText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGES\");\n\tofLastPageText = this.i18n.getOverridable(\"PAGINATION.OF_LAST_PAGE\");\n\n\tprotected _pageOptions = [];\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPagination.paginationCounter++;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",

package/docs/storybook/{8341.50a06357.iframe.bundle.js → 8341.83894870.iframe.bundle.js}

@@ -1 +1 @@
-"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[8341],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/pagination/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{tl:()=>Pagination,wi:()=>PaginationModel,u3:()=>PaginationModule,zI:()=>PaginationNav});class PaginationModel{constructor(){this.currentPage=1,this.pageLength=10,this.totalDataLength=0}}var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts"),utils=__webpack_require__("./src/utils/index.ts");let Pagination=class Pagination{constructor(i18n,experimental){this.i18n=i18n,this.experimental=experimental,this.skeleton=!1,this.disabled=!1,this.pageInputDisabled=!1,this.showPageInput=!0,this.pagesUnknown=!1,this.pageSelectThreshold=1e3,this.itemsPerPageOptions=[10,20,30,40,50],this.selectPage=new core.EventEmitter,this.itemsPerPageSelectId=`pagination-select-items-per-page-${Pagination.paginationCounter}`,this.currentPageSelectId=`pagination-select-current-page-${Pagination.paginationCounter}`,this.itemsPerPageText=this.i18n.getOverridable("PAGINATION.ITEMS_PER_PAGE"),this.optionsListText=this.i18n.getOverridable("PAGINATION.OPEN_LIST_OF_OPTIONS"),this.backwardText=this.i18n.getOverridable("PAGINATION.BACKWARD"),this.forwardText=this.i18n.getOverridable("PAGINATION.FORWARD"),this.totalItemsText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS"),this.totalItemText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEM"),this.totalItemsUnknownText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS_UNKNOWN"),this.pageText=this.i18n.getOverridable("PAGINATION.PAGE"),this.ofLastPagesText=this.i18n.getOverridable("PAGINATION.OF_LAST_PAGES"),this.ofLastPageText=this.i18n.getOverridable("PAGINATION.OF_LAST_PAGE"),this._pageOptions=[],Pagination.paginationCounter++}set translations(value){const valueWithDefaults=(0,utils.TS)(this.i18n.getMultiple("PAGINATION"),value);this.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE),this.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS),this.backwardText.override(valueWithDefaults.BACKWARD),this.forwardText.override(valueWithDefaults.FORWARD),this.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS),this.totalItemText.override(valueWithDefaults.TOTAL_ITEM),this.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN),this.pageText.override(valueWithDefaults.PAGE),this.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES),this.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE)}get itemsPerPage(){return this.model.pageLength}set itemsPerPage(value){this.model.pageLength=Number(value),this.currentPage=1}get currentPage(){return this.model.currentPage}set currentPage(value){value=Number(value),this.selectPage.emit(value)}get totalDataLength(){return this.model.totalDataLength}get lastPage(){const last=Math.ceil(this.totalDataLength/this.itemsPerPage);return last>0?last:1}get startItemIndex(){return this.endItemIndex>0?(this.currentPage-1)*this.itemsPerPage+1:0}get endItemIndex(){const projectedEndItemIndex=this.currentPage*this.itemsPerPage;return projectedEndItemIndex<this.totalDataLength?projectedEndItemIndex:this.totalDataLength}get previousPage(){return this.currentPage<=1?1:this.currentPage-1}get nextPage(){const lastPage=this.lastPage;return this.currentPage>=lastPage?lastPage:this.currentPage+1}get pageOptions(){return this.totalDataLength&&this._pageOptions.length!==this.totalDataLength&&(this._pageOptions=Array(Math.ceil(this.totalDataLength/this.itemsPerPage))),this._pageOptions}};Pagination.paginationCounter=0,Pagination.ctorParameters=()=>[{type:i18n.oc},{type:experimental.tM}],Pagination.propDecorators={skeleton:[{type:core.Input}],model:[{type:core.Input}],disabled:[{type:core.Input}],pageInputDisabled:[{type:core.Input}],showPageInput:[{type:core.Input}],pagesUnknown:[{type:core.Input}],pageSelectThreshold:[{type:core.Input}],translations:[{type:core.Input}],itemsPerPageOptions:[{type:core.Input}],selectPage:[{type:core.Output}]},Pagination=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination, ibm-pagination",template:'\n\t<div\n\t\tclass="cds--pagination"\n\t\t[ngClass]="{\n\t\t\t\'cds--skeleton\': skeleton\n\t\t}">\n\t\t\x3c!-- left skeleton div --\x3e\n\t\t<div *ngIf="skeleton" class="cds--pagination__left">\n\t\t\t<p class="cds--skeleton__text" style="width: 70px"></p>\n\t\t\t<p class="cds--skeleton__text" style="width: 35px"></p>\n\t\t\t<p class="cds--skeleton__text" style="width: 105px"></p>\n\t\t</div>\n\n\t\t<div *ngIf="!skeleton" class="cds--pagination__left">\n\t\t\t<ng-container *ngIf="showPageInput">\n\t\t\t\t<label class="cds--pagination__text" [for]="itemsPerPageSelectId">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--select cds--select--inline cds--select__item-count"\n\t\t\t\t\t[class.cds--select--disabled]="pageInputDisabled">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]="itemsPerPageSelectId"\n\t\t\t\t\t\t[(ngModel)]="itemsPerPage"\n\t\t\t\t\t\t[disabled]="pageInputDisabled"\n\t\t\t\t\t\tclass="cds--select-input">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass="cds--select-option"\n\t\t\t\t\t\t\t*ngFor="let option of itemsPerPageOptions"\n\t\t\t\t\t\t\t[value]="option">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tstyle="display: inherit"\n\t\t\t\t\t\tclass="cds--select__arrow"\n\t\t\t\t\t\taria-hidden="true"\n\t\t\t\t\t\t[attr.ariaLabel]="optionsListText.subject | async">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf="!pagesUnknown && totalDataLength <= 1" class="cds--pagination__text" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="!pagesUnknown && totalDataLength > 1" class="cds--pagination__text" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="pagesUnknown" class="cds--pagination__text" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t\x3c!-- right skeleton div --\x3e\n\t\t<div *ngIf="skeleton" class="cds--pagination__right">\n\t\t\t<p class="cds--skeleton__text" style="width: 70px"></p>\n\t\t</div>\n\n\t\t<div *ngIf="!skeleton" class="cds--pagination__right">\n\t\t\t<ng-container *ngIf="showPageInput">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--select cds--select--inline cds--select__page-number"\n\t\t\t\t\t[class.cds--select--disabled]="pageInputDisabled">\n\t\t\t\t\t<label [for]="currentPageSelectId" class="cds--label cds--visually-hidden">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf="pageOptions.length > pageSelectThreshold"\n\t\t\t\t\t\tstyle="padding-right: 1rem; margin-right: 1rem;"\n\t\t\t\t\t\t[id]="currentPageSelectId"\n\t\t\t\t\t\ttype="number"\n\t\t\t\t\t\tmin="1"\n\t\t\t\t\t\t[max]="pageOptions.length"\n\t\t\t\t\t\tclass="cds--select-input"\n\t\t\t\t\t\t[(ngModel)]="currentPage">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf="pageOptions.length <= pageSelectThreshold"\n\t\t\t\t\t\t[id]="currentPageSelectId"\n\t\t\t\t\t\tclass="cds--select-input"\n\t\t\t\t\t\t[disabled]="pageInputDisabled"\n\t\t\t\t\t\t[(ngModel)]="currentPage">\n\t\t\t\t\t\t<option *ngFor="let page of pageOptions; let i = index;" class="cds--select-option" [value]="i + 1">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="pageOptions.length <= 1000"\n\t\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tstyle="display: inherit;"\n\t\t\t\t\t\tclass="cds--select__arrow"\n\t\t\t\t\t\t[attr.ariaLabel]="optionsListText.subject | async">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf="!pagesUnknown && lastPage <= 1" class="cds--pagination__text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="!pagesUnknown && lastPage > 1" class="cds--pagination__text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="pagesUnknown" class="cds--pagination__text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}} {{currentPage}}\n\t\t\t</span>\n\t\t\t<div class="cds--pagination__control-buttons">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="ghost"\n\t\t\t\t\ticonOnly="true"\n\t\t\t\t\tclass="cds--pagination__button cds--pagination__button--backward"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--pagination__button--no-index\': currentPage <= 1 || disabled\n\t\t\t\t\t}"\n\t\t\t\t\ttabindex="0"\n\t\t\t\t\t[attr.aria-label]="backwardText.subject | async"\n\t\t\t\t\t(click)="selectPage.emit(previousPage)"\n\t\t\t\t\t[disabled]="(currentPage <= 1 || disabled ? true : null)">\n\t\t\t\t\t<svg cdsIcon="caret--left" size="16" class="cds--btn__icon"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="ghost"\n\t\t\t\t\ticonOnly="true"\n\t\t\t\t\tclass="\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--pagination__button--no-index\': currentPage >= lastPage || disabled\n\t\t\t\t\t}"\n\t\t\t\t\ttabindex="0"\n\t\t\t\t\t[attr.aria-label]="forwardText.subject | async"\n\t\t\t\t\t(click)="selectPage.emit(nextPage)"\n\t\t\t\t\t[disabled]="(currentPage >= lastPage || disabled ? true : null)">\n\t\t\t\t\t<svg cdsIcon="caret--right" size="16" class="cds--btn__icon"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t'})],Pagination);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");let PaginationNav=class PaginationNav{constructor(i18n,experimental){this.i18n=i18n,this.experimental=experimental,this.disabled=!1,this.numOfItemsToShow=4,this.selectPage=new core.EventEmitter,this.nextItemText=this.i18n.getOverridable("PAGINATION.NEXT"),this.previousItemText=this.i18n.getOverridable("PAGINATION.PREVIOUS"),PaginationNav.paginationCounter++}set translations(value){const valueWithDefaults=(0,utils.TS)(this.i18n.getMultiple("PAGINATION"),value);this.nextItemText.override(valueWithDefaults.NEXT),this.previousItemText.override(valueWithDefaults.PREVIOUS)}get totalNumbersArray(){return function range(stop,start=0,step=1){return Array(Math.ceil((stop-start)/step)).fill(0).map(((x,i)=>i*step+start))}(this.totalDataLength+1,1)}get currentPage(){return this.model.currentPage}set currentPage(value){value=Number(value),this.selectPage.emit(value)}get totalDataLength(){return this.model.totalDataLength}get startOffset(){return this.numOfItemsToShow<=4&&this.currentPage>1?0:1}get frontCuts(){return this.getCuts().front}get backCuts(){return this.getCuts().back}get leftArrowDisabled(){return this.disabled||1===this.currentPage}get rightArrowDisabled(){return this.disabled||this.currentPage===this.totalDataLength}handleOverflowSelection(page){"number"==typeof page&&(this.currentPage=page)}jumpToNext(){this.currentPage=this.currentPage<this.totalDataLength?this.currentPage+1:this.totalDataLength}jumpToPrevious(){this.currentPage=this.currentPage>1?this.currentPage-1:1}getPages(){if(this.totalDataLength<=1)return null;const cuts=this.getCuts();return this.totalNumbersArray.slice(this.startOffset+cuts.front,-1*(1+cuts.back))}getCuts(splitPoint=null){const page=this.currentPage-1,totalItems=this.totalDataLength,itemsThatFit=this.numOfItemsToShow;if(itemsThatFit>=totalItems)return{front:0,back:0};const split=splitPoint||Math.ceil(itemsThatFit/2)-1;let frontHidden=page+1-split,backHidden=totalItems-page-(itemsThatFit-split)+1;return frontHidden<=1&&(backHidden-=frontHidden<=0?Math.abs(frontHidden)+1:0,frontHidden=0),backHidden<=1&&(frontHidden-=backHidden<=0?Math.abs(backHidden)+1:0,backHidden=0),{front:frontHidden,back:backHidden}}};PaginationNav.paginationCounter=0,PaginationNav.ctorParameters=()=>[{type:i18n.oc},{type:experimental.tM}],PaginationNav.propDecorators={model:[{type:core.Input}],disabled:[{type:core.Input}],numOfItemsToShow:[{type:core.Input}],translations:[{type:core.Input}],selectPage:[{type:core.Output}]},PaginationNav=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-nav, ibm-pagination-navm",template:'\n\t<div>\n\t\t<div class="cds--pagination-nav">\n\t\t\t<ul class="cds--pagination-nav__list">\n\t\t\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind="ghost"\n\t\t\t\t\t\tsize="md"\n\t\t\t\t\t\t(click)="jumpToPrevious()"\n\t\t\t\t\t\t[disabled]="leftArrowDisabled"\n\t\t\t\t\t\t[description]="previousItemText.subject | async">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon="caret--left"\n\t\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\t\tclass="cds--btn__icon">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf="this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)"\n\t\t\t\t\tpage="1"\n\t\t\t\t\t(click)="currentPage = 1"\n\t\t\t\t\t[isActive]="currentPage == 1">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf="frontCuts"\n\t\t\t\t\t[count]="frontCuts"\n\t\t\t\t\t[fromIndex]="startOffset"\n\t\t\t\t\t(change)="handleOverflowSelection($event)">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngFor="let page of getPages();"\n\t\t\t\t\t[page]="page"\n\t\t\t\t\t(click)="currentPage = page"\n\t\t\t\t\t[isActive]="currentPage == page">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf="backCuts"\n\t\t\t\t\t[count]="backCuts"\n\t\t\t\t\t[fromIndex]="totalNumbersArray.length - backCuts - 1"\n\t\t\t\t\t(change)="handleOverflowSelection($event)">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf="totalDataLength > 1"\n\t\t\t\t\t[page]="totalNumbersArray.length"\n\t\t\t\t\t(click)="currentPage = totalNumbersArray.length"\n\t\t\t\t\t[isActive]="currentPage == totalNumbersArray.length">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind="ghost"\n\t\t\t\t\t\t(click)="jumpToNext()"\n\t\t\t\t\t\t[disabled]="rightArrowDisabled"\n\t\t\t\t\t\t[description]="nextItemText.subject | async">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon="caret--right"\n\t\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\t\tclass="cds--btn__icon">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n\t'})],PaginationNav);let PaginationNavItem=class PaginationNavItem{constructor(){this.page=0,this.isActive=!1,this.click=new core.EventEmitter}};PaginationNavItem.ctorParameters=()=>[],PaginationNavItem.propDecorators={page:[{type:core.Input}],isActive:[{type:core.Input}],click:[{type:core.Output}]},PaginationNavItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-nav-item, ibm-pagination-nav-item",template:'\n\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t<button\n\t\t\t\ttype="button"\n\t\t\t\tclass="cds--pagination-nav__page"\n\t\t\t\t[ngClass]="{ \'cds--pagination-nav__page--active\': isActive }"\n\t\t\t\t(click)="click.emit(page)">\n\t\t\t\t<span class="cds--pagination-nav__accessibility-label">\n\t\t\t\t\t{{page}}\n\t\t\t\t</span>\n\t\t\t\t{{page}}\n\t\t\t</button>\n\t\t</li>\n\t'})],PaginationNavItem);let PaginationOverflow=class PaginationOverflow{constructor(i18n){this.i18n=i18n,this.ariaLabel=this.i18n.get().PAGINATION.SELECT_ARIA,this.change=new core.EventEmitter}get countAsArray(){return[...Array(this.count)]}handleChange(event){this.change.emit(+event.target.value),event.target.value=""}};PaginationOverflow.ctorParameters=()=>[{type:i18n.oc}],PaginationOverflow.propDecorators={fromIndex:[{type:core.Input}],count:[{type:core.Input}],ariaLabel:[{type:core.Input}],change:[{type:core.Output}]},PaginationOverflow=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-overflow, ibm-pagination-overflow",template:'\n\t\t<li class="cds--pagination-nav__list-item" *ngIf="count > 1">\n\t\t\t<div class="cds--pagination-nav__select">\n\t\t\t<select\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\tclass="cds--pagination-nav__page cds--pagination-nav__page--select"\n\t\t\t\t(change)="handleChange($event)">\n\t\t\t\t<option value="" hidden></option>\n\t\t\t\t<option\n\t\t\t\t*ngFor="let item of countAsArray; let i = index">\n\t\t\t\t\t{{fromIndex + i + 1}}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t\t<div class="cds--pagination-nav__select-icon-wrapper">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="overflow-menu--horizontal"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tstyle="display: inherit"\n\t\t\t\t\tclass="cds--pagination-nav__select-icon">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t\t<cds-pagination-nav-item *ngIf="count === 1" [page]="fromIndex + 1"></cds-pagination-nav-item>\n\t'})],PaginationOverflow);var icon=__webpack_require__("./src/icon/index.ts"),src_forms=__webpack_require__("./src/forms/index.ts");let PaginationModule=class PaginationModule{};PaginationModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Pagination,PaginationNav,PaginationNavItem,PaginationOverflow],exports:[Pagination,PaginationNav,PaginationNavItem,PaginationOverflow],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU,experimental.OV,icon.QX,src_forms.hJ]})],PaginationModule)}}]);
+"use strict";(self.webpackChunkcarbon_components_angular=self.webpackChunkcarbon_components_angular||[]).push([[8341],{"./node_modules/@carbon/utils-position/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{var _a,PLACEMENTS;__webpack_require__.d(__webpack_exports__,{FK:()=>position,ZP:()=>__WEBPACK_DEFAULT_EXPORT__}),function(PLACEMENTS){PLACEMENTS.LEFT="left",PLACEMENTS.RIGHT="right",PLACEMENTS.TOP="top",PLACEMENTS.BOTTOM="bottom"}(PLACEMENTS||(PLACEMENTS={}));var defaultPositions=((_a={})[PLACEMENTS.LEFT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left-target.offsetWidth)}},_a[PLACEMENTS.RIGHT]=function(referenceOffset,target,referenceRect){return{top:referenceOffset.top-Math.round(target.offsetHeight/2)+Math.round(referenceRect.height/2),left:Math.round(referenceOffset.left+referenceRect.width)}},_a[PLACEMENTS.TOP]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top-target.offsetHeight),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a[PLACEMENTS.BOTTOM]=function(referenceOffset,target,referenceRect){return{top:Math.round(referenceOffset.top+referenceRect.height),left:referenceOffset.left-Math.round(target.offsetWidth/2)+Math.round(referenceRect.width/2)}},_a),windowRef="undefined"!=typeof window?window:{innerHeight:0,scrollY:0,innerWidth:0,scrollX:0},Position=function(){function Position(positions){void 0===positions&&(positions={}),this.positions=defaultPositions,this.positions=Object.assign({},defaultPositions,positions)}return Position.prototype.getRelativeOffset=function(target){for(var offsets={left:target.offsetLeft,top:target.offsetTop};target.offsetParent&&"static"===getComputedStyle(target.offsetParent).position;)offsets.left+=target.offsetLeft,offsets.top+=target.offsetTop,target=target.offsetParent;return offsets},Position.prototype.getAbsoluteOffset=function(target){for(var currentNode=target,margins={top:0,left:0};currentNode.offsetParent;){var computed=getComputedStyle(currentNode.offsetParent);"static"===computed.position&&computed.marginLeft&&computed.marginTop&&(parseInt(computed.marginTop,10)&&(margins.top+=parseInt(computed.marginTop,10)),parseInt(computed.marginLeft,10)&&(margins.left+=parseInt(computed.marginLeft,10))),currentNode=currentNode.offsetParent}var targetRect=target.getBoundingClientRect(),relativeRect=document.body.getBoundingClientRect();return{top:targetRect.top-relativeRect.top+margins.top,left:targetRect.left-relativeRect.left+margins.left}},Position.prototype.findRelative=function(reference,target,placement){var referenceOffset=this.getRelativeOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findAbsolute=function(reference,target,placement){var referenceOffset=this.getAbsoluteOffset(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPosition=function(reference,target,placement,offsetFunction){void 0===offsetFunction&&(offsetFunction=this.getAbsoluteOffset.bind(this));var referenceOffset=offsetFunction(reference),referenceRect=reference.getBoundingClientRect();return this.calculatePosition(referenceOffset,referenceRect,target,placement)},Position.prototype.findPositionAt=function(offset,target,placement){return this.calculatePosition(offset,{top:0,left:0,height:0,width:0},target,placement)},Position.prototype.getPlacementBox=function(target,position){var targetBottom=target.offsetHeight+position.top,targetRight=target.offsetWidth+position.left;return{top:position.top,bottom:targetBottom,left:position.left,right:targetRight}},Position.prototype.addOffset=function(position,top,left){return void 0===top&&(top=0),void 0===left&&(left=0),Object.assign({},position,{top:position.top+top,left:position.left+left})},Position.prototype.setElement=function(element,position){element.style.top=position.top+"px",element.style.left=position.left+"px"},Position.prototype.findBestPlacement=function(reference,target,placements,containerFunction,positionFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this)),void 0===positionFunction&&(positionFunction=this.findPosition.bind(this));var weightedPlacements=placements.map((function(placement){var pos=positionFunction(reference,target,placement),box=_this.getPlacementBox(target,pos),hiddenHeight=0,hiddenWidth=0,container=containerFunction();box.top<container.top?hiddenHeight=container.top-box.top:box.bottom>container.height&&(hiddenHeight=box.bottom-container.height),box.left<container.left?hiddenWidth=container.left-box.left:box.right>container.width&&(hiddenWidth=box.right-container.width),hiddenHeight&&!hiddenWidth?hiddenWidth=1:hiddenWidth&&!hiddenHeight&&(hiddenHeight=1);var area=target.offsetHeight*target.offsetWidth;return{placement,weight:(area-hiddenHeight*hiddenWidth)/area}}));return weightedPlacements.sort((function(a,b){return b.weight-a.weight})),weightedPlacements[0].placement},Position.prototype.findBestPlacementAt=function(offset,target,placements,containerFunction){var _this=this;void 0===containerFunction&&(containerFunction=this.defaultContainerFunction.bind(this));return this.findBestPlacement(null,target,placements,containerFunction,(function(_,target,placement){return _this.findPositionAt(offset,target,placement)}))},Position.prototype.defaultContainerFunction=function(){return{top:0,left:0,height:windowRef.innerHeight,width:windowRef.innerWidth}},Position.prototype.calculatePosition=function(referenceOffset,referenceRect,target,placement){return this.positions[placement]?this.positions[placement](referenceOffset,target,referenceRect):(console.error("No function found for placement, defaulting to 0,0"),{left:0,top:0})},Position}(),position=new Position;const __WEBPACK_DEFAULT_EXPORT__=Position},"./src/pagination/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{tl:()=>Pagination,wi:()=>PaginationModel,u3:()=>PaginationModule,zI:()=>PaginationNav});class PaginationModel{constructor(){this.currentPage=1,this.pageLength=10,this.totalDataLength=0}}var tslib_es6=__webpack_require__("./node_modules/tslib/tslib.es6.js"),core=__webpack_require__("./node_modules/@angular/core/fesm2020/core.mjs"),i18n=__webpack_require__("./src/i18n/index.ts"),experimental=__webpack_require__("./src/experimental/index.ts"),utils=__webpack_require__("./src/utils/index.ts");let Pagination=class Pagination{constructor(i18n,experimental){this.i18n=i18n,this.experimental=experimental,this.skeleton=!1,this.disabled=!1,this.pageInputDisabled=!1,this.showPageInput=!0,this.pagesUnknown=!1,this.pageSelectThreshold=1e3,this.itemsPerPageOptions=[10,20,30,40,50],this.selectPage=new core.EventEmitter,this.itemsPerPageSelectId=`pagination-select-items-per-page-${Pagination.paginationCounter}`,this.currentPageSelectId=`pagination-select-current-page-${Pagination.paginationCounter}`,this.itemsPerPageText=this.i18n.getOverridable("PAGINATION.ITEMS_PER_PAGE"),this.optionsListText=this.i18n.getOverridable("PAGINATION.OPEN_LIST_OF_OPTIONS"),this.backwardText=this.i18n.getOverridable("PAGINATION.BACKWARD"),this.forwardText=this.i18n.getOverridable("PAGINATION.FORWARD"),this.totalItemsText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS"),this.totalItemText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEM"),this.totalItemsUnknownText=this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS_UNKNOWN"),this.pageText=this.i18n.getOverridable("PAGINATION.PAGE"),this.ofLastPagesText=this.i18n.getOverridable("PAGINATION.OF_LAST_PAGES"),this.ofLastPageText=this.i18n.getOverridable("PAGINATION.OF_LAST_PAGE"),this._pageOptions=[],Pagination.paginationCounter++}set translations(value){const valueWithDefaults=(0,utils.TS)(this.i18n.getMultiple("PAGINATION"),value);this.itemsPerPageText.override(valueWithDefaults.ITEMS_PER_PAGE),this.optionsListText.override(valueWithDefaults.OPEN_LIST_OF_OPTIONS),this.backwardText.override(valueWithDefaults.BACKWARD),this.forwardText.override(valueWithDefaults.FORWARD),this.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS),this.totalItemText.override(valueWithDefaults.TOTAL_ITEM),this.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN),this.pageText.override(valueWithDefaults.PAGE),this.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES),this.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE)}get itemsPerPage(){return this.model.pageLength}set itemsPerPage(value){this.model.pageLength=Number(value),this.currentPage=1}get currentPage(){return this.model.currentPage}set currentPage(value){value=Number(value),this.selectPage.emit(value)}get totalDataLength(){return this.model.totalDataLength}get lastPage(){const last=Math.ceil(this.totalDataLength/this.itemsPerPage);return last>0?last:1}get startItemIndex(){return this.endItemIndex>0?(this.currentPage-1)*this.itemsPerPage+1:0}get endItemIndex(){const projectedEndItemIndex=this.currentPage*this.itemsPerPage;return projectedEndItemIndex<this.totalDataLength?projectedEndItemIndex:this.totalDataLength}get previousPage(){return this.currentPage<=1?1:this.currentPage-1}get nextPage(){const lastPage=this.lastPage;return this.currentPage>=lastPage?lastPage:this.currentPage+1}get pageOptions(){return this.totalDataLength&&this._pageOptions.length!==this.totalDataLength&&(this._pageOptions=Array(Math.ceil(this.totalDataLength/this.itemsPerPage))),this._pageOptions}};Pagination.paginationCounter=0,Pagination.ctorParameters=()=>[{type:i18n.oc},{type:experimental.tM}],Pagination.propDecorators={skeleton:[{type:core.Input}],model:[{type:core.Input}],disabled:[{type:core.Input}],pageInputDisabled:[{type:core.Input}],showPageInput:[{type:core.Input}],pagesUnknown:[{type:core.Input}],pageSelectThreshold:[{type:core.Input}],translations:[{type:core.Input}],itemsPerPageOptions:[{type:core.Input}],selectPage:[{type:core.Output}]},Pagination=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination, ibm-pagination",template:'\n\t<div\n\t\tclass="cds--pagination"\n\t\t[ngClass]="{\n\t\t\t\'cds--skeleton\': skeleton\n\t\t}">\n\t\t\x3c!-- left skeleton div --\x3e\n\t\t<div *ngIf="skeleton" class="cds--pagination__left">\n\t\t\t<p class="cds--skeleton__text" style="width: 70px"></p>\n\t\t\t<p class="cds--skeleton__text" style="width: 35px"></p>\n\t\t\t<p class="cds--skeleton__text" style="width: 105px"></p>\n\t\t</div>\n\n\t\t<div *ngIf="!skeleton" class="cds--pagination__left">\n\t\t\t<ng-container *ngIf="showPageInput">\n\t\t\t\t<label class="cds--pagination__text" [for]="itemsPerPageSelectId">\n\t\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--select cds--select--inline cds--select__item-count"\n\t\t\t\t\t[class.cds--select--disabled]="pageInputDisabled">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]="itemsPerPageSelectId"\n\t\t\t\t\t\t[(ngModel)]="itemsPerPage"\n\t\t\t\t\t\t[disabled]="pageInputDisabled"\n\t\t\t\t\t\tclass="cds--select-input">\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tclass="cds--select-option"\n\t\t\t\t\t\t\t*ngFor="let option of itemsPerPageOptions"\n\t\t\t\t\t\t\t[value]="option">\n\t\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tstyle="display: inherit"\n\t\t\t\t\t\tclass="cds--select__arrow"\n\t\t\t\t\t\taria-hidden="true"\n\t\t\t\t\t\t[attr.ariaLabel]="optionsListText.subject | async">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<span *ngIf="!pagesUnknown && totalDataLength <= 1" class="cds--pagination__text" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="!pagesUnknown && totalDataLength > 1" class="cds--pagination__text" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="pagesUnknown" class="cds--pagination__text" [ngStyle]="{\'margin-left\': showPageInput ? null : 0}">\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t\x3c!-- right skeleton div --\x3e\n\t\t<div *ngIf="skeleton" class="cds--pagination__right">\n\t\t\t<p class="cds--skeleton__text" style="width: 70px"></p>\n\t\t</div>\n\n\t\t<div *ngIf="!skeleton" class="cds--pagination__right">\n\t\t\t<span *ngIf="pagesUnknown" class="cds--pagination__text cds--pagination__page-text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{pageText.subject | async}}\n\t\t\t</span>\n\t\t\t<ng-container *ngIf="showPageInput">\n\t\t\t\t<div\n\t\t\t\t\tclass="cds--select cds--select--inline cds--select__page-number"\n\t\t\t\t\t[class.cds--select--disabled]="pageInputDisabled">\n\t\t\t\t\t<label [for]="currentPageSelectId" class="cds--label cds--visually-hidden">{{pageText.subject | async}}</label>\n\t\t\t\t\t<input\n\t\t\t\t\t\t*ngIf="pageOptions.length > pageSelectThreshold"\n\t\t\t\t\t\tstyle="padding-right: 1rem; margin-right: 1rem;"\n\t\t\t\t\t\t[id]="currentPageSelectId"\n\t\t\t\t\t\ttype="number"\n\t\t\t\t\t\tmin="1"\n\t\t\t\t\t\t[max]="pageOptions.length"\n\t\t\t\t\t\tclass="cds--select-input"\n\t\t\t\t\t\t[(ngModel)]="currentPage">\n\t\t\t\t\t<select\n\t\t\t\t\t\t*ngIf="pageOptions.length <= pageSelectThreshold"\n\t\t\t\t\t\t[id]="currentPageSelectId"\n\t\t\t\t\t\tclass="cds--select-input"\n\t\t\t\t\t\t[disabled]="pageInputDisabled"\n\t\t\t\t\t\t[(ngModel)]="currentPage">\n\t\t\t\t\t\t<option *ngFor="let page of pageOptions; let i = index;" class="cds--select-option" [value]="i + 1">{{i + 1}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf="pageOptions.length <= 1000"\n\t\t\t\t\t\tcdsIcon="chevron--down"\n\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\tstyle="display: inherit;"\n\t\t\t\t\t\tclass="cds--select__arrow"\n\t\t\t\t\t\t[attr.ariaLabel]="optionsListText.subject | async">\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\n\t\t\t<span *ngIf="!pagesUnknown && lastPage <= 1" class="cds--pagination__text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf="!pagesUnknown && lastPage > 1" class="cds--pagination__text">\n\t\t\t\t<ng-container *ngIf="!showPageInput">{{currentPage}}</ng-container>\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<div class="cds--pagination__control-buttons">\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="ghost"\n\t\t\t\t\ticonOnly="true"\n\t\t\t\t\tclass="cds--pagination__button cds--pagination__button--backward"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--pagination__button--no-index\': currentPage <= 1 || disabled\n\t\t\t\t\t}"\n\t\t\t\t\ttabindex="0"\n\t\t\t\t\t[attr.aria-label]="backwardText.subject | async"\n\t\t\t\t\t(click)="selectPage.emit(previousPage)"\n\t\t\t\t\t[disabled]="(currentPage <= 1 || disabled ? true : null)">\n\t\t\t\t\t<svg cdsIcon="caret--left" size="16" class="cds--btn__icon"></svg>\n\t\t\t\t</button>\n\n\t\t\t\t<button\n\t\t\t\t\tcdsButton="ghost"\n\t\t\t\t\ticonOnly="true"\n\t\t\t\t\tclass="\n\t\t\t\t\t\tcds--pagination__button\n\t\t\t\t\t\tcds--pagination__button--forward"\n\t\t\t\t\t[ngClass]="{\n\t\t\t\t\t\t\'cds--pagination__button--no-index\': currentPage >= lastPage || disabled\n\t\t\t\t\t}"\n\t\t\t\t\ttabindex="0"\n\t\t\t\t\t[attr.aria-label]="forwardText.subject | async"\n\t\t\t\t\t(click)="selectPage.emit(nextPage)"\n\t\t\t\t\t[disabled]="(currentPage >= lastPage || disabled ? true : null)">\n\t\t\t\t\t<svg cdsIcon="caret--right" size="16" class="cds--btn__icon"></svg>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t'})],Pagination);var common=__webpack_require__("./node_modules/@angular/common/fesm2020/common.mjs"),fesm2020_forms=__webpack_require__("./node_modules/@angular/forms/fesm2020/forms.mjs");let PaginationNav=class PaginationNav{constructor(i18n,experimental){this.i18n=i18n,this.experimental=experimental,this.disabled=!1,this.numOfItemsToShow=4,this.selectPage=new core.EventEmitter,this.nextItemText=this.i18n.getOverridable("PAGINATION.NEXT"),this.previousItemText=this.i18n.getOverridable("PAGINATION.PREVIOUS"),PaginationNav.paginationCounter++}set translations(value){const valueWithDefaults=(0,utils.TS)(this.i18n.getMultiple("PAGINATION"),value);this.nextItemText.override(valueWithDefaults.NEXT),this.previousItemText.override(valueWithDefaults.PREVIOUS)}get totalNumbersArray(){return function range(stop,start=0,step=1){return Array(Math.ceil((stop-start)/step)).fill(0).map(((x,i)=>i*step+start))}(this.totalDataLength+1,1)}get currentPage(){return this.model.currentPage}set currentPage(value){value=Number(value),this.selectPage.emit(value)}get totalDataLength(){return this.model.totalDataLength}get startOffset(){return this.numOfItemsToShow<=4&&this.currentPage>1?0:1}get frontCuts(){return this.getCuts().front}get backCuts(){return this.getCuts().back}get leftArrowDisabled(){return this.disabled||1===this.currentPage}get rightArrowDisabled(){return this.disabled||this.currentPage===this.totalDataLength}handleOverflowSelection(page){"number"==typeof page&&(this.currentPage=page)}jumpToNext(){this.currentPage=this.currentPage<this.totalDataLength?this.currentPage+1:this.totalDataLength}jumpToPrevious(){this.currentPage=this.currentPage>1?this.currentPage-1:1}getPages(){if(this.totalDataLength<=1)return null;const cuts=this.getCuts();return this.totalNumbersArray.slice(this.startOffset+cuts.front,-1*(1+cuts.back))}getCuts(splitPoint=null){const page=this.currentPage-1,totalItems=this.totalDataLength,itemsThatFit=this.numOfItemsToShow;if(itemsThatFit>=totalItems)return{front:0,back:0};const split=splitPoint||Math.ceil(itemsThatFit/2)-1;let frontHidden=page+1-split,backHidden=totalItems-page-(itemsThatFit-split)+1;return frontHidden<=1&&(backHidden-=frontHidden<=0?Math.abs(frontHidden)+1:0,frontHidden=0),backHidden<=1&&(frontHidden-=backHidden<=0?Math.abs(backHidden)+1:0,backHidden=0),{front:frontHidden,back:backHidden}}};PaginationNav.paginationCounter=0,PaginationNav.ctorParameters=()=>[{type:i18n.oc},{type:experimental.tM}],PaginationNav.propDecorators={model:[{type:core.Input}],disabled:[{type:core.Input}],numOfItemsToShow:[{type:core.Input}],translations:[{type:core.Input}],selectPage:[{type:core.Output}]},PaginationNav=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-nav, ibm-pagination-navm",template:'\n\t<div>\n\t\t<div class="cds--pagination-nav">\n\t\t\t<ul class="cds--pagination-nav__list">\n\t\t\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind="ghost"\n\t\t\t\t\t\tsize="md"\n\t\t\t\t\t\t(click)="jumpToPrevious()"\n\t\t\t\t\t\t[disabled]="leftArrowDisabled"\n\t\t\t\t\t\t[description]="previousItemText.subject | async">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon="caret--left"\n\t\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\t\tclass="cds--btn__icon">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf="this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)"\n\t\t\t\t\tpage="1"\n\t\t\t\t\t(click)="currentPage = 1"\n\t\t\t\t\t[isActive]="currentPage == 1">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf="frontCuts"\n\t\t\t\t\t[count]="frontCuts"\n\t\t\t\t\t[fromIndex]="startOffset"\n\t\t\t\t\t(change)="handleOverflowSelection($event)">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngFor="let page of getPages();"\n\t\t\t\t\t[page]="page"\n\t\t\t\t\t(click)="currentPage = page"\n\t\t\t\t\t[isActive]="currentPage == page">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf="backCuts"\n\t\t\t\t\t[count]="backCuts"\n\t\t\t\t\t[fromIndex]="totalNumbersArray.length - backCuts - 1"\n\t\t\t\t\t(change)="handleOverflowSelection($event)">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf="totalDataLength > 1"\n\t\t\t\t\t[page]="totalNumbersArray.length"\n\t\t\t\t\t(click)="currentPage = totalNumbersArray.length"\n\t\t\t\t\t[isActive]="currentPage == totalNumbersArray.length">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind="ghost"\n\t\t\t\t\t\t(click)="jumpToNext()"\n\t\t\t\t\t\t[disabled]="rightArrowDisabled"\n\t\t\t\t\t\t[description]="nextItemText.subject | async">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon="caret--right"\n\t\t\t\t\t\t\tsize="16"\n\t\t\t\t\t\t\tclass="cds--btn__icon">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n\t'})],PaginationNav);let PaginationNavItem=class PaginationNavItem{constructor(){this.page=0,this.isActive=!1,this.click=new core.EventEmitter}};PaginationNavItem.ctorParameters=()=>[],PaginationNavItem.propDecorators={page:[{type:core.Input}],isActive:[{type:core.Input}],click:[{type:core.Output}]},PaginationNavItem=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-nav-item, ibm-pagination-nav-item",template:'\n\t\t<li class="cds--pagination-nav__list-item">\n\t\t\t<button\n\t\t\t\ttype="button"\n\t\t\t\tclass="cds--pagination-nav__page"\n\t\t\t\t[ngClass]="{ \'cds--pagination-nav__page--active\': isActive }"\n\t\t\t\t(click)="click.emit(page)">\n\t\t\t\t<span class="cds--pagination-nav__accessibility-label">\n\t\t\t\t\t{{page}}\n\t\t\t\t</span>\n\t\t\t\t{{page}}\n\t\t\t</button>\n\t\t</li>\n\t'})],PaginationNavItem);let PaginationOverflow=class PaginationOverflow{constructor(i18n){this.i18n=i18n,this.ariaLabel=this.i18n.get().PAGINATION.SELECT_ARIA,this.change=new core.EventEmitter}get countAsArray(){return[...Array(this.count)]}handleChange(event){this.change.emit(+event.target.value),event.target.value=""}};PaginationOverflow.ctorParameters=()=>[{type:i18n.oc}],PaginationOverflow.propDecorators={fromIndex:[{type:core.Input}],count:[{type:core.Input}],ariaLabel:[{type:core.Input}],change:[{type:core.Output}]},PaginationOverflow=(0,tslib_es6.gn)([(0,core.Component)({selector:"cds-pagination-overflow, ibm-pagination-overflow",template:'\n\t\t<li class="cds--pagination-nav__list-item" *ngIf="count > 1">\n\t\t\t<div class="cds--pagination-nav__select">\n\t\t\t<select\n\t\t\t\t[attr.aria-label]="ariaLabel"\n\t\t\t\tclass="cds--pagination-nav__page cds--pagination-nav__page--select"\n\t\t\t\t(change)="handleChange($event)">\n\t\t\t\t<option value="" hidden></option>\n\t\t\t\t<option\n\t\t\t\t*ngFor="let item of countAsArray; let i = index">\n\t\t\t\t\t{{fromIndex + i + 1}}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t\t<div class="cds--pagination-nav__select-icon-wrapper">\n\t\t\t\t<svg\n\t\t\t\t\tcdsIcon="overflow-menu--horizontal"\n\t\t\t\t\tsize="16"\n\t\t\t\t\tstyle="display: inherit"\n\t\t\t\t\tclass="cds--pagination-nav__select-icon">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t\t<cds-pagination-nav-item *ngIf="count === 1" [page]="fromIndex + 1"></cds-pagination-nav-item>\n\t'})],PaginationOverflow);var icon=__webpack_require__("./src/icon/index.ts"),src_forms=__webpack_require__("./src/forms/index.ts");let PaginationModule=class PaginationModule{};PaginationModule=(0,tslib_es6.gn)([(0,core.NgModule)({declarations:[Pagination,PaginationNav,PaginationNavItem,PaginationOverflow],exports:[Pagination,PaginationNav,PaginationNavItem,PaginationOverflow],imports:[common.CommonModule,fesm2020_forms.u5,i18n.LU,experimental.OV,icon.QX,src_forms.hJ]})],PaginationModule)}}]);

package/docs/storybook/iframe.html

@@ -348,8 +348,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.5d2fe1c8.iframe.bundle.js';
+      import './runtime~main.7228f593.iframe.bundle.js';
       
       import './795.2461bc53.iframe.bundle.js';
       
-      import './main.bfc9d82d.iframe.bundle.js';</script></body></html>
+      import './main.69a14133.iframe.bundle.js';</script></body></html>