npm - carbon-components-angular - Versions diffs - 5.47.2 → 5.48.0 - Mend

carbon-components-angular 5.47.2 → 5.48.0

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

Files changed (54) hide show

package/docs/documentation.json CHANGED Viewed

@@ -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": [
@@ -38202,7 +38202,7 @@
         },
         {
             "name": "NumberComponent",
-            "id": "component-NumberComponent-9f96963038fb60119a19b74c9c9868abb21dc983cbe9ae791c7f9916a4b113d526ffec3cb0816822dbea8d431361e3ad4bf0b6c14c97c4757a47853940dbca6b",
+            "id": "component-NumberComponent-fe20fe65939c8d249815e7b930825da7d9229c32f54dbd3496ec81d6605b4b2f291e5ea9d9ed648e5d850c504af01a335a7caf96b73baaad8c4717ab91830c1f",
             "file": "src/number-input/number.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -38556,7 +38556,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 +38587,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 373,
+                    "line": 407,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -38597,7 +38597,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 377,
+                    "line": 411,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -38614,7 +38614,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 401,
+                    "line": 435,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -38642,7 +38642,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 397,
+                    "line": 431,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -38666,7 +38666,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 365,
+                    "line": 382,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSubtracts `step` to the current `value`.\n",
@@ -38697,7 +38697,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 392,
+                    "line": 426,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -38932,7 +38932,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 +41620,7 @@
         },
         {
             "name": "PaginationNav",
-            "id": "component-PaginationNav-1bdc828135005718071bfa73586f126f9670d552f442c8f860a21c136190d8011a5cee57f662f4945fce69adf28ccb78d6dfcd2ea2e829314983d3f2c6456821",
+            "id": "component-PaginationNav-02747b3f02dda4195eb9b8d17de227f10ddb93cd71d7303c3e81567547ccb446b5f32191b820b258e4c180ac7d7172629000d09893bd3b623c8f47837e111b52",
             "file": "src/pagination/pagination-nav/pagination-nav.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -41630,7 +41630,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 +41642,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 +41652,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 +41663,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 +41697,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 +41710,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 193
+                    "line": 211
                 },
                 {
                     "name": "paginationCounter",
@@ -41709,7 +41720,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 114,
+                    "line": 116,
                     "modifierKind": [
                         126
                     ]
@@ -41722,7 +41733,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 194
+                    "line": 212
                 }
             ],
             "methodsClass": [
@@ -41732,7 +41743,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 214,
+                    "line": 232,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -41752,7 +41763,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 200,
+                    "line": 218,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -41773,7 +41784,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 206,
+                    "line": 224,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -41786,7 +41797,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 210,
+                    "line": 228,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -41796,14 +41807,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 +41862,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 194,
+                "line": 212,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -41866,7 +41902,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 +41918,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 +41970,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 160,
+                        "line": 178,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -41924,7 +41987,7 @@
                         "name": "currentPage",
                         "type": "",
                         "returnType": "",
-                        "line": 156
+                        "line": 174
                     }
                 },
                 "totalDataLength": {
@@ -41933,7 +41996,7 @@
                         "name": "totalDataLength",
                         "type": "",
                         "returnType": "",
-                        "line": 167
+                        "line": 185
                     }
                 },
                 "startOffset": {
@@ -41942,7 +42005,7 @@
                         "name": "startOffset",
                         "type": "",
                         "returnType": "",
-                        "line": 171
+                        "line": 189
                     }
                 },
                 "frontCuts": {
@@ -41951,7 +42014,7 @@
                         "name": "frontCuts",
                         "type": "",
                         "returnType": "",
-                        "line": 175
+                        "line": 193
                     }
                 },
                 "backCuts": {
@@ -41960,7 +42023,7 @@
                         "name": "backCuts",
                         "type": "",
                         "returnType": "",
-                        "line": 180
+                        "line": 198
                     }
                 },
                 "leftArrowDisabled": {
@@ -41969,7 +42032,7 @@
                         "name": "leftArrowDisabled",
                         "type": "",
                         "returnType": "",
-                        "line": 185
+                        "line": 203
                     }
                 },
                 "rightArrowDisabled": {
@@ -41978,7 +42041,7 @@
                         "name": "rightArrowDisabled",
                         "type": "",
                         "returnType": "",
-                        "line": 189
+                        "line": 207
                     }
                 }
             }
@@ -42062,7 +42125,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 +42135,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 +42145,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 22,
+                    "line": 23,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -42091,7 +42154,7 @@
                     "defaultValue": "new PaginationModel()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 21,
+                    "line": 22,
                     "type": "any",
                     "decorators": []
                 },
@@ -42100,7 +42163,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 24,
+                    "line": 25,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -42109,15 +42172,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 +42210,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 37,
+                    "line": 39,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -42163,7 +42235,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 +42260,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 29,
+                        "line": 31,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -42205,7 +42277,7 @@
                         "name": "totalDataLength",
                         "type": "",
                         "returnType": "",
-                        "line": 26
+                        "line": 28
                     }
                 }
             }
@@ -44083,7 +44155,7 @@
         },
         {
             "name": "ProgressIndicator",
-            "id": "component-ProgressIndicator-e4cef2ec45734c54b154d1a75741f223eaefc76f015969c688583c121414d1e7369b63f7ad11a3729bf1e425edc61cb0965ffaefbd629c09bbd92e3bf9bb2e53",
+            "id": "component-ProgressIndicator-44188c869e43c1d9a135becb504bc44a785fca0023a6f24b962f6f49958a0b43c0f37bca4fb522cd52a3858ab9bf3f229d033dacc3ac3e586936051aa7419ba1",
             "file": "src/progress-indicator/progress-indicator.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -44198,8 +44270,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3580,
-                                "end": 3585,
+                                "pos": 3581,
+                                "end": 3586,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44210,8 +44282,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3574,
-                                "end": 3579,
+                                "pos": 3575,
+                                "end": 3580,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44222,8 +44294,8 @@
                         },
                         {
                             "tagName": {
-                                "pos": 3598,
-                                "end": 3605,
+                                "pos": 3599,
+                                "end": 3606,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44255,8 +44327,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3126,
-                                "end": 3131,
+                                "pos": 3127,
+                                "end": 3132,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44267,8 +44339,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3120,
-                                "end": 3125,
+                                "pos": 3121,
+                                "end": 3126,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -44317,10 +44389,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": "",
@@ -74012,7 +74084,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",
@@ -75069,7 +75141,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 +75531,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 +75541,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 +80491,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 +80521,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 +80531,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 +80553,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": [
@@ -87568,8 +87640,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "PaginationNav",
-                "coveragePercent": 42,
-                "coverageCount": "6/14",
+                "coveragePercent": 38,
+                "coverageCount": "7/18",
                 "status": "medium"
             },
             {
@@ -87596,7 +87668,7 @@
                 "linktype": "component",
                 "name": "PaginationNavStory",
                 "coveragePercent": 0,
-                "coverageCount": "0/7",
+                "coverageCount": "0/8",
                 "status": "low"
             },
             {