npm - carbon-components-angular - Versions diffs - 5.43.0 → 5.43.1 - Mend

carbon-components-angular 5.43.0 → 5.43.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/docs/documentation.json CHANGED Viewed

@@ -1494,12 +1494,12 @@
         },
         {
             "name": "PaginationTranslations",
-            "id": "interface-PaginationTranslations-1aa9f4ed43047dfc8cbf955cf9d80ed5f0e5051f4beffacc7f14008f07058ade74da48949243c87fe142c7088464e1fa1a437f3c3a9da1c48a05b20b61c2f55d",
+            "id": "interface-PaginationTranslations-68e44f1d874d0084c3576887d1f200e8de5d280aa1a937a63ba62b784e025e51ebb3911f25da596d94907ae47db094993997fc8e2b9d08cde1d63d69567770a1",
             "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. Get started with importing the module:\n *\n * ```typescript\n * import { PaginationModule } from 'carbon-components-angular';\n * ```\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 * [See demo](../../?path=/story/components-pagination--basic)\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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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",
+            "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. Get started with importing the module:\n *\n * ```typescript\n * import { PaginationModule } from 'carbon-components-angular';\n * ```\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 * [See demo](../../?path=/story/components-pagination--basic)\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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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\t/**\n\t\t * Calculate number of pages based on totalDataLength and itemsPerPage.\n\t\t * Even if totalDataLength is 0, numberOfPages should be always at least 1.\n\t\t * New array will be constructed only if number of pages changes.\n\t\t */\n\t\tconst numberOfPages = Math.max(Math.ceil(this.totalDataLength / this.itemsPerPage), 1);\n\t\tif (this._pageOptions.length !== numberOfPages) {\n\t\t\tthis._pageOptions = Array(numberOfPages);\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",
@@ -40764,7 +40764,7 @@
         },
         {
             "name": "Pagination",
-            "id": "component-Pagination-1aa9f4ed43047dfc8cbf955cf9d80ed5f0e5051f4beffacc7f14008f07058ade74da48949243c87fe142c7088464e1fa1a437f3c3a9da1c48a05b20b61c2f55d",
+            "id": "component-Pagination-68e44f1d874d0084c3576887d1f200e8de5d280aa1a937a63ba62b784e025e51ebb3911f25da596d94907ae47db094993997fc8e2b9d08cde1d63d69567770a1",
             "file": "src/pagination/pagination.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -40896,7 +40896,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 334
+                    "line": 340
                 },
                 {
                     "name": "currentPageSelectId",
@@ -40906,7 +40906,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 330
+                    "line": 336
                 },
                 {
                     "name": "forwardText",
@@ -40916,7 +40916,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 335
+                    "line": 341
                 },
                 {
                     "name": "itemsPerPageSelectId",
@@ -40926,7 +40926,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 329
+                    "line": 335
                 },
                 {
                     "name": "itemsPerPageText",
@@ -40936,7 +40936,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 332
+                    "line": 338
                 },
                 {
                     "name": "ofLastPagesText",
@@ -40946,7 +40946,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 340
+                    "line": 346
                 },
                 {
                     "name": "ofLastPageText",
@@ -40956,7 +40956,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 341
+                    "line": 347
                 },
                 {
                     "name": "optionsListText",
@@ -40966,7 +40966,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 333
+                    "line": 339
                 },
                 {
                     "name": "pageText",
@@ -40976,7 +40976,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 339
+                    "line": 345
                 },
                 {
                     "name": "paginationCounter",
@@ -40999,7 +40999,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 336
+                    "line": 342
                 },
                 {
                     "name": "totalItemsUnknownText",
@@ -41009,7 +41009,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 338
+                    "line": 344
                 },
                 {
                     "name": "totalItemText",
@@ -41019,7 +41019,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 337
+                    "line": 343
                 }
             ],
             "methodsClass": [],
