carbon-components-angular 5.47.2 → 5.49.0

package/docs/documentation.json

@@ -1461,12 +1461,12 @@
         },
         {
             "name": "PaginationNavTranslations",
-            "id": "interface-PaginationNavTranslations-1bdc828135005718071bfa73586f126f9670d552f442c8f860a21c136190d8011a5cee57f662f4945fce69adf28ccb78d6dfcd2ea2e829314983d3f2c6456821",
+            "id": "interface-PaginationNavTranslations-02747b3f02dda4195eb9b8d17de227f10ddb93cd71d7303c3e81567547ccb446b5f32191b820b258e4c180ac7d7172629000d09893bd3b623c8f47837e111b52",
             "file": "src/pagination/pagination-nav/pagination-nav.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\";\nimport { range } from \"carbon-components-angular/common\";\n\nexport interface PaginationNavTranslations {\n\tNEXT: string;\n\tPREVIOUS: 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 * <cds-pagination-nav [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination-nav>\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-nav--basic)\n */\n@Component({\n\tselector: \"cds-pagination-nav, ibm-pagination-navm\",\n\ttemplate: `\n\t<div>\n\t\t<div class=\"cds--pagination-nav\">\n\t\t\t<ul class=\"cds--pagination-nav__list\">\n\t\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t(click)=\"jumpToPrevious()\"\n\t\t\t\t\t\t[disabled]=\"leftArrowDisabled\"\n\t\t\t\t\t\t[description]=\"previousItemText.subject | async\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"caret--left\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf=\"this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\t\tpage=\"1\"\n\t\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf=\"frontCuts\"\n\t\t\t\t\t[count]=\"frontCuts\"\n\t\t\t\t\t[fromIndex]=\"startOffset\"\n\t\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngFor=\"let page of getPages();\"\n\t\t\t\t\t[page]=\"page\"\n\t\t\t\t\t(click)=\"currentPage = page\"\n\t\t\t\t\t[isActive]=\"currentPage == page\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf=\"backCuts\"\n\t\t\t\t\t[count]=\"backCuts\"\n\t\t\t\t\t[fromIndex]=\"totalNumbersArray.length - backCuts - 1\"\n\t\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf=\"totalDataLength > 1\"\n\t\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t(click)=\"jumpToNext()\"\n\t\t\t\t\t\t[disabled]=\"rightArrowDisabled\"\n\t\t\t\t\t\t[description]=\"nextItemText.subject | async\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"caret--right\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class PaginationNav {\n\tstatic paginationCounter = 0;\n\t/**\n\t * `PaginationNavModel` 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 * Number of items to show in pagination. Minimum is 4.\n\t */\n\t@Input() numOfItemsToShow = 4;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"NEXT\": \"Next\",\n\t *\t\t\"PREVIOUS\": \"Previous\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: PaginationNavTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.nextItemText.override(valueWithDefaults.NEXT);\n\t\tthis.previousItemText.override(valueWithDefaults.PREVIOUS);\n\t}\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 totalNumbersArray() {\n\t\treturn range(this.totalDataLength + 1, 1);\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\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\n\tget startOffset() {\n\t\treturn this.numOfItemsToShow <= 4 && this.currentPage > 1 ? 0 : 1;\n\t}\n\n\tget frontCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.front;\n\t}\n\n\tget backCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.back;\n\t}\n\n\tget leftArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === 1;\n\t}\n\n\tget rightArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === this.totalDataLength;\n\t}\n\n\tnextItemText = this.i18n.getOverridable(\"PAGINATION.NEXT\");\n\tpreviousItemText = this.i18n.getOverridable(\"PAGINATION.PREVIOUS\");\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPaginationNav.paginationCounter++;\n\t}\n\n\thandleOverflowSelection(page) {\n\t\tif (typeof page === \"number\") {\n\t\t\tthis.currentPage = page;\n\t\t}\n\t}\n\n\tpublic jumpToNext() {\n\t\tthis.currentPage = this.currentPage < this.totalDataLength ? this.currentPage + 1 : this.totalDataLength;\n\t}\n\n\tpublic jumpToPrevious() {\n\t\tthis.currentPage = this.currentPage > 1 ? this.currentPage - 1 : 1;\n\t}\n\n\tpublic getPages() {\n\t\tif (this.totalDataLength <= 1) {\n\t\t\treturn null;\n\t\t}\n\t\tconst cuts = this.getCuts();\n\t\treturn this.totalNumbersArray.slice(this.startOffset + cuts.front, (1 + cuts.back) * -1);\n\t}\n\n\tprivate getCuts(splitPoint = null) {\n\t\tconst page = this.currentPage - 1;\n\t\tconst totalItems = this.totalDataLength;\n\t\tconst itemsThatFit = this.numOfItemsToShow;\n\n\t\tif (itemsThatFit >= totalItems) {\n\t\t\treturn {\n\t\t\t\tfront: 0,\n\t\t\t\tback: 0\n\t\t\t};\n\t\t}\n\t\tconst split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;\n\t\tlet frontHidden = page + 1 - split;\n\t\tlet backHidden = totalItems - page - (itemsThatFit - split) + 1;\n\n\t\tif (frontHidden <= 1) {\n\t\t\tbackHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;\n\t\t\tfrontHidden = 0;\n\t\t}\n\t\tif (backHidden <= 1) {\n\t\t\tfrontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;\n\t\t\tbackHidden = 0;\n\t\t}\n\t\treturn {\n\t\t\tfront: frontHidden,\n\t\t\tback: backHidden\n\t\t};\n\t}\n}\n",
+            "sourceCode": "import { PaginationModel } from \"../pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding\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\";\nimport { range } from \"carbon-components-angular/common\";\n\nexport interface PaginationNavTranslations {\n\tNEXT: string;\n\tPREVIOUS: 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 * <cds-pagination-nav [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination-nav>\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-nav--basic)\n */\n@Component({\n\tselector: \"cds-pagination-nav, ibm-pagination-navm\",\n\ttemplate: `\n\t<div>\n\t\t<div class=\"cds--pagination-nav\">\n\t\t\t<ul class=\"cds--pagination-nav__list\">\n\t\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t\t(click)=\"jumpToPrevious()\"\n\t\t\t\t\t\t[disabled]=\"leftArrowDisabled\"\n\t\t\t\t\t\t[description]=\"previousItemText.subject | async\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"caret--left\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf=\"this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\t\tpage=\"1\"\n\t\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf=\"frontCuts\"\n\t\t\t\t\t[count]=\"frontCuts\"\n\t\t\t\t\t[fromIndex]=\"startOffset\"\n\t\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngFor=\"let page of getPages();\"\n\t\t\t\t\t[page]=\"page\"\n\t\t\t\t\t(click)=\"currentPage = page\"\n\t\t\t\t\t[isActive]=\"currentPage == page\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf=\"backCuts\"\n\t\t\t\t\t[count]=\"backCuts\"\n\t\t\t\t\t[fromIndex]=\"totalNumbersArray.length - backCuts - 1\"\n\t\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf=\"totalDataLength > 1\"\n\t\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t\t(click)=\"jumpToNext()\"\n\t\t\t\t\t\t[disabled]=\"rightArrowDisabled\"\n\t\t\t\t\t\t[description]=\"nextItemText.subject | async\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"caret--right\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class PaginationNav {\n\tstatic paginationCounter = 0;\n\t/**\n\t * `PaginationNavModel` 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 * Number of items to show in pagination. Minimum is 4.\n\t */\n\t@Input() numOfItemsToShow = 4;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"NEXT\": \"Next\",\n\t *\t\t\"PREVIOUS\": \"Previous\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: PaginationNavTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.nextItemText.override(valueWithDefaults.NEXT);\n\t\tthis.previousItemText.override(valueWithDefaults.PREVIOUS);\n\t}\n\n\t/**\n\t * Sets the pagination nav size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get smallLayoutSize() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get mediumLayoutSize() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get largeLayoutSize() {\n\t\treturn this.size === \"lg\";\n\t}\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 totalNumbersArray() {\n\t\treturn range(this.totalDataLength + 1, 1);\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\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\n\tget startOffset() {\n\t\treturn this.numOfItemsToShow <= 4 && this.currentPage > 1 ? 0 : 1;\n\t}\n\n\tget frontCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.front;\n\t}\n\n\tget backCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.back;\n\t}\n\n\tget leftArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === 1;\n\t}\n\n\tget rightArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === this.totalDataLength;\n\t}\n\n\tnextItemText = this.i18n.getOverridable(\"PAGINATION.NEXT\");\n\tpreviousItemText = this.i18n.getOverridable(\"PAGINATION.PREVIOUS\");\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPaginationNav.paginationCounter++;\n\t}\n\n\thandleOverflowSelection(page) {\n\t\tif (typeof page === \"number\") {\n\t\t\tthis.currentPage = page;\n\t\t}\n\t}\n\n\tpublic jumpToNext() {\n\t\tthis.currentPage = this.currentPage < this.totalDataLength ? this.currentPage + 1 : this.totalDataLength;\n\t}\n\n\tpublic jumpToPrevious() {\n\t\tthis.currentPage = this.currentPage > 1 ? this.currentPage - 1 : 1;\n\t}\n\n\tpublic getPages() {\n\t\tif (this.totalDataLength <= 1) {\n\t\t\treturn null;\n\t\t}\n\t\tconst cuts = this.getCuts();\n\t\treturn this.totalNumbersArray.slice(this.startOffset + cuts.front, (1 + cuts.back) * -1);\n\t}\n\n\tprivate getCuts(splitPoint = null) {\n\t\tconst page = this.currentPage - 1;\n\t\tconst totalItems = this.totalDataLength;\n\t\tconst itemsThatFit = this.numOfItemsToShow;\n\n\t\tif (itemsThatFit >= totalItems) {\n\t\t\treturn {\n\t\t\t\tfront: 0,\n\t\t\t\tback: 0\n\t\t\t};\n\t\t}\n\t\tconst split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;\n\t\tlet frontHidden = page + 1 - split;\n\t\tlet backHidden = totalItems - page - (itemsThatFit - split) + 1;\n\n\t\tif (frontHidden <= 1) {\n\t\t\tbackHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;\n\t\t\tfrontHidden = 0;\n\t\t}\n\t\tif (backHidden <= 1) {\n\t\t\tfrontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;\n\t\t\tbackHidden = 0;\n\t\t}\n\t\treturn {\n\t\t\tfront: frontHidden,\n\t\t\tback: backHidden\n\t\t};\n\t}\n}\n",
             "properties": [
                 {
                     "name": "NEXT",
@@ -1475,7 +1475,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 15
+                    "line": 16
                 },
                 {
                     "name": "PREVIOUS",
@@ -1484,7 +1484,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 16
+                    "line": 17
                 }
             ],
             "indexSignatures": [],
@@ -7051,12 +7051,12 @@
         },
         {
             "name": "NumberChange",
-            "id": "class-NumberChange-9f96963038fb60119a19b74c9c9868abb21dc983cbe9ae791c7f9916a4b113d526ffec3cb0816822dbea8d431361e3ad4bf0b6c14c97c4757a47853940dbca6b",
+            "id": "class-NumberChange-fe20fe65939c8d249815e7b930825da7d9229c32f54dbd3496ec81d6605b4b2f291e5ea9d9ed648e5d850c504af01a335a7caf96b73baaad8c4717ab91830c1f",
             "file": "src/number-input/number.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(focus)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(blur)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--number-input__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\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\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--number-input--fluid\") @Input() fluid = false;\n\n\t@HostBinding(\"class.cds--number-input--fluid--invalid\") get fluidInvalid() {\n\t\treturn this.fluid && this.invalid;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--disabled\") get fluidDisabled() {\n\t\treturn this.fluid && this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--focus\") get fluidFocus() {\n\t\treturn this.fluid && this._isFocused;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeleton() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\tprotected _isFocused = false;\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tif (\"type\" in event.target && (<HTMLInputElement>event.target).type === \"button\") {\n\t\t\tthis._isFocused = false;\n\t\t} else {\n\t\t\tthis._isFocused = event.type === \"focus\";\n\t\t}\n\t}\n}\nexport { NumberComponent as Number };\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(focus)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(blur)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--number-input__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\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\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--number-input--fluid\") @Input() fluid = false;\n\n\t@HostBinding(\"class.cds--number-input--fluid--invalid\") get fluidInvalid() {\n\t\treturn this.fluid && this.invalid;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--disabled\") get fluidDisabled() {\n\t\treturn this.fluid && this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--focus\") get fluidFocus() {\n\t\treturn this.fluid && this._isFocused;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeleton() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\tprotected _isFocused = false;\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\t// if max is set and value + step is greater than max, set value to max\n\t\t// example: max = 100, step = 10, value = 95 , value + step = 105, value will be set to 100 (max) instead of 105\n\t\tif (this.max !== null && this.value + this.step > this.max) {\n\t\t\tthis.value = this.max;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is set and value + step is less than min, set value to min\n\t\t// example: min = 5, step = 2, value = 0, value + step = 2, value will be set to 5 (min) instead of 2\n\t\tif (this.min !== null && this.value + this.step < this.min) {\n\t\t\tthis.value = this.min;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if max is not set or value + step is less than max, increment value by step\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\t// if max is set and value - step is greater than max, set value to max\n\t\t// example: max = 15, step = 2, value = 20, value - step = 18, value will be set to 15 (max) instead of 18\n\t\tif (this.max !== null && this.value - this.step > this.max) {\n\t\t\tthis.value = this.max;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is set and value - step is less than min, set value to min\n\t\t// example: min = 5, step = 2, value = 6, value - step = 4, value will be set to 5 (min) instead of 4\n\t\tif (this.min !== null && this.value - this.step < this.min) {\n\t\t\tthis.value = this.min;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is not set or value - step is greater than min, decrement value by step\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tif (\"type\" in event.target && (<HTMLInputElement>event.target).type === \"button\") {\n\t\t\tthis._isFocused = false;\n\t\t} else {\n\t\t\tthis._isFocused = event.type === \"focus\";\n\t\t}\n\t}\n}\nexport { NumberComponent as Number };\n",
             "inputsClass": [],
             "outputsClass": [],
             "properties": [
@@ -36053,7 +36053,7 @@
         },
         {
             "name": "ListRow",
-            "id": "component-ListRow-01821cd90855a82e04adc55c8d4e1adfd1805e93ee11a5b3d2018678d28560b47d0a4a9eba42d1c5063293315fd5fa5e9b15efddb12f82e5870ee32914246241",
+            "id": "component-ListRow-a4df99227a20b8139056c28b5a99ebf53dc7674812b105f3176175e3e6adeb92949dc089ce6c7a525c4d3c15715b9a62b42538cd998a0dd0eb25e615143f5722",
             "file": "src/structured-list/list-row.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -36063,7 +36063,7 @@
             "selector": "cds-list-row, ibm-list-row",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-content></ng-content>\n<ng-container *ngIf=\"selection\">\n\t<input\n\t\t#input\n\t\ttabindex=\"-1\"\n\t\tclass=\"cds--structured-list-input cds--visually-hidden\"\n\t\ttype=\"radio\"\n\t\t[value]=\"value\"\n\t\t[name]=\"name\"\n\t\t[title]=\"label\"\n\t\t(change)=\"onChange($event)\"\n\t\t[checked]=\"selected\"/>\n\t<div class=\"cds--structured-list-td\">\n\t\t<svg cdsIcon=\"checkmark--filled\" size=\"16\" class=\"cds--structured-list-svg\"></svg>\n\t</div>\n</ng-container>\n\t",
+            "template": "<ng-content></ng-content>\n<ng-container *ngIf=\"selection\">\n\t<input\n\t\t#input\n\t\tclass=\"cds--structured-list-input cds--visually-hidden\"\n\t\ttype=\"radio\"\n\t\t[value]=\"value\"\n\t\t[name]=\"name\"\n\t\t[title]=\"label\"\n\t\t(focus)=\"handleFocus(true)\"\n\t\t(blur)=\"handleFocus(false)\"\n\t\t(change)=\"onChange($event)\"\n\t\t[checked]=\"selected\"/>\n\t<div class=\"cds--structured-list-td\">\n\t\t<svg cdsIcon=\"checkmark--filled\" size=\"16\" class=\"cds--structured-list-svg\"></svg>\n\t</div>\n</ng-container>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -36074,7 +36074,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nApplies an accessible label to the row. Defaults to no label.\n",
                     "description": "<p>Applies an accessible label to the row. Defaults to no label.</p>\n",
-                    "line": 63,
+                    "line": 64,
                     "type": "any",
                     "decorators": []
                 },
@@ -36083,7 +36083,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 59,
+                    "line": 60,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -36093,7 +36093,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.\n",
                     "description": "<p>The value for the row. Returned via <code>ngModel</code> or <code>selected</code> event on the containing <code>StructuredList</code>.</p>\n",
-                    "line": 67,
+                    "line": 68,
                     "type": "any",
                     "decorators": []
                 }
@@ -36106,7 +36106,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nInternal event used to notify the containing `StructuredList` of changes.\n",
                     "description": "<p>Internal event used to notify the containing <code>StructuredList</code> of changes.</p>\n",
-                    "line": 71,
+                    "line": 72,
                     "type": "EventEmitter<Event>"
                 }
             ],
