carbon-components-angular 5.61.2 → 5.62.1

package/docs/documentation.json

@@ -1554,12 +1554,12 @@
         },
         {
             "name": "PaginationTranslations",
-            "id": "interface-PaginationTranslations-498d1b7f28e249198f36024770e3da5187e679e1768caa47ddf368ad36aa53a0e28dba75abac78353c5268a39a0c508412543491b68c3cfb9614f95b44306089",
+            "id": "interface-PaginationTranslations-1a3820eebc160a0bb9529b45f870a4b731ab01323db5e204242651e50d93454aa42b00e981018629ad4e3c202bc87c070e85a4e697fe5d694d114ee4148b3a79",
             "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 <= 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",
+            "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 || backwardDisabled\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 || backwardDisabled ? 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 || forwardDisabled\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 || forwardDisabled ? 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() set disabled(value: boolean) {\n\t\tthis.backwardDisabled = value;\n\t\tthis.forwardDisabled = value;\n\t}\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@Input() backwardDisabled = false;\n\t@Input() forwardDisabled = false;\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",
@@ -26532,7 +26532,7 @@
         },
         {
             "name": "ContextMenuItemComponent",
-            "id": "component-ContextMenuItemComponent-1688169278415531c2622c3ec58218219e214e8fb013ca1c0dff71e41f4a9c9b2ac3eb56e83d8e977ba86c5b9c92f02a5545ad346b86886e070dcfa21fa94668",
+            "id": "component-ContextMenuItemComponent-7ef294a6e016ced0c17157feee090fd8747b41215bae48d6d7a70cdfb9b456421ecc21946092453ff9e7271118dc3583936fcf335d379c5249ebc1b26f1befe6",
             "file": "src/context-menu/context-menu-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -26782,7 +26782,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 166,
+                    "line": 169,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -26792,7 +26792,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 196,
+                    "line": 199,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -26802,7 +26802,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 192,
+                    "line": 195,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26868,7 +26868,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 184,
+                    "line": 187,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26887,7 +26887,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 179,
+                    "line": 182,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26906,7 +26906,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 174,
+                    "line": 177,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26932,7 +26932,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 150,
+                    "line": 153,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -26953,7 +26953,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 155,
+                    "line": 158,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -27030,7 +27030,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 192
+                    "line": 195
                 },
                 {
                     "name": "click",
@@ -27055,7 +27055,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 184
+                    "line": 187
                 },
                 {
                     "name": "keydown.enter",
@@ -27097,7 +27097,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 179
+                    "line": 182
                 },
                 {
                     "name": "mouseover",
@@ -27105,7 +27105,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 174
+                    "line": 177
                 }
             ],
             "standalone": false,
