npm - carbon-components-angular - Versions diffs - 5.56.3 → 5.56.5 - Mend

carbon-components-angular 5.56.3 → 5.56.5

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 (103) hide show

package/docs/documentation.json CHANGED Viewed

@@ -1494,12 +1494,12 @@
         },
         {
             "name": "PaginationTranslations",
-            "id": "interface-PaginationTranslations-68e44f1d874d0084c3576887d1f200e8de5d280aa1a937a63ba62b784e025e51ebb3911f25da596d94907ae47db094993997fc8e2b9d08cde1d63d69567770a1",
+            "id": "interface-PaginationTranslations-498d1b7f28e249198f36024770e3da5187e679e1768caa47ddf368ad36aa53a0e28dba75abac78353c5268a39a0c508412543491b68c3cfb9614f95b44306089",
             "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\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",
+            "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 <= pageSelectThreshold\"\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",
@@ -3435,7 +3435,7 @@
         },
         {
             "name": "I18n",
-            "id": "injectable-I18n-efee5c37c9466067b14f3d660ea1a9ee744734be1b334f6080b0b2f1a08285d310ceb4027c43020f4039bde69c75ae839279d5ac1f5a6c431c2318f586bb1a66",
+            "id": "injectable-I18n-a073c7aa0c9b4939b9c7d2146fdacc52cb742a2f57ff6cef45de0574281189a0bf2717642ade8570dfc5708c3899aaf1792310b82aac44f70aeab81af685f264",
             "file": "src/i18n/i18n.service.ts",
             "properties": [],
             "methods": [
@@ -3453,7 +3453,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 208,
+                    "line": 210,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWhen a path is specified returns an observable that will resolve to the translation string value.\n\nReturns the full translations object if path is not specified.\n\n",
@@ -3464,8 +3464,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6290,
-                                "end": 6294,
+                                "pos": 6333,
+                                "end": 6337,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3477,8 +3477,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 6284,
-                                "end": 6289,
+                                "pos": 6327,
+                                "end": 6332,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3495,7 +3495,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 176,
+                    "line": 178,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the current locale\n",
@@ -3510,7 +3510,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 183,
+                    "line": 185,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns an observable that resolves to the current locale, and will update when changed\n",
@@ -3532,7 +3532,7 @@
                     "optional": false,
                     "returnType": "literal type",
                     "typeParameters": [],
-                    "line": 220,
+                    "line": 222,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns all descendents of some path fragment as an object.\n\n",
@@ -3543,8 +3543,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6559,
-                                "end": 6570,
+                                "pos": 6602,
+                                "end": 6613,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3555,8 +3555,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 6553,
-                                "end": 6558,
+                                "pos": 6596,
+                                "end": 6601,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3580,7 +3580,7 @@
                     "optional": false,
                     "returnType": "Overridable",
                     "typeParameters": [],
-                    "line": 237,
+                    "line": 239,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns an instance of `Overridable` that can be used to optionally override the value provided by `I18n`\n",
@@ -3591,8 +3591,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7164,
-                                "end": 7168,
+                                "pos": 7207,
+                                "end": 7211,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3603,8 +3603,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7158,
-                                "end": 7163,
+                                "pos": 7201,
+                                "end": 7206,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3620,15 +3620,15 @@
                     "args": [
                         {
                             "name": "path",
-                            "type": "",
+                            "type": "string",
                             "deprecated": false,
                             "deprecationMessage": ""
                         }
                     ],
                     "optional": false,
-                    "returnType": "string | literal type",
+                    "returnType": "string | TranslationStrings",
                     "typeParameters": [],
-                    "line": 267,
+                    "line": 269,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTrys to resolve a value from the provided path.\n\n",
@@ -3639,20 +3639,20 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7957,
-                                "end": 7961,
+                                "pos": 8000,
+                                "end": 8004,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
                                 "kind": 80,
                                 "escapedText": "path"
                             },
-                            "type": "",
+                            "type": "string",
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7951,
-                                "end": 7956,
+                                "pos": 7994,
+                                "end": 7999,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3682,7 +3682,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 258,
+                    "line": 260,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTakes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\nThe keys specify the variable name in the string.\n\nExample:\n```\nservice.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\nservice.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n```\n\nProduces: `\"test asdf\"`\n\n",
@@ -3693,8 +3693,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7653,
-                                "end": 7660,
+                                "pos": 7696,
+                                "end": 7703,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3705,8 +3705,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7647,
-                                "end": 7652,
+                                "pos": 7690,
+                                "end": 7695,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3717,8 +3717,8 @@
                         },
                         {
                             "name": {
-                                "pos": 7712,
-                                "end": 7721,
+                                "pos": 7755,
+                                "end": 7764,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3729,8 +3729,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7706,
-                                "end": 7711,
+                                "pos": 7749,
+                                "end": 7754,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3754,7 +3754,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 192,
+                    "line": 194,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet/update the translations from an object. Also notifies all participating components of the update.\n\n",
@@ -3765,8 +3765,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5687,
-                                "end": 5694,
+                                "pos": 5730,
+                                "end": 5737,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3777,8 +3777,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5681,
-                                "end": 5686,
+                                "pos": 5724,
+                                "end": 5729,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3809,7 +3809,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 166,
+                    "line": 168,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the locale and optionally the translation strings. Locale is used by components that\nare already locale aware (datepicker for example) while the translation strings are used\nfor components that are not.\n\nLocales set here will override locales/languages set in components\n",
@@ -3820,8 +3820,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4999,
-                                "end": 5007,
+                                "pos": 5042,
+                                "end": 5050,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3832,8 +3832,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4993,
-                                "end": 4998,
+                                "pos": 5036,
+                                "end": 5041,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3844,8 +3844,8 @@
                         },
                         {
                             "name": {
-                                "pos": 5102,
-                                "end": 5109,
+                                "pos": 5145,
+                                "end": 5152,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3857,8 +3857,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 5096,
-                                "end": 5101,
+                                "pos": 5139,
+                                "end": 5144,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -3874,7 +3874,7 @@
             "deprecationMessage": "",
             "description": "<p>The I18n service is a minimal internal singleton service used to supply our components with translated strings.</p>\n<p>All the components that support I18n also support directly passed strings.\nUsage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\nare a better choice)</p>\n",
             "rawdescription": "\n\nThe I18n service is a minimal internal singleton service used to supply our components with translated strings.\n\nAll the components that support I18n also support directly passed strings.\nUsage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\nare a better choice)\n\n",
-            "sourceCode": "import { Injectable } from \"@angular/core\";\nimport {\n\tBehaviorSubject,\n\tObservable,\n\tisObservable,\n\tiif,\n\tSubscription\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nimport EN from \"./en\";\n\n/**\n * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n *\n * The keys specify the variable name in the string.\n *\n * Example:\n * ```typescript\n * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n *\n * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n * ```\n *\n * Produces: `\"test asdf\"`\n *\n * @param subject the translation to replace variables on\n * @param variables object of variables to replace\n */\nexport const replace = (subject, variables) => subject.pipe(\n\tmap<string, void>(str => {\n\t\tconst keys = Object.keys(variables);\n\t\tfor (const key of keys) {\n\t\t\tconst value = variables[key];\n\t\t\tstr = str.replace(new RegExp(`{{\\\\s*${key}\\\\s*}}`, \"g\"), value);\n\t\t}\n\t\treturn str;\n\t})\n);\n\n/**\n * Represents an \"overridable\" translation value.\n *\n * Largely an internal usecase. There are situations where we want an `Observable` that\n * can emit events from a centralized source **OR** an `Observable` that will emit events\n * from a component local source. The key example being on/off text in a `Toggle` - In some cases\n * we want the `Toggle` to use `I18n`s global translations, but in others we'd prefer to use a local\n * override. We don't ever need to return to a non-overridden state, but we do need the ability to\n * switch _to_ an overridden sate.\n */\nexport class Overridable {\n\t/**\n\t * The raw value of the translation. Defaults to the string value, but will return the value passed to `override`\n\t *\n\t * @readonly\n\t */\n\tpublic get value(): string | Observable<string> {\n\t\treturn this._value;\n\t}\n\n\tpublic set value(v: string | Observable<string>) {\n\t\tthis.override(v);\n\t}\n\n\t/**\n\t * The translation subject. Returns either a stream of overridden values, or our base translation values.\n\t *\n\t * @readonly\n\t */\n\tpublic get subject(): Observable<string> {\n\t\t/**\n\t\t * since inputs are bound on template instantiation (and thusly will always have _some_ value)\n\t\t * We can use a simple boolean and the `iif` function to determine which subject to return on subscription\n\t\t */\n\t\treturn iif(() => this.isOverridden, this.$override, this.baseTranslation);\n\t}\n\n\t/**\n\t * Overridden value. Accessed by the readonly getter `value` and set through `override`\n\t */\n\tprotected _value: string | Observable<string>;\n\t/**\n\t * Subject of overridden values. Initialized with our default value.\n\t */\n\tprotected $override: BehaviorSubject<string>;\n\t/**\n\t * Our base non-overridden translation.\n\t */\n\tprotected baseTranslation: Observable<string> = this.i18n.get(this.path);\n\n\t/**\n\t * Subscription to the observable provided as an override (if any)\n\t */\n\tprotected subscription: Subscription;\n\t/**\n\t * A boolean to flip between overridden and non-overridden states.\n\t */\n\tprotected isOverridden = false;\n\n\tconstructor(protected path: string, protected i18n: I18n) {\n\t\t/**\n\t\t * ensure `$override` is initialized with the correct default value\n\t\t * in some cases `_value` can get changed for an `Observable` before `$override` is created\n\t\t */\n\t\tconst value = this.i18n.getValueFromPath(this.path) as string;\n\t\tthis.$override = new BehaviorSubject<string>(value);\n\t\tthis._value = value;\n\t}\n\t/**\n\t * Takes a string or an `Observable` that emits strings.\n\t * Overrides the value provided by the `I18n` service.\n\t */\n\toverride(value: string | Observable<string>) {\n\t\tthis.isOverridden = true;\n\t\t// To ensure that there are not multiple subscriptions created for the same observable, we\n\t\t// unsubscribe if a subscription already exists for an observable before creating a new one.\n\t\tif (this.subscription) {\n\t\t\tthis.subscription.unsubscribe();\n\t\t\tthis.subscription = null;\n\t\t}\n\n\t\tthis._value = value;\n\n\t\tif (isObservable(value)) {\n\t\t\tthis.subscription = value.subscribe(v => {\n\t\t\t\tthis.$override.next(v);\n\t\t\t});\n\t\t} else {\n\t\t\tthis.$override.next(value);\n\t\t}\n\t}\n}\n\n/**\n * An object of strings, should follow the same format as src/i18n/en.json\n */\nexport type TranslationStrings = { [key: string]: string };\n\n\n/**\n * The I18n service is a minimal internal singleton service used to supply our components with translated strings.\n *\n * All the components that support I18n also support directly passed strings.\n * Usage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\n * are a better choice)\n *\n */\n@Injectable()\nexport class I18n {\n\tprotected translationStrings = EN;\n\n\tprotected translations = new Map();\n\n\tprotected locale = new BehaviorSubject(\"en\");\n\n\t/**\n\t * Sets the locale and optionally the translation strings. Locale is used by components that\n\t * are already locale aware (datepicker for example) while the translation strings are used\n\t * for components that are not.\n\t *\n\t * Locales set here will override locales/languages set in components\n\t * @param language an ISO 639-1 language code - https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes\n\t * @param strings an object of strings, optional\n\t */\n\tpublic setLocale(language: string, strings?: TranslationStrings) {\n\t\tthis.locale.next(language);\n\t\tif (strings) {\n\t\t\tthis.set(strings);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the current locale\n\t */\n\tpublic getLocale() {\n\t\treturn this.locale.value;\n\t}\n\n\t/**\n\t * Returns an observable that resolves to the current locale, and will update when changed\n\t */\n\tpublic getLocaleObservable() {\n\t\treturn this.locale.asObservable();\n\t}\n\n\t/**\n\t * Set/update the translations from an object. Also notifies all participating components of the update.\n\t *\n\t * @param strings an object of strings, should follow the same format as src/i18n/en.json\n\t */\n\tpublic set(strings: TranslationStrings) {\n\t\tthis.translationStrings = merge({}, EN, strings);\n\t\t// iterate over all our tracked translations and update each observable\n\t\tconst translations = Array.from(this.translations);\n\t\tfor (const [path, subject] of translations) {\n\t\t\tsubject.next(this.getValueFromPath(path));\n\t\t}\n\t}\n\n\t/**\n\t * When a path is specified returns an observable that will resolve to the translation string value.\n\t *\n\t * Returns the full translations object if path is not specified.\n\t *\n\t * @param path optional, looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic get(path?: string): any {\n\t\tif (!path) {\n\t\t\treturn this.translationStrings;\n\t\t}\n\t\treturn this.getSubject(path);\n\t}\n\n\t/**\n\t * Returns all descendents of some path fragment as an object.\n\t *\n\t * @param partialPath a path fragment, for example `\"NOTIFICATION\"`\n\t */\n\tpublic getMultiple(partialPath: string): { [key: string]: Observable<string> } {\n\t\tconst values = this.getValueFromPath(partialPath);\n\t\tconst subjects = {};\n\t\tfor (const key of Object.keys(values)) {\n\t\t\tif (values[key] === Object(values[key])) {\n\t\t\t\tsubjects[key] = this.getMultiple(`${partialPath}.${key}`);\n\t\t\t} else {\n\t\t\t\tsubjects[key] = this.getSubject(`${partialPath}.${key}`);\n\t\t\t}\n\t\t}\n\t\treturn subjects;\n\t}\n\n\t/**\n\t * Returns an instance of `Overridable` that can be used to optionally override the value provided by `I18n`\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getOverridable(path: string) {\n\t\treturn new Overridable(path, this);\n\t}\n\n\t/**\n\t * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\t *\n\t * The keys specify the variable name in the string.\n\t *\n\t * Example:\n\t * ```\n\t * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\t *\n\t * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n\t * ```\n\t *\n\t * Produces: `\"test asdf\"`\n\t *\n\t * @param subject the translation to replace variables on\n\t * @param variables object of variables to replace\n\t */\n\tpublic replace(subject: Observable<string>, variables: { [key: string]: string }) {\n\t\treturn replace(subject, variables);\n\t}\n\n\t/**\n\t * Trys to resolve a value from the provided path.\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getValueFromPath(path): string | { [key: string]: string } {\n\t\tlet value = this.translationStrings;\n\t\tfor (const segment of path.split(\".\")) {\n\t\t\tif (value[segment] !== undefined && value[segment] !== null) {\n\t\t\t\tvalue = value[segment];\n\t\t\t} else {\n\t\t\t\tthrow new Error(`no key ${segment} at ${path}`);\n\t\t\t}\n\t\t}\n\t\treturn value as any;\n\t}\n\n\t/**\n\t * Helper method that returns an observable from the internal cache based on the path\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tprotected getSubject(path: string): Observable<string> {\n\t\ttry {\n\t\t\t// we run this here to validate the path exists before adding it to the translation map\n\t\t\tconst value = this.getValueFromPath(path) as string;\n\t\t\tif (this.translations.has(path)) {\n\t\t\t\treturn this.translations.get(path);\n\t\t\t}\n\t\t\tconst translation = new BehaviorSubject(value);\n\t\t\tthis.translations.set(path, translation);\n\t\t\treturn translation;\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import { Injectable } from \"@angular/core\";\nimport {\n\tBehaviorSubject,\n\tObservable,\n\tisObservable,\n\tiif,\n\tSubscription\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nimport EN from \"./en\";\n\n/**\n * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n *\n * The keys specify the variable name in the string.\n *\n * Example:\n * ```typescript\n * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n *\n * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n * ```\n *\n * Produces: `\"test asdf\"`\n *\n * @param subject the translation to replace variables on\n * @param variables object of variables to replace\n */\nexport const replace = (subject, variables) => subject.pipe(\n\tmap<string, void>(str => {\n\t\tconst keys = Object.keys(variables);\n\t\tfor (const key of keys) {\n\t\t\tconst value = variables[key];\n\t\t\tstr = str.replace(new RegExp(`{{\\\\s*${key}\\\\s*}}`, \"g\"), value);\n\t\t}\n\t\treturn str;\n\t})\n);\n\n/**\n * Represents an \"overridable\" translation value.\n *\n * Largely an internal usecase. There are situations where we want an `Observable` that\n * can emit events from a centralized source **OR** an `Observable` that will emit events\n * from a component local source. The key example being on/off text in a `Toggle` - In some cases\n * we want the `Toggle` to use `I18n`s global translations, but in others we'd prefer to use a local\n * override. We don't ever need to return to a non-overridden state, but we do need the ability to\n * switch _to_ an overridden sate.\n */\nexport class Overridable {\n\t/**\n\t * The raw value of the translation. Defaults to the string value, but will return the value passed to `override`\n\t *\n\t * @readonly\n\t */\n\tpublic get value(): string | Observable<string> {\n\t\treturn this._value;\n\t}\n\n\tpublic set value(v: string | Observable<string>) {\n\t\tthis.override(v);\n\t}\n\n\t/**\n\t * The translation subject. Returns either a stream of overridden values, or our base translation values.\n\t *\n\t * @readonly\n\t */\n\tpublic get subject(): Observable<string> {\n\t\t/**\n\t\t * since inputs are bound on template instantiation (and thusly will always have _some_ value)\n\t\t * We can use a simple boolean and the `iif` function to determine which subject to return on subscription\n\t\t */\n\t\treturn iif(() => this.isOverridden, this.$override, this.baseTranslation);\n\t}\n\n\t/**\n\t * Overridden value. Accessed by the readonly getter `value` and set through `override`\n\t */\n\tprotected _value: string | Observable<string>;\n\t/**\n\t * Subject of overridden values. Initialized with our default value.\n\t */\n\tprotected $override: BehaviorSubject<string>;\n\t/**\n\t * Our base non-overridden translation.\n\t */\n\tprotected baseTranslation: Observable<string> = this.i18n.get(this.path);\n\n\t/**\n\t * Subscription to the observable provided as an override (if any)\n\t */\n\tprotected subscription: Subscription;\n\t/**\n\t * A boolean to flip between overridden and non-overridden states.\n\t */\n\tprotected isOverridden = false;\n\n\tconstructor(protected path: string, protected i18n: I18n) {\n\t\t/**\n\t\t * ensure `$override` is initialized with the correct default value\n\t\t * in some cases `_value` can get changed for an `Observable` before `$override` is created\n\t\t */\n\t\tconst value = this.i18n.getValueFromPath(this.path) as string;\n\t\tthis.$override = new BehaviorSubject<string>(value);\n\t\tthis._value = value;\n\t}\n\t/**\n\t * Takes a string or an `Observable` that emits strings.\n\t * Overrides the value provided by the `I18n` service.\n\t */\n\toverride(value: string | Observable<string>) {\n\t\tthis.isOverridden = true;\n\t\t// To ensure that there are not multiple subscriptions created for the same observable, we\n\t\t// unsubscribe if a subscription already exists for an observable before creating a new one.\n\t\tif (this.subscription) {\n\t\t\tthis.subscription.unsubscribe();\n\t\t\tthis.subscription = null;\n\t\t}\n\n\t\tthis._value = value;\n\n\t\tif (isObservable(value)) {\n\t\t\tthis.subscription = value.subscribe(v => {\n\t\t\t\tthis.$override.next(v);\n\t\t\t});\n\t\t} else {\n\t\t\tthis.$override.next(value);\n\t\t}\n\t}\n}\n\n/**\n * An object of strings, should follow the same format as src/i18n/en.json\n */\nexport type TranslationStrings = {\n\t[key: string]: string | TranslationStrings;\n};\n\n\n/**\n * The I18n service is a minimal internal singleton service used to supply our components with translated strings.\n *\n * All the components that support I18n also support directly passed strings.\n * Usage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\n * are a better choice)\n *\n */\n@Injectable()\nexport class I18n {\n\tprotected translationStrings: TranslationStrings = EN;\n\n\tprotected translations = new Map();\n\n\tprotected locale = new BehaviorSubject(\"en\");\n\n\t/**\n\t * Sets the locale and optionally the translation strings. Locale is used by components that\n\t * are already locale aware (datepicker for example) while the translation strings are used\n\t * for components that are not.\n\t *\n\t * Locales set here will override locales/languages set in components\n\t * @param language an ISO 639-1 language code - https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes\n\t * @param strings an object of strings, optional\n\t */\n\tpublic setLocale(language: string, strings?: TranslationStrings) {\n\t\tthis.locale.next(language);\n\t\tif (strings) {\n\t\t\tthis.set(strings);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the current locale\n\t */\n\tpublic getLocale() {\n\t\treturn this.locale.value;\n\t}\n\n\t/**\n\t * Returns an observable that resolves to the current locale, and will update when changed\n\t */\n\tpublic getLocaleObservable() {\n\t\treturn this.locale.asObservable();\n\t}\n\n\t/**\n\t * Set/update the translations from an object. Also notifies all participating components of the update.\n\t *\n\t * @param strings an object of strings, should follow the same format as src/i18n/en.json\n\t */\n\tpublic set(strings: TranslationStrings) {\n\t\tthis.translationStrings = merge({}, EN, strings);\n\t\t// iterate over all our tracked translations and update each observable\n\t\tconst translations = Array.from(this.translations);\n\t\tfor (const [path, subject] of translations) {\n\t\t\tsubject.next(this.getValueFromPath(path));\n\t\t}\n\t}\n\n\t/**\n\t * When a path is specified returns an observable that will resolve to the translation string value.\n\t *\n\t * Returns the full translations object if path is not specified.\n\t *\n\t * @param path optional, looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic get(path?: string): any {\n\t\tif (!path) {\n\t\t\treturn this.translationStrings;\n\t\t}\n\t\treturn this.getSubject(path);\n\t}\n\n\t/**\n\t * Returns all descendents of some path fragment as an object.\n\t *\n\t * @param partialPath a path fragment, for example `\"NOTIFICATION\"`\n\t */\n\tpublic getMultiple(partialPath: string): { [key: string]: Observable<string> } {\n\t\tconst values = this.getValueFromPath(partialPath);\n\t\tconst subjects = {};\n\t\tfor (const key of Object.keys(values)) {\n\t\t\tif (values[key] === Object(values[key])) {\n\t\t\t\tsubjects[key] = this.getMultiple(`${partialPath}.${key}`);\n\t\t\t} else {\n\t\t\t\tsubjects[key] = this.getSubject(`${partialPath}.${key}`);\n\t\t\t}\n\t\t}\n\t\treturn subjects;\n\t}\n\n\t/**\n\t * Returns an instance of `Overridable` that can be used to optionally override the value provided by `I18n`\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getOverridable(path: string) {\n\t\treturn new Overridable(path, this);\n\t}\n\n\t/**\n\t * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\t *\n\t * The keys specify the variable name in the string.\n\t *\n\t * Example:\n\t * ```\n\t * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\t *\n\t * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n\t * ```\n\t *\n\t * Produces: `\"test asdf\"`\n\t *\n\t * @param subject the translation to replace variables on\n\t * @param variables object of variables to replace\n\t */\n\tpublic replace(subject: Observable<string>, variables: { [key: string]: string }) {\n\t\treturn replace(subject, variables);\n\t}\n\n\t/**\n\t * Trys to resolve a value from the provided path.\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getValueFromPath(path: string): string | TranslationStrings {\n\t\tlet value: string | TranslationStrings = this.translationStrings;\n\t\tfor (const segment of path.split(\".\")) {\n\t\t\tif (value[segment] !== undefined && value[segment] !== null) {\n\t\t\t\tvalue = value[segment];\n\t\t\t} else {\n\t\t\t\tthrow new Error(`no key ${segment} at ${path}`);\n\t\t\t}\n\t\t}\n\t\treturn value as any;\n\t}\n\n\t/**\n\t * Helper method that returns an observable from the internal cache based on the path\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tprotected getSubject(path: string): Observable<string> {\n\t\ttry {\n\t\t\t// we run this here to validate the path exists before adding it to the translation map\n\t\t\tconst value = this.getValueFromPath(path) as string;\n\t\t\tif (this.translations.has(path)) {\n\t\t\t\treturn this.translations.get(path);\n\t\t\t}\n\t\t\tconst translation = new BehaviorSubject(value);\n\t\t\tthis.translations.set(path, translation);\n\t\t\treturn translation;\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t}\n\t}\n}\n",
             "extends": [],
             "type": "injectable"
         },
@@ -7091,12 +7091,12 @@
         },
         {
             "name": "Overridable",
-            "id": "class-Overridable-efee5c37c9466067b14f3d660ea1a9ee744734be1b334f6080b0b2f1a08285d310ceb4027c43020f4039bde69c75ae839279d5ac1f5a6c431c2318f586bb1a66",
+            "id": "class-Overridable-a073c7aa0c9b4939b9c7d2146fdacc52cb742a2f57ff6cef45de0574281189a0bf2717642ade8570dfc5708c3899aaf1792310b82aac44f70aeab81af685f264",
             "file": "src/i18n/i18n.service.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { Injectable } from \"@angular/core\";\nimport {\n\tBehaviorSubject,\n\tObservable,\n\tisObservable,\n\tiif,\n\tSubscription\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nimport EN from \"./en\";\n\n/**\n * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n *\n * The keys specify the variable name in the string.\n *\n * Example:\n * ```typescript\n * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n *\n * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n * ```\n *\n * Produces: `\"test asdf\"`\n *\n * @param subject the translation to replace variables on\n * @param variables object of variables to replace\n */\nexport const replace = (subject, variables) => subject.pipe(\n\tmap<string, void>(str => {\n\t\tconst keys = Object.keys(variables);\n\t\tfor (const key of keys) {\n\t\t\tconst value = variables[key];\n\t\t\tstr = str.replace(new RegExp(`{{\\\\s*${key}\\\\s*}}`, \"g\"), value);\n\t\t}\n\t\treturn str;\n\t})\n);\n\n/**\n * Represents an \"overridable\" translation value.\n *\n * Largely an internal usecase. There are situations where we want an `Observable` that\n * can emit events from a centralized source **OR** an `Observable` that will emit events\n * from a component local source. The key example being on/off text in a `Toggle` - In some cases\n * we want the `Toggle` to use `I18n`s global translations, but in others we'd prefer to use a local\n * override. We don't ever need to return to a non-overridden state, but we do need the ability to\n * switch _to_ an overridden sate.\n */\nexport class Overridable {\n\t/**\n\t * The raw value of the translation. Defaults to the string value, but will return the value passed to `override`\n\t *\n\t * @readonly\n\t */\n\tpublic get value(): string | Observable<string> {\n\t\treturn this._value;\n\t}\n\n\tpublic set value(v: string | Observable<string>) {\n\t\tthis.override(v);\n\t}\n\n\t/**\n\t * The translation subject. Returns either a stream of overridden values, or our base translation values.\n\t *\n\t * @readonly\n\t */\n\tpublic get subject(): Observable<string> {\n\t\t/**\n\t\t * since inputs are bound on template instantiation (and thusly will always have _some_ value)\n\t\t * We can use a simple boolean and the `iif` function to determine which subject to return on subscription\n\t\t */\n\t\treturn iif(() => this.isOverridden, this.$override, this.baseTranslation);\n\t}\n\n\t/**\n\t * Overridden value. Accessed by the readonly getter `value` and set through `override`\n\t */\n\tprotected _value: string | Observable<string>;\n\t/**\n\t * Subject of overridden values. Initialized with our default value.\n\t */\n\tprotected $override: BehaviorSubject<string>;\n\t/**\n\t * Our base non-overridden translation.\n\t */\n\tprotected baseTranslation: Observable<string> = this.i18n.get(this.path);\n\n\t/**\n\t * Subscription to the observable provided as an override (if any)\n\t */\n\tprotected subscription: Subscription;\n\t/**\n\t * A boolean to flip between overridden and non-overridden states.\n\t */\n\tprotected isOverridden = false;\n\n\tconstructor(protected path: string, protected i18n: I18n) {\n\t\t/**\n\t\t * ensure `$override` is initialized with the correct default value\n\t\t * in some cases `_value` can get changed for an `Observable` before `$override` is created\n\t\t */\n\t\tconst value = this.i18n.getValueFromPath(this.path) as string;\n\t\tthis.$override = new BehaviorSubject<string>(value);\n\t\tthis._value = value;\n\t}\n\t/**\n\t * Takes a string or an `Observable` that emits strings.\n\t * Overrides the value provided by the `I18n` service.\n\t */\n\toverride(value: string | Observable<string>) {\n\t\tthis.isOverridden = true;\n\t\t// To ensure that there are not multiple subscriptions created for the same observable, we\n\t\t// unsubscribe if a subscription already exists for an observable before creating a new one.\n\t\tif (this.subscription) {\n\t\t\tthis.subscription.unsubscribe();\n\t\t\tthis.subscription = null;\n\t\t}\n\n\t\tthis._value = value;\n\n\t\tif (isObservable(value)) {\n\t\t\tthis.subscription = value.subscribe(v => {\n\t\t\t\tthis.$override.next(v);\n\t\t\t});\n\t\t} else {\n\t\t\tthis.$override.next(value);\n\t\t}\n\t}\n}\n\n/**\n * An object of strings, should follow the same format as src/i18n/en.json\n */\nexport type TranslationStrings = { [key: string]: string };\n\n\n/**\n * The I18n service is a minimal internal singleton service used to supply our components with translated strings.\n *\n * All the components that support I18n also support directly passed strings.\n * Usage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\n * are a better choice)\n *\n */\n@Injectable()\nexport class I18n {\n\tprotected translationStrings = EN;\n\n\tprotected translations = new Map();\n\n\tprotected locale = new BehaviorSubject(\"en\");\n\n\t/**\n\t * Sets the locale and optionally the translation strings. Locale is used by components that\n\t * are already locale aware (datepicker for example) while the translation strings are used\n\t * for components that are not.\n\t *\n\t * Locales set here will override locales/languages set in components\n\t * @param language an ISO 639-1 language code - https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes\n\t * @param strings an object of strings, optional\n\t */\n\tpublic setLocale(language: string, strings?: TranslationStrings) {\n\t\tthis.locale.next(language);\n\t\tif (strings) {\n\t\t\tthis.set(strings);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the current locale\n\t */\n\tpublic getLocale() {\n\t\treturn this.locale.value;\n\t}\n\n\t/**\n\t * Returns an observable that resolves to the current locale, and will update when changed\n\t */\n\tpublic getLocaleObservable() {\n\t\treturn this.locale.asObservable();\n\t}\n\n\t/**\n\t * Set/update the translations from an object. Also notifies all participating components of the update.\n\t *\n\t * @param strings an object of strings, should follow the same format as src/i18n/en.json\n\t */\n\tpublic set(strings: TranslationStrings) {\n\t\tthis.translationStrings = merge({}, EN, strings);\n\t\t// iterate over all our tracked translations and update each observable\n\t\tconst translations = Array.from(this.translations);\n\t\tfor (const [path, subject] of translations) {\n\t\t\tsubject.next(this.getValueFromPath(path));\n\t\t}\n\t}\n\n\t/**\n\t * When a path is specified returns an observable that will resolve to the translation string value.\n\t *\n\t * Returns the full translations object if path is not specified.\n\t *\n\t * @param path optional, looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic get(path?: string): any {\n\t\tif (!path) {\n\t\t\treturn this.translationStrings;\n\t\t}\n\t\treturn this.getSubject(path);\n\t}\n\n\t/**\n\t * Returns all descendents of some path fragment as an object.\n\t *\n\t * @param partialPath a path fragment, for example `\"NOTIFICATION\"`\n\t */\n\tpublic getMultiple(partialPath: string): { [key: string]: Observable<string> } {\n\t\tconst values = this.getValueFromPath(partialPath);\n\t\tconst subjects = {};\n\t\tfor (const key of Object.keys(values)) {\n\t\t\tif (values[key] === Object(values[key])) {\n\t\t\t\tsubjects[key] = this.getMultiple(`${partialPath}.${key}`);\n\t\t\t} else {\n\t\t\t\tsubjects[key] = this.getSubject(`${partialPath}.${key}`);\n\t\t\t}\n\t\t}\n\t\treturn subjects;\n\t}\n\n\t/**\n\t * Returns an instance of `Overridable` that can be used to optionally override the value provided by `I18n`\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getOverridable(path: string) {\n\t\treturn new Overridable(path, this);\n\t}\n\n\t/**\n\t * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\t *\n\t * The keys specify the variable name in the string.\n\t *\n\t * Example:\n\t * ```\n\t * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\t *\n\t * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n\t * ```\n\t *\n\t * Produces: `\"test asdf\"`\n\t *\n\t * @param subject the translation to replace variables on\n\t * @param variables object of variables to replace\n\t */\n\tpublic replace(subject: Observable<string>, variables: { [key: string]: string }) {\n\t\treturn replace(subject, variables);\n\t}\n\n\t/**\n\t * Trys to resolve a value from the provided path.\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getValueFromPath(path): string | { [key: string]: string } {\n\t\tlet value = this.translationStrings;\n\t\tfor (const segment of path.split(\".\")) {\n\t\t\tif (value[segment] !== undefined && value[segment] !== null) {\n\t\t\t\tvalue = value[segment];\n\t\t\t} else {\n\t\t\t\tthrow new Error(`no key ${segment} at ${path}`);\n\t\t\t}\n\t\t}\n\t\treturn value as any;\n\t}\n\n\t/**\n\t * Helper method that returns an observable from the internal cache based on the path\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tprotected getSubject(path: string): Observable<string> {\n\t\ttry {\n\t\t\t// we run this here to validate the path exists before adding it to the translation map\n\t\t\tconst value = this.getValueFromPath(path) as string;\n\t\t\tif (this.translations.has(path)) {\n\t\t\t\treturn this.translations.get(path);\n\t\t\t}\n\t\t\tconst translation = new BehaviorSubject(value);\n\t\t\tthis.translations.set(path, translation);\n\t\t\treturn translation;\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import { Injectable } from \"@angular/core\";\nimport {\n\tBehaviorSubject,\n\tObservable,\n\tisObservable,\n\tiif,\n\tSubscription\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { merge } from \"carbon-components-angular/utils\";\n\nimport EN from \"./en\";\n\n/**\n * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n *\n * The keys specify the variable name in the string.\n *\n * Example:\n * ```typescript\n * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n *\n * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n * ```\n *\n * Produces: `\"test asdf\"`\n *\n * @param subject the translation to replace variables on\n * @param variables object of variables to replace\n */\nexport const replace = (subject, variables) => subject.pipe(\n\tmap<string, void>(str => {\n\t\tconst keys = Object.keys(variables);\n\t\tfor (const key of keys) {\n\t\t\tconst value = variables[key];\n\t\t\tstr = str.replace(new RegExp(`{{\\\\s*${key}\\\\s*}}`, \"g\"), value);\n\t\t}\n\t\treturn str;\n\t})\n);\n\n/**\n * Represents an \"overridable\" translation value.\n *\n * Largely an internal usecase. There are situations where we want an `Observable` that\n * can emit events from a centralized source **OR** an `Observable` that will emit events\n * from a component local source. The key example being on/off text in a `Toggle` - In some cases\n * we want the `Toggle` to use `I18n`s global translations, but in others we'd prefer to use a local\n * override. We don't ever need to return to a non-overridden state, but we do need the ability to\n * switch _to_ an overridden sate.\n */\nexport class Overridable {\n\t/**\n\t * The raw value of the translation. Defaults to the string value, but will return the value passed to `override`\n\t *\n\t * @readonly\n\t */\n\tpublic get value(): string | Observable<string> {\n\t\treturn this._value;\n\t}\n\n\tpublic set value(v: string | Observable<string>) {\n\t\tthis.override(v);\n\t}\n\n\t/**\n\t * The translation subject. Returns either a stream of overridden values, or our base translation values.\n\t *\n\t * @readonly\n\t */\n\tpublic get subject(): Observable<string> {\n\t\t/**\n\t\t * since inputs are bound on template instantiation (and thusly will always have _some_ value)\n\t\t * We can use a simple boolean and the `iif` function to determine which subject to return on subscription\n\t\t */\n\t\treturn iif(() => this.isOverridden, this.$override, this.baseTranslation);\n\t}\n\n\t/**\n\t * Overridden value. Accessed by the readonly getter `value` and set through `override`\n\t */\n\tprotected _value: string | Observable<string>;\n\t/**\n\t * Subject of overridden values. Initialized with our default value.\n\t */\n\tprotected $override: BehaviorSubject<string>;\n\t/**\n\t * Our base non-overridden translation.\n\t */\n\tprotected baseTranslation: Observable<string> = this.i18n.get(this.path);\n\n\t/**\n\t * Subscription to the observable provided as an override (if any)\n\t */\n\tprotected subscription: Subscription;\n\t/**\n\t * A boolean to flip between overridden and non-overridden states.\n\t */\n\tprotected isOverridden = false;\n\n\tconstructor(protected path: string, protected i18n: I18n) {\n\t\t/**\n\t\t * ensure `$override` is initialized with the correct default value\n\t\t * in some cases `_value` can get changed for an `Observable` before `$override` is created\n\t\t */\n\t\tconst value = this.i18n.getValueFromPath(this.path) as string;\n\t\tthis.$override = new BehaviorSubject<string>(value);\n\t\tthis._value = value;\n\t}\n\t/**\n\t * Takes a string or an `Observable` that emits strings.\n\t * Overrides the value provided by the `I18n` service.\n\t */\n\toverride(value: string | Observable<string>) {\n\t\tthis.isOverridden = true;\n\t\t// To ensure that there are not multiple subscriptions created for the same observable, we\n\t\t// unsubscribe if a subscription already exists for an observable before creating a new one.\n\t\tif (this.subscription) {\n\t\t\tthis.subscription.unsubscribe();\n\t\t\tthis.subscription = null;\n\t\t}\n\n\t\tthis._value = value;\n\n\t\tif (isObservable(value)) {\n\t\t\tthis.subscription = value.subscribe(v => {\n\t\t\t\tthis.$override.next(v);\n\t\t\t});\n\t\t} else {\n\t\t\tthis.$override.next(value);\n\t\t}\n\t}\n}\n\n/**\n * An object of strings, should follow the same format as src/i18n/en.json\n */\nexport type TranslationStrings = {\n\t[key: string]: string | TranslationStrings;\n};\n\n\n/**\n * The I18n service is a minimal internal singleton service used to supply our components with translated strings.\n *\n * All the components that support I18n also support directly passed strings.\n * Usage of I18n is optional, and it is not recommended for application use (libraries like ngx-translate\n * are a better choice)\n *\n */\n@Injectable()\nexport class I18n {\n\tprotected translationStrings: TranslationStrings = EN;\n\n\tprotected translations = new Map();\n\n\tprotected locale = new BehaviorSubject(\"en\");\n\n\t/**\n\t * Sets the locale and optionally the translation strings. Locale is used by components that\n\t * are already locale aware (datepicker for example) while the translation strings are used\n\t * for components that are not.\n\t *\n\t * Locales set here will override locales/languages set in components\n\t * @param language an ISO 639-1 language code - https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes\n\t * @param strings an object of strings, optional\n\t */\n\tpublic setLocale(language: string, strings?: TranslationStrings) {\n\t\tthis.locale.next(language);\n\t\tif (strings) {\n\t\t\tthis.set(strings);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the current locale\n\t */\n\tpublic getLocale() {\n\t\treturn this.locale.value;\n\t}\n\n\t/**\n\t * Returns an observable that resolves to the current locale, and will update when changed\n\t */\n\tpublic getLocaleObservable() {\n\t\treturn this.locale.asObservable();\n\t}\n\n\t/**\n\t * Set/update the translations from an object. Also notifies all participating components of the update.\n\t *\n\t * @param strings an object of strings, should follow the same format as src/i18n/en.json\n\t */\n\tpublic set(strings: TranslationStrings) {\n\t\tthis.translationStrings = merge({}, EN, strings);\n\t\t// iterate over all our tracked translations and update each observable\n\t\tconst translations = Array.from(this.translations);\n\t\tfor (const [path, subject] of translations) {\n\t\t\tsubject.next(this.getValueFromPath(path));\n\t\t}\n\t}\n\n\t/**\n\t * When a path is specified returns an observable that will resolve to the translation string value.\n\t *\n\t * Returns the full translations object if path is not specified.\n\t *\n\t * @param path optional, looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic get(path?: string): any {\n\t\tif (!path) {\n\t\t\treturn this.translationStrings;\n\t\t}\n\t\treturn this.getSubject(path);\n\t}\n\n\t/**\n\t * Returns all descendents of some path fragment as an object.\n\t *\n\t * @param partialPath a path fragment, for example `\"NOTIFICATION\"`\n\t */\n\tpublic getMultiple(partialPath: string): { [key: string]: Observable<string> } {\n\t\tconst values = this.getValueFromPath(partialPath);\n\t\tconst subjects = {};\n\t\tfor (const key of Object.keys(values)) {\n\t\t\tif (values[key] === Object(values[key])) {\n\t\t\t\tsubjects[key] = this.getMultiple(`${partialPath}.${key}`);\n\t\t\t} else {\n\t\t\t\tsubjects[key] = this.getSubject(`${partialPath}.${key}`);\n\t\t\t}\n\t\t}\n\t\treturn subjects;\n\t}\n\n\t/**\n\t * Returns an instance of `Overridable` that can be used to optionally override the value provided by `I18n`\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getOverridable(path: string) {\n\t\treturn new Overridable(path, this);\n\t}\n\n\t/**\n\t * Takes the `Observable` returned from `i18n.get` and an object of variables to replace.\n\t *\n\t * The keys specify the variable name in the string.\n\t *\n\t * Example:\n\t * ```\n\t * service.set({ \"TEST\": \"{{foo}} {{bar}}\" });\n\t *\n\t * service.replace(service.get(\"TEST\"), { foo: \"test\", bar: \"asdf\" })\n\t * ```\n\t *\n\t * Produces: `\"test asdf\"`\n\t *\n\t * @param subject the translation to replace variables on\n\t * @param variables object of variables to replace\n\t */\n\tpublic replace(subject: Observable<string>, variables: { [key: string]: string }) {\n\t\treturn replace(subject, variables);\n\t}\n\n\t/**\n\t * Trys to resolve a value from the provided path.\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tpublic getValueFromPath(path: string): string | TranslationStrings {\n\t\tlet value: string | TranslationStrings = this.translationStrings;\n\t\tfor (const segment of path.split(\".\")) {\n\t\t\tif (value[segment] !== undefined && value[segment] !== null) {\n\t\t\t\tvalue = value[segment];\n\t\t\t} else {\n\t\t\t\tthrow new Error(`no key ${segment} at ${path}`);\n\t\t\t}\n\t\t}\n\t\treturn value as any;\n\t}\n\n\t/**\n\t * Helper method that returns an observable from the internal cache based on the path\n\t *\n\t * @param path looks like `\"NOTIFICATION.CLOSE_BUTTON\"`\n\t */\n\tprotected getSubject(path: string): Observable<string> {\n\t\ttry {\n\t\t\t// we run this here to validate the path exists before adding it to the translation map\n\t\t\tconst value = this.getValueFromPath(path) as string;\n\t\t\tif (this.translations.has(path)) {\n\t\t\t\treturn this.translations.get(path);\n\t\t\t}\n\t\t\tconst translation = new BehaviorSubject(value);\n\t\t\tthis.translations.set(path, translation);\n\t\t\treturn translation;\n\t\t} catch (error) {\n\t\t\tconsole.error(error);\n\t\t}\n\t}\n}\n",
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
@@ -13313,12 +13313,12 @@
         },
         {
             "name": "IconDirective",
-            "id": "directive-IconDirective-af13f8e78e4c5d8d52b5175637904e07d769a086288d15f20df3fd8de4fedf9ec7360815a0b84ad8b4c7b46caf13b518c30f0c8defe3d9b5f5ea53953c4ddfe2",
+            "id": "directive-IconDirective-b9f31345d6c00474eaa5b36d5b3498a8e06003d02bc7b2714a6f5ca052260287aa960f00228b243879607b08699b28ba3635e3001bb2c1c1c468777ec26eed6e",
             "file": "src/icon/icon.directive.ts",
             "type": "directive",
             "description": "<p>A directive for populating a svg element based on the provided carbon icon name.</p>\n<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { IconModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-icon--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nA directive for populating a svg element based on the provided carbon icon name.\n\nGet started with importing the module:\n\n```typescript\nimport { IconModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-icon--basic)\n",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tDirective,\n\tElementRef,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { IconService } from \"./icon.service\";\nimport { getAttributes } from \"@carbon/icon-helpers\";\n\n/**\n * A directive for populating a svg element based on the provided carbon icon name.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { IconModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-icon--basic)\n */\n@Directive({\n\tselector: \"[cdsIcon], [ibmIcon]\"\n})\nexport class IconDirective implements AfterViewInit, OnChanges {\n\n\t/**\n\t * @deprecated since v5 - Use `cdsIcon` input property instead\n\t */\n\t@Input() set ibmIcon(iconName: string) {\n\t\tthis.cdsIcon = iconName;\n\t}\n\n\tstatic titleIdCounter = 0;\n\n\t@Input() cdsIcon = \"\";\n\n\t@Input() size = \"16\";\n\n\t@Input() title = \"\";\n\n\t@Input() ariaLabel = \"\";\n\n\t@Input() ariaLabelledBy = \"\";\n\n\t@Input() ariaHidden = \"\";\n\n\t@Input() isFocusable = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected iconService: IconService\n\t) {}\n\n\trenderIcon(iconName: string) {\n\t\tconst root = this.elementRef.nativeElement as HTMLElement;\n\n\t\tlet icon;\n\t\ttry {\n\t\t\ticon = this.iconService.get(iconName, this.size.toString());\n\t\t} catch (error) {\n\t\t\tconsole.warn(error);\n\t\t\t// bail out\n\t\t\treturn;\n\t\t}\n\n\t\tconst domParser = new DOMParser();\n\t\tconst rawSVG = icon.svg;\n\t\tconst svgElement = domParser.parseFromString(rawSVG, \"image/svg+xml\").documentElement;\n\n\t\tlet node: ChildNode = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : svgElement.firstChild;\n\t\troot.innerHTML = \"\"; // Clear root element\n\t\twhile (node) {\n\t\t\t// importNode makes a clone of the node\n\t\t\t// this ensures we keep looping over the nodes in the parsed document\n\t\t\troot.appendChild(root.ownerDocument.importNode(node, true));\n\t\t\t// type the node because the angular compiler freaks out if it\n\t\t\t// ends up thinking it's a `Node` instead of a `ChildNode`\n\t\t\tnode = node.nextSibling as ChildNode;\n\t\t}\n\n\t\tconst svg = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : root;\n\t\tsvg.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n\n\t\tconst attributes = getAttributes({\n\t\t\twidth: icon.attrs.width,\n\t\t\theight: icon.attrs.height,\n\t\t\tviewBox: icon.attrs.viewBox,\n\t\t\ttitle: this.title,\n\t\t\t\"aria-label\": this.ariaLabel,\n\t\t\t\"aria-labelledby\": this.ariaLabelledBy,\n\t\t\t\"aria-hidden\": this.ariaHidden,\n\t\t\tfocusable: this.isFocusable.toString(),\n\t\t\tfill: icon.attrs.fill\n\t\t});\n\n\t\tconst attrKeys = Object.keys(attributes);\n\t\tfor (let i = 0; i < attrKeys.length; i++) {\n\t\t\tconst key = attrKeys[i];\n\t\t\tconst value = attributes[key];\n\n\t\t\tif (key === \"title\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tsvg.setAttribute(key, value);\n\t\t\t}\n\t\t}\n\n\t\tif (attributes[\"title\"]) {\n\t\t\tconst title = document.createElement(\"title\");\n\t\t\ttitle.textContent = attributes.title;\n\t\t\tIconDirective.titleIdCounter++;\n\t\t\ttitle.setAttribute(\"id\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t\t// title must be first for screen readers\n\t\t\tsvg.insertBefore(title, svg.firstElementChild);\n\t\t\tsvg.setAttribute(\"aria-labelledby\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.renderIcon(this.cdsIcon);\n\t}\n\n\tngOnChanges({ cdsIcon }: SimpleChanges) {\n\t\t// We want to ignore first change to let the icon register\n\t\t// and add only after view has been initialized\n\t\tif (cdsIcon && !cdsIcon.isFirstChange()) {\n\t\t\tthis.renderIcon(this.cdsIcon);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tDirective,\n\tElementRef,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { IconService } from \"./icon.service\";\nimport { getAttributes } from \"@carbon/icon-helpers\";\n\n/**\n * A directive for populating a svg element based on the provided carbon icon name.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { IconModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-icon--basic)\n */\n@Directive({\n\tselector: \"[cdsIcon], [ibmIcon]\"\n})\nexport class IconDirective implements AfterViewInit, OnChanges {\n\n\t/**\n\t * @deprecated since v5 - Use `cdsIcon` input property instead\n\t */\n\t@Input() set ibmIcon(iconName: string) {\n\t\tthis.cdsIcon = iconName;\n\t}\n\n\tstatic titleIdCounter = 0;\n\n\t@Input() cdsIcon = \"\";\n\n\t@Input() size = \"16\";\n\n\t@Input() title = \"\";\n\n\t@Input() ariaLabel = \"\";\n\n\t@Input() ariaLabelledBy = \"\";\n\n\t@Input() ariaHidden = \"\";\n\n\t@Input() isFocusable = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected iconService: IconService\n\t) {}\n\n\trenderIcon(iconName: string) {\n\t\tconst root = this.elementRef.nativeElement as HTMLElement;\n\n\t\tlet icon;\n\t\ttry {\n\t\t\ticon = this.iconService.get(iconName, this.size.toString());\n\t\t} catch (error) {\n\t\t\tconsole.warn(error);\n\t\t\t// bail out\n\t\t\treturn;\n\t\t}\n\n\t\tconst domParser = new DOMParser();\n\t\tconst rawSVG = icon.svg;\n\t\tconst svgElement = domParser.parseFromString(rawSVG, \"image/svg+xml\").documentElement;\n\n\t\tlet node: ChildNode = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : svgElement.firstChild;\n\t\troot.innerHTML = \"\"; // Clear root element\n\t\twhile (node) {\n\t\t\t// importNode makes a clone of the node\n\t\t\t// this ensures we keep looping over the nodes in the parsed document\n\t\t\troot.appendChild(root.ownerDocument.importNode(node, true));\n\t\t\t// type the node because the angular compiler freaks out if it\n\t\t\t// ends up thinking it's a `Node` instead of a `ChildNode`\n\t\t\tnode = node.nextSibling as ChildNode;\n\t\t}\n\n\t\tconst svg = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : root;\n\t\tconst xmlns = \"http://www.w3.org/2000/svg\";\n\t\tsvg.setAttribute(\"xmlns\", xmlns);\n\n\t\tconst attributes = getAttributes({\n\t\t\twidth: icon.attrs.width,\n\t\t\theight: icon.attrs.height,\n\t\t\tviewBox: icon.attrs.viewBox,\n\t\t\ttitle: this.title,\n\t\t\t\"aria-label\": this.ariaLabel,\n\t\t\t\"aria-labelledby\": this.ariaLabelledBy,\n\t\t\t\"aria-hidden\": this.ariaHidden,\n\t\t\tfocusable: this.isFocusable.toString(),\n\t\t\tfill: icon.attrs.fill\n\t\t});\n\n\t\tconst attrKeys = Object.keys(attributes);\n\t\tfor (let i = 0; i < attrKeys.length; i++) {\n\t\t\tconst key = attrKeys[i];\n\t\t\tconst value = attributes[key];\n\n\t\t\tif (key === \"title\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tsvg.setAttribute(key, value);\n\t\t\t}\n\t\t}\n\n\t\tif (attributes[\"title\"]) {\n\t\t\tconst title = document.createElementNS(xmlns, \"title\");\n\t\t\ttitle.textContent = attributes.title;\n\t\t\tIconDirective.titleIdCounter++;\n\t\t\ttitle.setAttribute(\"id\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t\t// title must be first for screen readers\n\t\t\tsvg.insertBefore(title, svg.firstElementChild);\n\t\t\tsvg.setAttribute(\"aria-labelledby\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.renderIcon(this.cdsIcon);\n\t}\n\n\tngOnChanges({ cdsIcon }: SimpleChanges) {\n\t\t// We want to ignore first change to let the icon register\n\t\t// and add only after view has been initialized\n\t\tif (cdsIcon && !cdsIcon.isFirstChange()) {\n\t\t\tthis.renderIcon(this.cdsIcon);\n\t\t}\n\t}\n}\n",
             "selector": "[cdsIcon], [ibmIcon]",
             "providers": [],
             "hostDirectives": [],
@@ -23130,7 +23130,7 @@
         },
         {
             "name": "ComboBox",
-            "id": "component-ComboBox-5cc1c96dc7814d522b0828fb72b6ba9dbb49aecfe99d45f99d3328506247334a74629d78384569506a34a7c6c5fdd586351223f5c2e8b280a91ff1b742408a73",
+            "id": "component-ComboBox-c068a9941c2d47f0543b365c579b83a84cedb4e51af6dd82e9dec6adc43516bf4f92e27533f59ca667ff678ddea3f742f86e755fbf5b195bfda4f3e58c859aa9",
             "file": "src/combobox/combobox.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -24285,7 +24285,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ComboBoxModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p>ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide &quot;pills&quot; of selected items.</p>\n<p><a href=\"../../?path=/story/components-combobox--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ComboBoxModule } from 'carbon-components-angular';\n```\n\nComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide \"pills\" of selected items.\n\n[See demo](../../?path=/story/components-combobox--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--list-box__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box__wrapper--fluid': fluid,\n\t\t\t\t'cds--list-box__wrapper--fluid--invalid': fluid && invalid,\n\t\t\t\t'cds--list-box__wrapper--fluid--focus': fluid && _isFocused\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--readonly': readonly,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn,\n\t\t\t\t\t'cds--list-box--invalid': invalid\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readOnly]=\"readonly\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `combobox-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `combobox-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\tprotected _isFocused = false;\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value ?? []) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\n\t\t// in case there are disabled items they should be mapped according to itemValueKey\n        if (this.itemValueKey && selected) {\n            const values = selected.map((item) => item[this.itemValueKey]);\n            this.propagateChangeCallback(values);\n        } else {\n            this.propagateChangeCallback(selected);\n        }\n\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled || this.readonly) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--list-box__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box__wrapper--fluid': fluid,\n\t\t\t\t'cds--list-box__wrapper--fluid--invalid': fluid && invalid,\n\t\t\t\t'cds--list-box__wrapper--fluid--focus': fluid && _isFocused\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--readonly': readonly,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn,\n\t\t\t\t\t'cds--list-box--invalid': invalid\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readOnly]=\"readonly\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `combobox-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `combobox-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\tprotected _isFocused = false;\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value ?? []) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\n\t\t// in case there are disabled items they should be mapped according to itemValueKey\n\t\tif (this.itemValueKey && selected) {\n\t\t\tconst values = selected.map((item) => item[this.itemValueKey]);\n\t\t\tthis.propagateChangeCallback(values);\n\t\t} else {\n\t\t\tthis.propagateChangeCallback(selected);\n\t\t}\n\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled || this.readonly) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -41401,7 +41401,7 @@
         },
         {
             "name": "Pagination",
-            "id": "component-Pagination-68e44f1d874d0084c3576887d1f200e8de5d280aa1a937a63ba62b784e025e51ebb3911f25da596d94907ae47db094993997fc8e2b9d08cde1d63d69567770a1",
+            "id": "component-Pagination-498d1b7f28e249198f36024770e3da5187e679e1768caa47ddf368ad36aa53a0e28dba75abac78353c5268a39a0c508412543491b68c3cfb9614f95b44306089",
             "file": "src/pagination/pagination.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -41411,7 +41411,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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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",
+            "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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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 cds--pagination__items-count\" [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 <= pageSelectThreshold\"\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": [],
@@ -41669,7 +41669,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\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",
+            "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 <= pageSelectThreshold\"\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": "",