@@ -36155,7 +36155,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>Set by the containing <code>StructuredList</code>. When <code>selection = true</code>, used for the <code>name</code> property on the radio input.</p>\n",
-                    "line": 80,
+                    "line": 81,
                     "rawdescription": "\n\nSet by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.\n"
                 },
                 {
@@ -36185,28 +36185,9 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set by the containing <code>StructuredList</code>. Enables or disables row level selection features.</p>\n",
-                    "line": 76,
+                    "line": 77,
                     "rawdescription": "\n\nSet by the containing `StructuredList`. Enables or disables row level selection features.\n"
                 },
-                {
-                    "name": "tabindex",
-                    "defaultValue": "this.selection ? \"0\" : null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 83,
-                    "decorators": [
-                        {
-                            "name": "HostBinding",
-                            "stringifiedArguments": "'attr.tabindex'"
-                        }
-                    ],
-                    "modifierKind": [
-                        170
-                    ]
-                },
                 {
                     "name": "wrapper",
                     "defaultValue": "true",
@@ -36215,7 +36196,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 82,
+                    "line": 83,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -36229,22 +36210,31 @@
             ],
             "methodsClass": [
                 {
-                    "name": "onblur",
-                    "args": [],
+                    "name": "handleFocus",
+                    "args": [
+                        {
+                            "name": "isFocused",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 112,
+                    "line": 110,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "decorators": [
+                    "jsdoctags": [
                         {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'blur'"
+                            "name": "isFocused",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
                         }
-                    ],
-                    "modifierKind": [
-                        170
                     ]
                 },
                 {
@@ -36260,7 +36250,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 116,
+                    "line": 106,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -36293,25 +36283,6 @@
                     "modifierKind": [
                         170
                     ]
-                },
-                {
-                    "name": "onfocus",
-                    "args": [],
-                    "optional": false,
-                    "returnType": "void",
-                    "typeParameters": [],
-                    "line": 107,
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "decorators": [
-                        {
-                            "name": "HostListener",
-                            "stringifiedArguments": "'focus'"
-                        }
-                    ],
-                    "modifierKind": [
-                        170
-                    ]
                 }
             ],
             "deprecated": false,
@@ -36326,21 +36297,12 @@
                     "type": "string",
                     "decorators": []
                 },
-                {
-                    "name": "attr.tabindex",
-                    "defaultValue": "this.selection ? \"0\" : null",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 83,
-                    "type": "string",
-                    "decorators": []
-                },
                 {
                     "name": "class.cds--structured-list-row",
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 82,
+                    "line": 83,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -36348,20 +36310,12 @@
                     "name": "class.cds--structured-list-row--focused-within",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 56,
+                    "line": 57,
                     "type": "boolean",
                     "decorators": []
                 }
             ],
             "hostListeners": [
-                {
-                    "name": "blur",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 112
-                },
                 {
                     "name": "click",
                     "args": [],
@@ -36369,14 +36323,6 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "line": 100
-                },
-                {
-                    "name": "focus",
-                    "args": [],
-                    "argsDecorator": [],
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 107
                 }
             ],
             "standalone": false,
@@ -36384,7 +36330,7 @@
             "description": "<p><code>ListRow</code> provides a container for the <code>ListColumn</code>s that make up the body of a structured list.</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;cds-list-row&gt;\n        &lt;cds-list-column&gt;Row 1&lt;/cds-list-column&gt;\n        &lt;cds-list-column nowrap=&quot;true&quot;&gt;Row One&lt;/cds-list-column&gt;\n        &lt;cds-list-column&gt;\n            Lorem ipsum dolor sit amet,\n            consectetur adipiscing elit. Nunc dui magna,\n            finibus id tortor sed, aliquet bibendum augue.\n            Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n            Pellentesque vulputate nisl a porttitor interdum.\n        &lt;/cds-list-column&gt;\n    &lt;/cds-list-row&gt;</code></pre></div>",
             "rawdescription": "\n\n`ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.\n\nExample:\n```html\n\t<cds-list-row>\n\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t<cds-list-column>\n\t\t\tLorem ipsum dolor sit amet,\n\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t</cds-list-column>\n\t</cds-list-row>\n```\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tElementRef,\n\tEventEmitter,\n\tOutput\n} from \"@angular/core\";\nimport { ListColumn } from \"./list-column.component\";\n\n/**\n * `ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.\n *\n * Example:\n * ```html\n * \t<cds-list-row>\n *\t\t<cds-list-column>Row 1</cds-list-column>\n *\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n *\t\t<cds-list-column>\n *\t\t\tLorem ipsum dolor sit amet,\n *\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t</cds-list-column>\n *\t</cds-list-row>\n * ```\n */\n@Component({\n\tselector: \"cds-list-row, ibm-list-row\",\n\ttemplate: `\n\t\t<ng-content></ng-content>\n\t\t<ng-container *ngIf=\"selection\">\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\ttabindex=\"-1\"\n\t\t\t\tclass=\"cds--structured-list-input cds--visually-hidden\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[name]=\"name\"\n\t\t\t\t[title]=\"label\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t[checked]=\"selected\"/>\n\t\t\t<div class=\"cds--structured-list-td\">\n\t\t\t\t<svg cdsIcon=\"checkmark--filled\" size=\"16\" class=\"cds--structured-list-svg\"></svg>\n\t\t\t</div>\n\t\t</ng-container>\n\t`\n})\nexport class ListRow implements AfterContentInit {\n\t@HostBinding(\"class.cds--structured-list-row--focused-within\") get focusClass() {\n\t\treturn this.isFocused;\n\t}\n\t@Input() @HostBinding(\"class.cds--structured-list-row--selected\") selected = false;\n\t/**\n\t * Applies an accessible label to the row. Defaults to no label.\n\t */\n\t@Input() @HostBinding(\"attr.aria-label\") label;\n\t/**\n\t * The value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.\n\t */\n\t@Input() value;\n\t/**\n\t * Internal event used to notify the containing `StructuredList` of changes.\n\t */\n\t@Output() change: EventEmitter<Event> = new EventEmitter();\n\n\t/**\n\t * Set by the containing `StructuredList`. Enables or disables row level selection features.\n\t */\n\tselection = false;\n\t/**\n\t * Set by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.\n\t */\n\tname = \"list\";\n\n\t@HostBinding(\"class.cds--structured-list-row\") wrapper = true;\n\t@HostBinding(\"attr.tabindex\") tabindex = this.selection ? \"0\" : null;\n\t@HostBinding(\"attr.role\") role = \"row\";\n\n\t@ContentChildren(ListColumn) columns: QueryList<ListColumn>;\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tprivate isFocused = false;\n\n\tngAfterContentInit() {\n\t\tthis.columns.forEach(column => {\n\t\t\tcolumn.isBodyColumn = true;\n\t\t\tcolumn.isHeaderColumn = false;\n\t\t});\n\t}\n\n\t@HostListener(\"click\")\n\tonclick() {\n\t\tif (this.selection) {\n\t\t\tthis.input.nativeElement.click();\n\t\t}\n\t}\n\n\t@HostListener(\"focus\")\n\tonfocus() {\n\t\tthis.isFocused = true;\n\t}\n\n\t@HostListener(\"blur\")\n\tonblur() {\n\t\tthis.isFocused = false;\n\t}\n\n\tonChange(event) {\n\t\tthis.change.emit(event);\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tElementRef,\n\tEventEmitter,\n\tOutput\n} from \"@angular/core\";\nimport { ListColumn } from \"./list-column.component\";\n\n/**\n * `ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.\n *\n * Example:\n * ```html\n * \t<cds-list-row>\n *\t\t<cds-list-column>Row 1</cds-list-column>\n *\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n *\t\t<cds-list-column>\n *\t\t\tLorem ipsum dolor sit amet,\n *\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t</cds-list-column>\n *\t</cds-list-row>\n * ```\n */\n@Component({\n\tselector: \"cds-list-row, ibm-list-row\",\n\ttemplate: `\n\t\t<ng-content></ng-content>\n\t\t<ng-container *ngIf=\"selection\">\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\tclass=\"cds--structured-list-input cds--visually-hidden\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[name]=\"name\"\n\t\t\t\t[title]=\"label\"\n\t\t\t\t(focus)=\"handleFocus(true)\"\n\t\t\t\t(blur)=\"handleFocus(false)\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t[checked]=\"selected\"/>\n\t\t\t<div class=\"cds--structured-list-td\">\n\t\t\t\t<svg cdsIcon=\"checkmark--filled\" size=\"16\" class=\"cds--structured-list-svg\"></svg>\n\t\t\t</div>\n\t\t</ng-container>\n\t`\n})\nexport class ListRow implements AfterContentInit {\n\t@HostBinding(\"class.cds--structured-list-row--focused-within\") get focusClass() {\n\t\treturn this.isFocused;\n\t}\n\t@Input() @HostBinding(\"class.cds--structured-list-row--selected\") selected = false;\n\t/**\n\t * Applies an accessible label to the row. Defaults to no label.\n\t */\n\t@Input() @HostBinding(\"attr.aria-label\") label;\n\t/**\n\t * The value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.\n\t */\n\t@Input() value;\n\t/**\n\t * Internal event used to notify the containing `StructuredList` of changes.\n\t */\n\t@Output() change: EventEmitter<Event> = new EventEmitter();\n\n\t/**\n\t * Set by the containing `StructuredList`. Enables or disables row level selection features.\n\t */\n\tselection = false;\n\t/**\n\t * Set by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.\n\t */\n\tname = \"list\";\n\n\t@HostBinding(\"class.cds--structured-list-row\") wrapper = true;\n\t@HostBinding(\"attr.role\") role = \"row\";\n\n\t@ContentChildren(ListColumn) columns: QueryList<ListColumn>;\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tprivate isFocused = false;\n\n\tngAfterContentInit() {\n\t\tthis.columns.forEach(column => {\n\t\t\tcolumn.isBodyColumn = true;\n\t\t\tcolumn.isHeaderColumn = false;\n\t\t});\n\t}\n\n\t@HostListener(\"click\")\n\tonclick() {\n\t\tif (this.selection) {\n\t\t\tthis.input.nativeElement.click();\n\t\t}\n\t}\n\t\n\tonChange(event) {\n\t\tthis.change.emit(event);\n\t}\n\n\thandleFocus(isFocused) {\n\t\tif (this.selection) {\n\t\t\tthis.isFocused = isFocused;\n\t\t\tif (this.isFocused) {\n\t\t\t\tthis.input.nativeElement.click();\n\t\t\t}\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -36399,7 +36345,7 @@
                         "name": "focusClass",
                         "type": "",
                         "returnType": "",
-                        "line": 56
+                        "line": 57
                     }
                 }
             }