@@ -27113,7 +27113,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\nimport { ItemClickEvent } from \"./context-menu.types\";\n\n@Component({\n\tselector: \"cds-menu-item, cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t<div class=\"cds--menu-item__icon\">\n\t\t\t<svg *ngIf=\"selectable && checked\" cdsIcon=\"checkmark\" size=\"16\"></svg>\n\t\t\t<svg *ngIf=\"!selectable && icon\" [cdsIcon]=\"icon\" size=\"16\"></svg>\n\t\t</div>\n\t\t<div class=\"cds--menu-item__label\" [title]=\"label\">{{label}}</div>\n\t\t<div class=\"cds--menu-item__shortcut\">\n\t\t\t<ng-container *ngIf=\"info\">{{info}}</ng-container>\n\t\t\t<svg *ngIf=\"hasChildren\" cdsIcon=\"caret--right\" size=\"16\"></svg>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`]\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\t@HostBinding(\"attr.aria-disabled\") get ariaDisabled() {\n\t\treturn this.disabled;\n\t}\n\t@Input() @HostBinding(\"class.cds--menu-item--disabled\") disabled = false;\n\t@Input() @HostBinding(\"class.cds--menu-item--danger\") danger = false;\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\t@Output() itemClick = new EventEmitter<ItemClickEvent>();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) {}\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\n\t\tif (!this.disabled) {\n\t\t\tthis.itemClick.emit({\n\t\t\t\tevent,\n\t\t\t\tlabel: this.label,\n\t\t\t\tinfo: this.info,\n\t\t\t\tvalue: this.value,\n\t\t\t\ttype: this.type\n\t\t\t});\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\nimport { ItemClickEvent } from \"./context-menu.types\";\n\n@Component({\n\tselector: \"cds-menu-item, cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t<div class=\"cds--menu-item__icon\">\n\t\t\t<svg *ngIf=\"selectable && checked\" cdsIcon=\"checkmark\" size=\"16\"></svg>\n\t\t\t<svg *ngIf=\"!selectable && icon\" [cdsIcon]=\"icon\" size=\"16\"></svg>\n\t\t</div>\n\t\t<div class=\"cds--menu-item__label\" [title]=\"label\">{{label}}</div>\n\t\t<div class=\"cds--menu-item__shortcut\">\n\t\t\t<ng-container *ngIf=\"info\">{{info}}</ng-container>\n\t\t\t<svg *ngIf=\"hasChildren\" cdsIcon=\"caret--right\" size=\"16\"></svg>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`]\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\t@HostBinding(\"attr.aria-disabled\") get ariaDisabled() {\n\t\treturn this.disabled;\n\t}\n\t@Input() @HostBinding(\"class.cds--menu-item--disabled\") disabled = false;\n\t@Input() @HostBinding(\"class.cds--menu-item--danger\") danger = false;\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\t@Output() itemClick = new EventEmitter<ItemClickEvent>();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) {}\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\n\t\tif (!this.disabled) {\n\t\t\tthis.itemClick.emit({\n\t\t\t\tevent,\n\t\t\t\tlabel: this.label,\n\t\t\t\tinfo: this.info,\n\t\t\t\tvalue: this.value,\n\t\t\t\ttype: this.type\n\t\t\t});\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t\n",
@@ -27337,7 +27337,7 @@
         },
         {
             "name": "DatePicker",
-            "id": "component-DatePicker-ff293c0c2be8fdf9f555fef4cc23b2d966c09514751aa2b5096d1048e9e522081e4eea33b5742cb1b40faa6f6419aee019237c2a4d2a430c52e0455c939f3877",
+            "id": "component-DatePicker-8490dd4240f565f290d659bbb8a869d6c0ae0045fee29938a5a5250903ef50f8a50ec0c2caa40e5cbc6eb212dda2a912307666227d8310a3472430525d23c3ad",
             "file": "src/datepicker/datepicker.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -28018,7 +28018,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DatePickerModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-date-picker--single\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { DatePickerModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-date-picker--single)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker 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 warningText)\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\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t  */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker.\n\t\t\t// You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\t\t\t\t\tconst selectedDateElem = calendarContainer && calendarContainer.querySelector('.selected');\n\t\t\t\t\tconst todayDateElem = calendarContainer && calendarContainer.querySelector('.today');\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\t(todayDateElem || selectedDateElem || dayElement).focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.setAttribute('role', 'button');\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"application\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker 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 warningText)\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\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t  */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker.\n\t\t\t// You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\t\t\t\t\tconst selectedDateElem = calendarContainer && calendarContainer.querySelector(\".selected\");\n\t\t\t\t\tconst todayDateElem = calendarContainer && calendarContainer.querySelector(\".today\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\t(todayDateElem || selectedDateElem || dayElement).focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.setAttribute(\"role\", \"button\");\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"application\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -38434,7 +38434,7 @@
         },
         {
             "name": "MockQueryCombobox",
-            "id": "component-MockQueryCombobox-87d1f26349c813e36ca2b19d0e7cb9ff5690dd69abba140e1debc7229ebd981131f8cc38bc647b1e0d58efecb873a83465cdde7d68564cdc21309bb408ee9a59",
+            "id": "component-MockQueryCombobox-0aa6a59d20da3dbd55a5faa6326bd9712ddf9fa070499d3201edac39f9fe471269cf0c44744a8831c0283e815c44810e0ca0448d1be8120c85d38504019b09db",
             "file": "src/combobox/stories/app-mock-query-search.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -38520,7 +38520,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\"\n\t\t\t(selected)=\"selected($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})\nexport class MockQueryCombobox {\n\tfilterItems: any = [];\n\tcurrentlySelected: any;\n\n\tonSearch() {\n\t\t// Call API or search through items list\n\t\tsetTimeout(() => {\n\t\t\tconst array = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t];\n\n\t\t\t// Include current selected in the list to avoid auto clear\n\t\t\tif (this.currentlySelected) {\n\t\t\t\tarray.push(this.currentlySelected)\n\t\t\t}\n\t\t\tthis.filterItems = array;\n\t\t}, 1000);\n\t}\n\n\tselected(event: any) {\n\t\t/**\n\t\t * #ref-1245723\n\t\t * Update this on major release\n\t\t */\n\t\tif (Array.isArray(event) && !event.length) {\n\t\t\tthis.currentlySelected = undefined;\n\t\t} else {\n\t\t\tthis.currentlySelected = event;\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import { Component } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\"\n\t\t\t(selected)=\"selected($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})\nexport class MockQueryCombobox {\n\tfilterItems: any = [];\n\tcurrentlySelected: any;\n\n\tonSearch() {\n\t\t// Call API or search through items list\n\t\tsetTimeout(() => {\n\t\t\tconst array = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` }\n\t\t\t];\n\n\t\t\t// Include current selected in the list to avoid auto clear\n\t\t\tif (this.currentlySelected) {\n\t\t\t\tarray.push(this.currentlySelected);\n\t\t\t}\n\t\t\tthis.filterItems = array;\n\t\t}, 1000);\n\t}\n\n\tselected(event: any) {\n\t\t/**\n\t\t * #ref-1245723\n\t\t * Update this on major release\n\t\t */\n\t\tif (Array.isArray(event) && !event.length) {\n\t\t\tthis.currentlySelected = undefined;\n\t\t} else {\n\t\t\tthis.currentlySelected = event;\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -43020,7 +43020,7 @@
         },
         {
             "name": "Pagination",
-            "id": "component-Pagination-498d1b7f28e249198f36024770e3da5187e679e1768caa47ddf368ad36aa53a0e28dba75abac78353c5268a39a0c508412543491b68c3cfb9614f95b44306089",
+            "id": "component-Pagination-1a3820eebc160a0bb9529b45f870a4b731ab01323db5e204242651e50d93454aa42b00e981018629ad4e3c202bc87c070e85a4e697fe5d694d114ee4148b3a79",
             "file": "src/pagination/pagination.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -43030,22 +43030,39 @@
             "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 <= 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",
+            "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 || backwardDisabled\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 || backwardDisabled ? 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 || forwardDisabled\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 || forwardDisabled ? 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": [],
             "inputsClass": [
                 {
-                    "name": "disabled",
+                    "name": "backwardDisabled",
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
+                    "line": 225,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "disabled",
+                    "deprecated": false,
+                    "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to disable the backward/forward buttons.\n",
                     "description": "<p>Set to <code>true</code> to disable the backward/forward buttons.</p>\n",
                     "line": 207,
                     "type": "boolean",
                     "decorators": []
                 },
+                {
+                    "name": "forwardDisabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 226,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "itemsPerPageOptions",
                     "defaultValue": "[10, 20, 30, 40, 50]",
@@ -43053,7 +43070,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptions for items per page select\n\nA default array of options will be defined: [10, 20, 30, 40, 50]\n",
                     "description": "<p>Options for items per page select</p>\n<p>A default array of options will be defined: [10, 20, 30, 40, 50]</p>\n",
-                    "line": 258,
+                    "line": 264,
                     "type": "number[]",
                     "decorators": []
                 },
@@ -43074,7 +43091,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to disable the select box that changes the page.\n",
                     "description": "<p>Set to <code>true</code> to disable the select box that changes the page.</p>\n",
-                    "line": 211,
+                    "line": 214,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -43083,7 +43100,7 @@
                     "defaultValue": "1000",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 220,
+                    "line": 223,
                     "type": "number",
                     "decorators": []
                 },
@@ -43094,7 +43111,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` if the total number of items is unknown.\n",
                     "description": "<p>Set to <code>true</code> if the total number of items is unknown.</p>\n",
-                    "line": 219,
+                    "line": 222,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -43105,7 +43122,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls wether or not to show the page selects\n",
                     "description": "<p>Controls wether or not to show the page selects</p>\n",
-                    "line": 215,
+                    "line": 218,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -43126,7 +43143,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t\t\"BACKWARD\": \"Backward\",\n\t\t\"FORWARD\": \"Forward\",\n\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n}\n```\n",
                     "description": "<p>Expects an object that contains some or all of:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-none\">{\n        &quot;ITEMS_PER_PAGE&quot;: &quot;Items per page:&quot;,\n        &quot;OPEN_LIST_OF_OPTIONS&quot;: &quot;Open list of options&quot;,\n        &quot;BACKWARD&quot;: &quot;Backward&quot;,\n        &quot;FORWARD&quot;: &quot;Forward&quot;,\n        &quot;TOTAL_ITEMS_UNKNOWN&quot;: &quot;{{start}}-{{end}} items&quot;,\n        &quot;TOTAL_ITEMS&quot;: &quot;{{start}}-{{end}} of {{total}} items&quot;,\n        &quot;TOTAL_ITEM&quot;: &quot;{{start}}-{{end}} of {{total}} item&quot;,\n        &quot;OF_LAST_PAGES&quot;: &quot;of {{last}} pages&quot;,\n        &quot;OF_LAST_PAGE&quot;: &quot;of {{last}} page&quot;\n}</code></pre></div>",
-                    "line": 239,
+                    "line": 245,
                     "type": "PaginationTranslations",
                     "decorators": []
                 }