@@ -41032,7 +41032,7 @@
             "description": "<p>Use pagination when you have multiple pages of data to handle. Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { PaginationModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><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<b>Example :</b><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><p><a href=\"../../?path=/story/components-pagination--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nUse pagination when you have multiple pages of data to handle. Get started with importing the module:\n\n```typescript\nimport { PaginationModule } from 'carbon-components-angular';\n```\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\n[See demo](../../?path=/story/components-pagination--basic)\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. Get started with importing the module:\n *\n * ```typescript\n * import { PaginationModule } from 'carbon-components-angular';\n * ```\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 * [See demo](../../?path=/story/components-pagination--basic)\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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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",
+            "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. Get started with importing the module:\n *\n * ```typescript\n * import { PaginationModule } from 'carbon-components-angular';\n * ```\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 * [See demo](../../?path=/story/components-pagination--basic)\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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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\t/**\n\t\t * Calculate number of pages based on totalDataLength and itemsPerPage.\n\t\t * Even if totalDataLength is 0, numberOfPages should be always at least 1.\n\t\t * New array will be constructed only if number of pages changes.\n\t\t */\n\t\tconst numberOfPages = Math.max(Math.ceil(this.totalDataLength / this.itemsPerPage), 1);\n\t\tif (this._pageOptions.length !== numberOfPages) {\n\t\t\tthis._pageOptions = Array(numberOfPages);\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": "",
@@ -41055,7 +41055,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 343,
+                "line": 349,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -71862,7 +71862,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71872,7 +71872,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71882,7 +71882,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71892,7 +71892,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -74604,41 +74604,41 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -78404,199 +78404,199 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"width: 500px\">\n\t\t\t<cds-accordion>\n\t\t\t\t<cds-accordion-item [title]=\"title\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t\t<cds-accordion-item [title]=\"titleWithContext\" [context]=\"{ index: 2 }\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t</cds-accordion>\n\t\t</div>\n\t\t<ng-template #title>\n\t\t\t<p class=\"cds--accordion__title\">Section 1 title</p>\n\t\t</ng-template>\n\t\t<ng-template #titleWithContext let-index=\"index\">\n\t\t\t<p class=\"cds--accordion__title\">Section {{ index }} title</p>\n\t\t</ng-template>\n\t`\n})"
                 }
             ],
-            "src/button/button-set.stories.ts": [
+            "src/breadcrumb/breadcrumb.stories.ts": [
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "breadcrumbItems",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
-                }
-            ],
-            "src/button/button.stories.ts": [
+                    "type": ""
+                },
                 {
-                    "name": "Basic",
+                    "name": "createBreadcrumbItems",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
                 },
                 {
-                    "name": "Template",
+                    "name": "CurrentPage",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                    "defaultValue": "CurrentPageTemplate.bind({})"
                 },
                 {
-                    "name": "WithIcon",
+                    "name": "CurrentPageTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithIconTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "WithIconTemplate",
+                    "name": "Model",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
-                }
-            ],
-            "src/breadcrumb/breadcrumb.stories.ts": [
+                    "defaultValue": "ModelTemplate.bind({})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "ModelTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "breadcrumbItems",
+                    "name": "ModelWithTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": ""
+                    "type": "",
+                    "defaultValue": "ModelWTemplate.bind({})"
                 },
                 {
-                    "name": "createBreadcrumbItems",
+                    "name": "ModelWTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "CurrentPage",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "CurrentPageTemplate.bind({})"
+                    "defaultValue": "WithSkeleton.bind({})"
                 },
                 {
-                    "name": "CurrentPageTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "Model",
+                    "name": "WithSkeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ModelTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "ModelTemplate",
+                    "name": "withTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
-                },
+                    "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
+                }
+            ],
+            "src/button/button-set.stories.ts": [
                 {
-                    "name": "ModelWithTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button-set.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ModelWTemplate.bind({})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "ModelWTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button-set.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                }
+            ],
+            "src/button/button.stories.ts": [
                 {
-                    "name": "Skeleton",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithSkeleton.bind({})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
                 },
                 {
-                    "name": "WithSkeleton",
+                    "name": "WithIcon",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "WithIconTemplate.bind({})"
                 },
                 {
-                    "name": "withTemplate",
+                    "name": "WithIconTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
                 }
             ],
             "src/checkbox/checkbox.stories.ts": [