@@ -38202,7 +38148,7 @@
         },
         {
             "name": "NumberComponent",
-            "id": "component-NumberComponent-9f96963038fb60119a19b74c9c9868abb21dc983cbe9ae791c7f9916a4b113d526ffec3cb0816822dbea8d431361e3ad4bf0b6c14c97c4757a47853940dbca6b",
+            "id": "component-NumberComponent-fe20fe65939c8d249815e7b930825da7d9229c32f54dbd3496ec81d6605b4b2f291e5ea9d9ed648e5d850c504af01a335a7caf96b73baaad8c4717ab91830c1f",
             "file": "src/number-input/number.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -38556,7 +38502,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 384,
+                    "line": 418,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates a class of `NumberChange` to emit the change in the `Number`.\n",
@@ -38587,7 +38533,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 373,
+                    "line": 407,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -38597,7 +38543,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 377,
+                    "line": 411,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -38614,7 +38560,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 401,
+                    "line": 435,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -38642,7 +38588,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 397,
+                    "line": 431,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -38666,7 +38612,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 365,
+                    "line": 382,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSubtracts `step` to the current `value`.\n",
@@ -38697,7 +38643,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 392,
+                    "line": 426,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -38932,7 +38878,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { NumberModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-number--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { NumberModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-number--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(focus)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(blur)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--number-input__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\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\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--number-input--fluid\") @Input() fluid = false;\n\n\t@HostBinding(\"class.cds--number-input--fluid--invalid\") get fluidInvalid() {\n\t\treturn this.fluid && this.invalid;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--disabled\") get fluidDisabled() {\n\t\treturn this.fluid && this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--focus\") get fluidFocus() {\n\t\treturn this.fluid && this._isFocused;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeleton() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\tprotected _isFocused = false;\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tif (\"type\" in event.target && (<HTMLInputElement>event.target).type === \"button\") {\n\t\t\tthis._isFocused = false;\n\t\t} else {\n\t\t\tthis._isFocused = event.type === \"focus\";\n\t\t}\n\t}\n}\nexport { NumberComponent as Number };\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { NumberModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(focus)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(blur)=\"fluid ? handleFocus($event): null\"\n\t\t\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--number-input__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() @HostBinding(\"class.cds--number--readonly\") readonly = false;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\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\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--number-input--fluid\") @Input() fluid = false;\n\n\t@HostBinding(\"class.cds--number-input--fluid--invalid\") get fluidInvalid() {\n\t\treturn this.fluid && this.invalid;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--disabled\") get fluidDisabled() {\n\t\treturn this.fluid && this.disabled;\n\t}\n\n\t@HostBinding(\"class.cds--number-input--fluid--focus\") get fluidFocus() {\n\t\treturn this.fluid && this._isFocused;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeleton() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\tprotected _isFocused = false;\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\t// if max is set and value + step is greater than max, set value to max\n\t\t// example: max = 100, step = 10, value = 95 , value + step = 105, value will be set to 100 (max) instead of 105\n\t\tif (this.max !== null && this.value + this.step > this.max) {\n\t\t\tthis.value = this.max;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is set and value + step is less than min, set value to min\n\t\t// example: min = 5, step = 2, value = 0, value + step = 2, value will be set to 5 (min) instead of 2\n\t\tif (this.min !== null && this.value + this.step < this.min) {\n\t\t\tthis.value = this.min;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if max is not set or value + step is less than max, increment value by step\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\t// if max is set and value - step is greater than max, set value to max\n\t\t// example: max = 15, step = 2, value = 20, value - step = 18, value will be set to 15 (max) instead of 18\n\t\tif (this.max !== null && this.value - this.step > this.max) {\n\t\t\tthis.value = this.max;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is set and value - step is less than min, set value to min\n\t\t// example: min = 5, step = 2, value = 6, value - step = 4, value will be set to 5 (min) instead of 4\n\t\tif (this.min !== null && this.value - this.step < this.min) {\n\t\t\tthis.value = this.min;\n\t\t\tthis.emitChangeEvent();\n\t\t\treturn;\n\t\t}\n\n\t\t// if min is not set or value - step is greater than min, decrement value by step\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tif (\"type\" in event.target && (<HTMLInputElement>event.target).type === \"button\") {\n\t\t\tthis._isFocused = false;\n\t\t} else {\n\t\t\tthis._isFocused = event.type === \"focus\";\n\t\t}\n\t}\n}\nexport { NumberComponent as Number };\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -41620,7 +41566,7 @@
         },
         {
             "name": "PaginationNav",
-            "id": "component-PaginationNav-1bdc828135005718071bfa73586f126f9670d552f442c8f860a21c136190d8011a5cee57f662f4945fce69adf28ccb78d6dfcd2ea2e829314983d3f2c6456821",
+            "id": "component-PaginationNav-02747b3f02dda4195eb9b8d17de227f10ddb93cd71d7303c3e81567547ccb446b5f32191b820b258e4c180ac7d7172629000d09893bd3b623c8f47837e111b52",
             "file": "src/pagination/pagination-nav/pagination-nav.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -41630,7 +41576,7 @@
             "selector": "cds-pagination-nav, ibm-pagination-navm",
             "styleUrls": [],
             "styles": [],
-            "template": "<div>\n\t<div class=\"cds--pagination-nav\">\n\t\t<ul class=\"cds--pagination-nav__list\">\n\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t(click)=\"jumpToPrevious()\"\n\t\t\t\t\t[disabled]=\"leftArrowDisabled\"\n\t\t\t\t\t[description]=\"previousItemText.subject | async\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"caret--left\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</li>\n\t\t\t<cds-pagination-nav-item\n\t\t\t\t*ngIf=\"this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\tpage=\"1\"\n\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t</cds-pagination-nav-item>\n\t\t\t<cds-pagination-overflow\n\t\t\t\t*ngIf=\"frontCuts\"\n\t\t\t\t[count]=\"frontCuts\"\n\t\t\t\t[fromIndex]=\"startOffset\"\n\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t</cds-pagination-overflow>\n\t\t\t<cds-pagination-nav-item\n\t\t\t\t*ngFor=\"let page of getPages();\"\n\t\t\t\t[page]=\"page\"\n\t\t\t\t(click)=\"currentPage = page\"\n\t\t\t\t[isActive]=\"currentPage == page\">\n\t\t\t</cds-pagination-nav-item>\n\t\t\t<cds-pagination-overflow\n\t\t\t\t*ngIf=\"backCuts\"\n\t\t\t\t[count]=\"backCuts\"\n\t\t\t\t[fromIndex]=\"totalNumbersArray.length - backCuts - 1\"\n\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t</cds-pagination-overflow>\n\t\t\t<cds-pagination-nav-item\n\t\t\t\t*ngIf=\"totalDataLength > 1\"\n\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t</cds-pagination-nav-item>\n\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t(click)=\"jumpToNext()\"\n\t\t\t\t\t[disabled]=\"rightArrowDisabled\"\n\t\t\t\t\t[description]=\"nextItemText.subject | async\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"caret--right\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</div>\n",
+            "template": "<div>\n\t<div class=\"cds--pagination-nav\">\n\t\t<ul class=\"cds--pagination-nav__list\">\n\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t(click)=\"jumpToPrevious()\"\n\t\t\t\t\t[disabled]=\"leftArrowDisabled\"\n\t\t\t\t\t[description]=\"previousItemText.subject | async\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"caret--left\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</li>\n\t\t\t<cds-pagination-nav-item\n\t\t\t\t*ngIf=\"this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\tpage=\"1\"\n\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t</cds-pagination-nav-item>\n\t\t\t<cds-pagination-overflow\n\t\t\t\t*ngIf=\"frontCuts\"\n\t\t\t\t[count]=\"frontCuts\"\n\t\t\t\t[fromIndex]=\"startOffset\"\n\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t</cds-pagination-overflow>\n\t\t\t<cds-pagination-nav-item\n\t\t\t\t*ngFor=\"let page of getPages();\"\n\t\t\t\t[page]=\"page\"\n\t\t\t\t(click)=\"currentPage = page\"\n\t\t\t\t[isActive]=\"currentPage == page\">\n\t\t\t</cds-pagination-nav-item>\n\t\t\t<cds-pagination-overflow\n\t\t\t\t*ngIf=\"backCuts\"\n\t\t\t\t[count]=\"backCuts\"\n\t\t\t\t[fromIndex]=\"totalNumbersArray.length - backCuts - 1\"\n\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t</cds-pagination-overflow>\n\t\t\t<cds-pagination-nav-item\n\t\t\t\t*ngIf=\"totalDataLength > 1\"\n\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t</cds-pagination-nav-item>\n\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t<cds-icon-button\n\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t(click)=\"jumpToNext()\"\n\t\t\t\t\t[disabled]=\"rightArrowDisabled\"\n\t\t\t\t\t[description]=\"nextItemText.subject | async\">\n\t\t\t\t\t<svg\n\t\t\t\t\t\tcdsIcon=\"caret--right\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t</cds-icon-button>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</div>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -41642,7 +41588,7 @@
                     "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": 122,
+                    "line": 124,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -41652,7 +41598,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`PaginationNavModel` with the information about pages you're controlling.\n",
                     "description": "<p><code>PaginationNavModel</code> with the information about pages you&#39;re controlling.</p>\n",
-                    "line": 118,
+                    "line": 120,
                     "type": "PaginationModel",
                     "decorators": []
                 },
@@ -41663,17 +41609,28 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNumber of items to show in pagination. Minimum is 4.\n",
                     "description": "<p>Number of items to show in pagination. Minimum is 4.</p>\n",
-                    "line": 126,
+                    "line": 128,
                     "type": "number",
                     "decorators": []
                 },
+                {
+                    "name": "size",
+                    "defaultValue": "\"lg\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSets the pagination nav size\n",
+                    "description": "<p>Sets the pagination nav size</p>\n",
+                    "line": 149,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": []
+                },
                 {
                     "name": "translations",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"NEXT\": \"Next\",\n\t\t\"PREVIOUS\": \"Previous\",\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;NEXT&quot;: &quot;Next&quot;,\n        &quot;PREVIOUS&quot;: &quot;Previous&quot;,\n}</code></pre></div>",
-                    "line": 138,
+                    "line": 140,
                     "type": "PaginationNavTranslations",
                     "decorators": []
                 }
@@ -41686,7 +41643,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": 150,
+                    "line": 168,
                     "type": "EventEmitter"
                 }
             ],