@@ -43139,7 +43156,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits the new page number.\n\nYou should tie into this and update `model.currentPage` once the fresh\ndata is finally loaded.\n",
                     "description": "<p>Emits the new page number.</p>\n<p>You should tie into this and update <code>model.currentPage</code> once the fresh\ndata is finally loaded.</p>\n",
-                    "line": 266,
+                    "line": 272,
                     "type": "EventEmitter"
                 }
             ],
@@ -43152,7 +43169,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 340
+                    "line": 346
                 },
                 {
                     "name": "currentPageSelectId",
@@ -43162,7 +43179,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 336
+                    "line": 342
                 },
                 {
                     "name": "forwardText",
@@ -43172,7 +43189,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 341
+                    "line": 347
                 },
                 {
                     "name": "itemsPerPageSelectId",
@@ -43182,7 +43199,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 335
+                    "line": 341
                 },
                 {
                     "name": "itemsPerPageText",
@@ -43192,7 +43209,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 338
+                    "line": 344
                 },
                 {
                     "name": "ofLastPagesText",
@@ -43202,7 +43219,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 346
+                    "line": 352
                 },
                 {
                     "name": "ofLastPageText",
@@ -43212,7 +43229,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 347
+                    "line": 353
                 },
                 {
                     "name": "optionsListText",
@@ -43222,7 +43239,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 339
+                    "line": 345
                 },
                 {
                     "name": "pageText",
@@ -43232,7 +43249,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 345
+                    "line": 351
                 },
                 {
                     "name": "paginationCounter",
@@ -43255,7 +43272,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 342
+                    "line": 348
                 },
                 {
                     "name": "totalItemsUnknownText",
@@ -43265,7 +43282,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 344
+                    "line": 350
                 },
                 {
                     "name": "totalItemText",
@@ -43275,7 +43292,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 343
+                    "line": 349
                 }
             ],
             "methodsClass": [],
