carbon-components-angular 5.43.1 → 5.45.0

package/docs/documentation.json

@@ -5937,12 +5937,12 @@
         },
         {
             "name": "CustomHeaderItem",
-            "id": "class-CustomHeaderItem-8e9d2c5d8f02279f25d1c5fb0917bff1fb1a283d5a8220e1c9da8396210d09099f8fce69df01a1b4d81a20ec6182f8e9767e9f0bea82241f3c91d40e7a88bc2d-1",
+            "id": "class-CustomHeaderItem-d20442e134f01e6097b5e23512d1691f788ea184e02b786f8cb22254ae63e7ec7a5b81956ec8f361838c63ed0c9eb64d182ad838d446aec119a04b09f74bd4d2-1",
             "file": "src/table/stories/app-expansion-table.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\nclass CustomHeaderItem extends TableHeaderItem {\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: \"app-expansion-table\",\n\ttemplate: `\n\t\t<ng-template #customTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<cds-table\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[sortable]=\"sortable\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[striped]=\"striped\"\n\t\t\t(sort)=\"customSort($event)\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</cds-table>\n\t`\n})\nexport class ExpansionTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\n\t@ViewChild(\"customHeaderTemplate\")\n\tprotected customHeaderTemplate: TemplateRef<any>;\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef<any>;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[\n\t\t\t\tnew TableItem({ data: \"Name 1\", expandedData: \"No template\" }),\n\t\t\t\tnew TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3\",\n\t\t\t\t\texpandedData: { name: \"In\", surname: \"Template\" },\n\t\t\t\t\texpandedTemplate: this.customTableItemTemplate\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3.1\",\n\t\t\t\t\texpandedData: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t]\n\t\t\t\t\t],\n\t\t\t\t\texpandAsTable: true\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { name: \"Alice\", surname: \"Bob\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew CustomHeaderItem({\n\t\t\t\tdata: { name: \"Custom header\", link: \"#\" },\n\t\t\t\ttemplate: this.customHeaderTemplate\n\t\t\t})\n\t\t];\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n}\n",
+            "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\nclass CustomHeaderItem extends TableHeaderItem {\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: \"app-expansion-table\",\n\ttemplate: `\n\t\t<ng-template #customTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<cds-table\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[sortable]=\"sortable\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[striped]=\"striped\"\n\t\t\t(sort)=\"customSort($event)\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t</cds-table>\n\n\t\t<br>\n\n\t\t<button cdsButton=\"primary\" size=\"sm\" (click)=\"model.expandAllRows(true)\">Expand all rows</button>\n\n\t\t<button cdsButton=\"secondary\" size=\"sm\" (click)=\"model.expandAllRows(false)\">Collapse all rows</button>\n\t`\n})\nexport class ExpansionTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\t@Input() showExpandAllToggle = false;\n\n\t@ViewChild(\"customHeaderTemplate\")\n\tprotected customHeaderTemplate: TemplateRef<any>;\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef<any>;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[\n\t\t\t\tnew TableItem({ data: \"Name 1\", expandedData: \"No template\" }),\n\t\t\t\tnew TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3\",\n\t\t\t\t\texpandedData: { name: \"In\", surname: \"Template\" },\n\t\t\t\t\texpandedTemplate: this.customTableItemTemplate\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3.1\",\n\t\t\t\t\texpandedData: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t]\n\t\t\t\t\t],\n\t\t\t\t\texpandAsTable: true\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { name: \"Alice\", surname: \"Bob\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew CustomHeaderItem({\n\t\t\t\tdata: { name: \"Custom header\", link: \"#\" },\n\t\t\t\ttemplate: this.customHeaderTemplate\n\t\t\t})\n\t\t];\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n}\n",
             "inputsClass": [],
             "outputsClass": [],
             "properties": [
@@ -7051,12 +7051,12 @@
         },
         {
             "name": "NumberChange",
-            "id": "class-NumberChange-2f449d61d6c7a726610fa6f48642317885ec439e1e43c3e9d823cc6cf84fcb1fe78637ea04c8a663b32884c4cb5f96f153184844b5d4aa49daeaf562fc1c47fd",
+            "id": "class-NumberChange-9f96963038fb60119a19b74c9c9868abb21dc983cbe9ae791c7f9916a4b113d526ffec3cb0816822dbea8d431361e3ad4bf0b6c14c97c4757a47853940dbca6b",
             "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 { NG_VALUE_ACCESSOR, ControlValueAccessor } 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<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 *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\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(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<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\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\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}\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\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",
             "inputsClass": [],
             "outputsClass": [],
             "properties": [
@@ -8796,19 +8796,19 @@
         },
         {
             "name": "TableModel",
-            "id": "class-TableModel-b433548b3707dafa0b0bd1551423e1ef143db428ebed1b33c17b265d91f1aa454e4a347ccd998a4677cfb55a291cb3e25f3b07d7c8008fe683ea7af3fd2040ce",
+            "id": "class-TableModel-b50033b9ec64d94390dbcf01a02ce31f03e30bff3081f86bb63f698f17513cd429f1c05ffa448fe6b85bade54c54cf2ad1843e74a5c8ad7a71e2c93520fbdd78",
             "file": "src/table/table-model.class.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { EventEmitter } from \"@angular/core\";\n\nimport { PaginationModel } from \"carbon-components-angular/pagination\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\nimport { TableRow } from \"./table-row.class\";\nimport { Subject } from \"rxjs\";\n\nexport type HeaderType = number | \"select\" | \"expand\";\n\n/**\n * TableModel represents a data model for two-dimensional data. It's used for all things table\n * (table component, table toolbar, pagination, etc)\n *\n * TableModel manages its internal data integrity very well if you use the provided helper\n * functions for modifying rows and columns and assigning header and data in that order.\n *\n * It also provides direct access to the data so you can read and modify it.\n * If you change the structure of the data (by directly pushing into the arrays or otherwise),\n * keep in mind to keep the data structure intact.\n *\n * Header length and length of every line in the data should be equal.\n *\n * If they are not consistent, unexpected things will happen.\n *\n * Use the provided functions when in doubt.\n */\nexport class TableModel implements PaginationModel {\n\t/**\n\t * The number of models instantiated, used for (among other things) unique id generation\n\t */\n\tprotected static COUNT = 0;\n\n\t/**\n\t * Sets data of the table.\n\t *\n\t * Make sure all rows are the same length to keep the column count accurate.\n\t */\n\tset data(newData: TableItem[][]) {\n\t\tif (!newData || (Array.isArray(newData) && newData.length === 0)) {\n\t\t\tnewData = [[]];\n\t\t}\n\n\t\tthis._data = newData;\n\n\t\t// init rowsSelected\n\t\tthis.rowsSelected = new Array<boolean>(this._data.length).fill(false);\n\t\tthis.rowsExpanded = new Array<boolean>(this._data.length).fill(false);\n\t\t// init rows indices\n\t\tthis.rowsIndices = [...Array(this._data.length).keys()];\n\t\t// init rowsContext\n\t\tthis.rowsContext = new Array<string>(this._data.length);\n\n\t\t// init rowsClass\n\t\tthis.rowsClass = new Array<string>(this._data.length);\n\n\t\t// only create a fresh header if necessary (header doesn't exist or differs in length)\n\t\tif (this.header == null || (this.header.length !== this._data[0].length && this._data[0].length > 0)) {\n\t\t\tlet header = new Array<TableHeaderItem>();\n\t\t\tfor (let i = 0; i < this._data[0].length; i++) {\n\t\t\t\theader.push(new TableHeaderItem());\n\t\t\t}\n\t\t\tthis.header = header;\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tdataChange = new EventEmitter();\n\trowsSelectedChange = new EventEmitter<number>();\n\trowsExpandedChange = new EventEmitter<number>();\n\t/**\n\t * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\n\t * all rows are selected.\n\t */\n\tselectAllChange = new Subject<boolean>();\n\n\t/**\n\t * Gets the full data.\n\t *\n\t * You can use it to alter individual `TableItem`s but if you need to change\n\t * table structure, use `addRow()` and/or `addColumn()`\n\t */\n\tget data() {\n\t\treturn this._data;\n\t}\n\n\t/**\n\t * Contains information about selection state of rows in the table.\n\t */\n\trowsSelected: boolean[] = [];\n\n\t/**\n\t * Contains information about expanded state of rows in the table.\n\t */\n\trowsExpanded: boolean[] = [];\n\n\t/**\n\t * Contains information about initial index of rows in the table\n\t */\n\trowsIndices: number[] = [];\n\n\t/**\n\t * Contains information about the context of the row.\n\t *\n\t * It affects styling of the row to reflect the context.\n\t *\n\t * string can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\n\t * empty or undefined by default\n\t */\n\trowsContext: string[] = [];\n\n\t/**\n\t * Contains class name(s) of the row.\n\t *\n\t * It affects styling of the row to reflect the appended class name(s).\n\t *\n\t * It's empty or undefined by default\n\t */\n\trowsClass: string[] = [];\n\n\t/**\n\t * Contains information about the header cells of the table.\n\t */\n\theader: TableHeaderItem[] = [];\n\n\t/**\n\t * Tracks the current page.\n\t */\n\tcurrentPage = 1;\n\n\t/**\n\t * Length of page.\n\t */\n\tpageLength = 10;\n\n\t/**\n\t * Set to true when there is no more data to load in the table\n\t */\n\tisEnd = false;\n\n\t/**\n\t * Set to true when lazy loading to show loading indicator\n\t */\n\tisLoading = false;\n\n\t/**\n\t * Absolute total number of rows of the table.\n\t */\n\tprotected _totalDataLength: number;\n\n\t/**\n\t * Manually set data length in case the data in the table doesn't\n\t * correctly reflect all the data that table is to display.\n\t *\n\t * Example: if you have multiple pages of data that table will display\n\t * but you're loading one at a time.\n\t *\n\t * Set to `null` to reset to default behavior.\n\t */\n\tset totalDataLength(length: number) {\n\t\t// if this function is called without a parameter we need to set to null to avoid having undefined != null\n\t\tthis._totalDataLength = isNaN(length) ? null : length;\n\t}\n\n\t/**\n\t * Total length of data that table has access to, or the amount manually set\n\t */\n\tget totalDataLength() {\n\t\t// if manually set data length\n\t\tif (this._totalDataLength !== null && this._totalDataLength >= 0) {\n\t\t\treturn this._totalDataLength;\n\t\t}\n\n\t\t// if empty dataset\n\t\tif (this.data && this.data.length === 1 && this.data[0].length === 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn this.data.length;\n\t}\n\n\t/**\n\t * Used in `data`\n\t */\n\tprotected _data: TableItem[][] = [[]];\n\n\t/**\n\t * The number of models instantiated, this is to make sure each table has a different\n\t * model count for unique id generation.\n\t */\n\tprotected tableModelCount = 0;\n\n\tconstructor() {\n\t\tthis.tableModelCount = TableModel.COUNT++;\n\t}\n\n\t/**\n\t * Returns an id for the given column\n\t *\n\t * @param column the column to generate an id for\n\t * @param row the row of the header to generate an id for\n\t */\n\tgetId(column: HeaderType, row = 0): string {\n\t\treturn `table-header-${row}-${column}-${this.tableModelCount}`;\n\t}\n\n\t/**\n\t * Returns the id of the header. Used to link the cells with headers (or headers with headers)\n\t *\n\t * @param column the column to start getting headers for\n\t * @param colSpan the number of columns to get headers for (defaults to 1)\n\t */\n\tgetHeaderId(column: HeaderType, colSpan = 1): string {\n\t\tif (column === \"select\" || column === \"expand\") {\n\t\t\treturn this.getId(column);\n\t\t}\n\n\t\tlet ids = [];\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tif (this.header[i]) {\n\t\t\t\tfor (let j = 0; j < colSpan; j++) {\n\t\t\t\t\tids.push(this.getId(i + j));\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn ids.join(\" \");\n\t}\n\n\t/**\n\t * Finds closest header by trying the `column` and then working its way to the left\n\t *\n\t * @param column the target column\n\t */\n\tgetHeader(column: number): TableHeaderItem {\n\t\tif (!this.header) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tconst headerCell = this.header[i];\n\t\t\tif (headerCell) {\n\t\t\t\treturn headerCell;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns how many rows is currently selected\n\t */\n\tselectedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsSelected) {\n\t\t\tthis.rowsSelected.forEach(rowSelected => {\n\t\t\t\tif (rowSelected) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns how many rows is currently expanded\n\t */\n\texpandedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsExpanded) {\n\t\t\tthis.rowsExpanded.forEach(rowExpanded => {\n\t\t\t\tif (rowExpanded) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns `index`th row of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\trow(index: number): TableItem[] {\n\t\treturn this.data[this.realRowIndex(index)];\n\t}\n\n\t/**\n\t * Adds a row to the `index`th row or appends to table if index not provided.\n\t *\n\t * If row is shorter than other rows or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If row is longer than other rows, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [row]\n\t * @param [index]\n\t */\n\taddRow(row?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array<Array<TableItem>>();\n\t\t\tnewData.push(row ? row : [new TableItem()]);  // row or one empty one column row\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet realRow = row;\n\t\tconst columnCount = this.data[0].length;\n\n\t\tif (row == null) {\n\t\t\trealRow = new Array<TableItem>();\n\t\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t}\n\n\t\tif (realRow.length < columnCount) {\n\t\t\t// extend the length of realRow\n\t\t\tconst difference = columnCount - realRow.length;\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t} else if (realRow.length > columnCount) {\n\t\t\t// extend the length of header\n\t\t\tlet difference = realRow.length - this.header.length;\n\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t\t// extend the length of every other row\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tlet currentRow = this.data[i];\n\t\t\t\tdifference = realRow.length - currentRow.length;\n\t\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\t\tcurrentRow.push(new TableItem());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (index == null) {\n\t\t\tthis.data.push(realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.push(false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.push(false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.push(undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.push(undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.push(this.data.length - 1);\n\t\t} else {\n\t\t\tconst ri = this.realRowIndex(index);\n\t\t\tthis.data.splice(ri, 0, realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.splice(ri, 0, false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.splice(ri, 0, false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.splice(ri, 0, undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.splice(ri, 0, undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.splice(ri, 0, this.data.length - 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th row.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteRow(index: number) {\n\t\tconst rri = this.realRowIndex(index);\n\t\tthis.data.splice(rri, 1);\n\t\tthis.rowsSelected.splice(rri, 1);\n\t\tthis.rowsExpanded.splice(rri, 1);\n\t\tthis.rowsContext.splice(rri, 1);\n\t\tthis.rowsClass.splice(rri, 1);\n\n\t\tconst rowIndex = this.rowsIndices[rri];\n\t\tthis.rowsIndices.splice(rri, 1);\n\t\tthis.rowsIndices = this.rowsIndices.map((value) => (value > rowIndex) ? --value : value);\n\n\t\tthis.dataChange.emit();\n\t}\n\n\thasExpandableRows() {\n\t\treturn this.data.some(data => data.some(d => d && d.expandedData)); // checking for some in 2D array\n\t}\n\n\tisRowExpandable(index: number) {\n\t\treturn this.data[index].some(d => d && d.expandedData);\n\t}\n\n\tisRowExpanded(index: number) {\n\t\treturn this.rowsExpanded[index];\n\t}\n\n\tgetRowContext(index: number) {\n\t\treturn this.rowsContext[index];\n\t}\n\n\t/**\n\t * Returns `index`th column of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tcolumn(index: number): TableItem[] {\n\t\tlet column = new Array<TableItem>();\n\t\tconst ri = this.realColumnIndex(index);\n\t\tconst rc = this.data.length;\n\n\t\tfor (let i = 0; i < rc; i++) {\n\t\t\tconst row = this.data[i];\n\t\t\tcolumn.push(row[ri]);\n\t\t}\n\n\t\treturn column;\n\t}\n\n\t/**\n\t * Adds a column to the `index`th column or appends to table if index not provided.\n\t *\n\t * If column is shorter than other columns or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If column is longer than other columns, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [column]\n\t * @param [index]\n\t */\n\taddColumn(column?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array<Array<TableItem>>();\n\t\t\tif (column == null) {\n\t\t\t\tnewData.push([new TableItem()]);\n\t\t\t} else {\n\t\t\t\tfor (let i = 0; i < column.length; i++) {\n\t\t\t\t\tlet item = column[i];\n\t\t\t\t\tnewData.push([item]);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet rc = this.data.length;  // row count\n\t\tlet ci = this.realColumnIndex(index);\n\n\t\t// append missing rows\n\t\tfor (let i = 0; column != null && i < column.length - rc; i++) {\n\t\t\tthis.addRow();\n\t\t}\n\t\trc = this.data.length;\n\t\tif (index == null) {\n\t\t\t// append to end\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.push(column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t} else {\n\t\t\tif (index >= this.data[0].length) {\n\t\t\t\t// if trying to append\n\t\t\t\tci++;\n\t\t\t}\n\t\t\t// insert\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.splice(ci, 0, new TableHeaderItem());\n\t\t\t}\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th column.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteColumn(index: number) {\n\t\tconst rci = this.realColumnIndex(index);\n\t\tconst rowCount = this.data.length;\n\t\tfor (let i = 0; i < rowCount; i++) {\n\t\t\tthis.data[i].splice(rci, 1);\n\t\t}\n\t\t// update header if not already set by user\n\t\tif (this.header.length > this.data[0].length) {\n\t\t\tthis.header.splice(rci, 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tmoveColumn(indexFrom: number, indexTo: number) {\n\t\tconst headerFrom = this.header[indexFrom];\n\n\t\tthis.addColumn(this.column(indexFrom), indexTo);\n\t\tthis.deleteColumn(indexFrom + (indexTo < indexFrom ? 1 : 0));\n\n\t\tthis.header[indexTo + (indexTo > indexFrom ? -1 : 0)] = headerFrom;\n\t}\n\n\t/**\n\t * cycle through the three sort states\n\t * @param index\n\t */\n\tcycleSortState(index: number) {\n\t\t// no sort provided so do the simple sort\n\t\tswitch (this.header[index].sortDirection) {\n\t\t\tcase \"ASCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"DESCENDING\";\n\t\t\t\tbreak;\n\t\t\tcase \"DESCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"NONE\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthis.header[index].sortDirection = \"ASCENDING\";\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Sorts the data currently present in the model based on `compare()`\n\t *\n\t * Direction is set by `ascending` and `descending` properties of `TableHeaderItem`\n\t * in `index`th column.\n\t *\n\t * @param index The column based on which it's sorting\n\t */\n\tsort(index: number) {\n\t\tthis.pushRowStateToModelData();\n\t\tconst headerSorted = this.header[index].sorted;\n\t\t// We only allow sorting by a single column, so reset sort state for all columns before specifying new sort state\n\t\tthis.header.forEach(column => column.sorted = false);\n\t\tif (this.header[index].sortDirection === \"NONE\" && headerSorted) {\n\t\t\t// Restore initial order of rows\n\t\t\tconst oldData = this._data;\n\t\t\tthis._data = [];\n\t\t\tfor (let i = 0; i < this.rowsIndices.length; i++) {\n\t\t\t\tconst ri = this.rowsIndices[i];\n\t\t\t\tthis._data[ri] = oldData[i];\n\t\t\t}\n\t\t} else {\n\t\t\tconst descending = this.header[index].sortDirection === \"DESCENDING\" ? -1 : 1;\n\t\t\tthis.data.sort((a, b) => {\n\t\t\t\treturn descending * this.header[index].compare(a[index], b[index]);\n\t\t\t});\n\t\t\tthis.header[index].sorted = true;\n\t\t}\n\t\tthis.popRowStateFromModelData();\n\t}\n\n\t/**\n\t * Appends `rowsSelected` and `rowsExpanded` info to model data.\n\t *\n\t * When sorting rows, do this first so information about row selection\n\t * gets sorted with the other row info.\n\t *\n\t * Call `popRowSelectionFromModelData()` after sorting to make everything\n\t * right with the world again.\n\t */\n\tpushRowStateToModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tconst rowSelectedMark = new TableItem();\n\t\t\trowSelectedMark.data = this.rowsSelected[i];\n\t\t\tthis.data[i].push(rowSelectedMark);\n\n\t\t\tconst rowExpandedMark = new TableItem();\n\t\t\trowExpandedMark.data = this.rowsExpanded[i];\n\t\t\tthis.data[i].push(rowExpandedMark);\n\n\t\t\tconst rowContext = new TableItem();\n\t\t\trowContext.data = this.rowsContext[i];\n\t\t\tthis.data[i].push(rowContext);\n\n\t\t\tconst rowClass = new TableItem();\n\t\t\trowClass.data = this.rowsClass[i];\n\t\t\tthis.data[i].push(rowClass);\n\n\t\t\tconst rowIndex = new TableItem();\n\t\t\trowIndex.data = this.rowsIndices[i];\n\t\t\tthis.data[i].push(rowIndex);\n\t\t}\n\t}\n\n\t/**\n\t * Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\t *\n\t * Call after sorting data (if you previously pushed to maintain selection order)\n\t * to make everything right with the world again.\n\t */\n\tpopRowStateFromModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tthis.rowsIndices[i] = this.data[i].pop().data;\n\t\t\tthis.rowsClass[i] = this.data[i].pop().data;\n\t\t\tthis.rowsContext[i] = this.data[i].pop().data;\n\t\t\tthis.rowsExpanded[i] = !!this.data[i].pop().data;\n\t\t\tthis.rowsSelected[i] = !!this.data[i].pop().data;\n\t\t}\n\t}\n\n\t/**\n\t * Checks if row is filtered out.\n\t *\n\t * @param index\n\t * @returns true if any of the filters in header filters out the `index`th row\n\t */\n\tisRowFiltered(index: number): boolean {\n\t\tconst realIndex = this.realRowIndex(index);\n\t\treturn this.header.some((item, i) => item && item.filter(this.row(realIndex)[i]));\n\t}\n\n\t/**\n\t * Select/deselect `index`th row based on value\n\t *\n\t * @param index index of the row to select\n\t * @param value state to set the row to. Defaults to `true`\n\t */\n\tselectRow(index: number, value = true) {\n\t\tif (this.isRowDisabled(index)) {\n\t\t\treturn;\n\t\t}\n\t\tthis.rowsSelected[index] = value;\n\t\tthis.rowsSelectedChange.emit(index);\n\t}\n\n\t/**\n\t * Selects or deselects all rows in the model\n\t *\n\t * @param value state to set all rows to. Defaults to `true`\n\t */\n\tselectAll(value = true) {\n\t\tif (this.data.length >= 1 && this.data[0].length >= 1) {\n\t\t\tfor (let i = 0; i < this.rowsSelected.length; i++) {\n\t\t\t\tthis.selectRow(i, value);\n\t\t\t}\n\t\t}\n\t\tthis.selectAllChange.next(value);\n\t}\n\n\tisRowSelected(index: number) {\n\t\treturn this.rowsSelected[index];\n\t}\n\n\t/**\n\t * Checks if row is disabled or not.\n\t */\n\tisRowDisabled(index: number) {\n\t\tconst row = this.data[index] as TableRow;\n\t\treturn !!row.disabled;\n\t}\n\n\t/**\n\t * Expands/Collapses `index`th row based on value\n\t *\n\t * @param index index of the row to expand or collapse\n\t * @param value expanded state of the row. `true` is expanded and `false` is collapsed\n\t */\n\texpandRow(index: number, value = true) {\n\t\tthis.rowsExpanded[index] = value;\n\t\tthis.rowsExpandedChange.emit(index);\n\t}\n\n\t/**\n\t * Gets the true index of a row based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realRowIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data.length);\n\t}\n\n\t/**\n\t * Gets the true index of a column based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realColumnIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data[0].length);\n\t}\n\n\t/**\n\t * Generic function to calculate the real index of something.\n\t * Used by `realRowIndex()` and `realColumnIndex()`\n\t *\n\t * @param index\n\t * @param length\n\t */\n\tprotected realIndex(index: number, length: number): number {\n\t\tif (index == null) {\n\t\t\treturn length - 1;\n\t\t} else if (index >= 0) {\n\t\t\treturn index >= length ? length - 1 : index;\n\t\t} else {\n\t\t\treturn -index >= length ? 0 : length + index;\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import { EventEmitter } from \"@angular/core\";\n\nimport { PaginationModel } from \"carbon-components-angular/pagination\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\nimport { TableRow } from \"./table-row.class\";\nimport { Subject } from \"rxjs\";\n\nexport type HeaderType = number | \"select\" | \"expand\";\n\n/**\n * TableModel represents a data model for two-dimensional data. It's used for all things table\n * (table component, table toolbar, pagination, etc)\n *\n * TableModel manages its internal data integrity very well if you use the provided helper\n * functions for modifying rows and columns and assigning header and data in that order.\n *\n * It also provides direct access to the data so you can read and modify it.\n * If you change the structure of the data (by directly pushing into the arrays or otherwise),\n * keep in mind to keep the data structure intact.\n *\n * Header length and length of every line in the data should be equal.\n *\n * If they are not consistent, unexpected things will happen.\n *\n * Use the provided functions when in doubt.\n */\nexport class TableModel implements PaginationModel {\n\t/**\n\t * The number of models instantiated, used for (among other things) unique id generation\n\t */\n\tprotected static COUNT = 0;\n\n\t/**\n\t * Sets data of the table.\n\t *\n\t * Make sure all rows are the same length to keep the column count accurate.\n\t */\n\tset data(newData: TableItem[][]) {\n\t\tif (!newData || (Array.isArray(newData) && newData.length === 0)) {\n\t\t\tnewData = [[]];\n\t\t}\n\n\t\tthis._data = newData;\n\n\t\t// init rowsSelected\n\t\tthis.rowsSelected = new Array<boolean>(this._data.length).fill(false);\n\t\tthis.rowsExpanded = new Array<boolean>(this._data.length).fill(false);\n\t\t// init rows indices\n\t\tthis.rowsIndices = [...Array(this._data.length).keys()];\n\t\t// init rowsContext\n\t\tthis.rowsContext = new Array<string>(this._data.length);\n\n\t\t// init rowsClass\n\t\tthis.rowsClass = new Array<string>(this._data.length);\n\n\t\t// only create a fresh header if necessary (header doesn't exist or differs in length)\n\t\tif (this.header == null || (this.header.length !== this._data[0].length && this._data[0].length > 0)) {\n\t\t\tlet header = new Array<TableHeaderItem>();\n\t\t\tfor (let i = 0; i < this._data[0].length; i++) {\n\t\t\t\theader.push(new TableHeaderItem());\n\t\t\t}\n\t\t\tthis.header = header;\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tdataChange = new EventEmitter();\n\trowsSelectedChange = new EventEmitter<number>();\n\trowsExpandedChange = new EventEmitter<number>();\n\trowsExpandedAllChange = new EventEmitter();\n\trowsCollapsedAllChange = new EventEmitter();\n\t/**\n\t * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\n\t * all rows are selected.\n\t */\n\tselectAllChange = new Subject<boolean>();\n\n\t/**\n\t * Gets the full data.\n\t *\n\t * You can use it to alter individual `TableItem`s but if you need to change\n\t * table structure, use `addRow()` and/or `addColumn()`\n\t */\n\tget data() {\n\t\treturn this._data;\n\t}\n\n\t/**\n\t * Contains information about selection state of rows in the table.\n\t */\n\trowsSelected: boolean[] = [];\n\n\t/**\n\t * Contains information about expanded state of rows in the table.\n\t */\n\trowsExpanded: boolean[] = [];\n\n\t/**\n\t * Contains information about initial index of rows in the table\n\t */\n\trowsIndices: number[] = [];\n\n\t/**\n\t * Contains information about the context of the row.\n\t *\n\t * It affects styling of the row to reflect the context.\n\t *\n\t * string can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\n\t * empty or undefined by default\n\t */\n\trowsContext: string[] = [];\n\n\t/**\n\t * Contains class name(s) of the row.\n\t *\n\t * It affects styling of the row to reflect the appended class name(s).\n\t *\n\t * It's empty or undefined by default\n\t */\n\trowsClass: string[] = [];\n\n\t/**\n\t * Contains information about the header cells of the table.\n\t */\n\theader: TableHeaderItem[] = [];\n\n\t/**\n\t * Tracks the current page.\n\t */\n\tcurrentPage = 1;\n\n\t/**\n\t * Length of page.\n\t */\n\tpageLength = 10;\n\n\t/**\n\t * Set to true when there is no more data to load in the table\n\t */\n\tisEnd = false;\n\n\t/**\n\t * Set to true when lazy loading to show loading indicator\n\t */\n\tisLoading = false;\n\n\t/**\n\t * Absolute total number of rows of the table.\n\t */\n\tprotected _totalDataLength: number;\n\n\t/**\n\t * Manually set data length in case the data in the table doesn't\n\t * correctly reflect all the data that table is to display.\n\t *\n\t * Example: if you have multiple pages of data that table will display\n\t * but you're loading one at a time.\n\t *\n\t * Set to `null` to reset to default behavior.\n\t */\n\tset totalDataLength(length: number) {\n\t\t// if this function is called without a parameter we need to set to null to avoid having undefined != null\n\t\tthis._totalDataLength = isNaN(length) ? null : length;\n\t}\n\n\t/**\n\t * Total length of data that table has access to, or the amount manually set\n\t */\n\tget totalDataLength() {\n\t\t// if manually set data length\n\t\tif (this._totalDataLength !== null && this._totalDataLength >= 0) {\n\t\t\treturn this._totalDataLength;\n\t\t}\n\n\t\t// if empty dataset\n\t\tif (this.data && this.data.length === 1 && this.data[0].length === 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn this.data.length;\n\t}\n\n\t/**\n\t * Used in `data`\n\t */\n\tprotected _data: TableItem[][] = [[]];\n\n\t/**\n\t * The number of models instantiated, this is to make sure each table has a different\n\t * model count for unique id generation.\n\t */\n\tprotected tableModelCount = 0;\n\n\tconstructor() {\n\t\tthis.tableModelCount = TableModel.COUNT++;\n\t}\n\n\t/**\n\t * Returns an id for the given column\n\t *\n\t * @param column the column to generate an id for\n\t * @param row the row of the header to generate an id for\n\t */\n\tgetId(column: HeaderType, row = 0): string {\n\t\treturn `table-header-${row}-${column}-${this.tableModelCount}`;\n\t}\n\n\t/**\n\t * Returns the id of the header. Used to link the cells with headers (or headers with headers)\n\t *\n\t * @param column the column to start getting headers for\n\t * @param colSpan the number of columns to get headers for (defaults to 1)\n\t */\n\tgetHeaderId(column: HeaderType, colSpan = 1): string {\n\t\tif (column === \"select\" || column === \"expand\") {\n\t\t\treturn this.getId(column);\n\t\t}\n\n\t\tlet ids = [];\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tif (this.header[i]) {\n\t\t\t\tfor (let j = 0; j < colSpan; j++) {\n\t\t\t\t\tids.push(this.getId(i + j));\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn ids.join(\" \");\n\t}\n\n\t/**\n\t * Finds closest header by trying the `column` and then working its way to the left\n\t *\n\t * @param column the target column\n\t */\n\tgetHeader(column: number): TableHeaderItem {\n\t\tif (!this.header) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tconst headerCell = this.header[i];\n\t\t\tif (headerCell) {\n\t\t\t\treturn headerCell;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns how many rows is currently selected\n\t */\n\tselectedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsSelected) {\n\t\t\tthis.rowsSelected.forEach(rowSelected => {\n\t\t\t\tif (rowSelected) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns how many rows is currently expanded\n\t */\n\texpandedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsExpanded) {\n\t\t\tthis.rowsExpanded.forEach(rowExpanded => {\n\t\t\t\tif (rowExpanded) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns `index`th row of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\trow(index: number): TableItem[] {\n\t\treturn this.data[this.realRowIndex(index)];\n\t}\n\n\t/**\n\t * Adds a row to the `index`th row or appends to table if index not provided.\n\t *\n\t * If row is shorter than other rows or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If row is longer than other rows, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [row]\n\t * @param [index]\n\t */\n\taddRow(row?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array<Array<TableItem>>();\n\t\t\tnewData.push(row ? row : [new TableItem()]);  // row or one empty one column row\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet realRow = row;\n\t\tconst columnCount = this.data[0].length;\n\n\t\tif (row == null) {\n\t\t\trealRow = new Array<TableItem>();\n\t\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t}\n\n\t\tif (realRow.length < columnCount) {\n\t\t\t// extend the length of realRow\n\t\t\tconst difference = columnCount - realRow.length;\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t} else if (realRow.length > columnCount) {\n\t\t\t// extend the length of header\n\t\t\tlet difference = realRow.length - this.header.length;\n\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t\t// extend the length of every other row\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tlet currentRow = this.data[i];\n\t\t\t\tdifference = realRow.length - currentRow.length;\n\t\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\t\tcurrentRow.push(new TableItem());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (index == null) {\n\t\t\tthis.data.push(realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.push(false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.push(false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.push(undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.push(undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.push(this.data.length - 1);\n\t\t} else {\n\t\t\tconst ri = this.realRowIndex(index);\n\t\t\tthis.data.splice(ri, 0, realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.splice(ri, 0, false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.splice(ri, 0, false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.splice(ri, 0, undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.splice(ri, 0, undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.splice(ri, 0, this.data.length - 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th row.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteRow(index: number) {\n\t\tconst rri = this.realRowIndex(index);\n\t\tthis.data.splice(rri, 1);\n\t\tthis.rowsSelected.splice(rri, 1);\n\t\tthis.rowsExpanded.splice(rri, 1);\n\t\tthis.rowsContext.splice(rri, 1);\n\t\tthis.rowsClass.splice(rri, 1);\n\n\t\tconst rowIndex = this.rowsIndices[rri];\n\t\tthis.rowsIndices.splice(rri, 1);\n\t\tthis.rowsIndices = this.rowsIndices.map((value) => (value > rowIndex) ? --value : value);\n\n\t\tthis.dataChange.emit();\n\t}\n\n\thasExpandableRows() {\n\t\treturn this.data.some(data => data.some(d => d && d.expandedData)); // checking for some in 2D array\n\t}\n\n\t/**\n\t * Number of rows that can be expanded.\n\t *\n\t * @returns number\n\t */\n\texpandableRowsCount() {\n\t\treturn this.data.reduce((counter, _, index) => {\n\t\t\tcounter = (this.isRowExpandable(index)) ? counter + 1 : counter;\n\t\t\treturn counter;\n\t\t}, 0);\n\t}\n\n\tisRowExpandable(index: number) {\n\t\treturn this.data[index].some(d => d && d.expandedData);\n\t}\n\n\tisRowExpanded(index: number) {\n\t\treturn this.rowsExpanded[index];\n\t}\n\n\tgetRowContext(index: number) {\n\t\treturn this.rowsContext[index];\n\t}\n\n\t/**\n\t * Returns `index`th column of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tcolumn(index: number): TableItem[] {\n\t\tlet column = new Array<TableItem>();\n\t\tconst ri = this.realColumnIndex(index);\n\t\tconst rc = this.data.length;\n\n\t\tfor (let i = 0; i < rc; i++) {\n\t\t\tconst row = this.data[i];\n\t\t\tcolumn.push(row[ri]);\n\t\t}\n\n\t\treturn column;\n\t}\n\n\t/**\n\t * Adds a column to the `index`th column or appends to table if index not provided.\n\t *\n\t * If column is shorter than other columns or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If column is longer than other columns, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [column]\n\t * @param [index]\n\t */\n\taddColumn(column?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array<Array<TableItem>>();\n\t\t\tif (column == null) {\n\t\t\t\tnewData.push([new TableItem()]);\n\t\t\t} else {\n\t\t\t\tfor (let i = 0; i < column.length; i++) {\n\t\t\t\t\tlet item = column[i];\n\t\t\t\t\tnewData.push([item]);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet rc = this.data.length;  // row count\n\t\tlet ci = this.realColumnIndex(index);\n\n\t\t// append missing rows\n\t\tfor (let i = 0; column != null && i < column.length - rc; i++) {\n\t\t\tthis.addRow();\n\t\t}\n\t\trc = this.data.length;\n\t\tif (index == null) {\n\t\t\t// append to end\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.push(column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t} else {\n\t\t\tif (index >= this.data[0].length) {\n\t\t\t\t// if trying to append\n\t\t\t\tci++;\n\t\t\t}\n\t\t\t// insert\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.splice(ci, 0, new TableHeaderItem());\n\t\t\t}\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th column.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteColumn(index: number) {\n\t\tconst rci = this.realColumnIndex(index);\n\t\tconst rowCount = this.data.length;\n\t\tfor (let i = 0; i < rowCount; i++) {\n\t\t\tthis.data[i].splice(rci, 1);\n\t\t}\n\t\t// update header if not already set by user\n\t\tif (this.header.length > this.data[0].length) {\n\t\t\tthis.header.splice(rci, 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tmoveColumn(indexFrom: number, indexTo: number) {\n\t\tconst headerFrom = this.header[indexFrom];\n\n\t\tthis.addColumn(this.column(indexFrom), indexTo);\n\t\tthis.deleteColumn(indexFrom + (indexTo < indexFrom ? 1 : 0));\n\n\t\tthis.header[indexTo + (indexTo > indexFrom ? -1 : 0)] = headerFrom;\n\t}\n\n\t/**\n\t * cycle through the three sort states\n\t * @param index\n\t */\n\tcycleSortState(index: number) {\n\t\t// no sort provided so do the simple sort\n\t\tswitch (this.header[index].sortDirection) {\n\t\t\tcase \"ASCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"DESCENDING\";\n\t\t\t\tbreak;\n\t\t\tcase \"DESCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"NONE\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthis.header[index].sortDirection = \"ASCENDING\";\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Sorts the data currently present in the model based on `compare()`\n\t *\n\t * Direction is set by `ascending` and `descending` properties of `TableHeaderItem`\n\t * in `index`th column.\n\t *\n\t * @param index The column based on which it's sorting\n\t */\n\tsort(index: number) {\n\t\tthis.pushRowStateToModelData();\n\t\tconst headerSorted = this.header[index].sorted;\n\t\t// We only allow sorting by a single column, so reset sort state for all columns before specifying new sort state\n\t\tthis.header.forEach(column => column.sorted = false);\n\t\tif (this.header[index].sortDirection === \"NONE\" && headerSorted) {\n\t\t\t// Restore initial order of rows\n\t\t\tconst oldData = this._data;\n\t\t\tthis._data = [];\n\t\t\tfor (let i = 0; i < this.rowsIndices.length; i++) {\n\t\t\t\tconst ri = this.rowsIndices[i];\n\t\t\t\tthis._data[ri] = oldData[i];\n\t\t\t}\n\t\t} else {\n\t\t\tconst descending = this.header[index].sortDirection === \"DESCENDING\" ? -1 : 1;\n\t\t\tthis.data.sort((a, b) => {\n\t\t\t\treturn descending * this.header[index].compare(a[index], b[index]);\n\t\t\t});\n\t\t\tthis.header[index].sorted = true;\n\t\t}\n\t\tthis.popRowStateFromModelData();\n\t}\n\n\t/**\n\t * Appends `rowsSelected` and `rowsExpanded` info to model data.\n\t *\n\t * When sorting rows, do this first so information about row selection\n\t * gets sorted with the other row info.\n\t *\n\t * Call `popRowSelectionFromModelData()` after sorting to make everything\n\t * right with the world again.\n\t */\n\tpushRowStateToModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tconst rowSelectedMark = new TableItem();\n\t\t\trowSelectedMark.data = this.rowsSelected[i];\n\t\t\tthis.data[i].push(rowSelectedMark);\n\n\t\t\tconst rowExpandedMark = new TableItem();\n\t\t\trowExpandedMark.data = this.rowsExpanded[i];\n\t\t\tthis.data[i].push(rowExpandedMark);\n\n\t\t\tconst rowContext = new TableItem();\n\t\t\trowContext.data = this.rowsContext[i];\n\t\t\tthis.data[i].push(rowContext);\n\n\t\t\tconst rowClass = new TableItem();\n\t\t\trowClass.data = this.rowsClass[i];\n\t\t\tthis.data[i].push(rowClass);\n\n\t\t\tconst rowIndex = new TableItem();\n\t\t\trowIndex.data = this.rowsIndices[i];\n\t\t\tthis.data[i].push(rowIndex);\n\t\t}\n\t}\n\n\t/**\n\t * Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\t *\n\t * Call after sorting data (if you previously pushed to maintain selection order)\n\t * to make everything right with the world again.\n\t */\n\tpopRowStateFromModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tthis.rowsIndices[i] = this.data[i].pop().data;\n\t\t\tthis.rowsClass[i] = this.data[i].pop().data;\n\t\t\tthis.rowsContext[i] = this.data[i].pop().data;\n\t\t\tthis.rowsExpanded[i] = !!this.data[i].pop().data;\n\t\t\tthis.rowsSelected[i] = !!this.data[i].pop().data;\n\t\t}\n\t}\n\n\t/**\n\t * Checks if row is filtered out.\n\t *\n\t * @param index\n\t * @returns true if any of the filters in header filters out the `index`th row\n\t */\n\tisRowFiltered(index: number): boolean {\n\t\tconst realIndex = this.realRowIndex(index);\n\t\treturn this.header.some((item, i) => item && item.filter(this.row(realIndex)[i]));\n\t}\n\n\t/**\n\t * Select/deselect `index`th row based on value\n\t *\n\t * @param index index of the row to select\n\t * @param value state to set the row to. Defaults to `true`\n\t */\n\tselectRow(index: number, value = true) {\n\t\tif (this.isRowDisabled(index)) {\n\t\t\treturn;\n\t\t}\n\t\tthis.rowsSelected[index] = value;\n\t\tthis.rowsSelectedChange.emit(index);\n\t}\n\n\t/**\n\t * Selects or deselects all rows in the model\n\t *\n\t * @param value state to set all rows to. Defaults to `true`\n\t */\n\tselectAll(value = true) {\n\t\tif (this.data.length >= 1 && this.data[0].length >= 1) {\n\t\t\tfor (let i = 0; i < this.rowsSelected.length; i++) {\n\t\t\t\tthis.selectRow(i, value);\n\t\t\t}\n\t\t}\n\t\tthis.selectAllChange.next(value);\n\t}\n\n\tisRowSelected(index: number) {\n\t\treturn this.rowsSelected[index];\n\t}\n\n\t/**\n\t * Checks if row is disabled or not.\n\t */\n\tisRowDisabled(index: number) {\n\t\tconst row = this.data[index] as TableRow;\n\t\treturn !!row.disabled;\n\t}\n\n\t/**\n\t * Expands/Collapses `index`th row based on value\n\t *\n\t * @param index index of the row to expand or collapse\n\t * @param value expanded state of the row. `true` is expanded and `false` is collapsed\n\t */\n\texpandRow(index: number, value = true) {\n\t\tthis.rowsExpanded[index] = value;\n\t\tthis.rowsExpandedChange.emit(index);\n\t}\n\n\t/**\n\t * Expands / collapses all rows\n\t *\n\t * @param value expanded state of the rows. `true` is expanded and `false` is collapsed\n\t */\n\texpandAllRows(value = true) {\n\t\tif (this.data.length > 0) {\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tif (this.isRowExpandable(i)) {\n\t\t\t\t\tthis.rowsExpanded[i] = value;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tthis.rowsExpandedAllChange.emit();\n\t\t\t} else {\n\t\t\t\tthis.rowsCollapsedAllChange.emit();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Gets the true index of a row based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realRowIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data.length);\n\t}\n\n\t/**\n\t * Gets the true index of a column based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realColumnIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data[0].length);\n\t}\n\n\t/**\n\t * Generic function to calculate the real index of something.\n\t * Used by `realRowIndex()` and `realColumnIndex()`\n\t *\n\t * @param index\n\t * @param length\n\t */\n\tprotected realIndex(index: number, length: number): number {\n\t\tif (index == null) {\n\t\t\treturn length - 1;\n\t\t} else if (index >= 0) {\n\t\t\treturn index >= length ? length - 1 : index;\n\t\t} else {\n\t\t\treturn -index >= length ? 0 : length + index;\n\t\t}\n\t}\n}\n",
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 192
+                "line": 194
             },
             "inputsClass": [],
             "outputsClass": [],
@@ -8821,7 +8821,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Tracks the current page.</p>\n",
-                    "line": 130,
+                    "line": 132,
                     "rawdescription": "\n\nTracks the current page.\n"
                 },
                 {
@@ -8842,7 +8842,7 @@
                     "type": "TableHeaderItem[]",
                     "optional": false,
                     "description": "<p>Contains information about the header cells of the table.</p>\n",
-                    "line": 125,
+                    "line": 127,
                     "rawdescription": "\n\nContains information about the header cells of the table.\n"
                 },
                 {
@@ -8853,7 +8853,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to true when there is no more data to load in the table</p>\n",
-                    "line": 140,
+                    "line": 142,
                     "rawdescription": "\n\nSet to true when there is no more data to load in the table\n"
                 },
                 {
@@ -8864,7 +8864,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to true when lazy loading to show loading indicator</p>\n",
-                    "line": 145,
+                    "line": 147,
                     "rawdescription": "\n\nSet to true when lazy loading to show loading indicator\n"
                 },
                 {
@@ -8875,7 +8875,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Length of page.</p>\n",
-                    "line": 135,
+                    "line": 137,
                     "rawdescription": "\n\nLength of page.\n"
                 },
                 {
@@ -8886,9 +8886,19 @@
                     "type": "string[]",
                     "optional": false,
                     "description": "<p>Contains class name(s) of the row.</p>\n<p>It affects styling of the row to reflect the appended class name(s).</p>\n<p>It&#39;s empty or undefined by default</p>\n",
-                    "line": 120,
+                    "line": 122,
                     "rawdescription": "\n\nContains class name(s) of the row.\n\nIt affects styling of the row to reflect the appended class name(s).\n\nIt's empty or undefined by default\n"
                 },
+                {
+                    "name": "rowsCollapsedAllChange",
+                    "defaultValue": "new EventEmitter()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 73
+                },
                 {
                     "name": "rowsContext",
                     "defaultValue": "[]",
@@ -8897,7 +8907,7 @@
                     "type": "string[]",
                     "optional": false,
                     "description": "<p>Contains information about the context of the row.</p>\n<p>It affects styling of the row to reflect the context.</p>\n<p>string can be one of <code>&quot;success&quot; | &quot;warning&quot; | &quot;info&quot; | &quot;error&quot; | &quot;&quot;</code> and it&#39;s\nempty or undefined by default</p>\n",
-                    "line": 111,
+                    "line": 113,
                     "rawdescription": "\n\nContains information about the context of the row.\n\nIt affects styling of the row to reflect the context.\n\nstring can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\nempty or undefined by default\n"
                 },
                 {
@@ -8908,9 +8918,19 @@
                     "type": "boolean[]",
                     "optional": false,
                     "description": "<p>Contains information about expanded state of rows in the table.</p>\n",
-                    "line": 96,
+                    "line": 98,
                     "rawdescription": "\n\nContains information about expanded state of rows in the table.\n"
                 },
+                {
+                    "name": "rowsExpandedAllChange",
+                    "defaultValue": "new EventEmitter()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 72
+                },
                 {
                     "name": "rowsExpandedChange",
                     "defaultValue": "new EventEmitter<number>()",
@@ -8929,7 +8949,7 @@
                     "type": "number[]",
                     "optional": false,
                     "description": "<p>Contains information about initial index of rows in the table</p>\n",
-                    "line": 101,
+                    "line": 103,
                     "rawdescription": "\n\nContains information about initial index of rows in the table\n"
                 },
                 {
@@ -8940,7 +8960,7 @@
                     "type": "boolean[]",
                     "optional": false,
                     "description": "<p>Contains information about selection state of rows in the table.</p>\n",
-                    "line": 91,
+                    "line": 93,
                     "rawdescription": "\n\nContains information about selection state of rows in the table.\n"
                 },
                 {
@@ -8961,7 +8981,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Gets emitted when <code>selectAll</code> is called. Emits false if all rows are deselected and true if\nall rows are selected.</p>\n",
-                    "line": 76,
+                    "line": 78,
                     "rawdescription": "\n\nGets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\nall rows are selected.\n"
                 }
             ],