@@ -41699,7 +41656,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 193
+                    "line": 211
                 },
                 {
                     "name": "paginationCounter",
@@ -41709,7 +41666,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 114,
+                    "line": 116,
                     "modifierKind": [
                         126
                     ]
@@ -41722,7 +41679,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 194
+                    "line": 212
                 }
             ],
             "methodsClass": [
@@ -41732,7 +41689,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 214,
+                    "line": 232,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -41752,7 +41709,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 200,
+                    "line": 218,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -41773,7 +41730,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 206,
+                    "line": 224,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -41786,7 +41743,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 210,
+                    "line": 228,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -41796,14 +41753,39 @@
             ],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [],
+            "hostBindings": [
+                {
+                    "name": "class.cds--layout--size-lg",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 158,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--layout--size-md",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 155,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--layout--size-sm",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 152,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
             "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-nav [model]=&quot;model&quot; (selectPage)=&quot;selectPage($event)&quot;&gt;&lt;/cds-pagination-nav&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-nav--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<cds-pagination-nav [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination-nav>\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-nav--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\";\nimport { range } from \"carbon-components-angular/common\";\n\nexport interface PaginationNavTranslations {\n\tNEXT: string;\n\tPREVIOUS: 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 * <cds-pagination-nav [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination-nav>\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-nav--basic)\n */\n@Component({\n\tselector: \"cds-pagination-nav, ibm-pagination-navm\",\n\ttemplate: `\n\t<div>\n\t\t<div class=\"cds--pagination-nav\">\n\t\t\t<ul class=\"cds--pagination-nav__list\">\n\t\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t(click)=\"jumpToPrevious()\"\n\t\t\t\t\t\t[disabled]=\"leftArrowDisabled\"\n\t\t\t\t\t\t[description]=\"previousItemText.subject | async\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"caret--left\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf=\"this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\t\tpage=\"1\"\n\t\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf=\"frontCuts\"\n\t\t\t\t\t[count]=\"frontCuts\"\n\t\t\t\t\t[fromIndex]=\"startOffset\"\n\t\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngFor=\"let page of getPages();\"\n\t\t\t\t\t[page]=\"page\"\n\t\t\t\t\t(click)=\"currentPage = page\"\n\t\t\t\t\t[isActive]=\"currentPage == page\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf=\"backCuts\"\n\t\t\t\t\t[count]=\"backCuts\"\n\t\t\t\t\t[fromIndex]=\"totalNumbersArray.length - backCuts - 1\"\n\t\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf=\"totalDataLength > 1\"\n\t\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t(click)=\"jumpToNext()\"\n\t\t\t\t\t\t[disabled]=\"rightArrowDisabled\"\n\t\t\t\t\t\t[description]=\"nextItemText.subject | async\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"caret--right\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class PaginationNav {\n\tstatic paginationCounter = 0;\n\t/**\n\t * `PaginationNavModel` 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 * Number of items to show in pagination. Minimum is 4.\n\t */\n\t@Input() numOfItemsToShow = 4;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"NEXT\": \"Next\",\n\t *\t\t\"PREVIOUS\": \"Previous\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: PaginationNavTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.nextItemText.override(valueWithDefaults.NEXT);\n\t\tthis.previousItemText.override(valueWithDefaults.PREVIOUS);\n\t}\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 totalNumbersArray() {\n\t\treturn range(this.totalDataLength + 1, 1);\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\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\n\tget startOffset() {\n\t\treturn this.numOfItemsToShow <= 4 && this.currentPage > 1 ? 0 : 1;\n\t}\n\n\tget frontCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.front;\n\t}\n\n\tget backCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.back;\n\t}\n\n\tget leftArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === 1;\n\t}\n\n\tget rightArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === this.totalDataLength;\n\t}\n\n\tnextItemText = this.i18n.getOverridable(\"PAGINATION.NEXT\");\n\tpreviousItemText = this.i18n.getOverridable(\"PAGINATION.PREVIOUS\");\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPaginationNav.paginationCounter++;\n\t}\n\n\thandleOverflowSelection(page) {\n\t\tif (typeof page === \"number\") {\n\t\t\tthis.currentPage = page;\n\t\t}\n\t}\n\n\tpublic jumpToNext() {\n\t\tthis.currentPage = this.currentPage < this.totalDataLength ? this.currentPage + 1 : this.totalDataLength;\n\t}\n\n\tpublic jumpToPrevious() {\n\t\tthis.currentPage = this.currentPage > 1 ? this.currentPage - 1 : 1;\n\t}\n\n\tpublic getPages() {\n\t\tif (this.totalDataLength <= 1) {\n\t\t\treturn null;\n\t\t}\n\t\tconst cuts = this.getCuts();\n\t\treturn this.totalNumbersArray.slice(this.startOffset + cuts.front, (1 + cuts.back) * -1);\n\t}\n\n\tprivate getCuts(splitPoint = null) {\n\t\tconst page = this.currentPage - 1;\n\t\tconst totalItems = this.totalDataLength;\n\t\tconst itemsThatFit = this.numOfItemsToShow;\n\n\t\tif (itemsThatFit >= totalItems) {\n\t\t\treturn {\n\t\t\t\tfront: 0,\n\t\t\t\tback: 0\n\t\t\t};\n\t\t}\n\t\tconst split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;\n\t\tlet frontHidden = page + 1 - split;\n\t\tlet backHidden = totalItems - page - (itemsThatFit - split) + 1;\n\n\t\tif (frontHidden <= 1) {\n\t\t\tbackHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;\n\t\t\tfrontHidden = 0;\n\t\t}\n\t\tif (backHidden <= 1) {\n\t\t\tfrontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;\n\t\t\tbackHidden = 0;\n\t\t}\n\t\treturn {\n\t\t\tfront: frontHidden,\n\t\t\tback: backHidden\n\t\t};\n\t}\n}\n",
+            "sourceCode": "import { PaginationModel } from \"../pagination-model.class\";\nimport {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding\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\";\nimport { range } from \"carbon-components-angular/common\";\n\nexport interface PaginationNavTranslations {\n\tNEXT: string;\n\tPREVIOUS: 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 * <cds-pagination-nav [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination-nav>\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-nav--basic)\n */\n@Component({\n\tselector: \"cds-pagination-nav, ibm-pagination-navm\",\n\ttemplate: `\n\t<div>\n\t\t<div class=\"cds--pagination-nav\">\n\t\t\t<ul class=\"cds--pagination-nav__list\">\n\t\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t\t(click)=\"jumpToPrevious()\"\n\t\t\t\t\t\t[disabled]=\"leftArrowDisabled\"\n\t\t\t\t\t\t[description]=\"previousItemText.subject | async\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"caret--left\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf=\"this.numOfItemsToShow >= 5 || (this.numOfItemsToShow <= 4 && currentPage <= 1)\"\n\t\t\t\t\tpage=\"1\"\n\t\t\t\t\t(click)=\"currentPage = 1\"\n\t\t\t\t\t[isActive]=\"currentPage == 1\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf=\"frontCuts\"\n\t\t\t\t\t[count]=\"frontCuts\"\n\t\t\t\t\t[fromIndex]=\"startOffset\"\n\t\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngFor=\"let page of getPages();\"\n\t\t\t\t\t[page]=\"page\"\n\t\t\t\t\t(click)=\"currentPage = page\"\n\t\t\t\t\t[isActive]=\"currentPage == page\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<cds-pagination-overflow\n\t\t\t\t\t*ngIf=\"backCuts\"\n\t\t\t\t\t[count]=\"backCuts\"\n\t\t\t\t\t[fromIndex]=\"totalNumbersArray.length - backCuts - 1\"\n\t\t\t\t\t(change)=\"handleOverflowSelection($event)\">\n\t\t\t\t</cds-pagination-overflow>\n\t\t\t\t<cds-pagination-nav-item\n\t\t\t\t\t*ngIf=\"totalDataLength > 1\"\n\t\t\t\t\t[page]=\"totalNumbersArray.length\"\n\t\t\t\t\t(click)=\"currentPage = totalNumbersArray.length\"\n\t\t\t\t\t[isActive]=\"currentPage == totalNumbersArray.length\">\n\t\t\t\t</cds-pagination-nav-item>\n\t\t\t\t<li class=\"cds--pagination-nav__list-item\">\n\t\t\t\t\t<cds-icon-button\n\t\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t\t(click)=\"jumpToNext()\"\n\t\t\t\t\t\t[disabled]=\"rightArrowDisabled\"\n\t\t\t\t\t\t[description]=\"nextItemText.subject | async\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tcdsIcon=\"caret--right\"\n\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</cds-icon-button>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</div>\n\t`\n})\nexport class PaginationNav {\n\tstatic paginationCounter = 0;\n\t/**\n\t * `PaginationNavModel` 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 * Number of items to show in pagination. Minimum is 4.\n\t */\n\t@Input() numOfItemsToShow = 4;\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"NEXT\": \"Next\",\n\t *\t\t\"PREVIOUS\": \"Previous\",\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value: PaginationNavTranslations) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"PAGINATION\"), value);\n\t\tthis.nextItemText.override(valueWithDefaults.NEXT);\n\t\tthis.previousItemText.override(valueWithDefaults.PREVIOUS);\n\t}\n\n\t/**\n\t * Sets the pagination nav size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get smallLayoutSize() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get mediumLayoutSize() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get largeLayoutSize() {\n\t\treturn this.size === \"lg\";\n\t}\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 totalNumbersArray() {\n\t\treturn range(this.totalDataLength + 1, 1);\n\t}\n\n\tget currentPage() {\n\t\treturn this.model.currentPage;\n\t}\n\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\n\tget startOffset() {\n\t\treturn this.numOfItemsToShow <= 4 && this.currentPage > 1 ? 0 : 1;\n\t}\n\n\tget frontCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.front;\n\t}\n\n\tget backCuts() {\n\t\tconst cuts = this.getCuts();\n\t\treturn cuts.back;\n\t}\n\n\tget leftArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === 1;\n\t}\n\n\tget rightArrowDisabled() {\n\t\treturn this.disabled || this.currentPage === this.totalDataLength;\n\t}\n\n\tnextItemText = this.i18n.getOverridable(\"PAGINATION.NEXT\");\n\tpreviousItemText = this.i18n.getOverridable(\"PAGINATION.PREVIOUS\");\n\n\tconstructor(protected i18n: I18n, protected experimental: ExperimentalService) {\n\t\tPaginationNav.paginationCounter++;\n\t}\n\n\thandleOverflowSelection(page) {\n\t\tif (typeof page === \"number\") {\n\t\t\tthis.currentPage = page;\n\t\t}\n\t}\n\n\tpublic jumpToNext() {\n\t\tthis.currentPage = this.currentPage < this.totalDataLength ? this.currentPage + 1 : this.totalDataLength;\n\t}\n\n\tpublic jumpToPrevious() {\n\t\tthis.currentPage = this.currentPage > 1 ? this.currentPage - 1 : 1;\n\t}\n\n\tpublic getPages() {\n\t\tif (this.totalDataLength <= 1) {\n\t\t\treturn null;\n\t\t}\n\t\tconst cuts = this.getCuts();\n\t\treturn this.totalNumbersArray.slice(this.startOffset + cuts.front, (1 + cuts.back) * -1);\n\t}\n\n\tprivate getCuts(splitPoint = null) {\n\t\tconst page = this.currentPage - 1;\n\t\tconst totalItems = this.totalDataLength;\n\t\tconst itemsThatFit = this.numOfItemsToShow;\n\n\t\tif (itemsThatFit >= totalItems) {\n\t\t\treturn {\n\t\t\t\tfront: 0,\n\t\t\t\tback: 0\n\t\t\t};\n\t\t}\n\t\tconst split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;\n\t\tlet frontHidden = page + 1 - split;\n\t\tlet backHidden = totalItems - page - (itemsThatFit - split) + 1;\n\n\t\tif (frontHidden <= 1) {\n\t\t\tbackHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;\n\t\t\tfrontHidden = 0;\n\t\t}\n\t\tif (backHidden <= 1) {\n\t\t\tfrontHidden -= backHidden <= 0 ? Math.abs(backHidden) + 1 : 0;\n\t\t\tbackHidden = 0;\n\t\t}\n\t\treturn {\n\t\t\tfront: frontHidden,\n\t\t\tback: backHidden\n\t\t};\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -41826,7 +41808,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 194,
+                "line": 212,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -41866,7 +41848,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 138,
+                        "line": 140,
                         "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"NEXT\": \"Next\",\n\t\t\"PREVIOUS\": \"Previous\",\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;NEXT&quot;: &quot;Next&quot;,\n        &quot;PREVIOUS&quot;: &quot;Previous&quot;,\n}</code></pre></div>",
                         "jsdoctags": [
@@ -41882,13 +41864,40 @@
                         ]
                     }
                 },
+                "smallLayoutSize": {
+                    "name": "smallLayoutSize",
+                    "getSignature": {
+                        "name": "smallLayoutSize",
+                        "type": "",
+                        "returnType": "",
+                        "line": 152
+                    }
+                },
+                "mediumLayoutSize": {
+                    "name": "mediumLayoutSize",
+                    "getSignature": {
+                        "name": "mediumLayoutSize",
+                        "type": "",
+                        "returnType": "",
+                        "line": 155
+                    }
+                },
+                "largeLayoutSize": {
+                    "name": "largeLayoutSize",
+                    "getSignature": {
+                        "name": "largeLayoutSize",
+                        "type": "",
+                        "returnType": "",
+                        "line": 158
+                    }
+                },
                 "totalNumbersArray": {
                     "name": "totalNumbersArray",
                     "getSignature": {
                         "name": "totalNumbersArray",
                         "type": "",
                         "returnType": "",
-                        "line": 152
+                        "line": 170
                     }
                 },
                 "currentPage": {
@@ -41907,7 +41916,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 160,
+                        "line": 178,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -41924,7 +41933,7 @@
                         "name": "currentPage",
                         "type": "",
                         "returnType": "",
-                        "line": 156
+                        "line": 174
                     }
                 },
                 "totalDataLength": {
@@ -41933,7 +41942,7 @@
                         "name": "totalDataLength",
                         "type": "",
                         "returnType": "",
-                        "line": 167
+                        "line": 185
                     }
                 },
                 "startOffset": {
@@ -41942,7 +41951,7 @@
                         "name": "startOffset",
                         "type": "",
                         "returnType": "",
-                        "line": 171
+                        "line": 189
                     }
                 },
                 "frontCuts": {
@@ -41951,7 +41960,7 @@
                         "name": "frontCuts",
                         "type": "",
                         "returnType": "",
-                        "line": 175
+                        "line": 193
                     }
                 },
                 "backCuts": {
@@ -41960,7 +41969,7 @@
                         "name": "backCuts",
                         "type": "",
                         "returnType": "",
-                        "line": 180
+                        "line": 198
                     }
                 },
                 "leftArrowDisabled": {
@@ -41969,7 +41978,7 @@
                         "name": "leftArrowDisabled",
                         "type": "",
                         "returnType": "",
-                        "line": 185
+                        "line": 203
                     }
                 },
                 "rightArrowDisabled": {
@@ -41978,7 +41987,7 @@
                         "name": "rightArrowDisabled",
                         "type": "",
                         "returnType": "",
-                        "line": 189
+                        "line": 207
                     }
                 }
             }