@@ -43288,7 +43305,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 <= 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",
+            "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 || backwardDisabled\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 || backwardDisabled ? 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 || forwardDisabled\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 || forwardDisabled ? 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() set disabled(value: boolean) {\n\t\tthis.backwardDisabled = value;\n\t\tthis.forwardDisabled = value;\n\t}\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@Input() backwardDisabled = false;\n\t@Input() forwardDisabled = false;\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": "",
@@ -43311,7 +43328,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 349,
+                "line": 355,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -43335,6 +43352,38 @@
             },
             "extends": [],
             "accessors": {
+                "disabled": {
+                    "name": "disabled",
+                    "setSignature": {
+                        "name": "disabled",
+                        "type": "void",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "args": [
+                            {
+                                "name": "value",
+                                "type": "boolean",
+                                "deprecated": false,
+                                "deprecationMessage": ""
+                            }
+                        ],
+                        "returnType": "void",
+                        "line": 207,
+                        "rawdescription": "\n\nSet to `true` to disable the backward/forward buttons.\n",
+                        "description": "<p>Set to <code>true</code> to disable the backward/forward buttons.</p>\n",
+                        "jsdoctags": [
+                            {
+                                "name": "value",
+                                "type": "boolean",
+                                "deprecated": false,
+                                "deprecationMessage": "",
+                                "tagName": {
+                                    "text": "param"
+                                }
+                            }
+                        ]
+                    }
+                },
                 "translations": {
                     "name": "translations",
                     "setSignature": {
@@ -43351,7 +43400,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 239,
+                        "line": 245,
                         "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"ITEMS_PER_PAGE\": \"Items per page:\",\n\t\t\"OPEN_LIST_OF_OPTIONS\": \"Open list of options\",\n\t\t\"BACKWARD\": \"Backward\",\n\t\t\"FORWARD\": \"Forward\",\n\t\t\"TOTAL_ITEMS_UNKNOWN\": \"{{start}}-{{end}} items\",\n\t\t\"TOTAL_ITEMS\": \"{{start}}-{{end}} of {{total}} items\",\n\t\t\"TOTAL_ITEM\": \"{{start}}-{{end}} of {{total}} item\",\n\t\t\"OF_LAST_PAGES\": \"of {{last}} pages\",\n\t\t\"OF_LAST_PAGE\": \"of {{last}} page\"\n}\n```\n",
                         "description": "<p>Expects an object that contains some or all of:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-none\">{\n        &quot;ITEMS_PER_PAGE&quot;: &quot;Items per page:&quot;,\n        &quot;OPEN_LIST_OF_OPTIONS&quot;: &quot;Open list of options&quot;,\n        &quot;BACKWARD&quot;: &quot;Backward&quot;,\n        &quot;FORWARD&quot;: &quot;Forward&quot;,\n        &quot;TOTAL_ITEMS_UNKNOWN&quot;: &quot;{{start}}-{{end}} items&quot;,\n        &quot;TOTAL_ITEMS&quot;: &quot;{{start}}-{{end}} of {{total}} items&quot;,\n        &quot;TOTAL_ITEM&quot;: &quot;{{start}}-{{end}} of {{total}} item&quot;,\n        &quot;OF_LAST_PAGES&quot;: &quot;of {{last}} pages&quot;,\n        &quot;OF_LAST_PAGE&quot;: &quot;of {{last}} page&quot;\n}</code></pre></div>",
                         "jsdoctags": [
@@ -43383,7 +43432,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 271,
+                        "line": 277,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -43400,7 +43449,7 @@
                         "name": "itemsPerPage",
                         "type": "",
                         "returnType": "",
-                        "line": 268
+                        "line": 274
                     }
                 },
                 "currentPage": {
@@ -43419,7 +43468,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 279,
+                        "line": 285,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -43436,7 +43485,7 @@
                         "name": "currentPage",
                         "type": "",
                         "returnType": "",
-                        "line": 276
+                        "line": 282
                     }
                 },
                 "totalDataLength": {
@@ -43445,7 +43494,7 @@
                         "name": "totalDataLength",
                         "type": "",
                         "returnType": "",
-                        "line": 286
+                        "line": 292
                     }
                 },
                 "lastPage": {
@@ -43454,7 +43503,7 @@
                         "name": "lastPage",
                         "type": "number",
                         "returnType": "number",
-                        "line": 292,
+                        "line": 298,
                         "rawdescription": "\n\nThe last page number to display in the pagination view.\n",
                         "description": "<p>The last page number to display in the pagination view.</p>\n"
                     }