@@ -8989,7 +9009,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 463,
+                    "line": 477,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds a column to the `index`th column or appends to table if index not provided.\n\nIf column is shorter than other columns or not provided, it will be padded with\nempty `TableItem` elements.\n\nIf column is longer than other columns, others will be extended to match so no data is lost.\n\nIf called on an empty table with no parameters, it creates a 1x1 table.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -8997,8 +9017,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 12019,
-                                "end": 12025,
+                                "pos": 12361,
+                                "end": 12367,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9010,8 +9030,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 12012,
-                                "end": 12017,
+                                "pos": 12354,
+                                "end": 12359,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9022,8 +9042,8 @@
                         },
                         {
                             "name": {
-                                "pos": 12039,
-                                "end": 12044,
+                                "pos": 12381,
+                                "end": 12386,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9035,8 +9055,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 12032,
-                                "end": 12037,
+                                "pos": 12374,
+                                "end": 12379,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9068,7 +9088,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 308,
+                    "line": 310,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds a row to the `index`th row or appends to table if index not provided.\n\nIf row is shorter than other rows or not provided, it will be padded with\nempty `TableItem` elements.\n\nIf row is longer than other rows, others will be extended to match so no data is lost.\n\nIf called on an empty table with no parameters, it creates a 1x1 table.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -9076,8 +9096,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7857,
-                                "end": 7860,
+                                "pos": 7948,
+                                "end": 7951,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9089,8 +9109,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 7850,
-                                "end": 7855,
+                                "pos": 7941,
+                                "end": 7946,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9101,8 +9121,8 @@
                         },
                         {
                             "name": {
-                                "pos": 7874,
-                                "end": 7879,
+                                "pos": 7965,
+                                "end": 7970,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9114,8 +9134,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 7867,
-                                "end": 7872,
+                                "pos": 7958,
+                                "end": 7963,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9139,7 +9159,7 @@
                     "optional": false,
                     "returnType": "TableItem[]",
                     "typeParameters": [],
-                    "line": 435,
+                    "line": 449,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns `index`th column of the table.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -9147,8 +9167,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 11266,
-                                "end": 11271,
+                                "pos": 11608,
+                                "end": 11613,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9159,8 +9179,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 11260,
-                                "end": 11265,
+                                "pos": 11602,
+                                "end": 11607,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9184,7 +9204,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 551,
+                    "line": 565,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\ncycle through the three sort states\n",
@@ -9192,8 +9212,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 14331,
-                                "end": 14336,
+                                "pos": 14673,
+                                "end": 14678,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9204,8 +9224,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 14325,
-                                "end": 14330,
+                                "pos": 14667,
+                                "end": 14672,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9229,7 +9249,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 524,
+                    "line": 538,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDeletes `index`th column.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -9237,8 +9257,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 13630,
-                                "end": 13635,
+                                "pos": 13972,
+                                "end": 13977,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9249,8 +9269,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 13624,
-                                "end": 13629,
+                                "pos": 13966,
+                                "end": 13971,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9274,7 +9294,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 397,
+                    "line": 399,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDeletes `index`th row.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -9282,8 +9302,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 10317,
-                                "end": 10322,
+                                "pos": 10408,
+                                "end": 10413,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9294,8 +9314,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 10311,
-                                "end": 10316,
+                                "pos": 10402,
+                                "end": 10407,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9306,13 +9326,86 @@
                         }
                     ]
                 },