@@ -42062,7 +42071,7 @@
         },
         {
             "name": "PaginationNavStory",
-            "id": "component-PaginationNavStory-cf3a200910fcccb251f8102fe7f8580f74d11ff12410ae2cdd614de2f7ca30d4ec9677508d1a69237ac786b0f025830e94c78eaa004423068a6f03de0ba82cdf",
+            "id": "component-PaginationNavStory-82b8f8e304195eef384cf31fbe1fbd130e1484d237aca1ba87a29713634a23a7ee9178947747f33d4eb1186d62e6bfcaac749c07da8ef3386e92b63c27ee2ac7",
             "file": "src/pagination/pagination-nav/stories/pagination-nav-story.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -42072,7 +42081,7 @@
             "selector": "app-pagination",
             "styleUrls": [],
             "styles": [],
-            "template": "<cds-pagination-nav\n\t[model]=\"model\"\n\t[disabled]=\"disabled\"\n\t(selectPage)=\"selectPage($event)\"\n\t[numOfItemsToShow]=\"numOfItemsToShow\">\n</cds-pagination-nav>\n\t",
+            "template": "<cds-pagination-nav\n\t[model]=\"model\"\n\t[disabled]=\"disabled\"\n\t(selectPage)=\"selectPage($event)\"\n\t[numOfItemsToShow]=\"numOfItemsToShow\"\n\t[size]=\"size\">\n</cds-pagination-nav>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -42082,7 +42091,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 22,
+                    "line": 23,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -42091,7 +42100,7 @@
                     "defaultValue": "new PaginationModel()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 21,
+                    "line": 22,
                     "type": "any",
                     "decorators": []
                 },