@@ -43465,7 +43514,7 @@
                         "name": "startItemIndex",
                         "type": "",
                         "returnType": "",
-                        "line": 297
+                        "line": 303
                     }
                 },
                 "endItemIndex": {
@@ -43474,7 +43523,7 @@
                         "name": "endItemIndex",
                         "type": "",
                         "returnType": "",
-                        "line": 301
+                        "line": 307
                     }
                 },
                 "previousPage": {
@@ -43483,7 +43532,7 @@
                         "name": "previousPage",
                         "type": "number",
                         "returnType": "number",
-                        "line": 310,
+                        "line": 316,
                         "rawdescription": "\n\nThe previous page number to navigate to, from the current page.\n",
                         "description": "<p>The previous page number to navigate to, from the current page.</p>\n"
                     }
@@ -43494,7 +43543,7 @@
                         "name": "nextPage",
                         "type": "number",
                         "returnType": "number",
-                        "line": 317,
+                        "line": 323,
                         "rawdescription": "\n\nThe next page number to navigate to, from the current page.\n",
                         "description": "<p>The next page number to navigate to, from the current page.</p>\n"
                     }
@@ -43505,7 +43554,7 @@
                         "name": "pageOptions",
                         "type": "",
                         "returnType": "",
-                        "line": 322
+                        "line": 328
                     }
                 }
             }