+                {
+                    "name": "expandableRowsCount",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "any",
+                    "typeParameters": [],
+                    "line": 423,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nNumber of rows that can be expanded.\n\n",
+                    "description": "<p>Number of rows that can be expanded.</p>\n",
+                    "jsdoctags": [
+                        {
+                            "tagName": {
+                                "pos": 11041,
+                                "end": 11048,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "returns"
+                            },
+                            "comment": "<p>number</p>\n"
+                        }
+                    ]
+                },
+                {
+                    "name": "expandAllRows",
+                    "args": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "defaultValue": "true"
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 727,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nExpands / collapses all rows\n\n",
+                    "description": "<p>Expands / collapses all rows</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": {
+                                "pos": 19320,
+                                "end": 19325,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "value"
+                            },
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "defaultValue": "true",
+                            "tagName": {
+                                "pos": 19314,
+                                "end": 19319,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "param"
+                            },
+                            "comment": "<p>expanded state of the rows. <code>true</code> is expanded and <code>false</code> is collapsed</p>\n"
+                        }
+                    ]
+                },
                 {
                     "name": "expandedRowsCount",
                     "args": [],
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 270,
+                    "line": 272,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns how many rows is currently expanded\n",
@@ -9338,7 +9431,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 703,
+                    "line": 717,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpands/Collapses `index`th row based on value\n\n",
@@ -9346,8 +9439,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 18666,
-                                "end": 18671,
+                                "pos": 19008,
+                                "end": 19013,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9358,8 +9451,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 18660,
-                                "end": 18665,
+                                "pos": 19002,
+                                "end": 19007,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9370,8 +9463,8 @@
                         },
                         {
                             "name": {
-                                "pos": 18722,
-                                "end": 18727,
+                                "pos": 19064,
+                                "end": 19069,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9383,8 +9476,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "true",
                             "tagName": {
-                                "pos": 18716,
-                                "end": 18721,
+                                "pos": 19058,
+                                "end": 19063,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9408,7 +9501,7 @@
                     "optional": false,
                     "returnType": "TableHeaderItem",
                     "typeParameters": [],
-                    "line": 237,
+                    "line": 239,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFinds closest header by trying the `column` and then working its way to the left\n\n",
@@ -9416,8 +9509,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6396,
-                                "end": 6402,
+                                "pos": 6487,
+                                "end": 6493,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9428,8 +9521,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 6390,
-                                "end": 6395,
+                                "pos": 6481,
+                                "end": 6486,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9460,7 +9553,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 214,
+                    "line": 216,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the id of the header. Used to link the cells with headers (or headers with headers)\n\n",
@@ -9468,8 +9561,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5812,
-                                "end": 5818,
+                                "pos": 5903,
+                                "end": 5909,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9480,8 +9573,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5806,
-                                "end": 5811,
+                                "pos": 5897,
+                                "end": 5902,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9492,8 +9585,8 @@
                         },
                         {
                             "name": {
-                                "pos": 5870,
-                                "end": 5877,
+                                "pos": 5961,
+                                "end": 5968,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9505,8 +9598,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "1",
                             "tagName": {
-                                "pos": 5864,
-                                "end": 5869,
+                                "pos": 5955,
+                                "end": 5960,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9537,7 +9630,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 204,
+                    "line": 206,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns an id for the given column\n\n",
@@ -9545,8 +9638,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5476,
-                                "end": 5482,
+                                "pos": 5567,
+                                "end": 5573,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9557,8 +9650,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5470,
-                                "end": 5475,
+                                "pos": 5561,
+                                "end": 5566,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9569,8 +9662,8 @@
                         },
                         {
                             "name": {
-                                "pos": 5527,
-                                "end": 5530,
+                                "pos": 5618,
+                                "end": 5621,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9582,8 +9675,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "0",
                             "tagName": {
-                                "pos": 5521,
-                                "end": 5526,
+                                "pos": 5612,
+                                "end": 5617,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9607,7 +9700,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 424,
+                    "line": 438,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9628,7 +9721,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 412,
+                    "line": 414,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -9645,7 +9738,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 692,
+                    "line": 706,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nChecks if row is disabled or not.\n",
@@ -9675,7 +9768,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 416,
+                    "line": 430,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9703,7 +9796,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 420,
+                    "line": 434,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9731,7 +9824,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 652,
+                    "line": 666,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nChecks if row is filtered out.\n\n",
@@ -9739,8 +9832,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 17421,
-                                "end": 17426,
+                                "pos": 17763,
+                                "end": 17768,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9751,8 +9844,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 17415,
-                                "end": 17420,
+                                "pos": 17757,
+                                "end": 17762,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9763,8 +9856,8 @@
                         },
                         {
                             "tagName": {
-                                "pos": 17432,
-                                "end": 17439,
+                                "pos": 17774,
+                                "end": 17781,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9788,7 +9881,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 685,
+                    "line": 699,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9822,7 +9915,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 538,
+                    "line": 552,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9852,7 +9945,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 636,
+                    "line": 650,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRestores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\nCall after sorting data (if you previously pushed to maintain selection order)\nto make everything right with the world again.\n",
@@ -9864,7 +9957,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 606,
+                    "line": 620,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAppends `rowsSelected` and `rowsExpanded` info to model data.\n\nWhen sorting rows, do this first so information about row selection\ngets sorted with the other row info.\n\nCall `popRowSelectionFromModelData()` after sorting to make everything\nright with the world again.\n",
@@ -9883,7 +9976,7 @@
                     "optional": false,
                     "returnType": "TableItem[]",
                     "typeParameters": [],
-                    "line": 289,
+                    "line": 291,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns `index`th row of the table.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -9891,8 +9984,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7301,
-                                "end": 7306,
+                                "pos": 7392,
+                                "end": 7397,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9903,8 +9996,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7295,
-                                "end": 7300,
+                                "pos": 7386,
+                                "end": 7391,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9929,7 +10022,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 676,
+                    "line": 690,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelects or deselects all rows in the model\n\n",
@@ -9937,8 +10030,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 18094,
-                                "end": 18099,
+                                "pos": 18436,
+                                "end": 18441,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9950,8 +10043,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "true",
                             "tagName": {
-                                "pos": 18088,
-                                "end": 18093,
+                                "pos": 18430,
+                                "end": 18435,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9968,7 +10061,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 255,
+                    "line": 257,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns how many rows is currently selected\n",
@@ -9994,7 +10087,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 663,
+                    "line": 677,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelect/deselect `index`th row based on value\n\n",
@@ -10002,8 +10095,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 17757,
-                                "end": 17762,
+                                "pos": 18099,
+                                "end": 18104,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -10014,8 +10107,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 17751,
-                                "end": 17756,
+                                "pos": 18093,
+                                "end": 18098,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -10026,8 +10119,8 @@
                         },
                         {
                             "name": {
-                                "pos": 17801,
-                                "end": 17806,
+                                "pos": 18143,
+                                "end": 18148,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -10039,8 +10132,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "true",
                             "tagName": {
-                                "pos": 17795,
-                                "end": 17800,
+                                "pos": 18137,
+                                "end": 18142,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -10064,7 +10157,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 574,
+                    "line": 588,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSorts the data currently present in the model based on `compare()`\n\nDirection is set by `ascending` and `descending` properties of `TableHeaderItem`\nin `index`th column.\n\n",
@@ -10072,8 +10165,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 14918,
-                                "end": 14923,
+                                "pos": 15260,
+                                "end": 15265,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -10084,8 +10177,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 14912,
-                                "end": 14917,
+                                "pos": 15254,
+                                "end": 15259,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -10135,7 +10228,7 @@
                         "name": "data",
                         "type": "",
                         "returnType": "",
-                        "line": 84,
+                        "line": 86,
                         "rawdescription": "\n\nGets the full data.\n\nYou can use it to alter individual `TableItem`s but if you need to change\ntable structure, use `addRow()` and/or `addColumn()`\n",
                         "description": "<p>Gets the full data.</p>\n<p>You can use it to alter individual <code>TableItem</code>s but if you need to change\ntable structure, use <code>addRow()</code> and/or <code>addColumn()</code></p>\n"
                     }
@@ -10156,7 +10249,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 161,
+                        "line": 163,
                         "rawdescription": "\n\nManually set data length in case the data in the table doesn't\ncorrectly reflect all the data that table is to display.\n\nExample: if you have multiple pages of data that table will display\nbut you're loading one at a time.\n\nSet to `null` to reset to default behavior.\n",
                         "description": "<p>Manually set data length in case the data in the table doesn&#39;t\ncorrectly reflect all the data that table is to display.</p>\n<p>Example: if you have multiple pages of data that table will display\nbut you&#39;re loading one at a time.</p>\n<p>Set to <code>null</code> to reset to default behavior.</p>\n",
                         "jsdoctags": [
@@ -10175,7 +10268,7 @@
                         "name": "totalDataLength",
                         "type": "",
                         "returnType": "",
-                        "line": 169,
+                        "line": 171,
                         "rawdescription": "\n\nTotal length of data that table has access to, or the amount manually set\n",
                         "description": "<p>Total length of data that table has access to, or the amount manually set</p>\n"
                     }
@@ -30815,7 +30908,7 @@
         },
         {
             "name": "ExpansionTableStory",
-            "id": "component-ExpansionTableStory-8e9d2c5d8f02279f25d1c5fb0917bff1fb1a283d5a8220e1c9da8396210d09099f8fce69df01a1b4d81a20ec6182f8e9767e9f0bea82241f3c91d40e7a88bc2d",
+            "id": "component-ExpansionTableStory-d20442e134f01e6097b5e23512d1691f788ea184e02b786f8cb22254ae63e7ec7a5b81956ec8f361838c63ed0c9eb64d182ad838d446aec119a04b09f74bd4d2",
             "file": "src/table/stories/app-expansion-table.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -30825,7 +30918,7 @@
             "selector": "app-expansion-table",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-template #customTableItemTemplate let-data=\"data\">\n\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n</ng-template>\n<ng-template #customHeaderTemplate let-data=\"data\">\n\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n</ng-template>\n\n<cds-table\n\t[model]=\"model\"\n\t[size]=\"size\"\n\t[sortable]=\"sortable\"\n\t[showSelectionColumn]=\"showSelectionColumn\"\n\t[stickyHeader]=\"stickyHeader\"\n\t[skeleton]=\"skeleton\"\n\t[striped]=\"striped\"\n\t(sort)=\"customSort($event)\"\n\t(rowClick)=\"onRowClick($event)\"\n\t[isDataGrid]=\"isDataGrid\">\n</cds-table>\n\t",
+            "template": "<ng-template #customTableItemTemplate let-data=\"data\">\n\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n</ng-template>\n<ng-template #customHeaderTemplate let-data=\"data\">\n\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n</ng-template>\n\n<cds-table\n\t[model]=\"model\"\n\t[size]=\"size\"\n\t[sortable]=\"sortable\"\n\t[showSelectionColumn]=\"showSelectionColumn\"\n\t[stickyHeader]=\"stickyHeader\"\n\t[skeleton]=\"skeleton\"\n\t[striped]=\"striped\"\n\t(sort)=\"customSort($event)\"\n\t(rowClick)=\"onRowClick($event)\"\n\t[isDataGrid]=\"isDataGrid\"\n\t[showExpandAllToggle]=\"showExpandAllToggle\">\n</cds-table>\n\n<br>\n\n<button cdsButton=\"primary\" size=\"sm\" (click)=\"model.expandAllRows(true)\">Expand all rows</button>\n\n<button cdsButton=\"secondary\" size=\"sm\" (click)=\"model.expandAllRows(false)\">Collapse all rows</button>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -30835,7 +30928,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 57,
+                    "line": 64,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -30844,16 +30937,25 @@
                     "defaultValue": "new TableModel()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 53,
+                    "line": 60,
                     "type": "any",
                     "decorators": []
                 },
+                {
+                    "name": "showExpandAllToggle",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 68,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "showSelectionColumn",
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 55,
+                    "line": 62,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -30862,7 +30964,7 @@
                     "defaultValue": "\"md\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 54,
+                    "line": 61,
                     "type": "string",
                     "decorators": []
                 },
@@ -30871,7 +30973,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 60,
+                    "line": 67,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -30880,7 +30982,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 58,
+                    "line": 65,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -30889,7 +30991,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 59,
+                    "line": 66,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -30898,7 +31000,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 56,
+                    "line": 63,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -30919,7 +31021,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 113,
+                    "line": 121,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -30947,7 +31049,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 117,
+                    "line": 125,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -30981,7 +31083,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 121,
+                    "line": 129,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -31015,7 +31117,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\nclass CustomHeaderItem extends TableHeaderItem {\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: \"app-expansion-table\",\n\ttemplate: `\n\t\t<ng-template #customTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<cds-table\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[sortable]=\"sortable\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[striped]=\"striped\"\n\t\t\t(sort)=\"customSort($event)\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</cds-table>\n\t`\n})\nexport class ExpansionTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\n\t@ViewChild(\"customHeaderTemplate\")\n\tprotected customHeaderTemplate: TemplateRef<any>;\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef<any>;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[\n\t\t\t\tnew TableItem({ data: \"Name 1\", expandedData: \"No template\" }),\n\t\t\t\tnew TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3\",\n\t\t\t\t\texpandedData: { name: \"In\", surname: \"Template\" },\n\t\t\t\t\texpandedTemplate: this.customTableItemTemplate\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3.1\",\n\t\t\t\t\texpandedData: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t]\n\t\t\t\t\t],\n\t\t\t\t\texpandAsTable: true\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { name: \"Alice\", surname: \"Bob\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew CustomHeaderItem({\n\t\t\t\tdata: { name: \"Custom header\", link: \"#\" },\n\t\t\t\ttemplate: this.customHeaderTemplate\n\t\t\t})\n\t\t];\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n}\n",
+            "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\nclass CustomHeaderItem extends TableHeaderItem {\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n\n@Component({\n\tselector: \"app-expansion-table\",\n\ttemplate: `\n\t\t<ng-template #customTableItemTemplate let-data=\"data\">\n\t\t\t<a [attr.href]=\"data.link\">{{data.name}} {{data.surname}}</a>\n\t\t</ng-template>\n\t\t<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t\t<i><a [attr.href]=\"data.link\">{{data.name}}</a></i>\n\t\t</ng-template>\n\n\t\t<cds-table\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[sortable]=\"sortable\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[striped]=\"striped\"\n\t\t\t(sort)=\"customSort($event)\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t</cds-table>\n\n\t\t<br>\n\n\t\t<button cdsButton=\"primary\" size=\"sm\" (click)=\"model.expandAllRows(true)\">Expand all rows</button>\n\n\t\t<button cdsButton=\"secondary\" size=\"sm\" (click)=\"model.expandAllRows(false)\">Collapse all rows</button>\n\t`\n})\nexport class ExpansionTableStory implements AfterViewInit {\n\t@Input() model = new TableModel();\n\t@Input() size = \"md\";\n\t@Input() showSelectionColumn = true;\n\t@Input() striped = true;\n\t@Input() isDataGrid = false;\n\t@Input() sortable = true;\n\t@Input() stickyHeader = false;\n\t@Input() skeleton = false;\n\t@Input() showExpandAllToggle = false;\n\n\t@ViewChild(\"customHeaderTemplate\")\n\tprotected customHeaderTemplate: TemplateRef<any>;\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef<any>;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[\n\t\t\t\tnew TableItem({ data: \"Name 1\", expandedData: \"No template\" }),\n\t\t\t\tnew TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3\",\n\t\t\t\t\texpandedData: { name: \"In\", surname: \"Template\" },\n\t\t\t\t\texpandedTemplate: this.customTableItemTemplate\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[\n\t\t\t\tnew TableItem({\n\t\t\t\t\tdata: \"Name 3.1\",\n\t\t\t\t\texpandedData: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t\t\t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t\t\t\t\t\t]\n\t\t\t\t\t],\n\t\t\t\t\texpandAsTable: true\n\t\t\t\t}),\n\t\t\t\tnew TableItem({ data: \"swer\" })\n\t\t\t],\n\t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: { name: \"Alice\", surname: \"Bob\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })],\n\t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})],\n\t\t\t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})]\n\t\t];\n\t\tthis.model.header = [\n\t\t\tnew TableHeaderItem({ data: \"Very long title indeed\" }),\n\t\t\tnew CustomHeaderItem({\n\t\t\t\tdata: { name: \"Custom header\", link: \"#\" },\n\t\t\t\ttemplate: this.customHeaderTemplate\n\t\t\t})\n\t\t];\n\t}\n\n\tcustomSort(index: number) {\n\t\tthis.sort(this.model, index);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n\n\tsort(model, index: number) {\n\t\tif (model.header[index].sorted) {\n\t\t\t// if already sorted flip sorting direction\n\t\t\tmodel.header[index].ascending = model.header[index].descending;\n\t\t}\n\t\tmodel.sort(index);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -38068,7 +38170,7 @@
         },
         {
             "name": "NumberComponent",
-            "id": "component-NumberComponent-2f449d61d6c7a726610fa6f48642317885ec439e1e43c3e9d823cc6cf84fcb1fe78637ea04c8a663b32884c4cb5f96f153184844b5d4aa49daeaf562fc1c47fd",
+            "id": "component-NumberComponent-9f96963038fb60119a19b74c9c9868abb21dc983cbe9ae791c7f9916a4b113d526ffec3cb0816822dbea8d431361e3ad4bf0b6c14c97c4757a47853940dbca6b",
             "file": "src/number-input/number.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -38083,7 +38185,7 @@
             "selector": "cds-number, ibm-number",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\tdata-numberinput\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\tclass=\"cds--number\"\n\t[ngClass]=\"{\n\t\t'cds--number--light': theme === 'light',\n\t\t'cds--number--nolabel': !label,\n\t\t'cds--number--helpertext': helperText,\n\t\t'cds--skeleton' : skeleton,\n\t\t'cds--number--sm': size === 'sm',\n\t\t'cds--number--md': size === 'md',\n\t\t'cds--number--lg': size === 'lg'\n\t}\">\n\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t<label\n\t\t*ngIf=\"!skeleton && label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--number__input-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t}\">\n\t\t<input\n\t\t\ttype=\"number\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.min]=\"min\"\n\t\t\t[attr.max]=\"max\"\n\t\t\t[attr.step]=\"step\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t</svg>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n\t",
+            "template": "<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n<div\n\tdata-numberinput\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\tclass=\"cds--number\"\n\t[ngClass]=\"{\n\t\t'cds--number--light': theme === 'light',\n\t\t'cds--number--nolabel': !label,\n\t\t'cds--number--helpertext': helperText,\n\t\t'cds--skeleton' : skeleton,\n\t\t'cds--number--sm': size === 'sm',\n\t\t'cds--number--md': size === 'md',\n\t\t'cds--number--lg': size === 'lg'\n\t}\">\n\t<label\n\t\t*ngIf=\"!skeleton && label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--number__input-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t}\">\n\t\t<input\n\t\t\ttype=\"number\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.min]=\"min\"\n\t\t\t[attr.max]=\"max\"\n\t\t\t[attr.step]=\"step\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(focus)=\"fluid ? handleFocus($event): null\"\n\t\t\t(blur)=\"fluid ? handleFocus($event): null\"\n\t\t\t(change)=\"onNumberInputChange($event)\"/>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t</svg>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t</div>\n\t</div>\n\t<hr *ngIf=\"fluid\" class=\"cds--number-input__divider\" />\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -38094,7 +38196,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the arialabel for input\n",
                     "description": "<p>Sets the arialabel for input</p>\n",
-                    "line": 244,
+                    "line": 247,
                     "type": "string",
                     "decorators": []
                 },
@@ -38102,7 +38204,7 @@
                     "name": "decrementLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 251,
+                    "line": 254,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -38113,7 +38215,18 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a disabled number input.\n",
                     "description": "<p>Set to <code>true</code> for a disabled number input.</p>\n",
-                    "line": 166,
+                    "line": 169,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "fluid",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nExperimental: enable fluid state\n",
+                    "description": "<p>Experimental: enable fluid state</p>\n",
+                    "line": 274,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38123,7 +38236,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the optional helper text.\n",
                     "description": "<p>Sets the optional helper text.</p>\n",
-                    "line": 220,
+                    "line": 223,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -38134,7 +38247,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe unique id for the number component.\n",
                     "description": "<p>The unique id for the number component.</p>\n",
-                    "line": 178,
+                    "line": 181,
                     "type": "string",
                     "decorators": []
                 },
@@ -38142,7 +38255,7 @@
                     "name": "incrementLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 260,
+                    "line": 263,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -38153,7 +38266,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an invalid number component.\n",
                     "description": "<p>Set to <code>true</code> for an invalid number component.</p>\n",
-                    "line": 174,
+                    "line": 177,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38163,7 +38276,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 224,
+                    "line": 227,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -38173,7 +38286,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the text inside the `label` tag.\n",
                     "description": "<p>Sets the text inside the <code>label</code> tag.</p>\n",
-                    "line": 216,
+                    "line": 219,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -38184,7 +38297,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the max attribute on the `input` element.\n",
                     "description": "<p>Sets the max attribute on the <code>input</code> element.</p>\n",
-                    "line": 212,
+                    "line": 215,
                     "type": "any",
                     "decorators": []
                 },
@@ -38195,7 +38308,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the min attribute on the `input` element.\n",
                     "description": "<p>Sets the min attribute on the <code>input</code> element.</p>\n",
-                    "line": 208,
+                    "line": 211,
                     "type": "any",
                     "decorators": []
                 },
@@ -38206,7 +38319,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the placeholder attribute on the `input` element.\n",
                     "description": "<p>Sets the placeholder attribute on the <code>input</code> element.</p>\n",
-                    "line": 182,
+                    "line": 185,
                     "type": "string",
                     "decorators": []
                 },
@@ -38216,7 +38329,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIf `step` is a decimal, we may want precision to be set to go around floating point precision.\n",
                     "description": "<p>If <code>step</code> is a decimal, we may want precision to be set to go around floating point precision.</p>\n",
-                    "line": 232,
+                    "line": 235,
                     "type": "number",
                     "decorators": []
                 },
@@ -38227,7 +38340,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for readonly state.\n",
                     "description": "<p>Set to <code>true</code> for readonly state.</p>\n",
-                    "line": 157,
+                    "line": 160,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38237,7 +38350,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReflects the required attribute of the `input` element.\n",
                     "description": "<p>Reflects the required attribute of the <code>input</code> element.</p>\n",
-                    "line": 190,
+                    "line": 193,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38248,7 +38361,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNumber input field render size\n",
                     "description": "<p>Number input field render size</p>\n",
-                    "line": 186,
+                    "line": 189,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -38259,7 +38372,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading number component.\n",
                     "description": "<p>Set to <code>true</code> for a loading number component.</p>\n",
-                    "line": 170,
+                    "line": 173,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38270,7 +38383,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the amount the number controls increment and decrement by.\n",
                     "description": "<p>Sets the amount the number controls increment and decrement by.</p>\n",
-                    "line": 228,
+                    "line": 231,
                     "type": "number",
                     "decorators": []
                 },
@@ -38281,15 +38394,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` number input theme.",
                     "jsdoctags": [
                         {
-                            "pos": 4572,
-                            "end": 4672,
+                            "pos": 4737,
+                            "end": 4837,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 4573,
-                                "end": 4583,
+                                "pos": 4738,
+                                "end": 4748,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38299,7 +38412,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> number input theme.</p>\n"
                         }
                     ],
-                    "line": 162,
+                    "line": 165,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -38309,7 +38422,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the value attribute on the `input` element.\n",
                     "description": "<p>Sets the value attribute on the <code>input</code> element.</p>\n",
-                    "line": 194,
+                    "line": 197,
                     "type": "any",
                     "decorators": []
                 },
@@ -38320,7 +38433,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 236,
+                    "line": 239,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -38330,7 +38443,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 240,
+                    "line": 243,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -38343,7 +38456,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event notifying other classes when a change in state occurs in the input.\n",
                     "description": "<p>Emits event notifying other classes when a change in state occurs in the input.</p>\n",
-                    "line": 248,
+                    "line": 251,
                     "type": "EventEmitter"
                 }
             ],
@@ -38356,7 +38469,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 152,
+                    "line": 155,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -38375,7 +38488,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Variable used for creating unique ids for number input components.</p>\n",
-                    "line": 150,
+                    "line": 153,
                     "rawdescription": "\n\nVariable used for creating unique ids for number input components.\n",
                     "modifierKind": [
                         126
@@ -38389,7 +38502,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Called when number input is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
-                    "line": 318,
+                    "line": 344,
                     "rawdescription": "\n\nCalled when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n"
                 },
                 {
@@ -38400,7 +38513,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
-                    "line": 323,
+                    "line": 349,
                     "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n"
                 }
             ],
@@ -38411,7 +38524,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 358,
+                    "line": 384,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates a class of `NumberChange` to emit the change in the `Number`.\n",
@@ -38423,7 +38536,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 304,
+                    "line": 330,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -38442,7 +38555,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 347,
+                    "line": 373,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -38452,10 +38565,38 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 351,
+                    "line": 377,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
+                {
+                    "name": "handleFocus",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "FocusEvent",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 401,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "FocusEvent",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "isTemplate",
                     "args": [
@@ -38469,7 +38610,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 371,
+                    "line": 397,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -38493,7 +38634,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 339,
+                    "line": 365,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSubtracts `step` to the current `value`.\n",
@@ -38505,7 +38646,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 328,
+                    "line": 354,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds `step` to the current `value`.\n",
@@ -38524,7 +38665,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 366,
+                    "line": 392,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -38552,7 +38693,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 291,
+                    "line": 317,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -38585,7 +38726,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 299,
+                    "line": 325,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -38596,8 +38737,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7758,
-                                "end": 7760,
+                                "pos": 8554,
+                                "end": 8556,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38608,8 +38749,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7752,
-                                "end": 7757,
+                                "pos": 8548,
+                                "end": 8553,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38633,7 +38774,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 311,
+                    "line": 337,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the disabled state through the model\n",
@@ -38663,7 +38804,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 284,
+                    "line": 310,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis is the initial value set to the component\n",
@@ -38674,8 +38815,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7434,
-                                "end": 7439,
+                                "pos": 8230,
+                                "end": 8235,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38686,8 +38827,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7428,
-                                "end": 7433,
+                                "pos": 8224,
+                                "end": 8229,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -38707,7 +38848,39 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 152,
+                    "line": 155,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--number-input--fluid--disabled",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 280,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--number-input--fluid--focus",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 284,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--number-input--fluid--invalid",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 276,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--text-input--fluid__skeleton",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 288,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -38719,7 +38892,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 304
+                    "line": 330
                 }
             ],
             "standalone": false,
@@ -38727,7 +38900,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 { NG_VALUE_ACCESSOR, ControlValueAccessor } 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<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 *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\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(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<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\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\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}\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\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",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -38744,7 +38917,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 271,
+                "line": 297,
                 "rawdescription": "\n\nCreates an instance of `Number`.\n",
                 "jsdoctags": [
                     {
@@ -38779,7 +38952,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 194,
+                        "line": 197,
                         "rawdescription": "\n\nSets the value attribute on the `input` element.\n",
                         "description": "<p>Sets the value attribute on the <code>input</code> element.</p>\n",
                         "jsdoctags": [
@@ -38798,7 +38971,7 @@
                         "name": "value",
                         "type": "",
                         "returnType": "",
-                        "line": 202
+                        "line": 205
                     }
                 },
                 "decrementLabel": {
@@ -38817,7 +38990,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 251,
+                        "line": 254,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -38834,7 +39007,7 @@
                         "name": "decrementLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 255
+                        "line": 258
                     }
                 },
                 "incrementLabel": {
@@ -38853,7 +39026,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 260,
+                        "line": 263,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -38870,7 +39043,43 @@
                         "name": "incrementLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 264
+                        "line": 267
+                    }
+                },
+                "fluidInvalid": {
+                    "name": "fluidInvalid",
+                    "getSignature": {
+                        "name": "fluidInvalid",
+                        "type": "",
+                        "returnType": "",
+                        "line": 276
+                    }
+                },
+                "fluidDisabled": {
+                    "name": "fluidDisabled",
+                    "getSignature": {
+                        "name": "fluidDisabled",
+                        "type": "",
+                        "returnType": "",
+                        "line": 280
+                    }
+                },
+                "fluidFocus": {
+                    "name": "fluidFocus",
+                    "getSignature": {
+                        "name": "fluidFocus",
+                        "type": "",
+                        "returnType": "",
+                        "line": 284
+                    }
+                },
+                "fluidSkeleton": {
+                    "name": "fluidSkeleton",
+                    "getSignature": {
+                        "name": "fluidSkeleton",
+                        "type": "",
+                        "returnType": "",
+                        "line": 288
                     }
                 }
             }
@@ -53575,7 +53784,7 @@
         },
         {
             "name": "Table",
-            "id": "component-Table-0f1a094e9a9414eb0836049c6bc50ae743224ae57e84164de21770055e14461a79893b8979a8f738fe9a9552171856b13b290c954240b2940f9f80348ba40181",
+            "id": "component-Table-add4f2744657f84a37212b91e107ae8dedf1f937ee83de962f8e220fdcdca1bd0218cef51d8dd9845b2ed20d271cfb25d705a0a59f2cc5af088213e4a5ce1700",
             "file": "src/table/table.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -53587,7 +53796,7 @@
             "styles": [
                 "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"
             ],
-            "template": "<table\n\tcdsTable\n\t[sortable]=\"sortable\"\n\t[noBorder]=\"noBorder\"\n\t[ngClass]=\"{'cds--data-table--sticky-header': stickyHeader}\"\n\t[size]=\"size\"\n\t[striped]=\"striped\"\n\t[skeleton]=\"skeleton\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t[attr.aria-describedby]=\"ariaDescribedby\">\n\t<thead\n\t\tcdsTableHead\n\t\t[sortable]=\"sortable\"\n\t\t(deselectAll)=\"onDeselectAll()\"\n\t\t(selectAll)=\"onSelectAll()\"\n\t\t(sort)=\"doSort($event)\"\n\t\t[checkboxHeaderLabel]=\"getCheckboxHeaderLabel()\"\n\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t[model]=\"model\"\n\t\t[selectAllCheckbox]=\"selectAllCheckbox\"\n\t\t[selectAllCheckboxSomeSelected]=\"selectAllCheckboxSomeSelected\"\n\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t[skeleton]=\"skeleton\"\n\t\t[sortAscendingLabel]=\"sortAscendingLabel\"\n\t\t[sortDescendingLabel]=\"sortDescendingLabel\"\n\t\t[stickyHeader]=\"stickyHeader\">\n\t</thead>\n\t<tbody\n\t\tcdsTableBody\n\t\t(deselectRow)=\"onSelectRow($event)\"\n\t\t(scroll)=\"onScroll($event)\"\n\t\t(selectRow)=\"onSelectRow($event)\"\n\t\t[checkboxRowLabel]=\"getCheckboxRowLabel()\"\n\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t(rowClick)=\"onRowClick($event)\"\n\t\t[expandButtonAriaLabel]=\"expandButtonAriaLabel\"\n\t\t[model]=\"model\"\n\t\t[size]=\"size\"\n\t\t[ngStyle]=\"{'overflow-y': 'scroll'}\"\n\t\t[selectionLabelColumn]=\"selectionLabelColumn\"\n\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t[skeleton]=\"skeleton\"\n\t\t*ngIf=\"!noData; else noDataTemplate\">\n\t</tbody>\n\t<ng-template #noDataTemplate><ng-content></ng-content></ng-template>\n\t<tfoot>\n\t\t<ng-template\n\t\t\t[ngTemplateOutlet]=\"footerTemplate\">\n\t\t</ng-template>\n\t\t<tr *ngIf=\"this.model.isLoading\">\n\t\t\t<td class=\"table_loading-indicator\">\n\t\t\t\t<div class=\"cds--loading cds--loading--small\">\n\t\t\t\t\t<svg class=\"cds--loading__svg\" viewBox=\"-75 -75 150 150\">\n\t\t\t\t\t\t<circle class=\"cds--loading__stroke\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr *ngIf=\"this.model.isEnd\">\n\t\t\t<td class=\"table_end-indicator\">\n\t\t\t\t<h5>{{getEndOfDataText() | async}}</h5>\n\t\t\t\t<button (click)=\"scrollToTop($event)\" class=\"btn--secondary-sm\">\n\t\t\t\t\t{{getScrollTopText() | async}}\n\t\t\t\t</button>\n\t\t\t</td>\n\t\t</tr>\n\t</tfoot>\n</table>\n",
+            "template": "<table\n\tcdsTable\n\t[sortable]=\"sortable\"\n\t[noBorder]=\"noBorder\"\n\t[ngClass]=\"{'cds--data-table--sticky-header': stickyHeader}\"\n\t[size]=\"size\"\n\t[striped]=\"striped\"\n\t[skeleton]=\"skeleton\"\n\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t[attr.aria-describedby]=\"ariaDescribedby\">\n\t<thead\n\t\tcdsTableHead\n\t\t[sortable]=\"sortable\"\n\t\t(deselectAll)=\"onDeselectAll()\"\n\t\t(selectAll)=\"onSelectAll()\"\n\t\t(expandAllRows)=\"model.expandAllRows(true)\"\n\t\t(collapseAllRows)=\"model.expandAllRows(false)\"\n\t\t(sort)=\"doSort($event)\"\n\t\t[checkboxHeaderLabel]=\"getCheckboxHeaderLabel()\"\n\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t[model]=\"model\"\n\t\t[selectAllCheckbox]=\"selectAllCheckbox\"\n\t\t[selectAllCheckboxSomeSelected]=\"selectAllCheckboxSomeSelected\"\n\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t[showExpandAllToggle]=\"showExpandAllToggle\"\n\t\t[skeleton]=\"skeleton\"\n\t\t[sortAscendingLabel]=\"sortAscendingLabel\"\n\t\t[sortDescendingLabel]=\"sortDescendingLabel\"\n\t\t[stickyHeader]=\"stickyHeader\">\n\t</thead>\n\t<tbody\n\t\tcdsTableBody\n\t\t(deselectRow)=\"onSelectRow($event)\"\n\t\t(scroll)=\"onScroll($event)\"\n\t\t(selectRow)=\"onSelectRow($event)\"\n\t\t[checkboxRowLabel]=\"getCheckboxRowLabel()\"\n\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t(rowClick)=\"onRowClick($event)\"\n\t\t[expandButtonAriaLabel]=\"expandButtonAriaLabel\"\n\t\t[model]=\"model\"\n\t\t[size]=\"size\"\n\t\t[ngStyle]=\"{'overflow-y': 'scroll'}\"\n\t\t[selectionLabelColumn]=\"selectionLabelColumn\"\n\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t[skeleton]=\"skeleton\"\n\t\t*ngIf=\"!noData; else noDataTemplate\">\n\t</tbody>\n\t<ng-template #noDataTemplate><ng-content></ng-content></ng-template>\n\t<tfoot>\n\t\t<ng-template\n\t\t\t[ngTemplateOutlet]=\"footerTemplate\">\n\t\t</ng-template>\n\t\t<tr *ngIf=\"this.model.isLoading\">\n\t\t\t<td class=\"table_loading-indicator\">\n\t\t\t\t<div class=\"cds--loading cds--loading--small\">\n\t\t\t\t\t<svg class=\"cds--loading__svg\" viewBox=\"-75 -75 150 150\">\n\t\t\t\t\t\t<circle class=\"cds--loading__stroke\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr *ngIf=\"this.model.isEnd\">\n\t\t\t<td class=\"table_end-indicator\">\n\t\t\t\t<h5>{{getEndOfDataText() | async}}</h5>\n\t\t\t\t<button (click)=\"scrollToTop($event)\" class=\"btn--secondary-sm\">\n\t\t\t\t\t{{getScrollTopText() | async}}\n\t\t\t\t</button>\n\t\t\t</td>\n\t\t</tr>\n\t</tfoot>\n</table>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -53598,7 +53807,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nId of the table header description element\n",
                     "description": "<p>Id of the table header description element</p>\n",
-                    "line": 310,
+                    "line": 313,
                     "type": "string",
                     "decorators": []
                 },
@@ -53608,7 +53817,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nId of the table header title element\n",
                     "description": "<p>Id of the table header title element</p>\n",
-                    "line": 306,
+                    "line": 309,
                     "type": "string",
                     "decorators": []
                 },
@@ -53619,7 +53828,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls whether to enable multiple or single row selection.\n",
                     "description": "<p>Controls whether to enable multiple or single row selection.</p>\n",
-                    "line": 399,
+                    "line": 407,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53629,15 +53838,15 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 12328,
-                            "end": 12508,
+                            "pos": 12603,
+                            "end": 12783,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 12329,
-                                "end": 12333,
+                                "pos": 12604,
+                                "end": 12608,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53647,7 +53856,7 @@
                             "comment": "<ul>\n<li>Enable column resize when Carbon officially supports feature\nSet to <code>true</code> to enable users to resize columns.</li>\n</ul>\n<p>Works for columns with width set in pixels.</p>\n"
                         }
                     ],
-                    "line": 427,
+                    "line": 435,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -53657,7 +53866,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet footer template to customize what is displayed in the tfoot section of the table\n",
                     "description": "<p>Set footer template to customize what is displayed in the tfoot section of the table</p>\n",
-                    "line": 488,
+                    "line": 496,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -53667,7 +53876,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a data grid with keyboard interactions.\n",
                     "description": "<p>Set to <code>true</code> for a data grid with keyboard interactions.</p>\n",
-                    "line": 368,
+                    "line": 371,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53677,7 +53886,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`TableModel` with data the table is to display.\n",
                     "description": "<p><code>TableModel</code> with data the table is to display.</p>\n",
-                    "line": 316,
+                    "line": 319,
                     "type": "TableModel",
                     "decorators": []
                 },
@@ -53686,7 +53895,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 385,
+                    "line": 388,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53697,7 +53906,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDistance (in px) from the bottom that view has to reach before\n`scrollLoad` event is emitted.\n",
                     "description": "<p>Distance (in px) from the bottom that view has to reach before\n<code>scrollLoad</code> event is emitted.</p>\n",
-                    "line": 405,
+                    "line": 413,
                     "type": "number",
                     "decorators": []
                 },
@@ -53707,10 +53916,21 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n<cds-table [selectionLabelColumn]=\"0\"></cds-table>\n<!-- results in aria-label=\"Select first column value\"\n(where \"first column value\" is the value of the first column in the row -->\n```\n",
                     "description": "<p>Used to populate the row selection checkbox label with a useful value if set.</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-none\">&lt;cds-table [selectionLabelColumn]=&quot;0&quot;&gt;&lt;/cds-table&gt;\n&lt;!-- results in aria-label=&quot;Select first column value&quot;\n(where &quot;first column value&quot; is the value of the first column in the row --&gt;</code></pre></div>",
-                    "line": 500,
+                    "line": 508,
                     "type": "number",
                     "decorators": []
                 },
+                {
+                    "name": "showExpandAllToggle",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet to `true` to show expansion toggle when table consists of row expansions\n",
+                    "description": "<p>Set to <code>true</code> to show expansion toggle when table consists of row expansions</p>\n",
+                    "line": 393,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "showSelectionColumn",
                     "defaultValue": "true",
@@ -53718,7 +53938,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls whether to show the selection checkboxes column or not.\n",
                     "description": "<p>Controls whether to show the selection checkboxes column or not.</p>\n",
-                    "line": 394,
+                    "line": 402,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53729,7 +53949,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the table rows.\n",
                     "description": "<p>Size of the table rows.</p>\n",
-                    "line": 360,
+                    "line": 363,
                     "type": "TableRowSize",
                     "decorators": []
                 },
@@ -53740,7 +53960,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading table.\n",
                     "description": "<p>Set to <code>true</code> for a loading table.</p>\n",
-                    "line": 364,
+                    "line": 367,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53751,7 +53971,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSetting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.\n",
                     "description": "<p>Setting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.</p>\n",
-                    "line": 383,
+                    "line": 386,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53759,7 +53979,7 @@
                     "name": "sortAscendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 441,
+                    "line": 449,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -53767,7 +53987,7 @@
                     "name": "sortDescendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 434,
+                    "line": 442,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -53778,7 +53998,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to stick the header to the top of the table\n",
                     "description": "<p>Set to <code>true</code> to stick the header to the top of the table</p>\n",
-                    "line": 483,
+                    "line": 491,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53789,7 +54009,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `false` to remove table rows (zebra) stripes.\n",
                     "description": "<p>Set to <code>false</code> to remove table rows (zebra) stripes.</p>\n",
-                    "line": 473,
+                    "line": 481,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53799,7 +54019,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"FILTER\": \"Filter\",\n\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t\t\"CHECKBOX_ROW\": \"Select row\"\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;FILTER&quot;: &quot;Filter&quot;,\n        &quot;END_OF_DATA&quot;: &quot;You&#39;ve reached the end of your content&quot;,\n        &quot;SCROLL_TOP&quot;: &quot;Scroll to top&quot;,\n        &quot;CHECKBOX_HEADER&quot;: &quot;Select all rows&quot;,\n        &quot;CHECKBOX_ROW&quot;: &quot;Select row&quot;\n}</code></pre></div>",
-                    "line": 461,
+                    "line": 469,
                     "type": "any",
                     "decorators": []
                 }
@@ -53814,15 +54034,15 @@
                     "description": "<p>Emits if all rows are deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17228,
-                            "end": 17243,
+                            "pos": 17503,
+                            "end": 17518,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 348,
                             "tagName": {
-                                "pos": 17229,
-                                "end": 17234,
+                                "pos": 17504,
+                                "end": 17509,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53831,8 +54051,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 17235,
-                                "end": 17240,
+                                "pos": 17510,
+                                "end": 17515,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53843,7 +54063,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 572,
+                    "line": 580,
                     "type": "EventEmitter"
                 },
                 {
@@ -53855,15 +54075,15 @@
                     "description": "<p>Emits if a single row is deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17517,
-                            "end": 17575,
+                            "pos": 17792,
+                            "end": 17850,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 348,
                             "tagName": {
-                                "pos": 17518,
-                                "end": 17523,
+                                "pos": 17793,
+                                "end": 17798,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53872,8 +54092,8 @@
                             },
                             "comment": "<p>({model: this.model, deselectedRowIndex: index})</p>\n",
                             "name": {
-                                "pos": 17524,
-                                "end": 17524,
+                                "pos": 17799,
+                                "end": 17799,
                                 "flags": 17104896,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53884,7 +54104,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 586,
+                    "line": 594,
                     "type": "EventEmitter"
                 },
                 {
@@ -53894,7 +54114,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n",
                     "description": "<p>Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.</p>\n",
-                    "line": 591,
+                    "line": 599,
                     "type": "EventEmitter"
                 },
                 {
@@ -53904,7 +54124,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits when table requires more data to be loaded.\n",
                     "description": "<p>Emits when table requires more data to be loaded.</p>\n",
-                    "line": 596,
+                    "line": 604,
                     "type": "EventEmitter"
                 },
                 {
@@ -53916,15 +54136,15 @@
                     "description": "<p>Emits if all rows are selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17107,
-                            "end": 17122,
+                            "pos": 17382,
+                            "end": 17397,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 348,
                             "tagName": {
-                                "pos": 17108,
-                                "end": 17113,
+                                "pos": 17383,
+                                "end": 17388,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53933,8 +54153,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 17114,
-                                "end": 17119,
+                                "pos": 17389,
+                                "end": 17394,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53945,7 +54165,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 565,
+                    "line": 573,
                     "type": "EventEmitter"
                 },
                 {
@@ -53957,15 +54177,15 @@
                     "description": "<p>Emits if a single row is selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17352,
-                            "end": 17408,
+                            "pos": 17627,
+                            "end": 17683,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 348,
                             "tagName": {
-                                "pos": 17353,
-                                "end": 17358,
+                                "pos": 17628,
+                                "end": 17633,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53974,8 +54194,8 @@
                             },
                             "comment": "<p>({model: this.model, selectedRowIndex: index})</p>\n",
                             "name": {
-                                "pos": 17359,
-                                "end": 17359,
+                                "pos": 17634,
+                                "end": 17634,
                                 "flags": 17104896,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53986,7 +54206,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 579,
+                    "line": 587,
                     "type": "EventEmitter"
                 },
                 {
@@ -53998,15 +54218,15 @@
                     "description": "<p>Emits an index of the column that wants to be sorted.</p>\n<p>If no observers are provided (default), table will attempt to do a simple sort of the data loaded\ninto the model.</p>\n<p>If an observer is provided, table will not attempt any sorting of its own and it is up to the observer\nto sort the table. This is what you typically want if you&#39;re using a backend query to get the sorted\ndata or want to sort data across multiple pages.</p>\n<p>Usage:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">&#64;Component({\n    selector: &quot;app-table&quot;,\n    template: `\n        &lt;cds-table\n            [model]=&quot;model&quot;\n            (sort)=&quot;simpleSort($event)&quot;&gt;\n            No data.\n        &lt;/cds-table&gt;\n    `\n})\nexport class TableApp implements OnInit, OnChanges {\n    &#64;Input() model = new TableModel();\n\n    ngOnInit() {\n        this.model.header = [\n            new TableHeaderItem({ data: &quot;Name&quot; }),\n            new TableHeaderItem({ data: &quot;hwer&quot; })\n        ];\n\n        this.model.data = [\n            [new TableItem({ data: &quot;Name 1&quot; }), new TableItem({ data: &quot;qwer&quot; })],\n            [new TableItem({ data: &quot;Name 3&quot; }), new TableItem({ data: &quot;zwer&quot; })],\n            [new TableItem({ data: &quot;Name 2&quot; }), new TableItem({ data: &quot;swer&quot; })],\n            [new TableItem({ data: &quot;Name 4&quot; }), new TableItem({data: &quot;twer&quot;})],\n            [new TableItem({ data: &quot;Name 5&quot; }), new TableItem({data: &quot;twer&quot;})],\n            [new TableItem({ data: &quot;Name 6&quot; }), new TableItem({data: &quot;twer&quot;})]\n        ];\n    }\n\n    simpleSort(index: number) {\n        // this function does a simple sort, which is the default for the table and if that&#39;s\n        // all you want, you don&#39;t need to do this.\n\n        // here you can query your backend and update the model.data based on the result\n        if (this.model.header[index].sorted) {\n            // if already sorted flip sorting direction\n            this.model.header[index].ascending = this.model.header[index].descending;\n        }\n        this.model.sort(index);\n    }\n}</code></pre></div>",
                     "jsdoctags": [
                         {
-                            "pos": 15569,
-                            "end": 15814,
+                            "pos": 15844,
+                            "end": 16089,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 15570,
-                                "end": 15579,
+                                "pos": 15845,
+                                "end": 15854,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -54016,15 +54236,15 @@
                             "comment": "<p>({\nselector: &quot;app-table&quot;,\ntemplate: <code>&lt;cds-table [model]=&quot;model&quot; (sort)=&quot;simpleSort($event)&quot;&gt; No data. &lt;/cds-table&gt;</code>\n})\nexport class TableApp implements OnInit, OnChanges {</p>\n"
                         },
                         {
-                            "pos": 15814,
-                            "end": 17008,
+                            "pos": 16089,
+                            "end": 17283,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 15815,
-                                "end": 15820,
+                                "pos": 16090,
+                                "end": 16095,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -54034,7 +54254,7 @@
                             "comment": "<p>() model = new TableModel();</p>\n<p>ngOnInit() {\nthis.model.header = [\nnew TableHeaderItem({ data: &quot;Name&quot; }),\nnew TableHeaderItem({ data: &quot;hwer&quot; })\n];</p>\n<p>this.model.data = [\n[new TableItem({ data: &quot;Name 1&quot; }), new TableItem({ data: &quot;qwer&quot; })],\n[new TableItem({ data: &quot;Name 3&quot; }), new TableItem({ data: &quot;zwer&quot; })],\n[new TableItem({ data: &quot;Name 2&quot; }), new TableItem({ data: &quot;swer&quot; })],\n[new TableItem({ data: &quot;Name 4&quot; }), new TableItem({data: &quot;twer&quot;})],\n[new TableItem({ data: &quot;Name 5&quot; }), new TableItem({data: &quot;twer&quot;})],\n[new TableItem({ data: &quot;Name 6&quot; }), new TableItem({data: &quot;twer&quot;})]\n];\n}</p>\n<p>simpleSort(index: number) {\n// this function does a simple sort, which is the default for the table and if that&#39;s\n// all you want, you don&#39;t need to do this.</p>\n<p>// here you can query your backend and update the model.data based on the result\nif (this.model.header[index].sorted) {\n// if already sorted flip sorting direction\nthis.model.header[index].ascending = this.model.header[index].descending;\n}\nthis.model.sort(index);\n}\n}\n```</p>\n"
                         }
                     ],
-                    "line": 558,
+                    "line": 566,
                     "type": "EventEmitter"
                 }
             ],
@@ -54047,7 +54267,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 615,
+                    "line": 623,
                     "modifierKind": [
                         125
                     ]
@@ -54060,7 +54280,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 616,
+                    "line": 624,
                     "modifierKind": [
                         125
                     ]
@@ -54073,7 +54293,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 614,
+                    "line": 622,
                     "modifierKind": [
                         125
                     ]
@@ -54086,7 +54306,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Controls if all checkboxes are viewed as selected.</p>\n",
-                    "line": 601,
+                    "line": 609,
                     "rawdescription": "\n\nControls if all checkboxes are viewed as selected.\n"
                 },
                 {
@@ -54097,7 +54317,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Controls the indeterminate state of the header checkbox.</p>\n",
-                    "line": 606,
+                    "line": 614,
                     "rawdescription": "\n\nControls the indeterminate state of the header checkbox.\n"
                 },
                 {
@@ -54108,7 +54328,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Allows table content to scroll horizontally</p>\n",
-                    "line": 478,
+                    "line": 486,
                     "rawdescription": "\n\nAllows table content to scroll horizontally\n",
                     "decorators": [
                         {
@@ -54141,7 +54361,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 817,
+                    "line": 825,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54190,7 +54410,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 822,
+                    "line": 830,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54248,7 +54468,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 827,
+                    "line": 835,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54306,7 +54526,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 831,
+                    "line": 839,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54358,7 +54578,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 811,
+                    "line": 819,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54407,7 +54627,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 839,
+                    "line": 847,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54459,7 +54679,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 792,
+                    "line": 800,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54502,7 +54722,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 787,
+                    "line": 795,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54545,7 +54765,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 774,
+                    "line": 782,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54575,7 +54795,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 702,
+                    "line": 710,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54592,7 +54812,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 850,
+                    "line": 858,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54613,7 +54833,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 672,
+                    "line": 680,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54630,7 +54850,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 291,
+                    "line": 294,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -54654,7 +54874,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 886,
+                    "line": 894,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54664,7 +54884,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 890,
+                    "line": 898,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54674,7 +54894,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 894,
+                    "line": 902,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54684,7 +54904,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 876,
+                    "line": 884,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54694,7 +54914,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 902,
+                    "line": 910,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54704,7 +54924,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 898,
+                    "line": 906,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54721,7 +54941,7 @@
                     "optional": false,
                     "returnType": "{ value: any; }",
                     "typeParameters": [],
-                    "line": 869,
+                    "line": 877,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54742,7 +54962,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 882,
+                    "line": 890,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54752,7 +54972,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 879,
+                    "line": 887,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54762,7 +54982,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 718,
+                    "line": 726,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54779,7 +54999,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 737,
+                    "line": 745,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54807,7 +55027,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 801,
+                    "line": 809,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggered when the user scrolls on the `<tbody>` element.\nEmits the `scrollLoad` event.\n",
@@ -54830,7 +55050,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 713,
+                    "line": 721,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -54847,7 +55067,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 723,
+                    "line": 731,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54876,7 +55096,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 757,
+                    "line": 765,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -54905,7 +55125,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 864,
+                    "line": 872,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggered when the user scrolls on the `<tbody>` element.\nEmits the `scrollLoad` event.\n",
@@ -54941,7 +55161,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 280,
+                    "line": 283,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -54987,7 +55207,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 261,
+                    "line": 264,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates a skeleton model with a row and column count specified by the user\n\nExample:\n\n```typescript\nthis.model = Table.skeletonModel(5, 5);\n```\n",
@@ -55022,7 +55242,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 741,
+                    "line": 749,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -55037,7 +55257,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAllows table content to scroll horizontally\n",
                     "description": "<p>Allows table content to scroll horizontally</p>\n",
-                    "line": 478,
+                    "line": 486,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -55048,7 +55268,7 @@
             "description": "<p>Build your table with this component by extending things that differ from default.</p>\n<p><a href=\"../../?path=/story/components-table--basic\">See demo</a></p>\n<p>Instead of the usual write-your-own-html approach you had with <code>&lt;table&gt;</code>,\ncarbon table uses model-view-controller approach.</p>\n<p>Here, you create a view (with built-in controller) and provide it a model.\nChanges you make to the model are reflected in the view. Provide same model you use\nin the table to the <code>&lt;cds-pagination&gt;</code> components.\nThey provide a different view over the same data.</p>\n<h2>Basic usage</h2>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-table [model]=&quot;model&quot;&gt;&lt;/cds-table&gt;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">public model = new TableModel();\n\nthis.model.data = [\n    [new TableItem({data: &quot;asdf&quot;}), new TableItem({data: &quot;qwer&quot;})],\n    [new TableItem({data: &quot;csdf&quot;}), new TableItem({data: &quot;zwer&quot;})],\n    [new TableItem({data: &quot;bsdf&quot;}), new TableItem({data: &quot;swer&quot;})],\n    [new TableItem({data: &quot;csdf&quot;}), new TableItem({data: &quot;twer&quot;})]\n];</code></pre></div><h2>Customization</h2>\n<p>If you have custom data in your table, you need a way to display it. You can do that\nby providing a template to <code>TableItem</code>.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ng-template #customTableItemTemplate let-data=&quot;data&quot;&gt;\n    &lt;a [routerLink]=&quot;data.link&quot;&gt;{{data.name}} {{data.surname}}&lt;/a&gt;\n&lt;/ng-template&gt;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">customTableItemTemplate: TemplateRef&lt;any&gt;;\n\nthis.customModel.data = [\n    [new TableItem({data: &quot;asdf&quot;}), new TableItem({data: {name: &quot;Lessy&quot;, link: &quot;/table&quot;}, template: this.customTableItemTemplate})],\n    [new TableItem({data: &quot;csdf&quot;}), new TableItem({data: &quot;swer&quot;})],\n    [new TableItem({data: &quot;bsdf&quot;}), new TableItem({data: {name: &quot;Alice&quot;, surname: &quot;Bob&quot;}, template: this.customTableItemTemplate})],\n    [new TableItem({data: &quot;csdf&quot;}), new TableItem({data: &quot;twer&quot;})],\n];</code></pre></div><h3>Sorting and filtering</h3>\n<p>In case you need custom sorting and/or filtering you should subclass <code>TableHeaderItem</code>\nand override needed functions.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">class FilterableHeaderItem extends TableHeaderItem {\n    // custom filter function\n    filter(item: TableItem): boolean {\n        if (typeof item.data === &quot;string&quot; &amp;&amp; item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) &gt;= 0 ||\n        item.data.name &amp;&amp; item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) &gt;= 0 ||\n        item.data.surname &amp;&amp; item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) &gt;= 0) {\n            return false;\n        }\n        return true;\n    }\n\n    set filterCount(n) {}\n    get filterCount() {\n        return (this.filterData &amp;&amp; this.filterData.data &amp;&amp; this.filterData.data.length &gt; 0) ? 1 : 0;\n    }\n\n    // used for custom sorting\n    compare(one: TableItem, two: TableItem) {\n        const stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n        const stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n        if (stringOne &gt; stringTwo) {\n            return 1;\n        } else if (stringOne &lt; stringTwo) {\n            return -1;\n        } else {\n            return 0;\n        }\n    }\n}</code></pre></div><p>If you want to do your sorting on the backend or query for sorted data as a result of user\nclicking the table header, check table <a href=\"#sort\"><code>sort</code></a> output documentation</p>\n<p>See <code>TableHeaderItem</code> class for more information.</p>\n<h2>No data template</h2>\n<p>When table has no data to show, it can show a message you provide it instead.</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-table [model]=&quot;model&quot;&gt;No data.&lt;/cds-table&gt;</code></pre></div><p>... will show <code>No data.</code> message, but you can get creative and provide any template you want\nto replace table&#39;s default <code>tbody</code>.</p>\n<h2>Use pagination as table footer</h2>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-pagination [model]=&quot;model&quot; (selectPage)=&quot;selectPage($event)&quot;&gt;&lt;/cds-pagination&gt;</code></pre></div><p><code>selectPage()</code> function should fetch the data from backend, create new <code>data</code>, apply it to <code>model.data</code>,\nand update <code>model.currentPage</code>.</p>\n<p>If the data your server returns is a two dimensional array of objects, it would look something like this:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">selectPage(page) {\n    this.getPage(page).then((data: Array&lt;Array&lt;any&gt;&gt;) =&gt; {\n        // set the data and update page\n        this.model.data = this.prepareData(data);\n        this.model.currentPage = page;\n    });\n}\n\nprotected prepareData(data: Array&lt;Array&lt;any&gt;&gt;) {\n    // create new data from the service data\n    let newData = [];\n    data.forEach(dataRow =&gt; {\n        let row = [];\n        dataRow.forEach(dataElement =&gt; {\n            row.push(new TableItem({\n                data: dataElement,\n                template: typeof dataElement === &quot;string&quot; ? undefined : this.paginationTableItemTemplate\n                // your template can handle all the data types so you don&#39;t have to conditionally set it\n                // you can also set different templates for different columns based on index\n            }));\n        });\n        newData.push(row);\n    });\n    return newData;\n}</code></pre></div>",
             "rawdescription": "\n\nBuild your table with this component by extending things that differ from default.\n\n[See demo](../../?path=/story/components-table--basic)\n\nInstead of the usual write-your-own-html approach you had with `<table>`,\ncarbon table uses model-view-controller approach.\n\nHere, you create a view (with built-in controller) and provide it a model.\nChanges you make to the model are reflected in the view. Provide same model you use\nin the table to the `<cds-pagination>` components.\nThey provide a different view over the same data.\n\n## Basic usage\n\n```html\n<cds-table [model]=\"model\"></cds-table>\n```\n\n```typescript\npublic model = new TableModel();\n\nthis.model.data = [\n\t[new TableItem({data: \"asdf\"}), new TableItem({data: \"qwer\"})],\n\t[new TableItem({data: \"csdf\"}), new TableItem({data: \"zwer\"})],\n\t[new TableItem({data: \"bsdf\"}), new TableItem({data: \"swer\"})],\n\t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})]\n];\n```\n\n## Customization\n\nIf you have custom data in your table, you need a way to display it. You can do that\nby providing a template to `TableItem`.\n\n```html\n<ng-template #customTableItemTemplate let-data=\"data\">\n\t<a [routerLink]=\"data.link\">{{data.name}} {{data.surname}}</a>\n</ng-template>\n```\n\n```typescript\ncustomTableItemTemplate: TemplateRef<any>;\n\nthis.customModel.data = [\n\t[new TableItem({data: \"asdf\"}), new TableItem({data: {name: \"Lessy\", link: \"/table\"}, template: this.customTableItemTemplate})],\n\t[new TableItem({data: \"csdf\"}), new TableItem({data: \"swer\"})],\n\t[new TableItem({data: \"bsdf\"}), new TableItem({data: {name: \"Alice\", surname: \"Bob\"}, template: this.customTableItemTemplate})],\n\t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})],\n];\n```\n\n### Sorting and filtering\n\nIn case you need custom sorting and/or filtering you should subclass `TableHeaderItem`\nand override needed functions.\n\n```typescript\nclass FilterableHeaderItem extends TableHeaderItem {\n\t// custom filter function\n\tfilter(item: TableItem): boolean {\n\t\tif (typeof item.data === \"string\" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n\t\titem.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n\t\titem.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t}\n\n\tset filterCount(n) {}\n\tget filterCount() {\n\t\treturn (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;\n\t}\n\n\t// used for custom sorting\n\tcompare(one: TableItem, two: TableItem) {\n\t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n\t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n\t\tif (stringOne > stringTwo) {\n\t\t\treturn 1;\n\t\t} else if (stringOne < stringTwo) {\n\t\t\treturn -1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n}\n```\n\nIf you want to do your sorting on the backend or query for sorted data as a result of user\nclicking the table header, check table [`sort`](#sort) output documentation\n\nSee `TableHeaderItem` class for more information.\n\n## No data template\n\nWhen table has no data to show, it can show a message you provide it instead.\n\n```html\n<cds-table [model]=\"model\">No data.</cds-table>\n```\n\n... will show `No data.` message, but you can get creative and provide any template you want\nto replace table's default `tbody`.\n\n## Use pagination as table footer\n\n```html\n<cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n```\n\n`selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,\nand update `model.currentPage`.\n\nIf the data your server returns is a two dimensional array of objects, it would look something like this:\n\n```typescript\nselectPage(page) {\n\tthis.getPage(page).then((data: Array<Array<any>>) => {\n\t\t// set the data and update page\n\t\tthis.model.data = this.prepareData(data);\n\t\tthis.model.currentPage = page;\n\t});\n}\n\nprotected prepareData(data: Array<Array<any>>) {\n\t// create new data from the service data\n\tlet newData = [];\n\tdata.forEach(dataRow => {\n\t\tlet row = [];\n\t\tdataRow.forEach(dataElement => {\n\t\t\trow.push(new TableItem({\n\t\t\t\tdata: dataElement,\n\t\t\t\ttemplate: typeof dataElement === \"string\" ? undefined : this.paginationTableItemTemplate\n\t\t\t\t// your template can handle all the data types so you don't have to conditionally set it\n\t\t\t\t// you can also set different templates for different columns based on index\n\t\t\t}));\n\t\t});\n\t\tnewData.push(row);\n\t});\n\treturn newData;\n}\n```\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tApplicationRef,\n\tInput,\n\tOnInit,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tAfterViewInit,\n\tTemplateRef,\n\tOnDestroy,\n\tHostBinding\n} from \"@angular/core\";\nimport { Subscription, fromEvent, Observable } from \"rxjs\";\n\nimport { TableModel } from \"./table-model.class\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\n\nimport { getFocusElementList, tabbableSelectorIgnoreTabIndex } from \"carbon-components-angular/common\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\nimport { DataGridInteractionModel } from \"./data-grid-interaction-model.class\";\nimport { TableDomAdapter } from \"./table-adapter.class\";\nimport { TableRowSize } from \"./table.types\";\n\n/**\n * Build your table with this component by extending things that differ from default.\n *\n * [See demo](../../?path=/story/components-table--basic)\n *\n * Instead of the usual write-your-own-html approach you had with `<table>`,\n * carbon table uses model-view-controller approach.\n *\n * Here, you create a view (with built-in controller) and provide it a model.\n * Changes you make to the model are reflected in the view. Provide same model you use\n * in the table to the `<cds-pagination>` components.\n * They provide a different view over the same data.\n *\n * ## Basic usage\n *\n * ```html\n * <cds-table [model]=\"model\"></cds-table>\n * ```\n *\n * ```typescript\n * public model = new TableModel();\n *\n * this.model.data = [\n * \t[new TableItem({data: \"asdf\"}), new TableItem({data: \"qwer\"})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"zwer\"})],\n * \t[new TableItem({data: \"bsdf\"}), new TableItem({data: \"swer\"})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})]\n * ];\n * ```\n *\n * ## Customization\n *\n * If you have custom data in your table, you need a way to display it. You can do that\n * by providing a template to `TableItem`.\n *\n * ```html\n * <ng-template #customTableItemTemplate let-data=\"data\">\n * \t<a [routerLink]=\"data.link\">{{data.name}} {{data.surname}}</a>\n * </ng-template>\n * ```\n *\n * ```typescript\n * customTableItemTemplate: TemplateRef<any>;\n *\n * this.customModel.data = [\n * \t[new TableItem({data: \"asdf\"}), new TableItem({data: {name: \"Lessy\", link: \"/table\"}, template: this.customTableItemTemplate})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"swer\"})],\n * \t[new TableItem({data: \"bsdf\"}), new TableItem({data: {name: \"Alice\", surname: \"Bob\"}, template: this.customTableItemTemplate})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})],\n * ];\n * ```\n *\n * ### Sorting and filtering\n *\n * In case you need custom sorting and/or filtering you should subclass `TableHeaderItem`\n * and override needed functions.\n *\n * ```typescript\n * class FilterableHeaderItem extends TableHeaderItem {\n * \t// custom filter function\n * \tfilter(item: TableItem): boolean {\n * \t\tif (typeof item.data === \"string\" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n * \t\titem.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n * \t\titem.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {\n * \t\t\treturn false;\n * \t\t}\n * \t\treturn true;\n * \t}\n *\n * \tset filterCount(n) {}\n * \tget filterCount() {\n * \t\treturn (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;\n * \t}\n *\n * \t// used for custom sorting\n * \tcompare(one: TableItem, two: TableItem) {\n * \t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n * \t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n *\n * \t\tif (stringOne > stringTwo) {\n * \t\t\treturn 1;\n * \t\t} else if (stringOne < stringTwo) {\n * \t\t\treturn -1;\n * \t\t} else {\n * \t\t\treturn 0;\n * \t\t}\n * \t}\n * }\n * ```\n *\n * If you want to do your sorting on the backend or query for sorted data as a result of user\n * clicking the table header, check table [`sort`](#sort) output documentation\n *\n * See `TableHeaderItem` class for more information.\n *\n * ## No data template\n *\n * When table has no data to show, it can show a message you provide it instead.\n *\n * ```html\n * <cds-table [model]=\"model\">No data.</cds-table>\n * ```\n *\n * ... will show `No data.` message, but you can get creative and provide any template you want\n * to replace table's default `tbody`.\n *\n * ## Use pagination as table footer\n *\n * ```html\n * <cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n * ```\n *\n * `selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,\n * and update `model.currentPage`.\n *\n * If the data your server returns is a two dimensional array of objects, it would look something like this:\n *\n * ```typescript\n * selectPage(page) {\n * \tthis.getPage(page).then((data: Array<Array<any>>) => {\n * \t\t// set the data and update page\n * \t\tthis.model.data = this.prepareData(data);\n * \t\tthis.model.currentPage = page;\n * \t});\n * }\n *\n * protected prepareData(data: Array<Array<any>>) {\n * \t// create new data from the service data\n * \tlet newData = [];\n * \tdata.forEach(dataRow => {\n * \t\tlet row = [];\n * \t\tdataRow.forEach(dataElement => {\n * \t\t\trow.push(new TableItem({\n * \t\t\t\tdata: dataElement,\n * \t\t\t\ttemplate: typeof dataElement === \"string\" ? undefined : this.paginationTableItemTemplate\n * \t\t\t\t// your template can handle all the data types so you don't have to conditionally set it\n * \t\t\t\t// you can also set different templates for different columns based on index\n * \t\t\t}));\n * \t\t});\n * \t\tnewData.push(row);\n * \t});\n * \treturn newData;\n * }\n * ```\n */\n@Component({\n\tselector: \"cds-table, ibm-table\",\n\ttemplate: `\n\t<table\n\t\tcdsTable\n\t\t[sortable]=\"sortable\"\n\t\t[noBorder]=\"noBorder\"\n\t\t[ngClass]=\"{'cds--data-table--sticky-header': stickyHeader}\"\n\t\t[size]=\"size\"\n\t\t[striped]=\"striped\"\n\t\t[skeleton]=\"skeleton\"\n\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t[attr.aria-describedby]=\"ariaDescribedby\">\n\t\t<thead\n\t\t\tcdsTableHead\n\t\t\t[sortable]=\"sortable\"\n\t\t\t(deselectAll)=\"onDeselectAll()\"\n\t\t\t(selectAll)=\"onSelectAll()\"\n\t\t\t(sort)=\"doSort($event)\"\n\t\t\t[checkboxHeaderLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t[model]=\"model\"\n\t\t\t[selectAllCheckbox]=\"selectAllCheckbox\"\n\t\t\t[selectAllCheckboxSomeSelected]=\"selectAllCheckboxSomeSelected\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[sortAscendingLabel]=\"sortAscendingLabel\"\n\t\t\t[sortDescendingLabel]=\"sortDescendingLabel\"\n\t\t\t[stickyHeader]=\"stickyHeader\">\n\t\t</thead>\n\t\t<tbody\n\t\t\tcdsTableBody\n\t\t\t(deselectRow)=\"onSelectRow($event)\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t\t(selectRow)=\"onSelectRow($event)\"\n\t\t\t[checkboxRowLabel]=\"getCheckboxRowLabel()\"\n\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t[expandButtonAriaLabel]=\"expandButtonAriaLabel\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[ngStyle]=\"{'overflow-y': 'scroll'}\"\n\t\t\t[selectionLabelColumn]=\"selectionLabelColumn\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t*ngIf=\"!noData; else noDataTemplate\">\n\t\t</tbody>\n\t\t<ng-template #noDataTemplate><ng-content></ng-content></ng-template>\n\t\t<tfoot>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"footerTemplate\">\n\t\t\t</ng-template>\n\t\t\t<tr *ngIf=\"this.model.isLoading\">\n\t\t\t\t<td class=\"table_loading-indicator\">\n\t\t\t\t\t<div class=\"cds--loading cds--loading--small\">\n\t\t\t\t\t\t<svg class=\"cds--loading__svg\" viewBox=\"-75 -75 150 150\">\n\t\t\t\t\t\t\t<circle class=\"cds--loading__stroke\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t\t<tr *ngIf=\"this.model.isEnd\">\n\t\t\t\t<td class=\"table_end-indicator\">\n\t\t\t\t\t<h5>{{getEndOfDataText() | async}}</h5>\n\t\t\t\t\t<button (click)=\"scrollToTop($event)\" class=\"btn--secondary-sm\">\n\t\t\t\t\t\t{{getScrollTopText() | async}}\n\t\t\t\t\t</button>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tfoot>\n\t</table>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`]\n})\nexport class Table implements OnInit, AfterViewInit, OnDestroy {\n\t/**\n\t * Creates a skeleton model with a row and column count specified by the user\n\t *\n\t * Example:\n\t *\n\t * ```typescript\n\t * this.model = Table.skeletonModel(5, 5);\n\t * ```\n\t */\n\tstatic skeletonModel(rowCount: number, columnCount: number) {\n\t\tconst model = new TableModel();\n\t\tlet header = new Array<TableHeaderItem>();\n\t\tlet data = new Array<Array<TableItem>>();\n\t\tlet row = new Array<TableItem>();\n\n\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\theader.push(new TableHeaderItem());\n\t\t\trow.push(new TableItem());\n\t\t}\n\t\tfor (let i = 0; i < rowCount - 1; i++) {\n\t\t\tdata.push(row);\n\t\t}\n\n\t\tmodel.header = header;\n\t\tmodel.data = data;\n\t\treturn model;\n\t}\n\n\tstatic setTabIndex(element: HTMLElement, index: -1 | 0) {\n\t\tconst focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);\n\t\tif (element.firstElementChild && element.firstElementChild.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) {\n\t\t\tfocusElementList[1].tabIndex = index;\n\t\t} else if (focusElementList.length > 0) {\n\t\t\tfocusElementList[0].tabIndex = index;\n\t\t} else {\n\t\t\telement.tabIndex = index;\n\t\t}\n\t}\n\n\tstatic focus(element: HTMLElement) {\n\t\tconst focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);\n\t\tif (\n\t\t\t(element.firstElementChild?.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) ||\n\t\t\tfocusElementList.length > 0\n\t\t) {\n\t\t\tfocusElementList[0].focus();\n\t\t} else {\n\t\t\telement.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Id of the table header title element\n\t */\n\t@Input() ariaLabelledby: string;\n\t/**\n\t * Id of the table header description element\n\t */\n\t@Input() ariaDescribedby: string;\n\n\t/**\n\t * `TableModel` with data the table is to display.\n\t */\n\t@Input()\n\tset model(m: TableModel) {\n\t\tif (this._model) {\n\t\t\tthis.subscriptions.unsubscribe();\n\t\t\t// Need to create a new subscription instance here because unsubscribing prevents any new subscriptions\n\t\t\t// from being added for some reason. When a new model is set, none of the subscriptions would exist.\n\t\t\tthis.subscriptions = new Subscription();\n\t\t}\n\n\t\tthis._model = m;\n\n\t\tconst rowsChange = this._model.rowsSelectedChange.subscribe(() => this.updateSelectAllCheckbox());\n\t\tconst dataChange = this._model.dataChange.subscribe(() => {\n\t\t\tif (this.isDataGrid) {\n\t\t\t\tthis.resetTabIndex();\n\t\t\t}\n\t\t\tthis.updateSelectAllCheckbox();\n\t\t});\n\n\t\tthis.subscriptions.add(rowsChange);\n\t\tthis.subscriptions.add(dataChange);\n\n\t\tif (this.isDataGrid) {\n\t\t\tconst expandedChange = this._model.rowsExpandedChange.subscribe(() => {\n\t\t\t\t// Allows the expanded row to have a focus state when it exists in the DOM\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tconst expandedRows = this.elementRef.nativeElement.querySelectorAll(\".cds--expandable-row:not(.cds--parent-row)\");\n\t\t\t\t\tArray.from<any>(expandedRows).forEach(row => {\n\t\t\t\t\t\tif (row.firstElementChild.tabIndex === undefined || row.firstElementChild.tabIndex !== -1) {\n\t\t\t\t\t\t\trow.firstElementChild.tabIndex = -1;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.subscriptions.add(expandedChange);\n\t\t}\n\t}\n\n\tget model(): TableModel {\n\t\treturn this._model;\n\t}\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for a data grid with keyboard interactions.\n\t */\n\t@Input() set isDataGrid(value: boolean) {\n\t\tthis._isDataGrid = value;\n\t\tif (this.isViewReady) {\n\t\t\tif (value) {\n\t\t\t\tthis.enableDataGridInteractions();\n\t\t\t} else {\n\t\t\t\tthis.disableDataGridInteractions();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input() noBorder = true;\n\n\tget isDataGrid(): boolean {\n\t\treturn this._isDataGrid;\n\t}\n\n\t/**\n\t * Controls whether to show the selection checkboxes column or not.\n\t */\n\t@Input() showSelectionColumn = true;\n\n\t/**\n\t * Controls whether to enable multiple or single row selection.\n\t */\n\t@Input() enableSingleSelect = false;\n\n\t/**\n\t * Distance (in px) from the bottom that view has to reach before\n\t * `scrollLoad` event is emitted.\n\t */\n\t@Input() scrollLoadDistance = 0;\n\n\t/**\n\t * @todo - Enable column resize when Carbon officially supports feature\n\t * Set to `true` to enable users to resize columns.\n\t *\n\t * Works for columns with width set in pixels.\n\t *\n\t */\n\t// @Input() columnsResizable = false;\n\n\t/**\n\t * @todo - Enable columns drag & drop when Carbon officially supports feature\n\t * Set to `true` to enable users to drag and drop columns.\n\t *\n\t * Changing the column order in table changes table model. Be aware of it when you add additional data\n\t * to the model.\n\t *\n\t */\n\t// @Input() columnsDraggable = false;\n\n\t@Input()\n\tset expandButtonAriaLabel(value: string | Observable<string>) {\n\t\tthis._expandButtonAriaLabel.override(value);\n\t}\n\tget expandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.value;\n\t}\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable<string>) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable<string>) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"FILTER\": \"Filter\",\n\t *\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t *\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t *\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t *\t\t\"CHECKBOX_ROW\": \"Select row\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TABLE\"), value);\n\t\tthis._filterTitle.override(valueWithDefaults.FILTER);\n\t\tthis._endOfDataText.override(valueWithDefaults.END_OF_DATA);\n\t\tthis._scrollTopText.override(valueWithDefaults.SCROLL_TOP);\n\t\tthis._checkboxHeaderLabel.override(valueWithDefaults.CHECKBOX_HEADER);\n\t\tthis._checkboxRowLabel.override(valueWithDefaults.CHECKBOX_ROW);\n\t}\n\n\t/**\n\t * Set to `false` to remove table rows (zebra) stripes.\n\t */\n\t@Input() striped = true;\n\n\t/**\n\t * Allows table content to scroll horizontally\n\t */\n\t@HostBinding(\"class.cds--data-table-content\") tableContent = true;\n\n\t/**\n\t * Set to `true` to stick the header to the top of the table\n\t */\n\t@HostBinding(\"class.cds--data-table_inner-container\") @Input() stickyHeader = false;\n\n\t/**\n\t * Set footer template to customize what is displayed in the tfoot section of the table\n\t */\n\t@Input() footerTemplate: TemplateRef<any>;\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * <cds-table [selectionLabelColumn]=\"0\"></cds-table>\n\t * <!-- results in aria-label=\"Select first column value\"\n\t * (where \"first column value\" is the value of the first column in the row -->\n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t *\n\t * If no observers are provided (default), table will attempt to do a simple sort of the data loaded\n\t * into the model.\n\t *\n\t * If an observer is provided, table will not attempt any sorting of its own and it is up to the observer\n\t * to sort the table. This is what you typically want if you're using a backend query to get the sorted\n\t * data or want to sort data across multiple pages.\n\t *\n\t * Usage:\n\t *\n\t * ```typescript\n\t * @Component({\n\t * \tselector: \"app-table\",\n\t * \ttemplate: `\n\t * \t\t<cds-table\n\t * \t\t\t[model]=\"model\"\n\t * \t\t\t(sort)=\"simpleSort($event)\">\n\t * \t\t\tNo data.\n\t * \t\t</cds-table>\n\t * \t`\n\t * })\n\t * export class TableApp implements OnInit, OnChanges {\n\t * \t@Input() model = new TableModel();\n\t *\n\t * \tngOnInit() {\n\t * \t\tthis.model.header = [\n\t * \t\t\tnew TableHeaderItem({ data: \"Name\" }),\n\t * \t\t\tnew TableHeaderItem({ data: \"hwer\" })\n\t * \t\t];\n\t *\n\t * \t\tthis.model.data = [\n\t * \t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: \"qwer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"zwer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: \"swer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({data: \"twer\"})],\n\t * \t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t * \t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})]\n\t * \t\t];\n\t * \t}\n\t *\n\t * \tsimpleSort(index: number) {\n\t * \t\t// this function does a simple sort, which is the default for the table and if that's\n\t * \t\t// all you want, you don't need to do this.\n\t *\n\t * \t\t// here you can query your backend and update the model.data based on the result\n\t * \t\tif (this.model.header[index].sorted) {\n\t * \t\t\t// if already sorted flip sorting direction\n\t * \t\t\tthis.model.header[index].ascending = this.model.header[index].descending;\n\t * \t\t}\n\t * \t\tthis.model.sort(index);\n\t * \t}\n\t * }\n\t * ```\n\t */\n\t@Output() sort = new EventEmitter<number>();\n\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a single row is selected.\n\t *\n\t * @param ({model: this.model, selectedRowIndex: index})\n\t */\n\t@Output() selectRow = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a single row is deselected.\n\t *\n\t * @param ({model: this.model, deselectedRowIndex: index})\n\t */\n\t@Output() deselectRow = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n\t */\n\t@Output() rowClick = new EventEmitter<number>();\n\n\t/**\n\t * Emits when table requires more data to be loaded.\n\t */\n\t@Output() scrollLoad = new EventEmitter<TableModel>();\n\n\t/**\n\t * Controls if all checkboxes are viewed as selected.\n\t */\n\tselectAllCheckbox = false;\n\n\t/**\n\t * Controls the indeterminate state of the header checkbox.\n\t */\n\tselectAllCheckboxSomeSelected = false;\n\n\tget noData() {\n\t\treturn !this.model.data ||\n\t\t\tthis.model.data.length === 0 ||\n\t\t\tthis.model.data.length === 1 && this.model.data[0].length === 0;\n\t}\n\n\tpublic isColumnDragging = false;\n\tpublic columnDraggedHoverIndex = -1;\n\tpublic columnDraggedPosition = \"\";\n\n\tprotected _model: TableModel;\n\tprotected _isDataGrid = false;\n\t// flag to prevent getters/setters from querying the view before it's fully instantiated\n\tprotected isViewReady = false;\n\n\tprotected subscriptions = new Subscription();\n\tprotected positionSubscription: Subscription;\n\n\tprotected interactionModel: DataGridInteractionModel;\n\tprotected interactionPositionSubscription: Subscription;\n\n\tprotected _expandButtonAriaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_BUTTON\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _checkboxRowLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\tprotected _endOfDataText = this.i18n.getOverridable(\"TABLE.END_OF_DATA\");\n\tprotected _scrollTopText = this.i18n.getOverridable(\"TABLE.SCROLL_TOP\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tprotected columnResizeWidth: number;\n\tprotected columnResizeMouseX: number;\n\tprotected mouseMoveSubscription: Subscription;\n\tprotected mouseUpSubscription: Subscription;\n\n\t/**\n\t * Creates an instance of Table.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected applicationRef: ApplicationRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// Manually trigger check to see if all checkboxes are selected\n\t\t// This is since subscription is made AFTER checkboxes are selected\n\t\tthis.updateSelectAllCheckbox();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.isViewReady = true;\n\t\tif (this.isDataGrid) {\n\t\t\tthis.enableDataGridInteractions();\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t\tif (this.positionSubscription) {\n\t\t\tthis.positionSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tenableDataGridInteractions() {\n\t\t// if we have an `interactioModel` we've already enabled datagrid\n\t\tif (this.interactionModel) {\n\t\t\treturn;\n\t\t}\n\t\tconst table = this.elementRef.nativeElement.querySelector(\"table\") as HTMLTableElement;\n\t\tconst tableAdapter = new TableDomAdapter(table);\n\t\tconst keydownEventStream = fromEvent<KeyboardEvent>(table, \"keydown\");\n\t\tconst clickEventStream = fromEvent<MouseEvent>(table, \"click\");\n\t\tthis.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);\n\t\tthis.positionSubscription = this.interactionModel.position.subscribe(event => {\n\t\t\tconst [currentRow, currentColumn] = event.current;\n\t\t\tconst [previousRow, previousColumn] = event.previous;\n\n\t\t\tconst currentElement = tableAdapter.getCell(currentRow, currentColumn);\n\t\t\tTable.setTabIndex(currentElement, 0);\n\n\t\t\t// if the model has just initialized don't focus or reset anything\n\t\t\tif (previousRow === -1 || previousColumn === -1) { return; }\n\t\t\t// Make the previous cell unfocusable (if it's not the current)\n\t\t\tif (previousRow !== currentRow || previousColumn !== currentColumn) {\n\t\t\t\tconst previousElement = tableAdapter.getCell(previousRow, previousColumn);\n\t\t\t\tTable.setTabIndex(previousElement, -1);\n\t\t\t}\n\t\t\tTable.focus(currentElement);\n\t\t});\n\t\t// call this after assigning `this.interactionModel` since it depends on it\n\t\tthis.resetTabIndex();\n\t}\n\n\tdisableDataGridInteractions() {\n\t\t// unsubscribe first so we don't cause the focus to fly around\n\t\tif (this.positionSubscription) {\n\t\t\tthis.positionSubscription.unsubscribe();\n\t\t}\n\t\t// undo tab indexing (also resets the model)\n\t\tthis.resetTabIndex(0);\n\t\t// null out the model ref\n\t\tthis.interactionModel = null;\n\t}\n\n\tonSelectAll() {\n\t\tthis.model.selectAll(true);\n\t\tthis.selectAll.emit(this.model);\n\t}\n\n\tonDeselectAll() {\n\t\tthis.model.selectAll(false);\n\t\tthis.deselectAll.emit(this.model);\n\t}\n\n\tonSelectRow(event) {\n\t\t// check for the existence of the selectedRowIndex property\n\t\tif (Object.keys(event).includes(\"selectedRowIndex\")) {\n\t\t\tif (this.enableSingleSelect) {\n\t\t\t\tthis.model.selectAll(false);\n\t\t\t}\n\t\t\tthis.model.selectRow(event.selectedRowIndex, true);\n\t\t\tthis.selectRow.emit(event);\n\t\t} else {\n\t\t\tthis.model.selectRow(event.deselectedRowIndex, false);\n\t\t\tthis.deselectRow.emit(event);\n\t\t}\n\t}\n\n\tonRowClick(index: number) {\n\t\tthis.rowClick.emit(index);\n\t}\n\n\tupdateSelectAllCheckbox() {\n\t\tconst selectedRowsCount = this.model.selectedRowsCount();\n\n\t\tif (selectedRowsCount <= 0) {\n\t\t\t// reset select all checkbox if nothing selected\n\t\t\tthis.selectAllCheckbox = false;\n\t\t\tthis.selectAllCheckboxSomeSelected = false;\n\t\t} else if (selectedRowsCount < this.model.data.length) {\n\t\t\tthis.selectAllCheckbox = true;\n\t\t\tthis.selectAllCheckboxSomeSelected = true;\n\t\t} else {\n\t\t\tthis.selectAllCheckbox = true;\n\t\t\tthis.selectAllCheckboxSomeSelected = false;\n\t\t}\n\t}\n\n\tresetTabIndex(newTabIndex = -1) {\n\t\t// ensure the view is ready for the reset before we preform the actual reset\n\t\tsetTimeout(() => {\n\t\t\t// reset all the tabIndexes we can find\n\t\t\tconst focusElementList = getFocusElementList(this.elementRef.nativeElement, tabbableSelectorIgnoreTabIndex);\n\t\t\tif (focusElementList) {\n\t\t\t\tfocusElementList.forEach(tabbable => {\n\t\t\t\t\ttabbable.tabIndex = newTabIndex;\n\t\t\t\t});\n\t\t\t}\n\t\t\t// reset interaction model positions and tabIndexes\n\t\t\tif (this.interactionModel) {\n\t\t\t\tthis.interactionModel.resetTabIndexes(newTabIndex);\n\t\t\t}\n\t\t});\n\t}\n\n\tcolumnResizeStart(event, column) {\n\t\tthis.columnResizeWidth = parseInt(column.style.width, 10);\n\t\tthis.columnResizeMouseX = event.clientX;\n\t\tevent.preventDefault();\n\n\t\tthis.mouseMoveSubscription = fromEvent(document.body, \"mousemove\").subscribe(event => {\n\t\t\tthis.columnResizeProgress(event, column);\n\t\t});\n\t\tthis.mouseUpSubscription = fromEvent(document.body, \"mouseup\").subscribe(event => {\n\t\t\tthis.columnResizeEnd(event, column);\n\t\t});\n\t}\n\n\tcolumnResizeProgress(event, column) {\n\t\tconst move = event.clientX - this.columnResizeMouseX;\n\t\tcolumn.style.width = `${this.columnResizeWidth + move}px`;\n\t}\n\n\tcolumnResizeEnd(event, column) {\n\t\tthis.mouseMoveSubscription.unsubscribe();\n\t\tthis.mouseUpSubscription.unsubscribe();\n\t}\n\n\t/**\n\t * Triggered when the user scrolls on the `<tbody>` element.\n\t * Emits the `scrollLoad` event.\n\t */\n\tonScroll(event) {\n\t\tconst distanceFromBottom = event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop;\n\n\t\tif (distanceFromBottom <= this.scrollLoadDistance) {\n\t\t\tthis.scrollLoad.emit(this.model);\n\t\t} else {\n\t\t\tthis.model.isEnd = false;\n\t\t}\n\t}\n\n\tcolumnDragStart(event, columnIndex) {\n\t\tthis.isColumnDragging = true;\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t\tevent.dataTransfer.setData(\"columnIndex\", JSON.stringify(columnIndex));\n\t}\n\n\tcolumnDragEnd(event, columnIndex) {\n\t\tthis.isColumnDragging = false;\n\t\tthis.columnDraggedHoverIndex = -1;\n\t}\n\n\tcolumnDragEnter(event, position, columnIndex) {\n\t\tthis.columnDraggedPosition = position;\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t}\n\n\tcolumnDragLeave(event, position, columnIndex) {\n\t\tthis.columnDraggedPosition = \"\";\n\t}\n\n\tcolumnDragover(event, position, columnIndex) {\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t\tthis.columnDraggedPosition = position;\n\n\t\t// needed to tell browser to allow dropping\n\t\tevent.preventDefault();\n\t}\n\n\tcolumnDrop(event, position, columnIndex) {\n\t\tthis.isColumnDragging = false;\n\t\tthis.columnDraggedHoverIndex = -1;\n\t\tthis.columnDraggedPosition = \"\";\n\n\t\tthis.model.moveColumn(\n\t\t\tparseInt(event.dataTransfer.getData(\"columnIndex\"), 10),\n\t\t\tcolumnIndex + (position === \"right\" ? 1 : 0)\n\t\t);\n\t}\n\n\tdoSort(index: number) {\n\t\tif (this.sort.observers.length === 0) {\n\t\t\t// no sort provided so do the simple sort\n\t\t\tthis.model.cycleSortState(index);\n\t\t\tthis.model.sort(index);\n\t\t}\n\n\t\tthis.sort.emit(index);\n\t}\n\n\t/**\n\t * Triggered when the user scrolls on the `<tbody>` element.\n\t * Emits the `scrollLoad` event.\n\t */\n\tscrollToTop(event) {\n\t\tevent.target.parentElement.parentElement.parentElement.parentElement.children[1].scrollTop = 0;\n\t\tthis.model.isEnd = false;\n\t}\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetExpandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.subject;\n\t}\n\tgetSortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\tgetSortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetCheckboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetCheckboxRowLabel() {\n\t\treturn this._checkboxRowLabel.subject;\n\t}\n\n\tgetEndOfDataText() {\n\t\treturn this._endOfDataText.subject;\n\t}\n\n\tgetScrollTopText() {\n\t\treturn this._scrollTopText.subject;\n\t}\n\n\tgetFilterTitle() {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tApplicationRef,\n\tInput,\n\tOnInit,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tAfterViewInit,\n\tTemplateRef,\n\tOnDestroy,\n\tHostBinding\n} from \"@angular/core\";\nimport { Subscription, fromEvent, Observable } from \"rxjs\";\n\nimport { TableModel } from \"./table-model.class\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\n\nimport { getFocusElementList, tabbableSelectorIgnoreTabIndex } from \"carbon-components-angular/common\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { merge } from \"carbon-components-angular/utils\";\nimport { DataGridInteractionModel } from \"./data-grid-interaction-model.class\";\nimport { TableDomAdapter } from \"./table-adapter.class\";\nimport { TableRowSize } from \"./table.types\";\n\n/**\n * Build your table with this component by extending things that differ from default.\n *\n * [See demo](../../?path=/story/components-table--basic)\n *\n * Instead of the usual write-your-own-html approach you had with `<table>`,\n * carbon table uses model-view-controller approach.\n *\n * Here, you create a view (with built-in controller) and provide it a model.\n * Changes you make to the model are reflected in the view. Provide same model you use\n * in the table to the `<cds-pagination>` components.\n * They provide a different view over the same data.\n *\n * ## Basic usage\n *\n * ```html\n * <cds-table [model]=\"model\"></cds-table>\n * ```\n *\n * ```typescript\n * public model = new TableModel();\n *\n * this.model.data = [\n * \t[new TableItem({data: \"asdf\"}), new TableItem({data: \"qwer\"})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"zwer\"})],\n * \t[new TableItem({data: \"bsdf\"}), new TableItem({data: \"swer\"})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})]\n * ];\n * ```\n *\n * ## Customization\n *\n * If you have custom data in your table, you need a way to display it. You can do that\n * by providing a template to `TableItem`.\n *\n * ```html\n * <ng-template #customTableItemTemplate let-data=\"data\">\n * \t<a [routerLink]=\"data.link\">{{data.name}} {{data.surname}}</a>\n * </ng-template>\n * ```\n *\n * ```typescript\n * customTableItemTemplate: TemplateRef<any>;\n *\n * this.customModel.data = [\n * \t[new TableItem({data: \"asdf\"}), new TableItem({data: {name: \"Lessy\", link: \"/table\"}, template: this.customTableItemTemplate})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"swer\"})],\n * \t[new TableItem({data: \"bsdf\"}), new TableItem({data: {name: \"Alice\", surname: \"Bob\"}, template: this.customTableItemTemplate})],\n * \t[new TableItem({data: \"csdf\"}), new TableItem({data: \"twer\"})],\n * ];\n * ```\n *\n * ### Sorting and filtering\n *\n * In case you need custom sorting and/or filtering you should subclass `TableHeaderItem`\n * and override needed functions.\n *\n * ```typescript\n * class FilterableHeaderItem extends TableHeaderItem {\n * \t// custom filter function\n * \tfilter(item: TableItem): boolean {\n * \t\tif (typeof item.data === \"string\" && item.data.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n * \t\titem.data.name && item.data.name.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0 ||\n * \t\titem.data.surname && item.data.surname.toLowerCase().indexOf(this.filterData.data.toLowerCase()) >= 0) {\n * \t\t\treturn false;\n * \t\t}\n * \t\treturn true;\n * \t}\n *\n * \tset filterCount(n) {}\n * \tget filterCount() {\n * \t\treturn (this.filterData && this.filterData.data && this.filterData.data.length > 0) ? 1 : 0;\n * \t}\n *\n * \t// used for custom sorting\n * \tcompare(one: TableItem, two: TableItem) {\n * \t\tconst stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n * \t\tconst stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n *\n * \t\tif (stringOne > stringTwo) {\n * \t\t\treturn 1;\n * \t\t} else if (stringOne < stringTwo) {\n * \t\t\treturn -1;\n * \t\t} else {\n * \t\t\treturn 0;\n * \t\t}\n * \t}\n * }\n * ```\n *\n * If you want to do your sorting on the backend or query for sorted data as a result of user\n * clicking the table header, check table [`sort`](#sort) output documentation\n *\n * See `TableHeaderItem` class for more information.\n *\n * ## No data template\n *\n * When table has no data to show, it can show a message you provide it instead.\n *\n * ```html\n * <cds-table [model]=\"model\">No data.</cds-table>\n * ```\n *\n * ... will show `No data.` message, but you can get creative and provide any template you want\n * to replace table's default `tbody`.\n *\n * ## Use pagination as table footer\n *\n * ```html\n * <cds-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></cds-pagination>\n * ```\n *\n * `selectPage()` function should fetch the data from backend, create new `data`, apply it to `model.data`,\n * and update `model.currentPage`.\n *\n * If the data your server returns is a two dimensional array of objects, it would look something like this:\n *\n * ```typescript\n * selectPage(page) {\n * \tthis.getPage(page).then((data: Array<Array<any>>) => {\n * \t\t// set the data and update page\n * \t\tthis.model.data = this.prepareData(data);\n * \t\tthis.model.currentPage = page;\n * \t});\n * }\n *\n * protected prepareData(data: Array<Array<any>>) {\n * \t// create new data from the service data\n * \tlet newData = [];\n * \tdata.forEach(dataRow => {\n * \t\tlet row = [];\n * \t\tdataRow.forEach(dataElement => {\n * \t\t\trow.push(new TableItem({\n * \t\t\t\tdata: dataElement,\n * \t\t\t\ttemplate: typeof dataElement === \"string\" ? undefined : this.paginationTableItemTemplate\n * \t\t\t\t// your template can handle all the data types so you don't have to conditionally set it\n * \t\t\t\t// you can also set different templates for different columns based on index\n * \t\t\t}));\n * \t\t});\n * \t\tnewData.push(row);\n * \t});\n * \treturn newData;\n * }\n * ```\n */\n@Component({\n\tselector: \"cds-table, ibm-table\",\n\ttemplate: `\n\t<table\n\t\tcdsTable\n\t\t[sortable]=\"sortable\"\n\t\t[noBorder]=\"noBorder\"\n\t\t[ngClass]=\"{'cds--data-table--sticky-header': stickyHeader}\"\n\t\t[size]=\"size\"\n\t\t[striped]=\"striped\"\n\t\t[skeleton]=\"skeleton\"\n\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t[attr.aria-describedby]=\"ariaDescribedby\">\n\t\t<thead\n\t\t\tcdsTableHead\n\t\t\t[sortable]=\"sortable\"\n\t\t\t(deselectAll)=\"onDeselectAll()\"\n\t\t\t(selectAll)=\"onSelectAll()\"\n\t\t\t(expandAllRows)=\"model.expandAllRows(true)\"\n\t\t\t(collapseAllRows)=\"model.expandAllRows(false)\"\n\t\t\t(sort)=\"doSort($event)\"\n\t\t\t[checkboxHeaderLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t[model]=\"model\"\n\t\t\t[selectAllCheckbox]=\"selectAllCheckbox\"\n\t\t\t[selectAllCheckboxSomeSelected]=\"selectAllCheckboxSomeSelected\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[sortAscendingLabel]=\"sortAscendingLabel\"\n\t\t\t[sortDescendingLabel]=\"sortDescendingLabel\"\n\t\t\t[stickyHeader]=\"stickyHeader\">\n\t\t</thead>\n\t\t<tbody\n\t\t\tcdsTableBody\n\t\t\t(deselectRow)=\"onSelectRow($event)\"\n\t\t\t(scroll)=\"onScroll($event)\"\n\t\t\t(selectRow)=\"onSelectRow($event)\"\n\t\t\t[checkboxRowLabel]=\"getCheckboxRowLabel()\"\n\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t[expandButtonAriaLabel]=\"expandButtonAriaLabel\"\n\t\t\t[model]=\"model\"\n\t\t\t[size]=\"size\"\n\t\t\t[ngStyle]=\"{'overflow-y': 'scroll'}\"\n\t\t\t[selectionLabelColumn]=\"selectionLabelColumn\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t*ngIf=\"!noData; else noDataTemplate\">\n\t\t</tbody>\n\t\t<ng-template #noDataTemplate><ng-content></ng-content></ng-template>\n\t\t<tfoot>\n\t\t\t<ng-template\n\t\t\t\t[ngTemplateOutlet]=\"footerTemplate\">\n\t\t\t</ng-template>\n\t\t\t<tr *ngIf=\"this.model.isLoading\">\n\t\t\t\t<td class=\"table_loading-indicator\">\n\t\t\t\t\t<div class=\"cds--loading cds--loading--small\">\n\t\t\t\t\t\t<svg class=\"cds--loading__svg\" viewBox=\"-75 -75 150 150\">\n\t\t\t\t\t\t\t<circle class=\"cds--loading__stroke\" cx=\"0\" cy=\"0\" r=\"37.5\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t\t<tr *ngIf=\"this.model.isEnd\">\n\t\t\t\t<td class=\"table_end-indicator\">\n\t\t\t\t\t<h5>{{getEndOfDataText() | async}}</h5>\n\t\t\t\t\t<button (click)=\"scrollToTop($event)\" class=\"btn--secondary-sm\">\n\t\t\t\t\t\t{{getScrollTopText() | async}}\n\t\t\t\t\t</button>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</tfoot>\n\t</table>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`]\n})\nexport class Table implements OnInit, AfterViewInit, OnDestroy {\n\t/**\n\t * Creates a skeleton model with a row and column count specified by the user\n\t *\n\t * Example:\n\t *\n\t * ```typescript\n\t * this.model = Table.skeletonModel(5, 5);\n\t * ```\n\t */\n\tstatic skeletonModel(rowCount: number, columnCount: number) {\n\t\tconst model = new TableModel();\n\t\tlet header = new Array<TableHeaderItem>();\n\t\tlet data = new Array<Array<TableItem>>();\n\t\tlet row = new Array<TableItem>();\n\n\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\theader.push(new TableHeaderItem());\n\t\t\trow.push(new TableItem());\n\t\t}\n\t\tfor (let i = 0; i < rowCount - 1; i++) {\n\t\t\tdata.push(row);\n\t\t}\n\n\t\tmodel.header = header;\n\t\tmodel.data = data;\n\t\treturn model;\n\t}\n\n\tstatic setTabIndex(element: HTMLElement, index: -1 | 0) {\n\t\tconst focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);\n\t\tif (element.firstElementChild && element.firstElementChild.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) {\n\t\t\tfocusElementList[1].tabIndex = index;\n\t\t} else if (focusElementList.length > 0) {\n\t\t\tfocusElementList[0].tabIndex = index;\n\t\t} else {\n\t\t\telement.tabIndex = index;\n\t\t}\n\t}\n\n\tstatic focus(element: HTMLElement) {\n\t\tconst focusElementList = getFocusElementList(element, tabbableSelectorIgnoreTabIndex);\n\t\tif (\n\t\t\t(element.firstElementChild?.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) ||\n\t\t\tfocusElementList.length > 0\n\t\t) {\n\t\t\tfocusElementList[0].focus();\n\t\t} else {\n\t\t\telement.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Id of the table header title element\n\t */\n\t@Input() ariaLabelledby: string;\n\t/**\n\t * Id of the table header description element\n\t */\n\t@Input() ariaDescribedby: string;\n\n\t/**\n\t * `TableModel` with data the table is to display.\n\t */\n\t@Input()\n\tset model(m: TableModel) {\n\t\tif (this._model) {\n\t\t\tthis.subscriptions.unsubscribe();\n\t\t\t// Need to create a new subscription instance here because unsubscribing prevents any new subscriptions\n\t\t\t// from being added for some reason. When a new model is set, none of the subscriptions would exist.\n\t\t\tthis.subscriptions = new Subscription();\n\t\t}\n\n\t\tthis._model = m;\n\n\t\tconst rowsChange = this._model.rowsSelectedChange.subscribe(() => this.updateSelectAllCheckbox());\n\t\tconst dataChange = this._model.dataChange.subscribe(() => {\n\t\t\tif (this.isDataGrid) {\n\t\t\t\tthis.resetTabIndex();\n\t\t\t}\n\t\t\tthis.updateSelectAllCheckbox();\n\t\t});\n\n\t\tthis.subscriptions.add(rowsChange);\n\t\tthis.subscriptions.add(dataChange);\n\n\t\tif (this.isDataGrid) {\n\t\t\tconst expandedChange = this._model.rowsExpandedChange.subscribe(() => {\n\t\t\t\t// Allows the expanded row to have a focus state when it exists in the DOM\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tconst expandedRows = this.elementRef.nativeElement.querySelectorAll(\".cds--expandable-row:not(.cds--parent-row)\");\n\t\t\t\t\tArray.from<any>(expandedRows).forEach(row => {\n\t\t\t\t\t\tif (row.firstElementChild.tabIndex === undefined || row.firstElementChild.tabIndex !== -1) {\n\t\t\t\t\t\t\trow.firstElementChild.tabIndex = -1;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.subscriptions.add(expandedChange);\n\t\t}\n\t}\n\n\tget model(): TableModel {\n\t\treturn this._model;\n\t}\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for a data grid with keyboard interactions.\n\t */\n\t@Input() set isDataGrid(value: boolean) {\n\t\tthis._isDataGrid = value;\n\t\tif (this.isViewReady) {\n\t\t\tif (value) {\n\t\t\t\tthis.enableDataGridInteractions();\n\t\t\t} else {\n\t\t\t\tthis.disableDataGridInteractions();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input() noBorder = true;\n\n\t/**\n\t * Set to `true` to show expansion toggle when table consists of row expansions\n\t */\n\t@Input() showExpandAllToggle = false;\n\n\tget isDataGrid(): boolean {\n\t\treturn this._isDataGrid;\n\t}\n\n\t/**\n\t * Controls whether to show the selection checkboxes column or not.\n\t */\n\t@Input() showSelectionColumn = true;\n\n\t/**\n\t * Controls whether to enable multiple or single row selection.\n\t */\n\t@Input() enableSingleSelect = false;\n\n\t/**\n\t * Distance (in px) from the bottom that view has to reach before\n\t * `scrollLoad` event is emitted.\n\t */\n\t@Input() scrollLoadDistance = 0;\n\n\t/**\n\t * @todo - Enable column resize when Carbon officially supports feature\n\t * Set to `true` to enable users to resize columns.\n\t *\n\t * Works for columns with width set in pixels.\n\t *\n\t */\n\t// @Input() columnsResizable = false;\n\n\t/**\n\t * @todo - Enable columns drag & drop when Carbon officially supports feature\n\t * Set to `true` to enable users to drag and drop columns.\n\t *\n\t * Changing the column order in table changes table model. Be aware of it when you add additional data\n\t * to the model.\n\t *\n\t */\n\t// @Input() columnsDraggable = false;\n\n\t@Input()\n\tset expandButtonAriaLabel(value: string | Observable<string>) {\n\t\tthis._expandButtonAriaLabel.override(value);\n\t}\n\tget expandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.value;\n\t}\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable<string>) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable<string>) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"FILTER\": \"Filter\",\n\t *\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t *\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t *\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t *\t\t\"CHECKBOX_ROW\": \"Select row\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TABLE\"), value);\n\t\tthis._filterTitle.override(valueWithDefaults.FILTER);\n\t\tthis._endOfDataText.override(valueWithDefaults.END_OF_DATA);\n\t\tthis._scrollTopText.override(valueWithDefaults.SCROLL_TOP);\n\t\tthis._checkboxHeaderLabel.override(valueWithDefaults.CHECKBOX_HEADER);\n\t\tthis._checkboxRowLabel.override(valueWithDefaults.CHECKBOX_ROW);\n\t}\n\n\t/**\n\t * Set to `false` to remove table rows (zebra) stripes.\n\t */\n\t@Input() striped = true;\n\n\t/**\n\t * Allows table content to scroll horizontally\n\t */\n\t@HostBinding(\"class.cds--data-table-content\") tableContent = true;\n\n\t/**\n\t * Set to `true` to stick the header to the top of the table\n\t */\n\t@HostBinding(\"class.cds--data-table_inner-container\") @Input() stickyHeader = false;\n\n\t/**\n\t * Set footer template to customize what is displayed in the tfoot section of the table\n\t */\n\t@Input() footerTemplate: TemplateRef<any>;\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * <cds-table [selectionLabelColumn]=\"0\"></cds-table>\n\t * <!-- results in aria-label=\"Select first column value\"\n\t * (where \"first column value\" is the value of the first column in the row -->\n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t *\n\t * If no observers are provided (default), table will attempt to do a simple sort of the data loaded\n\t * into the model.\n\t *\n\t * If an observer is provided, table will not attempt any sorting of its own and it is up to the observer\n\t * to sort the table. This is what you typically want if you're using a backend query to get the sorted\n\t * data or want to sort data across multiple pages.\n\t *\n\t * Usage:\n\t *\n\t * ```typescript\n\t * @Component({\n\t * \tselector: \"app-table\",\n\t * \ttemplate: `\n\t * \t\t<cds-table\n\t * \t\t\t[model]=\"model\"\n\t * \t\t\t(sort)=\"simpleSort($event)\">\n\t * \t\t\tNo data.\n\t * \t\t</cds-table>\n\t * \t`\n\t * })\n\t * export class TableApp implements OnInit, OnChanges {\n\t * \t@Input() model = new TableModel();\n\t *\n\t * \tngOnInit() {\n\t * \t\tthis.model.header = [\n\t * \t\t\tnew TableHeaderItem({ data: \"Name\" }),\n\t * \t\t\tnew TableHeaderItem({ data: \"hwer\" })\n\t * \t\t];\n\t *\n\t * \t\tthis.model.data = [\n\t * \t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: \"qwer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"zwer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: \"swer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({data: \"twer\"})],\n\t * \t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t * \t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})]\n\t * \t\t];\n\t * \t}\n\t *\n\t * \tsimpleSort(index: number) {\n\t * \t\t// this function does a simple sort, which is the default for the table and if that's\n\t * \t\t// all you want, you don't need to do this.\n\t *\n\t * \t\t// here you can query your backend and update the model.data based on the result\n\t * \t\tif (this.model.header[index].sorted) {\n\t * \t\t\t// if already sorted flip sorting direction\n\t * \t\t\tthis.model.header[index].ascending = this.model.header[index].descending;\n\t * \t\t}\n\t * \t\tthis.model.sort(index);\n\t * \t}\n\t * }\n\t * ```\n\t */\n\t@Output() sort = new EventEmitter<number>();\n\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a single row is selected.\n\t *\n\t * @param ({model: this.model, selectedRowIndex: index})\n\t */\n\t@Output() selectRow = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a single row is deselected.\n\t *\n\t * @param ({model: this.model, deselectedRowIndex: index})\n\t */\n\t@Output() deselectRow = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n\t */\n\t@Output() rowClick = new EventEmitter<number>();\n\n\t/**\n\t * Emits when table requires more data to be loaded.\n\t */\n\t@Output() scrollLoad = new EventEmitter<TableModel>();\n\n\t/**\n\t * Controls if all checkboxes are viewed as selected.\n\t */\n\tselectAllCheckbox = false;\n\n\t/**\n\t * Controls the indeterminate state of the header checkbox.\n\t */\n\tselectAllCheckboxSomeSelected = false;\n\n\tget noData() {\n\t\treturn !this.model.data ||\n\t\t\tthis.model.data.length === 0 ||\n\t\t\tthis.model.data.length === 1 && this.model.data[0].length === 0;\n\t}\n\n\tpublic isColumnDragging = false;\n\tpublic columnDraggedHoverIndex = -1;\n\tpublic columnDraggedPosition = \"\";\n\n\tprotected _model: TableModel;\n\tprotected _isDataGrid = false;\n\t// flag to prevent getters/setters from querying the view before it's fully instantiated\n\tprotected isViewReady = false;\n\n\tprotected subscriptions = new Subscription();\n\tprotected positionSubscription: Subscription;\n\n\tprotected interactionModel: DataGridInteractionModel;\n\tprotected interactionPositionSubscription: Subscription;\n\n\tprotected _expandButtonAriaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_BUTTON\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _checkboxRowLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\tprotected _endOfDataText = this.i18n.getOverridable(\"TABLE.END_OF_DATA\");\n\tprotected _scrollTopText = this.i18n.getOverridable(\"TABLE.SCROLL_TOP\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tprotected columnResizeWidth: number;\n\tprotected columnResizeMouseX: number;\n\tprotected mouseMoveSubscription: Subscription;\n\tprotected mouseUpSubscription: Subscription;\n\n\t/**\n\t * Creates an instance of Table.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected applicationRef: ApplicationRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// Manually trigger check to see if all checkboxes are selected\n\t\t// This is since subscription is made AFTER checkboxes are selected\n\t\tthis.updateSelectAllCheckbox();\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.isViewReady = true;\n\t\tif (this.isDataGrid) {\n\t\t\tthis.enableDataGridInteractions();\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t\tif (this.positionSubscription) {\n\t\t\tthis.positionSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tenableDataGridInteractions() {\n\t\t// if we have an `interactioModel` we've already enabled datagrid\n\t\tif (this.interactionModel) {\n\t\t\treturn;\n\t\t}\n\t\tconst table = this.elementRef.nativeElement.querySelector(\"table\") as HTMLTableElement;\n\t\tconst tableAdapter = new TableDomAdapter(table);\n\t\tconst keydownEventStream = fromEvent<KeyboardEvent>(table, \"keydown\");\n\t\tconst clickEventStream = fromEvent<MouseEvent>(table, \"click\");\n\t\tthis.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);\n\t\tthis.positionSubscription = this.interactionModel.position.subscribe(event => {\n\t\t\tconst [currentRow, currentColumn] = event.current;\n\t\t\tconst [previousRow, previousColumn] = event.previous;\n\n\t\t\tconst currentElement = tableAdapter.getCell(currentRow, currentColumn);\n\t\t\tTable.setTabIndex(currentElement, 0);\n\n\t\t\t// if the model has just initialized don't focus or reset anything\n\t\t\tif (previousRow === -1 || previousColumn === -1) { return; }\n\t\t\t// Make the previous cell unfocusable (if it's not the current)\n\t\t\tif (previousRow !== currentRow || previousColumn !== currentColumn) {\n\t\t\t\tconst previousElement = tableAdapter.getCell(previousRow, previousColumn);\n\t\t\t\tTable.setTabIndex(previousElement, -1);\n\t\t\t}\n\t\t\tTable.focus(currentElement);\n\t\t});\n\t\t// call this after assigning `this.interactionModel` since it depends on it\n\t\tthis.resetTabIndex();\n\t}\n\n\tdisableDataGridInteractions() {\n\t\t// unsubscribe first so we don't cause the focus to fly around\n\t\tif (this.positionSubscription) {\n\t\t\tthis.positionSubscription.unsubscribe();\n\t\t}\n\t\t// undo tab indexing (also resets the model)\n\t\tthis.resetTabIndex(0);\n\t\t// null out the model ref\n\t\tthis.interactionModel = null;\n\t}\n\n\tonSelectAll() {\n\t\tthis.model.selectAll(true);\n\t\tthis.selectAll.emit(this.model);\n\t}\n\n\tonDeselectAll() {\n\t\tthis.model.selectAll(false);\n\t\tthis.deselectAll.emit(this.model);\n\t}\n\n\tonSelectRow(event) {\n\t\t// check for the existence of the selectedRowIndex property\n\t\tif (Object.keys(event).includes(\"selectedRowIndex\")) {\n\t\t\tif (this.enableSingleSelect) {\n\t\t\t\tthis.model.selectAll(false);\n\t\t\t}\n\t\t\tthis.model.selectRow(event.selectedRowIndex, true);\n\t\t\tthis.selectRow.emit(event);\n\t\t} else {\n\t\t\tthis.model.selectRow(event.deselectedRowIndex, false);\n\t\t\tthis.deselectRow.emit(event);\n\t\t}\n\t}\n\n\tonRowClick(index: number) {\n\t\tthis.rowClick.emit(index);\n\t}\n\n\tupdateSelectAllCheckbox() {\n\t\tconst selectedRowsCount = this.model.selectedRowsCount();\n\n\t\tif (selectedRowsCount <= 0) {\n\t\t\t// reset select all checkbox if nothing selected\n\t\t\tthis.selectAllCheckbox = false;\n\t\t\tthis.selectAllCheckboxSomeSelected = false;\n\t\t} else if (selectedRowsCount < this.model.data.length) {\n\t\t\tthis.selectAllCheckbox = true;\n\t\t\tthis.selectAllCheckboxSomeSelected = true;\n\t\t} else {\n\t\t\tthis.selectAllCheckbox = true;\n\t\t\tthis.selectAllCheckboxSomeSelected = false;\n\t\t}\n\t}\n\n\tresetTabIndex(newTabIndex = -1) {\n\t\t// ensure the view is ready for the reset before we preform the actual reset\n\t\tsetTimeout(() => {\n\t\t\t// reset all the tabIndexes we can find\n\t\t\tconst focusElementList = getFocusElementList(this.elementRef.nativeElement, tabbableSelectorIgnoreTabIndex);\n\t\t\tif (focusElementList) {\n\t\t\t\tfocusElementList.forEach(tabbable => {\n\t\t\t\t\ttabbable.tabIndex = newTabIndex;\n\t\t\t\t});\n\t\t\t}\n\t\t\t// reset interaction model positions and tabIndexes\n\t\t\tif (this.interactionModel) {\n\t\t\t\tthis.interactionModel.resetTabIndexes(newTabIndex);\n\t\t\t}\n\t\t});\n\t}\n\n\tcolumnResizeStart(event, column) {\n\t\tthis.columnResizeWidth = parseInt(column.style.width, 10);\n\t\tthis.columnResizeMouseX = event.clientX;\n\t\tevent.preventDefault();\n\n\t\tthis.mouseMoveSubscription = fromEvent(document.body, \"mousemove\").subscribe(event => {\n\t\t\tthis.columnResizeProgress(event, column);\n\t\t});\n\t\tthis.mouseUpSubscription = fromEvent(document.body, \"mouseup\").subscribe(event => {\n\t\t\tthis.columnResizeEnd(event, column);\n\t\t});\n\t}\n\n\tcolumnResizeProgress(event, column) {\n\t\tconst move = event.clientX - this.columnResizeMouseX;\n\t\tcolumn.style.width = `${this.columnResizeWidth + move}px`;\n\t}\n\n\tcolumnResizeEnd(event, column) {\n\t\tthis.mouseMoveSubscription.unsubscribe();\n\t\tthis.mouseUpSubscription.unsubscribe();\n\t}\n\n\t/**\n\t * Triggered when the user scrolls on the `<tbody>` element.\n\t * Emits the `scrollLoad` event.\n\t */\n\tonScroll(event) {\n\t\tconst distanceFromBottom = event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop;\n\n\t\tif (distanceFromBottom <= this.scrollLoadDistance) {\n\t\t\tthis.scrollLoad.emit(this.model);\n\t\t} else {\n\t\t\tthis.model.isEnd = false;\n\t\t}\n\t}\n\n\tcolumnDragStart(event, columnIndex) {\n\t\tthis.isColumnDragging = true;\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t\tevent.dataTransfer.setData(\"columnIndex\", JSON.stringify(columnIndex));\n\t}\n\n\tcolumnDragEnd(event, columnIndex) {\n\t\tthis.isColumnDragging = false;\n\t\tthis.columnDraggedHoverIndex = -1;\n\t}\n\n\tcolumnDragEnter(event, position, columnIndex) {\n\t\tthis.columnDraggedPosition = position;\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t}\n\n\tcolumnDragLeave(event, position, columnIndex) {\n\t\tthis.columnDraggedPosition = \"\";\n\t}\n\n\tcolumnDragover(event, position, columnIndex) {\n\t\tthis.columnDraggedHoverIndex = columnIndex;\n\t\tthis.columnDraggedPosition = position;\n\n\t\t// needed to tell browser to allow dropping\n\t\tevent.preventDefault();\n\t}\n\n\tcolumnDrop(event, position, columnIndex) {\n\t\tthis.isColumnDragging = false;\n\t\tthis.columnDraggedHoverIndex = -1;\n\t\tthis.columnDraggedPosition = \"\";\n\n\t\tthis.model.moveColumn(\n\t\t\tparseInt(event.dataTransfer.getData(\"columnIndex\"), 10),\n\t\t\tcolumnIndex + (position === \"right\" ? 1 : 0)\n\t\t);\n\t}\n\n\tdoSort(index: number) {\n\t\tif (this.sort.observers.length === 0) {\n\t\t\t// no sort provided so do the simple sort\n\t\t\tthis.model.cycleSortState(index);\n\t\t\tthis.model.sort(index);\n\t\t}\n\n\t\tthis.sort.emit(index);\n\t}\n\n\t/**\n\t * Triggered when the user scrolls on the `<tbody>` element.\n\t * Emits the `scrollLoad` event.\n\t */\n\tscrollToTop(event) {\n\t\tevent.target.parentElement.parentElement.parentElement.parentElement.children[1].scrollTop = 0;\n\t\tthis.model.isEnd = false;\n\t}\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetExpandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.subject;\n\t}\n\tgetSortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\tgetSortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetCheckboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetCheckboxRowLabel() {\n\t\treturn this._checkboxRowLabel.subject;\n\t}\n\n\tgetEndOfDataText() {\n\t\treturn this._endOfDataText.subject;\n\t}\n\n\tgetScrollTopText() {\n\t\treturn this._scrollTopText.subject;\n\t}\n\n\tgetFilterTitle() {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t\n",
@@ -55077,7 +55297,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 641,
+                "line": 649,
                 "rawdescription": "\n\nCreates an instance of Table.\n",
                 "jsdoctags": [
                     {
@@ -55132,7 +55352,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 316,
+                        "line": 319,
                         "rawdescription": "\n\n`TableModel` with data the table is to display.\n",
                         "description": "<p><code>TableModel</code> with data the table is to display.</p>\n",
                         "jsdoctags": [
@@ -55151,7 +55371,7 @@
                         "name": "model",
                         "type": "",
                         "returnType": "TableModel",
-                        "line": 353
+                        "line": 356
                     }
                 },
                 "isDataGrid": {
@@ -55170,7 +55390,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 368,
+                        "line": 371,
                         "rawdescription": "\n\nSet to `true` for a data grid with keyboard interactions.\n",
                         "description": "<p>Set to <code>true</code> for a data grid with keyboard interactions.</p>\n",
                         "jsdoctags": [
@@ -55189,7 +55409,7 @@
                         "name": "isDataGrid",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 387
+                        "line": 395
                     }
                 },
                 "expandButtonAriaLabel": {
@@ -55208,7 +55428,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 427,
+                        "line": 435,
                         "rawdescription": "\n\nSet to `true` to enable users to drag and drop columns.\n\nChanging the column order in table changes table model. Be aware of it when you add additional data\nto the model.\n\n",
                         "description": "<p>Set to <code>true</code> to enable users to drag and drop columns.</p>\n<p>Changing the column order in table changes table model. Be aware of it when you add additional data\nto the model.</p>\n",
                         "jsdoctags": [
@@ -55227,7 +55447,7 @@
                         "name": "expandButtonAriaLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 430
+                        "line": 438
                     }
                 },
                 "sortDescendingLabel": {
@@ -55246,7 +55466,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 434,
+                        "line": 442,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -55263,7 +55483,7 @@
                         "name": "sortDescendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 437
+                        "line": 445
                     }
                 },
                 "sortAscendingLabel": {
@@ -55282,7 +55502,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 441,
+                        "line": 449,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -55299,7 +55519,7 @@
                         "name": "sortAscendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 444
+                        "line": 452
                     }
                 },
                 "translations": {
@@ -55318,7 +55538,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 461,
+                        "line": 469,
                         "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"FILTER\": \"Filter\",\n\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t\t\"CHECKBOX_ROW\": \"Select row\"\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;FILTER&quot;: &quot;Filter&quot;,\n        &quot;END_OF_DATA&quot;: &quot;You&#39;ve reached the end of your content&quot;,\n        &quot;SCROLL_TOP&quot;: &quot;Scroll to top&quot;,\n        &quot;CHECKBOX_HEADER&quot;: &quot;Select all rows&quot;,\n        &quot;CHECKBOX_ROW&quot;: &quot;Select row&quot;\n}</code></pre></div>",
                         "jsdoctags": [
@@ -55340,7 +55560,7 @@
                         "name": "noData",
                         "type": "",
                         "returnType": "",
-                        "line": 608
+                        "line": 616
                     }
                 }
             }
@@ -56589,7 +56809,7 @@
         },
         {
             "name": "TableHead",
-            "id": "component-TableHead-2d68f7b9140d6b32f7f6cf1233835b396303e5a0283e237c8dc738c2262fafb8471a7499ed5c748c6c3b9942511775108a574ef38bbcb582b73fb3da583576b5",
+            "id": "component-TableHead-cfe742ad940fa34f07a54dfeff16cc3bdad03f1cd874ad898d08d2d67cffa8b3959045159d929df7de79149ba3f24712e4060f04315fa90cc26de9014c8a9a35",
             "file": "src/table/head/table-head.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -56601,7 +56821,7 @@
             "styles": [
                 "\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t"
             ],
-            "template": "<ng-container *ngIf=\"model\">\n\t<tr>\n\t\t<th\n\t\t\tcdsTableHeadExpand\n\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\tscope=\"col\"\n\t\t\t[ngClass]=\"{'cds--table-expand-v2': stickyHeader}\"\n\t\t\t[id]=\"model.getId('expand')\">\n\t\t</th>\n\t\t<th\n\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\tscope=\"col\"\n\t\t\t[id]=\"model.getId('select')\">\n\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t</th>\n\t\t<th\n\t\t\tcdsTableHeadCheckbox\n\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\tscope=\"col\"\n\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[name]=\"model.getHeaderId('select')\"\n\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t[id]=\"model.getId('select')\">\n\t\t</th>\n\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t<th\n\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\tcdsTableHeadCell\n\t\t\t\tscope=\"col\"\n\t\t\t\t[class]=\"column.className\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t[column]=\"column\"\n\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t</th>\n\t\t</ng-container>\n\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\"\n\t\t\tscope=\"col\"\n\t\t\t[ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t<!--\n\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t-->\n\t\t</th>\n\t</tr>\n</ng-container>\n<ng-content></ng-content>\n",
+            "template": "<ng-container *ngIf=\"model\">\n\t<tr>\n\t\t<th\n\t\t\tcdsTableHeadExpand\n\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\tscope=\"col\"\n\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\"\n\t\t\t[ngClass]=\"{'cds--table-expand-v2': stickyHeader}\"\n\t\t\t[id]=\"model.getId('expand')\"\n\t\t\t[expanded]=\"model.expandableRowsCount() === model.expandedRowsCount()\"\n\t\t\t(expandedChange)=\"onExpandAllRowsChange($event)\">\n\t\t</th>\n\t\t<th\n\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\tscope=\"col\"\n\t\t\t[id]=\"model.getId('select')\">\n\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t</th>\n\t\t<th\n\t\t\tcdsTableHeadCheckbox\n\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\tscope=\"col\"\n\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[name]=\"model.getHeaderId('select')\"\n\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t[id]=\"model.getId('select')\">\n\t\t</th>\n\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t<th\n\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\tcdsTableHeadCell\n\t\t\t\tscope=\"col\"\n\t\t\t\t[class]=\"column.className\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t[column]=\"column\"\n\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t</th>\n\t\t</ng-container>\n\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\"\n\t\t\tscope=\"col\"\n\t\t\t[ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t<!--\n\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t-->\n\t\t</th>\n\t</tr>\n</ng-container>\n<ng-content></ng-content>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -56610,7 +56830,7 @@
                     "name": "checkboxHeaderLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 112,
+                    "line": 117,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -56619,7 +56839,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 95,
+                    "line": 98,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56627,7 +56847,7 @@
                     "name": "filterTitle",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 139,
+                    "line": 144,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -56635,7 +56855,7 @@
                     "name": "model",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 91,
+                    "line": 94,
                     "type": "TableModel",
                     "decorators": []
                 },
@@ -56644,7 +56864,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 99,
+                    "line": 102,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56653,7 +56873,16 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 97,
+                    "line": 100,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "showExpandAllToggle",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 108,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56662,7 +56891,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 93,
+                    "line": 96,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56671,7 +56900,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 101,
+                    "line": 104,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56682,7 +56911,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSetting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.\n",
                     "description": "<p>Setting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.</p>\n",
-                    "line": 109,
+                    "line": 114,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -56690,7 +56919,7 @@
                     "name": "sortAscendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 130,
+                    "line": 135,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -56698,7 +56927,7 @@
                     "name": "sortDescendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 121,
+                    "line": 126,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -56707,12 +56936,53 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 103,
+                    "line": 106,
                     "type": "boolean",
                     "decorators": []
                 }
             ],
             "outputsClass": [
+                {
+                    "name": "collapseAllRows",
+                    "defaultValue": "new EventEmitter<TableModel>()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nEmits if all rows are collapsed.\n\n",
+                    "description": "<p>Emits if all rows are collapsed.</p>\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 4493,
+                            "end": 4508,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 348,
+                            "tagName": {
+                                "pos": 4494,
+                                "end": 4499,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "param"
+                            },
+                            "comment": "",
+                            "name": {
+                                "pos": 4500,
+                                "end": 4505,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "model"
+                            },
+                            "isNameFirst": true,
+                            "isBracketed": false
+                        }
+                    ],
+                    "line": 179,
+                    "type": "EventEmitter"
+                },
                 {
                     "name": "deselectAll",
                     "defaultValue": "new EventEmitter<TableModel>()",
@@ -56722,15 +56992,15 @@
                     "description": "<p>Emits if all rows are deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 4026,
-                            "end": 4041,
+                            "pos": 4242,
+                            "end": 4257,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 348,
                             "tagName": {
-                                "pos": 4027,
-                                "end": 4032,
+                                "pos": 4243,
+                                "end": 4248,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -56739,8 +57009,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 4033,
-                                "end": 4038,
+                                "pos": 4249,
+                                "end": 4254,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -56751,7 +57021,48 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 162,
+                    "line": 167,
+                    "type": "EventEmitter"
+                },
+                {
+                    "name": "expandAllRows",
+                    "defaultValue": "new EventEmitter<TableModel>()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nEmits if all rows are expanded.\n\n",
+                    "description": "<p>Emits if all rows are expanded.</p>\n",
+                    "jsdoctags": [
+                        {
+                            "pos": 4366,
+                            "end": 4381,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 348,
+                            "tagName": {
+                                "pos": 4367,
+                                "end": 4372,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "param"
+                            },
+                            "comment": "",
+                            "name": {
+                                "pos": 4373,
+                                "end": 4378,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "model"
+                            },
+                            "isNameFirst": true,
+                            "isBracketed": false
+                        }
+                    ],
+                    "line": 173,
                     "type": "EventEmitter"
                 },
                 {
@@ -56763,15 +57074,15 @@
                     "description": "<p>Emits if all rows are selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 3902,
-                            "end": 3917,
+                            "pos": 4118,
+                            "end": 4133,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 348,
                             "tagName": {
-                                "pos": 3903,
-                                "end": 3908,
+                                "pos": 4119,
+                                "end": 4124,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -56780,8 +57091,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 3909,
-                                "end": 3914,
+                                "pos": 4125,
+                                "end": 4130,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -56792,7 +57103,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 156,
+                    "line": 161,
                     "type": "EventEmitter"
                 },
                 {
@@ -56802,7 +57113,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an index of the column that wants to be sorted.\n",
                     "description": "<p>Emits an index of the column that wants to be sorted.</p>\n",
-                    "line": 150,
+                    "line": 155,
                     "type": "EventEmitter"
                 }
             ],
@@ -56815,7 +57126,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 164,
+                    "line": 181,
                     "modifierKind": [
                         125
                     ]
@@ -56828,7 +57139,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 187,
+                    "line": 212,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -56838,7 +57149,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 199,
+                    "line": 224,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -56848,7 +57159,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 195,
+                    "line": 220,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -56858,17 +57169,45 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 191,
+                    "line": 216,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
+                {
+                    "name": "onExpandAllRowsChange",
+                    "args": [
+                        {
+                            "name": "expand",
+                            "type": "boolean",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 204,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "expand",
+                            "type": "boolean",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "onSelectAllCheckboxChange",
                     "args": [],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 179,
+                    "line": 196,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -56882,7 +57221,7 @@
             "description": "<p>A subcomponent that creates the thead of the table</p>\n<h2>Basic usage</h2>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;thead cdsTableHead [model]=&quot;model&quot;&gt;&lt;/thead&gt;</code></pre></div>",
             "rawdescription": "\n\nA subcomponent that creates the thead of the table\n\n## Basic usage\n\n```html\n\t<thead cdsTableHead [model]=\"model\"></thead>\n```\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\nimport { TableModel } from \"../table-model.class\";\nimport { getScrollbarWidth } from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * A subcomponent that creates the thead of the table\n *\n * ## Basic usage\n *\n * ```html\n * \t<thead cdsTableHead [model]=\"model\"></thead>\n * ```\n */\n@Component({\n\t// tslint:disable-next-line:component-selector\n\tselector: \"[cdsTableHead], [ibmTableHead]\",\n\ttemplate: `\n\t<ng-container *ngIf=\"model\">\n\t\t<tr>\n\t\t\t<th\n\t\t\t\tcdsTableHeadExpand\n\t\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[ngClass]=\"{'cds--table-expand-v2': stickyHeader}\"\n\t\t\t\t[id]=\"model.getId('expand')\">\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\tcdsTableHeadCheckbox\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[name]=\"model.getHeaderId('select')\"\n\t\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t</th>\n\t\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t\t<th\n\t\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t[class]=\"column.className\"\n\t\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t\t[column]=\"column\"\n\t\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t\t</th>\n\t\t\t</ng-container>\n\t\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t\t<!--\n\t\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t\t-->\n\t\t\t</th>\n\t\t</tr>\n\t</ng-container>\n\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t`]\n})\nexport class TableHead implements AfterViewInit {\n\t@Input() model: TableModel;\n\n\t@Input() showSelectionColumn = true;\n\n\t@Input() enableSingleSelect = false;\n\n\t@Input() selectAllCheckboxSomeSelected = false;\n\n\t@Input() selectAllCheckbox = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() stickyHeader = false;\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input()\n\tset checkboxHeaderLabel(value: string | Observable<string>) {\n\t\tthis._checkboxHeaderLabel.override(value);\n\t}\n\n\tget checkboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.value;\n\t}\n\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable<string>) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable<string>) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t@Input()\n\tset filterTitle(value: string | Observable<string>) {\n\t\tthis._filterTitle.override(value);\n\t}\n\n\tget filterTitle() {\n\t\treturn this._filterTitle.value;\n\t}\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t */\n\t@Output() sort = new EventEmitter<number>();\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter<TableModel>();\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter<TableModel>();\n\n\tpublic scrollbarWidth = 0;\n\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.scrollbarWidth = getScrollbarWidth();\n\t\t});\n\t}\n\n\tonSelectAllCheckboxChange() {\n\t\tif (!this.selectAllCheckbox && !this.selectAllCheckboxSomeSelected) {\n\t\t\tthis.selectAll.emit(this.model);\n\t\t} else {\n\t\t\tthis.deselectAll.emit(this.model);\n\t\t}\n\t}\n\n\tgetCheckboxHeaderLabel(): Observable<string> {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetSortDescendingLabel(): Observable<string> {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\n\tgetSortAscendingLabel(): Observable<string> {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetFilterTitle(): Observable<string> {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\nimport { TableModel } from \"../table-model.class\";\nimport { getScrollbarWidth } from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * A subcomponent that creates the thead of the table\n *\n * ## Basic usage\n *\n * ```html\n * \t<thead cdsTableHead [model]=\"model\"></thead>\n * ```\n */\n@Component({\n\t// tslint:disable-next-line:component-selector\n\tselector: \"[cdsTableHead], [ibmTableHead]\",\n\ttemplate: `\n\t<ng-container *ngIf=\"model\">\n\t\t<tr>\n\t\t\t<th\n\t\t\t\tcdsTableHeadExpand\n\t\t\t\t*ngIf=\"model.hasExpandableRows()\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\"\n\t\t\t\t[ngClass]=\"{'cds--table-expand-v2': stickyHeader}\"\n\t\t\t\t[id]=\"model.getId('expand')\"\n\t\t\t\t[expanded]=\"model.expandableRowsCount() === model.expandedRowsCount()\"\n\t\t\t\t(expandedChange)=\"onExpandAllRowsChange($event)\">\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && enableSingleSelect\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t\t<!-- add width 0; since the carbon styles don't seem to constrain this headers width -->\n\t\t\t</th>\n\t\t\t<th\n\t\t\t\tcdsTableHeadCheckbox\n\t\t\t\t*ngIf=\"!skeleton && showSelectionColumn && !enableSingleSelect\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[checked]=\"selectAllCheckbox\"\n\t\t\t\t[indeterminate]=\"selectAllCheckboxSomeSelected\"\n\t\t\t\t[ariaLabel]=\"getCheckboxHeaderLabel()\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[name]=\"model.getHeaderId('select')\"\n\t\t\t\t(change)=\"onSelectAllCheckboxChange()\"\n\t\t\t\t[id]=\"model.getId('select')\">\n\t\t\t</th>\n\t\t\t<ng-container *ngFor=\"let column of model.header; let i = index\">\n\t\t\t\t<th\n\t\t\t\t\t*ngIf=\"column && column.visible\"\n\t\t\t\t\t[ngStyle]=\"column.style\"\n\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t[class]=\"column.className\"\n\t\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[id]=\"model.getId(i)\"\n\t\t\t\t\t[column]=\"column\"\n\t\t\t\t\t[filterTitle]=\"getFilterTitle()\"\n\t\t\t\t\t[attr.colspan]=\"column.colSpan\"\n\t\t\t\t\t[attr.rowspan]=\"column.rowSpan\"\n\t\t\t\t\t(sort)=\"sort.emit(i)\">\n\t\t\t\t</th>\n\t\t\t</ng-container>\n\t\t\t<th *ngIf=\"!skeleton && stickyHeader && scrollbarWidth\"\n\t\t\t\tscope=\"col\"\n\t\t\t\t[ngStyle]=\"{'width': scrollbarWidth + 'px', 'padding': 0, 'border': 0}\">\n\t\t\t\t<!--\n\t\t\t\t\tScrollbar pushes body to the left so this header column is added to push\n\t\t\t\t\tthe title bar the same amount and keep the header and body columns aligned.\n\t\t\t\t-->\n\t\t\t</th>\n\t\t</tr>\n\t</ng-container>\n\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t`]\n})\nexport class TableHead implements AfterViewInit {\n\t@Input() model: TableModel;\n\n\t@Input() showSelectionColumn = true;\n\n\t@Input() enableSingleSelect = false;\n\n\t@Input() selectAllCheckboxSomeSelected = false;\n\n\t@Input() selectAllCheckbox = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() stickyHeader = false;\n\n\t@Input() showExpandAllToggle = false;\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input()\n\tset checkboxHeaderLabel(value: string | Observable<string>) {\n\t\tthis._checkboxHeaderLabel.override(value);\n\t}\n\n\tget checkboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.value;\n\t}\n\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable<string>) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable<string>) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t@Input()\n\tset filterTitle(value: string | Observable<string>) {\n\t\tthis._filterTitle.override(value);\n\t}\n\n\tget filterTitle() {\n\t\treturn this._filterTitle.value;\n\t}\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t */\n\t@Output() sort = new EventEmitter<number>();\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter<TableModel>();\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter<TableModel>();\n\t/**\n\t * Emits if all rows are expanded.\n\t *\n\t * @param model\n\t */\n\t@Output() expandAllRows = new EventEmitter<TableModel>();\n\t/**\n\t * Emits if all rows are collapsed.\n\t *\n\t * @param model\n\t */\n\t@Output() collapseAllRows = new EventEmitter<TableModel>();\n\n\tpublic scrollbarWidth = 0;\n\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.scrollbarWidth = getScrollbarWidth();\n\t\t});\n\t}\n\n\tonSelectAllCheckboxChange() {\n\t\tif (!this.selectAllCheckbox && !this.selectAllCheckboxSomeSelected) {\n\t\t\tthis.selectAll.emit(this.model);\n\t\t} else {\n\t\t\tthis.deselectAll.emit(this.model);\n\t\t}\n\t}\n\n\tonExpandAllRowsChange(expand: boolean) {\n\t\tif (expand) {\n\t\t\tthis.expandAllRows.emit(this.model);\n\t\t} else {\n\t\t\tthis.collapseAllRows.emit(this.model);\n\t\t}\n\t}\n\n\tgetCheckboxHeaderLabel(): Observable<string> {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetSortDescendingLabel(): Observable<string> {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\n\tgetSortAscendingLabel(): Observable<string> {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetFilterTitle(): Observable<string> {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t\n",
@@ -56899,7 +57238,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 169,
+                "line": 186,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -56933,7 +57272,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 112,
+                        "line": 117,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -56950,7 +57289,7 @@
                         "name": "checkboxHeaderLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 116
+                        "line": 121
                     }
                 },
                 "sortDescendingLabel": {
@@ -56969,7 +57308,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 121,
+                        "line": 126,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -56986,7 +57325,7 @@
                         "name": "sortDescendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 125
+                        "line": 130
                     }
                 },
                 "sortAscendingLabel": {
@@ -57005,7 +57344,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 130,
+                        "line": 135,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -57022,7 +57361,7 @@
                         "name": "sortAscendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 134
+                        "line": 139
                     }
                 },
                 "filterTitle": {
@@ -57041,7 +57380,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 139,
+                        "line": 144,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -57058,7 +57397,7 @@
                         "name": "filterTitle",
                         "type": "",
                         "returnType": "",
-                        "line": 143
+                        "line": 148
                     }
                 }
             }