@@ -42100,7 +42109,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 24,
+                    "line": 25,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -42109,15 +42118,24 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 23,
+                    "line": 24,
                     "type": "boolean",
                     "decorators": []
                 },
                 {
-                    "name": "totalDataLength",
+                    "name": "size",
+                    "defaultValue": "\"md\"",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "line": 26,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": []
+                },
+                {
+                    "name": "totalDataLength",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 28,
                     "type": "any",
                     "decorators": []
                 }
@@ -42138,7 +42156,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 37,
+                    "line": 39,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -42163,7 +42181,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-nav\n\t\t\t[model]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(selectPage)=\"selectPage($event)\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\">\n\t\t</cds-pagination-nav>\n\t`\n})\nexport class PaginationNavStory implements OnInit {\n\t@Input() model = new PaginationModel();\n\t@Input() disabled = false;\n\t@Input() pageInputDisabled = false;\n\t@Input() numOfItemsToShow = 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.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-nav\n\t\t\t[model]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(selectPage)=\"selectPage($event)\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\n\t\t\t[size]=\"size\">\n\t\t</cds-pagination-nav>\n\t`\n})\nexport class PaginationNavStory implements OnInit {\n\t@Input() model = new PaginationModel();\n\t@Input() disabled = false;\n\t@Input() pageInputDisabled = false;\n\t@Input() numOfItemsToShow = false;\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\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.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": "",
@@ -42188,7 +42206,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 29,
+                        "line": 31,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -42205,7 +42223,7 @@
                         "name": "totalDataLength",
                         "type": "",
                         "returnType": "",
-                        "line": 26
+                        "line": 28
                     }
                 }
             }