@@ -44316,7 +44365,7 @@
         },
         {
             "name": "PaginationStory",
-            "id": "component-PaginationStory-c0c51bc7544c0d64047f3c2207997c906005b97486189d51e3e1871732f1ff7dab1618b56c2ca36a1e687e008c60bd9c91e7590cf4d20365369676c957c199c3",
+            "id": "component-PaginationStory-5f4e3d1e0ba52f26d891cdce7ec03982a53043fb80ad2418a21e1e5084e6d71df0639994efd3126dc3690d62948fe27e22ea78fe96b981cb0e50179998e93ea8",
             "file": "src/pagination/stories/pagination.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -44326,17 +44375,35 @@
             "selector": "app-pagination",
             "styleUrls": [],
             "styles": [],
-            "template": "<cds-pagination\n\t[model]=\"model\"\n\t[disabled]=\"disabled\"\n\t[pageInputDisabled]=\"pageInputDisabled\"\n\t[pagesUnknown]=\"pagesUnknown\"\n\t[showPageInput]=\"showPageInput\"\n\t[skeleton]=\"skeleton\"\n\t(selectPage)=\"selectPage($event)\">\n</cds-pagination>\n\t",
+            "template": "<cds-pagination\n\t[model]=\"model\"\n\t[disabled]=\"disabled\"\n\t[pageInputDisabled]=\"pageInputDisabled\"\n\t[pagesUnknown]=\"pagesUnknown\"\n\t[showPageInput]=\"showPageInput\"\n\t[skeleton]=\"skeleton\"\n\t[backwardDisabled]=\"backwardDisabled\"\n\t[forwardDisabled]=\"forwardDisabled\"\n\t(selectPage)=\"selectPage($event)\">\n</cds-pagination>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [
+                {
+                    "name": "backwardDisabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 32,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "disabled",
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 26,
+                    "line": 28,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "forwardDisabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 33,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -44345,7 +44412,7 @@
                     "defaultValue": "new PaginationModel()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 24,
+                    "line": 26,
                     "type": "any",
                     "decorators": []
                 },
@@ -44354,7 +44421,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 27,
+                    "line": 29,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -44363,7 +44430,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 28,
+                    "line": 30,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -44372,7 +44439,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 29,
+                    "line": 31,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -44381,7 +44448,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 25,
+                    "line": 27,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -44389,7 +44456,7 @@
                     "name": "totalDataLength",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 31,
+                    "line": 35,
                     "type": "any",
                     "decorators": []
                 }