@@ -57651,7 +57990,7 @@
         },
         {
             "name": "TableHeadExpand",
-            "id": "component-TableHeadExpand-1327b9be9f48cb9d4af86523e07bd34be8bf7b656322de102df27b6eda6e6b95b5c641ab51c1fc10d4566e34dd69a5f00b4a05f24c505950dbde1032956a7d59",
+            "id": "component-TableHeadExpand-310facdfe3384b586a6b1fbf3ba8cf4967ffe4664332b60625d2ef474e2bb162427502c81b9543d050df86772338327986dabf3c9c8c83010ebc0a99a95388d6",
             "file": "src/table/head/table-head-expand.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -57661,12 +58000,40 @@
             "selector": "[cdsTableHeadExpand], [ibmTableHeadExpand]",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-content></ng-content>\n\t",
+            "template": "<button\n\t*ngIf=\"showExpandAllToggle\"\n\tclass=\"cds--table-expand__button\"\n\t[attr.aria-label]=\"getAriaLabel() | async\"\n\t(click)=\"expandedChange.emit(!expanded)\">\n\t<svg cdsIcon=\"chevron--right\" size=\"16\" class=\"cds--table-expand__svg\"></svg>\n</button>\n<ng-container *ngIf=\"!showExpandAllToggle\">\n\t<ng-content></ng-content>\n</ng-container>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
-            "inputsClass": [],
-            "outputsClass": [],
+            "inputsClass": [
+                {
+                    "name": "expanded",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 32,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "showExpandAllToggle",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 30,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "outputsClass": [
+                {
+                    "name": "expandedChange",
+                    "defaultValue": "new EventEmitter<boolean>()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 34,
+                    "type": "EventEmitter"
+                }
+            ],
             "propertiesClass": [
                 {
                     "name": "hostClass",
@@ -57676,7 +58043,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 14,
+                    "line": 28,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -57688,16 +58055,35 @@
                     ]
                 }
             ],
-            "methodsClass": [],
+            "methodsClass": [
+                {
+                    "name": "getAriaLabel",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "Observable<string>",
+                    "typeParameters": [],
+                    "line": 44,
+                    "deprecated": false,
+                    "deprecationMessage": ""
+                }
+            ],
             "deprecated": false,
             "deprecationMessage": "",
             "hostBindings": [
+                {
+                    "name": "attr.data-previous-value",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 36,
+                    "type": "string",
+                    "decorators": []
+                },
                 {
                     "name": "class.cds--table-expand",
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 14,
+                    "line": 28,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -57708,11 +58094,48 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tHostBinding\n} from \"@angular/core\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadExpand], [ibmTableHeadExpand]\",\n\ttemplate: `\n\t\t<ng-content></ng-content>\n\t`\n})\nexport class TableHeadExpand {\n\t@HostBinding(\"class.cds--table-expand\") hostClass = true;\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOutput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadExpand], [ibmTableHeadExpand]\",\n\ttemplate: `\n\t\t<button\n\t\t\t*ngIf=\"showExpandAllToggle\"\n\t\t\tclass=\"cds--table-expand__button\"\n\t\t\t[attr.aria-label]=\"getAriaLabel() | async\"\n\t\t\t(click)=\"expandedChange.emit(!expanded)\">\n\t\t\t<svg cdsIcon=\"chevron--right\" size=\"16\" class=\"cds--table-expand__svg\"></svg>\n\t\t</button>\n\t\t<ng-container *ngIf=\"!showExpandAllToggle\">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-container>\n\t`\n})\nexport class TableHeadExpand {\n\t@HostBinding(\"class.cds--table-expand\") hostClass = true;\n\n\t@Input() showExpandAllToggle = false;\n\n\t@Input() expanded = false;\n\n\t@Output() expandedChange = new EventEmitter<boolean>();\n\n\t@HostBinding(\"attr.data-previous-value\") get previousValue() {\n\t\treturn this.expanded ? \"collapsed\" : null;\n\t}\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_ALL_BUTTON\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable<string> {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
-            "extends": []
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [
+                    {
+                        "name": "i18n",
+                        "type": "I18n",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    }
+                ],
+                "line": 40,
+                "jsdoctags": [
+                    {
+                        "name": "i18n",
+                        "type": "I18n",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
+            },
+            "extends": [],
+            "accessors": {
+                "previousValue": {
+                    "name": "previousValue",
+                    "getSignature": {
+                        "name": "previousValue",
+                        "type": "",
+                        "returnType": "",
+                        "line": 36
+                    }
+                }
+            }
         },
         {
             "name": "TableNoDataStory",
@@ -72827,7 +73250,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
             },
             {
                 "name": "EXPERIMENTAL_SERVICE_PROVIDER",
@@ -72909,6 +73332,16 @@
                 "type": "",
                 "defaultValue": "Template.bind({})"
             },
+            {
+                "name": "Fluid",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/number-input/number.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
             {
                 "name": "Fluid",
                 "ctype": "miscellaneous",
@@ -73411,7 +73844,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[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\">\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</cds-number>\n\t\t{{ value }}\n\t`\n})"
             },
             {
                 "name": "ModelTemplate",
@@ -74468,7 +74901,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number label=\"Number input label\" skeleton=\"true\"></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</cds-number>\n\t`\n})"
             },
             {
                 "name": "SkeletonTemplate",
@@ -74858,7 +75291,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</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</cds-number>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -79800,6 +80233,16 @@
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
+                {
+                    "name": "Fluid",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/number-input/number.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
                 {
                     "name": "ModelTemplate",
                     "ctype": "miscellaneous",
@@ -79808,7 +80251,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[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\">\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</cds-number>\n\t\t{{ value }}\n\t`\n})"
                 },
                 {
                     "name": "NgModel",
@@ -79838,7 +80281,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number label=\"Number input label\" skeleton=\"true\"></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</cds-number>\n\t`\n})"
                 },
                 {
                     "name": "Template",
@@ -79848,7 +80291,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</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</cds-number>\n\t`\n})"
                 }
             ],
             "src/pagination/pagination-nav.stories.ts": [
@@ -80340,7 +80783,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
                     "name": "Filtering",
@@ -86831,8 +87274,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "NumberComponent",
-                "coveragePercent": 74,
-                "coverageCount": "32/43",
+                "coveragePercent": 67,
+                "coverageCount": "33/49",
                 "status": "good"
             },
             {
@@ -86854,6 +87297,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/number-input/number.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Fluid",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/number-input/number.stories.ts",
                 "type": "variable",
@@ -87998,7 +88451,7 @@
                 "linktype": "component",
                 "name": "TableHeadExpand",
                 "coveragePercent": 0,
-                "coverageCount": "0/3",
+                "coverageCount": "0/9",
                 "status": "low"
             },
             {
@@ -88006,8 +88459,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TableHead",
-                "coveragePercent": 21,
-                "coverageCount": "5/23",
+                "coveragePercent": 25,
+                "coverageCount": "7/27",
                 "status": "low"
             },
             {
@@ -88061,7 +88514,7 @@
                 "linktype": "component",
                 "name": "ExpansionTableStory",
                 "coveragePercent": 0,
-                "coverageCount": "0/12",
+                "coverageCount": "0/13",
                 "status": "low"
             },
             {
@@ -88204,9 +88657,9 @@
                 "type": "class",
                 "linktype": "classe",
                 "name": "TableModel",
-                "coveragePercent": 76,
-                "coverageCount": "32/42",
-                "status": "very-good"
+                "coveragePercent": 73,
+                "coverageCount": "34/46",
+                "status": "good"
             },
             {
                 "filePath": "src/table/table-row.class.ts",
@@ -88222,8 +88675,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "Table",
-                "coveragePercent": 46,
-                "coverageCount": "31/67",
+                "coveragePercent": 47,
+                "coverageCount": "32/68",
                 "status": "medium"
             },
             {