@@ -44083,7 +44101,7 @@
         },
         {
             "name": "ProgressIndicator",
-            "id": "component-ProgressIndicator-e4cef2ec45734c54b154d1a75741f223eaefc76f015969c688583c121414d1e7369b63f7ad11a3729bf1e425edc61cb0965ffaefbd629c09bbd92e3bf9bb2e53",
+            "id": "component-ProgressIndicator-44188c869e43c1d9a135becb504bc44a785fca0023a6f24b962f6f49958a0b43c0f37bca4fb522cd52a3858ab9bf3f229d033dacc3ac3e586936051aa7419ba1",
             "file": "src/progress-indicator/progress-indicator.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -44198,8 +44216,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3580,
-                                "end": 3585,
+                                "pos": 3581,
+                                "end": 3586,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44210,8 +44228,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3574,
-                                "end": 3579,
+                                "pos": 3575,
+                                "end": 3580,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44222,8 +44240,8 @@
                         },
                         {
                             "tagName": {
-                                "pos": 3598,
-                                "end": 3605,
+                                "pos": 3599,
+                                "end": 3606,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44255,8 +44273,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3126,
-                                "end": 3131,
+                                "pos": 3127,
+                                "end": 3132,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44267,8 +44285,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3120,
-                                "end": 3125,
+                                "pos": 3121,
+                                "end": 3126,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44317,10 +44335,10 @@
             "hostListeners": [],
             "standalone": false,
             "imports": [],
-            "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ProgressIndictorModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-progress-indicator--basic\">See demo</a></p>\n",
-            "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ProgressIndictorModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-progress-indicator--basic)\n",
+            "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ProgressIndicatorModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-progress-indicator--basic\">See demo</a></p>\n",
+            "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ProgressIndicatorModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-progress-indicator--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Step } from \"./progress-indicator-step.interface\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ProgressIndictorModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-progress-indicator--basic)\n */\n@Component({\n\tselector: \"cds-progress-indicator, ibm-progress-indicator\",\n\ttemplate: `\n\t<ul\n\t\tdata-progress\n\t\tdata-progress-current\n\t\tclass=\"cds--progress\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton,\n\t\t\t'cds--progress--vertical': (orientation === 'vertical'),\n\t\t\t'cds--progress--space-equal': spacing === 'equal' && orientation !== 'vertical'\n\t\t}\">\n\t\t<li\n\t\t\tclass=\"cds--progress-step\"\n\t\t\t*ngFor=\"let step of steps; let i = index\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--progress-step--disabled' : step.disabled,\n\t\t\t\t'cds--progress-step--complete' : step.complete,\n\t\t\t\t'cds--progress-step--incomplete' : !step.complete && i !== current,\n\t\t\t\t'cds--progress-step--current': i === current\n\t\t\t}\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cds--progress-step-button\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--progress-step-button--unclickable': !step.onClick || current === i\n\t\t\t\t}\"\n\t\t\t\t[disabled]=\"step.disabled\"\n\t\t\t\t[attr.aria-disabled]=\"step.disabled\"\n\t\t\t\t[tabindex]=\"(current !== i && step.onClick && !step.disabled) ? 0 : -1\"\n\t\t\t\t[title]=\"step.label\"\n\t\t\t\t(click)=\"onClick(i)\">\n\t\t\t\t<span class=\"cds--assistive-text\">\n\t\t\t\t\t{{this.translations[getCurrentState(i)?.toUpperCase()]}}\n\t\t\t\t</span>\n\t\t\t\t<svg\n\t\t\t\t\t[cdsIcon]=\"statusIcons[getCurrentState(i)]\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--progress__warning': step.invalid && i !== current\n\t\t\t\t\t}\">\n\t\t\t\t\t<title *ngIf=\"step.description\">{{step.description}}</title>\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--progress-text\">\n\t\t\t\t\t<p class=\"cds--progress-label\">{{step.label}}</p>\n\t\t\t\t\t<p *ngIf=\"step.secondaryLabel\" class=\"cds--progress-optional\">{{step.secondaryLabel}}</p>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"cds--progress-line\"></span>\n\t\t\t</button>\n\t\t</li>\n\t</ul>\n\t`\n})\nexport class ProgressIndicator {\n\t@Input() get current() {\n\t\treturn this._current;\n\t}\n\tset current(current: number) {\n\t\tthis._current = current;\n\t\tthis.setProgressIndicatorStates();\n\t}\n\tstatic skeletonSteps(stepCount: number) {\n\t\tconst steps = [];\n\t\tfor (let i = 0; i < stepCount; i++) {\n\t\t\tsteps.push({ complete: false });\n\t\t}\n\n\t\treturn steps;\n\t}\n\n\t@Input() steps: Array<Step>;\n\t@Output() stepSelected = new EventEmitter<{ step: Step, index: number }>();\n\n\t@Input() translations = this.i18n.get().PROGRESS_INDICATOR;\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\t@Input() skeleton = false;\n\t@Input() spacing: \"default\" | \"equal\" = \"default\";\n\n\t// Get icon names based for each status\n\treadonly statusIcons = {\n\t\tcurrent: \"incomplete\",\n\t\tcomplete: \"checkmark--outline\",\n\t\tinvalid: \"warning\",\n\t\tincomplete: \"circle-dash\"\n\t};\n\n\tprivate _current: number;\n\n\tconstructor(protected i18n: I18n) { }\n\n\t/**\n\t * Executes click function if `onClick` exists for step\n\t * `Current` step functions will not be executed\n\t * @param index number\n\t */\n\tonClick(index: number) {\n\t\tif (index !== this.current && typeof this.steps[index].onClick === \"function\") {\n\t\t\tthis.steps[index].onClick();\n\t\t}\n\t\tthis.stepSelected.emit({ step: this.steps[index], index });\n\t}\n\n\t/**\n\t * Gets current state based on weight of the state\n\t * Weight of state goes from error, incomplete, current, and complete\n\t *\n\t * This function is used to determine which icon & translation string to display\n\t * @param index number\n\t * @returns string\n\t */\n\tgetCurrentState(index: number) {\n\t\tif (index === this.current) {\n\t\t\treturn \"current\";\n\t\t} else if (this.steps[index].invalid) {\n\t\t\treturn \"invalid\";\n\t\t} else if (this.steps[index].complete) {\n\t\t\treturn \"complete\";\n\t\t}\n\n\t\treturn \"incomplete\";\n\t}\n\n\tprivate setProgressIndicatorStates() {\n\t\tif (this.steps === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set all preceding steps to `complete` & following to `incomplete`\n\t\tthis.steps.forEach((step: Step, index) => {\n\t\t\tif (index < this.current) {\n\t\t\t\tstep.complete = true;\n\t\t\t} else {\n\t\t\t\tstep.complete = false;\n\t\t\t}\n\t\t});\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Step } from \"./progress-indicator-step.interface\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ProgressIndicatorModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-progress-indicator--basic)\n */\n@Component({\n\tselector: \"cds-progress-indicator, ibm-progress-indicator\",\n\ttemplate: `\n\t<ul\n\t\tdata-progress\n\t\tdata-progress-current\n\t\tclass=\"cds--progress\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--skeleton': skeleton,\n\t\t\t'cds--progress--vertical': (orientation === 'vertical'),\n\t\t\t'cds--progress--space-equal': spacing === 'equal' && orientation !== 'vertical'\n\t\t}\">\n\t\t<li\n\t\t\tclass=\"cds--progress-step\"\n\t\t\t*ngFor=\"let step of steps; let i = index\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--progress-step--disabled' : step.disabled,\n\t\t\t\t'cds--progress-step--complete' : step.complete,\n\t\t\t\t'cds--progress-step--incomplete' : !step.complete && i !== current,\n\t\t\t\t'cds--progress-step--current': i === current\n\t\t\t}\">\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclass=\"cds--progress-step-button\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--progress-step-button--unclickable': !step.onClick || current === i\n\t\t\t\t}\"\n\t\t\t\t[disabled]=\"step.disabled\"\n\t\t\t\t[attr.aria-disabled]=\"step.disabled\"\n\t\t\t\t[tabindex]=\"(current !== i && step.onClick && !step.disabled) ? 0 : -1\"\n\t\t\t\t[title]=\"step.label\"\n\t\t\t\t(click)=\"onClick(i)\">\n\t\t\t\t<span class=\"cds--assistive-text\">\n\t\t\t\t\t{{this.translations[getCurrentState(i)?.toUpperCase()]}}\n\t\t\t\t</span>\n\t\t\t\t<svg\n\t\t\t\t\t[cdsIcon]=\"statusIcons[getCurrentState(i)]\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--progress__warning': step.invalid && i !== current\n\t\t\t\t\t}\">\n\t\t\t\t\t<title *ngIf=\"step.description\">{{step.description}}</title>\n\t\t\t\t</svg>\n\t\t\t\t<div class=\"cds--progress-text\">\n\t\t\t\t\t<p class=\"cds--progress-label\">{{step.label}}</p>\n\t\t\t\t\t<p *ngIf=\"step.secondaryLabel\" class=\"cds--progress-optional\">{{step.secondaryLabel}}</p>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"cds--progress-line\"></span>\n\t\t\t</button>\n\t\t</li>\n\t</ul>\n\t`\n})\nexport class ProgressIndicator {\n\t@Input() get current() {\n\t\treturn this._current;\n\t}\n\tset current(current: number) {\n\t\tthis._current = current;\n\t\tthis.setProgressIndicatorStates();\n\t}\n\tstatic skeletonSteps(stepCount: number) {\n\t\tconst steps = [];\n\t\tfor (let i = 0; i < stepCount; i++) {\n\t\t\tsteps.push({ complete: false });\n\t\t}\n\n\t\treturn steps;\n\t}\n\n\t@Input() steps: Array<Step>;\n\t@Output() stepSelected = new EventEmitter<{ step: Step, index: number }>();\n\n\t@Input() translations = this.i18n.get().PROGRESS_INDICATOR;\n\t@Input() orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\t@Input() skeleton = false;\n\t@Input() spacing: \"default\" | \"equal\" = \"default\";\n\n\t// Get icon names based for each status\n\treadonly statusIcons = {\n\t\tcurrent: \"incomplete\",\n\t\tcomplete: \"checkmark--outline\",\n\t\tinvalid: \"warning\",\n\t\tincomplete: \"circle-dash\"\n\t};\n\n\tprivate _current: number;\n\n\tconstructor(protected i18n: I18n) { }\n\n\t/**\n\t * Executes click function if `onClick` exists for step\n\t * `Current` step functions will not be executed\n\t * @param index number\n\t */\n\tonClick(index: number) {\n\t\tif (index !== this.current && typeof this.steps[index].onClick === \"function\") {\n\t\t\tthis.steps[index].onClick();\n\t\t}\n\t\tthis.stepSelected.emit({ step: this.steps[index], index });\n\t}\n\n\t/**\n\t * Gets current state based on weight of the state\n\t * Weight of state goes from error, incomplete, current, and complete\n\t *\n\t * This function is used to determine which icon & translation string to display\n\t * @param index number\n\t * @returns string\n\t */\n\tgetCurrentState(index: number) {\n\t\tif (index === this.current) {\n\t\t\treturn \"current\";\n\t\t} else if (this.steps[index].invalid) {\n\t\t\treturn \"invalid\";\n\t\t} else if (this.steps[index].complete) {\n\t\t\treturn \"complete\";\n\t\t}\n\n\t\treturn \"incomplete\";\n\t}\n\n\tprivate setProgressIndicatorStates() {\n\t\tif (this.steps === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set all preceding steps to `complete` & following to `incomplete`\n\t\tthis.steps.forEach((step: Step, index) => {\n\t\t\tif (index < this.current) {\n\t\t\t\tstep.complete = true;\n\t\t\t} else {\n\t\t\t\tstep.complete = false;\n\t\t\t}\n\t\t});\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -51638,7 +51656,7 @@
         },
         {
             "name": "StructuredList",
-            "id": "component-StructuredList-27e8c9d90fa7e60c5a2d58adbb88d221fcb1af3303e812c03c0b663f366ace9d08697fe39d81b65a97df1261ff5633c78856a3bedeea16b1a5d1dcc0137d5083",
+            "id": "component-StructuredList-c8b48b09f6ed4c012aa71c2bd466ad0179d6b9174cbebafbfaeb0b4cc996e668d9b8e722dd09ef2cbaf72ff5a75f0395834550002608ce3d08b42c6130cc71cb",
             "file": "src/structured-list/structured-list.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -51891,7 +51909,7 @@
             "description": "<p>Structured Lists represent related tabular data. For larger datasets consider a full <code>Table</code>.</p>\n<p>See <a href=\"https://www.carbondesignsystem.com/components/structured-list/usage\">structured-list/usage</a> for usage guidance.</p>\n<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { StructuredListModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;cds-structured-list&gt;\n        &lt;cds-list-header&gt;\n            &lt;cds-list-column nowrap=&quot;true&quot;&gt;Column 1&lt;/cds-list-column&gt;\n            &lt;cds-list-column nowrap=&quot;true&quot;&gt;Column 2&lt;/cds-list-column&gt;\n            &lt;cds-list-column&gt;Column 3&lt;/cds-list-column&gt;\n        &lt;/cds-list-header&gt;\n        &lt;cds-list-row&gt;\n            &lt;cds-list-column&gt;Row 1&lt;/cds-list-column&gt;\n            &lt;cds-list-column nowrap=&quot;true&quot;&gt;Row One&lt;/cds-list-column&gt;\n            &lt;cds-list-column&gt;\n                Lorem ipsum dolor sit amet,\n                consectetur adipiscing elit. Nunc dui magna,\n                finibus id tortor sed, aliquet bibendum augue.\n                Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n                Pellentesque vulputate nisl a porttitor interdum.\n            &lt;/cds-list-column&gt;\n        &lt;/cds-list-row&gt;\n        &lt;cds-list-row&gt;\n            &lt;cds-list-column&gt;Row 2&lt;/cds-list-column&gt;\n            &lt;cds-list-column nowrap=&quot;true&quot;&gt;Row Two&lt;/cds-list-column&gt;\n            &lt;cds-list-column&gt;\n                Lorem ipsum dolor sit amet,\n                consectetur adipiscing elit. Nunc dui magna,\n                finibus id tortor sed, aliquet bibendum augue.\n                Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n                Pellentesque vulputate nisl a porttitor interdum.\n            &lt;/cds-list-column&gt;\n        &lt;/cds-list-row&gt;\n    &lt;/cds-structured-list&gt;</code></pre></div><p><a href=\"../../?path=/story/components-structured-list--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nStructured Lists represent related tabular data. For larger datasets consider a full `Table`.\n\nSee [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.\n\nGet started with importing the module:\n\n```typescript\nimport { StructuredListModule } from 'carbon-components-angular';\n```\n\n```html\n\t<cds-structured-list>\n\t\t<cds-list-header>\n\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t</cds-list-header>\n\t\t<cds-list-row>\n\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t<cds-list-column>\n\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t</cds-list-column>\n\t\t</cds-list-row>\n\t\t<cds-list-row>\n\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t<cds-list-column>\n\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t</cds-list-column>\n\t\t</cds-list-row>\n\t</cds-structured-list>\n```\n\n[See demo](../../?path=/story/components-structured-list--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { ListRow } from \"./list-row.component\";\nimport { ListHeader } from \"./list-header.component\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n/**\n * Structured Lists represent related tabular data. For larger datasets consider a full `Table`.\n *\n * See [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { StructuredListModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n *\t<cds-structured-list>\n *\t\t<cds-list-header>\n *\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n *\t\t\t<cds-list-column>Column 3</cds-list-column>\n *\t\t</cds-list-header>\n *\t\t<cds-list-row>\n *\t\t\t<cds-list-column>Row 1</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n *\t\t\t<cds-list-column>\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t</cds-list-column>\n *\t\t</cds-list-row>\n *\t\t<cds-list-row>\n *\t\t\t<cds-list-column>Row 2</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n *\t\t\t<cds-list-column>\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t</cds-list-column>\n *\t\t</cds-list-row>\n *\t</cds-structured-list>\n * ```\n *\n * [See demo](../../?path=/story/components-structured-list--basic)\n */\n@Component({\n\tselector: \"cds-structured-list, ibm-structured-list\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--structured-list\"\n\t\t\trole=\"table\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--structured-list--flush': flushed,\n\t\t\t\t'cds--structured-list--selection': selection,\n\t\t\t\t'cds--structured-list--condensed': condensed,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-content select=\"cds-list-header,ibm-list-header\"></ng-content>\n\t\t\t<div class=\"cds--structured-list-tbody\" role=\"rowgroup\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: StructuredList,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class StructuredList implements AfterContentInit, ControlValueAccessor {\n\t/**\n\t * A counter to provide unique default values.\n\t */\n\tstatic listCount = 0;\n\t/**\n\t * Set to `true` to enable radio like selection of the rows.\n\t */\n\t@Input() selection = false;\n\t/**\n\t * Set to `true` to align content with margin\n\t */\n\t@Input() flushed = false;\n\t/**\n\t * Set to `true` to apply a condensed style to the headers and rows.\n\t */\n\t@Input() condensed = false;\n\t/**\n\t * Used when `selection = true` as the row radio group `name`\n\t */\n\t@Input() name = `structured-list-${StructuredList.listCount++}`;\n\n\t/**\n\t * Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.\n\t */\n\t@Input()\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `StructuredList` if there is one.\n\t */\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Emits an event when the row selection changes.\n\t *\n\t * Emits an object that looks like:\n\t * ```javascript\n\t * {\n\t * \tvalue: \"something\",\n\t * \tselected: true,\n\t * \tname: \"structured-list-1\"\n\t * }\n\t * ```\n\t */\n\t@Output() selected: EventEmitter<{value: string, selected: boolean, name: string}> = new EventEmitter();\n\n\t@ContentChildren(ListRow) rows: QueryList<ListRow>;\n\t@ContentChildren(ListHeader) headers: QueryList<ListHeader>;\n\n\tprotected _skeleton = false;\n\n\tonChange = (_: any) => { };\n\n\tonTouched = () => { };\n\n\tngAfterContentInit() {\n\t\tconst setSelection = (rowOrHeader: ListRow | ListHeader) => {\n\t\t\trowOrHeader.selection = this.selection;\n\t\t};\n\n\t\tthis.headers.forEach(setSelection);\n\t\tthis.rows.forEach(row => {\n\t\t\tsetSelection(row);\n\t\t\trow.name = this.name;\n\t\t\trow.tabindex = this.selection ? \"0\" : null;\n\t\t\trow.change.subscribe(() => {\n\t\t\t\tthis.selected.emit({\n\t\t\t\t\tvalue: row.value,\n\t\t\t\t\tselected: row.selected,\n\t\t\t\t\tname: this.name\n\t\t\t\t});\n\t\t\t\tthis.onChange(row.value);\n\t\t\t});\n\t\t});\n\t\tthis.updateChildren();\n\t}\n\n\twriteValue(value: any) {\n\t\tif (!this.rows) { return; }\n\t\tthis.rows.forEach(row => {\n\t\t\tif (row.value === value) {\n\t\t\t\trow.selected = true;\n\t\t\t} else {\n\t\t\t\trow.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.headers) {\n\t\t\tthis.headers.toArray().forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tOutput,\n\tEventEmitter\n} from \"@angular/core\";\nimport { ListRow } from \"./list-row.component\";\nimport { ListHeader } from \"./list-header.component\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n/**\n * Structured Lists represent related tabular data. For larger datasets consider a full `Table`.\n *\n * See [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { StructuredListModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n *\t<cds-structured-list>\n *\t\t<cds-list-header>\n *\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n *\t\t\t<cds-list-column>Column 3</cds-list-column>\n *\t\t</cds-list-header>\n *\t\t<cds-list-row>\n *\t\t\t<cds-list-column>Row 1</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n *\t\t\t<cds-list-column>\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t</cds-list-column>\n *\t\t</cds-list-row>\n *\t\t<cds-list-row>\n *\t\t\t<cds-list-column>Row 2</cds-list-column>\n *\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n *\t\t\t<cds-list-column>\n *\t\t\t\tLorem ipsum dolor sit amet,\n *\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t\t</cds-list-column>\n *\t\t</cds-list-row>\n *\t</cds-structured-list>\n * ```\n *\n * [See demo](../../?path=/story/components-structured-list--basic)\n */\n@Component({\n\tselector: \"cds-structured-list, ibm-structured-list\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--structured-list\"\n\t\t\trole=\"table\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--structured-list--flush': flushed,\n\t\t\t\t'cds--structured-list--selection': selection,\n\t\t\t\t'cds--structured-list--condensed': condensed,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-content select=\"cds-list-header,ibm-list-header\"></ng-content>\n\t\t\t<div class=\"cds--structured-list-tbody\" role=\"rowgroup\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: StructuredList,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class StructuredList implements AfterContentInit, ControlValueAccessor {\n\t/**\n\t * A counter to provide unique default values.\n\t */\n\tstatic listCount = 0;\n\t/**\n\t * Set to `true` to enable radio like selection of the rows.\n\t */\n\t@Input() selection = false;\n\t/**\n\t * Set to `true` to align content with margin\n\t */\n\t@Input() flushed = false;\n\t/**\n\t * Set to `true` to apply a condensed style to the headers and rows.\n\t */\n\t@Input() condensed = false;\n\t/**\n\t * Used when `selection = true` as the row radio group `name`\n\t */\n\t@Input() name = `structured-list-${StructuredList.listCount++}`;\n\n\t/**\n\t * Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.\n\t */\n\t@Input()\n\tset skeleton(value: any) {\n\t\tthis._skeleton = value;\n\t\tthis.updateChildren();\n\t}\n\n\t/**\n\t * Returns the skeleton value in the `StructuredList` if there is one.\n\t */\n\tget skeleton(): any {\n\t\treturn this._skeleton;\n\t}\n\n\t/**\n\t * Emits an event when the row selection changes.\n\t *\n\t * Emits an object that looks like:\n\t * ```javascript\n\t * {\n\t * \tvalue: \"something\",\n\t * \tselected: true,\n\t * \tname: \"structured-list-1\"\n\t * }\n\t * ```\n\t */\n\t@Output() selected: EventEmitter<{value: string, selected: boolean, name: string}> = new EventEmitter();\n\n\t@ContentChildren(ListRow) rows: QueryList<ListRow>;\n\t@ContentChildren(ListHeader) headers: QueryList<ListHeader>;\n\n\tprotected _skeleton = false;\n\n\tonChange = (_: any) => { };\n\n\tonTouched = () => { };\n\n\tngAfterContentInit() {\n\t\tconst setSelection = (rowOrHeader: ListRow | ListHeader) => {\n\t\t\trowOrHeader.selection = this.selection;\n\t\t};\n\n\t\tthis.headers.forEach(setSelection);\n\t\tthis.rows.forEach(row => {\n\t\t\tsetSelection(row);\n\t\t\trow.name = this.name;\n\t\t\trow.change.subscribe(() => {\n\t\t\t\tthis.selected.emit({\n\t\t\t\t\tvalue: row.value,\n\t\t\t\t\tselected: row.selected,\n\t\t\t\t\tname: this.name\n\t\t\t\t});\n\t\t\t\tthis.onChange(row.value);\n\t\t\t\tthis.writeValue(row.value);\n\t\t\t});\n\t\t});\n\t\tthis.updateChildren();\n\t}\n\n\twriteValue(value: any) {\n\t\tif (!this.rows) { return; }\n\t\tthis.rows.forEach(row => {\n\t\t\tif (row.value === value) {\n\t\t\t\trow.selected = true;\n\t\t\t} else {\n\t\t\t\trow.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tprotected updateChildren() {\n\t\tif (this.headers) {\n\t\t\tthis.headers.toArray().forEach(child => child.skeleton = this.skeleton);\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -74012,7 +74030,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
             },
             {
                 "name": "ModelTemplate",
@@ -74699,7 +74717,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list\n\t\t\t[border]=\"border\"\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[nowrap]=\"nowrap\"\n\t\t\tselection=\"true\"\n\t\t\t[(ngModel)]=\"valueSelected\">\n\t\t\t<cds-list-header>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t\t</cds-list-header>\n\t\t\t<cds-list-row value=\"row1\">\n\t\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row value=\"row2\">\n\t\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t</cds-structured-list>\n\t\t<p>{{valueSelected}}</p>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list\n\t\t\t[border]=\"border\"\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[nowrap]=\"nowrap\"\n\t\t\tselection=\"true\"\n\t\t\t[(ngModel)]=\"valueSelected\">\n\t\t\t<cds-list-header>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t\t</cds-list-header>\n\t\t\t<cds-list-row value=\"row1\">\n\t\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row value=\"row2\">\n\t\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row value=\"row3\">\n\t\t\t\t<cds-list-column>Row 3</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Three</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row value=\"row4\">\n\t\t\t\t<cds-list-column>Row 4</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Four</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t</cds-structured-list>\n\t\t<p>{{valueSelected}}</p>\n\t`\n})"
             },
             {
                 "name": "SideNavigation",
@@ -75069,7 +75087,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\tlabel=\"Number input label\"\n\t\t\tskeleton=\"true\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\tlabel=\"Number input label\"\n\t\t\tskeleton=\"true\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t`\n})"
             },
             {
                 "name": "SkeletonTemplate",
@@ -75459,7 +75477,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -75469,7 +75487,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/pagination-nav/stories/pagination-nav-story.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\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/pagination-nav/stories/pagination-nav-story.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t</app-pagination>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -80419,7 +80437,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
                 },
                 {
                     "name": "NgModel",
@@ -80449,7 +80467,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\tlabel=\"Number input label\"\n\t\t\tskeleton=\"true\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\tlabel=\"Number input label\"\n\t\t\tskeleton=\"true\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t`\n})"
                 },
                 {
                     "name": "Template",
@@ -80459,7 +80477,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\">\n\t\t</cds-number>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t`\n})"
                 }
             ],
             "src/pagination/pagination-nav.stories.ts": [
@@ -80481,7 +80499,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/pagination-nav/stories/pagination-nav-story.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\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/pagination-nav/stories/pagination-nav-story.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t</app-pagination>\n\t`\n})"
                 }
             ],
             "src/pagination/pagination.stories.ts": [
@@ -80869,7 +80887,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list\n\t\t\t[border]=\"border\"\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[nowrap]=\"nowrap\"\n\t\t\tselection=\"true\"\n\t\t\t[(ngModel)]=\"valueSelected\">\n\t\t\t<cds-list-header>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t\t</cds-list-header>\n\t\t\t<cds-list-row value=\"row1\">\n\t\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row value=\"row2\">\n\t\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t</cds-structured-list>\n\t\t<p>{{valueSelected}}</p>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list\n\t\t\t[border]=\"border\"\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[nowrap]=\"nowrap\"\n\t\t\tselection=\"true\"\n\t\t\t[(ngModel)]=\"valueSelected\">\n\t\t\t<cds-list-header>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t\t</cds-list-header>\n\t\t\t<cds-list-row value=\"row1\">\n\t\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row value=\"row2\">\n\t\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row value=\"row3\">\n\t\t\t\t<cds-list-column>Row 3</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Three</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row value=\"row4\">\n\t\t\t\t<cds-list-column>Row 4</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Four</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t</cds-structured-list>\n\t\t<p>{{valueSelected}}</p>\n\t`\n})"
                 },
                 {
                     "name": "Skeleton",
@@ -87568,8 +87586,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "PaginationNav",
-                "coveragePercent": 42,
-                "coverageCount": "6/14",
+                "coveragePercent": 38,
+                "coverageCount": "7/18",
                 "status": "medium"
             },
             {
@@ -87596,7 +87614,7 @@
                 "linktype": "component",
                 "name": "PaginationNavStory",
                 "coveragePercent": 0,
-                "coverageCount": "0/7",
+                "coverageCount": "0/8",
                 "status": "low"
             },
             {
@@ -88423,8 +88441,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "ListRow",
-                "coveragePercent": 26,
-                "coverageCount": "6/23",
+                "coveragePercent": 33,
+                "coverageCount": "6/18",
                 "status": "medium"
             },
             {