@@ -44410,7 +44477,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 43,
+                    "line": 47,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -44435,7 +44502,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOnInit\n} from \"@angular/core\";\n\nimport { PaginationModel } from \"..\";\n\n@Component({\n\tselector: \"app-pagination\",\n\ttemplate: `\n\t\t<cds-pagination\n\t\t\t[model]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(selectPage)=\"selectPage($event)\">\n\t\t</cds-pagination>\n\t`\n})\nexport class PaginationStory implements OnInit {\n\t@Input() model = new PaginationModel();\n\t@Input() skeleton = false;\n\t@Input() disabled = false;\n\t@Input() pageInputDisabled = false;\n\t@Input() pagesUnknown = false;\n\t@Input() showPageInput = true;\n\n\t@Input() get totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\tset totalDataLength(value) {\n\t\tthis.model.totalDataLength = value;\n\t}\n\n\tngOnInit() {\n\t\tthis.model.pageLength = 10;\n\t\tthis.model.currentPage = 1;\n\t}\n\n\tselectPage(page) {\n\t\tconsole.log(\"Loading page\", page, \"from pagination model\");\n\t\tthis.model.currentPage = page;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOnInit\n} from \"@angular/core\";\n\nimport { PaginationModel } from \"..\";\n\n@Component({\n\tselector: \"app-pagination\",\n\ttemplate: `\n\t\t<cds-pagination\n\t\t\t[model]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[backwardDisabled]=\"backwardDisabled\"\n\t\t\t[forwardDisabled]=\"forwardDisabled\"\n\t\t\t(selectPage)=\"selectPage($event)\">\n\t\t</cds-pagination>\n\t`\n})\nexport class PaginationStory implements OnInit {\n\t@Input() model = new PaginationModel();\n\t@Input() skeleton = false;\n\t@Input() disabled = false;\n\t@Input() pageInputDisabled = false;\n\t@Input() pagesUnknown = false;\n\t@Input() showPageInput = true;\n\t@Input() backwardDisabled = false;\n\t@Input() forwardDisabled = false;\n\n\t@Input() get totalDataLength() {\n\t\treturn this.model.totalDataLength;\n\t}\n\tset totalDataLength(value) {\n\t\tthis.model.totalDataLength = value;\n\t}\n\n\tngOnInit() {\n\t\tthis.model.pageLength = 10;\n\t\tthis.model.currentPage = 1;\n\t}\n\n\tselectPage(page) {\n\t\tconsole.log(\"Loading page\", page, \"from pagination model\");\n\t\tthis.model.currentPage = page;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -44460,7 +44527,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 34,
+                        "line": 38,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -44477,7 +44544,7 @@
                         "name": "totalDataLength",
                         "type": "",
                         "returnType": "",
-                        "line": 31
+                        "line": 35
                     }
                 }
             }
@@ -75411,31 +75478,31 @@
                 "name": "AutoAlignTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/definition-tooptip.stories.ts",
+                "file": "src/toggletip/toggletip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "AutoAlignTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/tooltip.stories.ts",
+                "file": "src/tooltip/definition-tooptip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "AutoAlignTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/toggletip/toggletip.stories.ts",
+                "file": "src/tooltip/tooltip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "basic",
@@ -75951,7 +76018,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/definition-tooptip.stories.ts",
+                "file": "src/toggletip/toggletip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75961,7 +76028,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/tooltip.stories.ts",
+                "file": "src/tooltip/definition-tooptip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75971,7 +76038,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/toggletip/toggletip.stories.ts",
+                "file": "src/tooltip/tooltip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78667,7 +78734,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</app-pagination>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[backwardDisabled]=\"backwardDisabled\"\n\t\t\t[forwardDisabled]=\"forwardDisabled\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</app-pagination>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -78863,31 +78930,31 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/definition-tooptip.stories.ts",
+                "file": "src/toggletip/toggletip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/tooltip.stories.ts",
+                "file": "src/tooltip/definition-tooptip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/toggletip/toggletip.stories.ts",
+                "file": "src/tooltip/tooltip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "Template",
@@ -79195,7 +79262,7 @@
                 "name": "WithAutoAlign",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/definition-tooptip.stories.ts",
+                "file": "src/toggletip/toggletip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -79205,7 +79272,7 @@
                 "name": "WithAutoAlign",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/tooltip.stories.ts",
+                "file": "src/tooltip/definition-tooptip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -79215,7 +79282,7 @@
                 "name": "WithAutoAlign",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/toggletip/toggletip.stories.ts",
+                "file": "src/tooltip/tooltip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -81835,22 +81902,22 @@
                     "defaultValue": "AutoAlignTemplate.bind({})"
                 }
             ],
-            "src/tooltip/definition-tooptip.stories.ts": [
+            "src/toggletip/toggletip.stories.ts": [
                 {
                     "name": "AutoAlignTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/definition-tooptip.stories.ts",
+                    "file": "src/toggletip/toggletip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/definition-tooptip.stories.ts",
+                    "file": "src/toggletip/toggletip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
@@ -81860,121 +81927,121 @@
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/definition-tooptip.stories.ts",
+                    "file": "src/toggletip/toggletip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "WithAutoAlign",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/definition-tooptip.stories.ts",
+                    "file": "src/toggletip/toggletip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "AutoAlignTemplate.bind({})"
                 }
             ],
-            "src/tooltip/tooltip.stories.ts": [
+            "src/tooltip/definition-tooptip.stories.ts": [
                 {
                     "name": "AutoAlignTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/tooltip.stories.ts",
+                    "file": "src/tooltip/definition-tooptip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/tooltip.stories.ts",
+                    "file": "src/tooltip/definition-tooptip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "Ellipses",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/tooltip.stories.ts",
+                    "file": "src/tooltip/definition-tooptip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "EllipsesTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
-                    "name": "EllipsesTemplate",
+                    "name": "WithAutoAlign",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/tooltip.stories.ts",
+                    "file": "src/tooltip/definition-tooptip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\tdescription=\"Tooltip for ellipsis because I can and I am really really long\">\n\t\t\t<span class=\"overflowText\">\n\t\t\t\tTooltip for ellipsis because I can and I am really really long\n\t\t\t</span>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.overflowText {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twidth: 100px;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t`]\n})"
-                },
+                    "defaultValue": "AutoAlignTemplate.bind({})"
+                }
+            ],
+            "src/tooltip/tooltip.stories.ts": [
                 {
-                    "name": "Template",
+                    "name": "AutoAlignTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
-                    "name": "WithAutoAlign",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "AutoAlignTemplate.bind({})"
-                }
-            ],
-            "src/toggletip/toggletip.stories.ts": [
+                    "defaultValue": "Template.bind({})"
+                },
                 {
-                    "name": "AutoAlignTemplate",
+                    "name": "Ellipses",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/toggletip/toggletip.stories.ts",
+                    "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "EllipsesTemplate.bind({})"
                 },
                 {
-                    "name": "Basic",
+                    "name": "EllipsesTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/toggletip/toggletip.stories.ts",
+                    "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\tdescription=\"Tooltip for ellipsis because I can and I am really really long\">\n\t\t\t<span class=\"overflowText\">\n\t\t\t\tTooltip for ellipsis because I can and I am really really long\n\t\t\t</span>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.overflowText {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twidth: 100px;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t`]\n})"
                 },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/toggletip/toggletip.stories.ts",
+                    "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "WithAutoAlign",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/toggletip/toggletip.stories.ts",
+                    "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
@@ -83857,7 +83924,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</app-pagination>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[backwardDisabled]=\"backwardDisabled\"\n\t\t\t[forwardDisabled]=\"forwardDisabled\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</app-pagination>\n\t`\n})"
                 }
             ],
             "src/progress-bar/progress-bar.stories.ts": [
@@ -91289,8 +91356,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "Pagination",
-                "coveragePercent": 40,
-                "coverageCount": "10/25",
+                "coveragePercent": 37,
+                "coverageCount": "10/27",
                 "status": "medium"
             },
             {
@@ -91328,7 +91395,7 @@
                 "linktype": "component",
                 "name": "PaginationStory",
                 "coveragePercent": 0,
-                "coverageCount": "0/9",
+                "coverageCount": "0/11",
                 "status": "low"
             },
             {