carbon-components-angular 5.12.1 → 5.12.3

package/docs/documentation.json

@@ -5219,12 +5219,12 @@
         },
         {
             "name": "CustomHeaderItem",
-            "id": "class-CustomHeaderItem-70201807a90d85ff5a7668524d729b920cc51650910a46e7c3be8fd006995ae27d23c52cb760a11e7124bffe0501df741aa10707f0c6036f28fc96533951937c",
+            "id": "class-CustomHeaderItem-43dec1fee39d015661af87a2e0758230b3fe81f583b813b9295a920fa61c1f02e93d480424afab37673e46ee64fddb53093c74715a7b4269e5e642504d5fa75b",
             "file": "src/table/stories/app-custom-table.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tOnInit,\n\tInput\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\nimport { clone } from \"../../utils/index\";\n\nexport class 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-custom-table\",\n\ttemplate: `\n\t\t<cds-table-toolbar [model]=\"model\">\n\t\t\t<button cdsButton=\"primary\" (click)=\"addRow()\">Add row</button>\n\t\t\t<button cdsButton=\"primary\" (click)=\"addColumn()\">Add column</button>\n\t\t</cds-table-toolbar>\n\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 cdsTableHeadCellLabel><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[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t(sort)=\"customSort($event)\">\n\t\t</cds-table>\n\t`\n})\nexport class DynamicTableStory implements OnInit {\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\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef<any>;\n\n\tngOnInit() {\n\t\tthis.model.data = [\n\t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"swer\" })],\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\t[new TableItem({ data: \"Name 8\" }), 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\tariaSortLabel: \"Custom header\"\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\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\taddRow() {\n\t\tconst lastRowCopy = clone(this.model.row(this.model.data.length - 1));\n\t\tthis.model.addRow(lastRowCopy);\n\t}\n\n\taddColumn() {\n\t\tlet column = Array(this.model.data.length).fill(null).map(() => new TableItem({ data: `Column ${this.model.row(0).length}` }));\n\t\tthis.model.addColumn(column);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", 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\";\nimport { clone } from \"../../utils/index\";\n\nexport class 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-custom-table\",\n\ttemplate: `\n\t\t<cds-table-toolbar [model]=\"model\">\n\t\t\t<button cdsButton=\"primary\" (click)=\"addRow()\">Add row</button>\n\t\t\t<button cdsButton=\"primary\" (click)=\"addColumn()\">Add column</button>\n\t\t</cds-table-toolbar>\n\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 cdsTableHeadCellLabel><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[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t(sort)=\"customSort($event)\">\n\t\t</cds-table>\n\t`\n})\nexport class DynamicTableStory 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\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef<any>;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"swer\" })],\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\t[new TableItem({ data: \"Name 8\" }), 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\tariaSortLabel: \"Custom header\"\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\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\taddRow() {\n\t\tconst lastRowCopy = clone(this.model.row(this.model.data.length - 1));\n\t\tthis.model.addRow(lastRowCopy);\n\t}\n\n\taddColumn() {\n\t\tlet column = Array(this.model.data.length).fill(null).map(() => new TableItem({ data: `Column ${this.model.row(0).length}` }));\n\t\tthis.model.addColumn(column);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n}\n",
             "properties": [
                 {
                     "name": "ariaSortLabel",
@@ -12509,12 +12509,12 @@
         },
         {
             "name": "IconDirective",
-            "id": "directive-IconDirective-21ae37b57899baf3e8245a90dec51940cd3b268ae715b1802f457b98cd059c4a8e79b901809e0b71407bb3e2690dfa374d7785012765618aa52ad93a8aa60326",
+            "id": "directive-IconDirective-8463d60dfe16c7bcf8a3776aa062892b7dd8d0f0d8ceaa3f80d037e1c83283698ccdba55f20b7202922f234b399c05507119f32acd459dd7ffc168fdd0b768e4",
             "file": "src/icon/icon.directive.ts",
             "type": "directive",
             "description": "<p>A directive for applying styling to an input element.</p>\n<p>Example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;input cdsText/&gt;</code></pre></div><p>See the <a href=\"http://www.carbondesignsystem.com/components/text-input/code\">vanilla carbon docs</a> for more detail.</p>\n",
             "rawdescription": "\n\nA directive for applying styling to an input element.\n\nExample:\n\n```html\n<input cdsText/>\n```\n\nSee the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tDirective,\n\tElementRef,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { IconService } from \"./icon.service\";\nimport { getAttributes } from \"@carbon/icon-helpers\";\n\n/**\n * A directive for applying styling to an input element.\n *\n * Example:\n *\n * ```html\n * <input cdsText/>\n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n */\n@Directive({\n\tselector: \"[cdsIcon], [ibmIcon]\"\n})\nexport class IconDirective implements AfterViewInit, OnChanges {\n\n\t/**\n\t * @deprecated since v5 - Use `cdsIcon` input property instead\n\t */\n\t@Input() set ibmIcon(iconName: string) {\n\t\tthis.cdsIcon = iconName;\n\t}\n\n\tstatic titleIdCounter = 0;\n\n\t@Input() cdsIcon = \"\";\n\n\t@Input() size = \"16\";\n\n\t@Input() title = \"\";\n\n\t@Input() ariaLabel = \"\";\n\n\t@Input() ariaLabelledBy = \"\";\n\n\t@Input() ariaHidden = \"\";\n\n\t@Input() isFocusable = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected iconService: IconService\n\t) {}\n\n\trenderIcon(iconName: string) {\n\t\tconst root = this.elementRef.nativeElement as HTMLElement;\n\n\t\tlet icon;\n\t\ttry {\n\t\t\ticon = this.iconService.get(iconName, this.size.toString());\n\t\t} catch (error) {\n\t\t\tconsole.warn(error);\n\t\t\t// bail out\n\t\t\treturn;\n\t\t}\n\n\t\tconst domParser = new DOMParser();\n\t\tconst rawSVG = icon.svg;\n\t\tconst svgElement = domParser.parseFromString(rawSVG, \"image/svg+xml\").documentElement;\n\n\t\tlet node: ChildNode = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : svgElement.firstChild;\n\t\troot.innerHTML = \"\"; // Clear root element\n\t\twhile (node) {\n\t\t\t// importNode makes a clone of the node\n\t\t\t// this ensures we keep looping over the nodes in the parsed document\n\t\t\troot.appendChild(root.ownerDocument.importNode(node, true));\n\t\t\t// type the node because the angular compiler freaks out if it\n\t\t\t// ends up thinking it's a `Node` instead of a `ChildNode`\n\t\t\tnode = node.nextSibling as ChildNode;\n\t\t}\n\n\t\tconst svg = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : root;\n\t\tsvg.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n\n\t\tconst attributes = getAttributes({\n\t\t\twidth: icon.attrs.width,\n\t\t\theight: icon.attrs.height,\n\t\t\tviewBox: icon.attrs.viewBox,\n\t\t\ttitle: this.title,\n\t\t\t\"aria-label\": this.ariaLabel,\n\t\t\t\"aria-labelledby\": this.ariaLabelledBy,\n\t\t\t\"aria-hidden\": this.ariaHidden,\n\t\t\tfocusable: this.isFocusable.toString()\n\t\t});\n\n\t\tconst attrKeys = Object.keys(attributes);\n\t\tfor (let i = 0; i < attrKeys.length; i++) {\n\t\t\tconst key = attrKeys[i];\n\t\t\tconst value = attributes[key];\n\n\t\t\tif (key === \"title\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tsvg.setAttribute(key, value);\n\t\t\t}\n\t\t}\n\n\t\tif (attributes[\"title\"]) {\n\t\t\tconst title = document.createElement(\"title\");\n\t\t\ttitle.textContent = attributes.title;\n\t\t\tIconDirective.titleIdCounter++;\n\t\t\ttitle.setAttribute(\"id\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t\t// title must be first for screen readers\n\t\t\tsvg.insertBefore(title, svg.firstElementChild);\n\t\t\tsvg.setAttribute(\"aria-labelledby\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.renderIcon(this.cdsIcon);\n\t}\n\n\tngOnChanges({ cdsIcon }: SimpleChanges) {\n\t\t// We want to ignore first change to let the icon register\n\t\t// and add only after view has been initialized\n\t\tif (!cdsIcon.isFirstChange()) {\n\t\t\tthis.renderIcon(this.cdsIcon);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tDirective,\n\tElementRef,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { IconService } from \"./icon.service\";\nimport { getAttributes } from \"@carbon/icon-helpers\";\n\n/**\n * A directive for applying styling to an input element.\n *\n * Example:\n *\n * ```html\n * <input cdsText/>\n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n */\n@Directive({\n\tselector: \"[cdsIcon], [ibmIcon]\"\n})\nexport class IconDirective implements AfterViewInit, OnChanges {\n\n\t/**\n\t * @deprecated since v5 - Use `cdsIcon` input property instead\n\t */\n\t@Input() set ibmIcon(iconName: string) {\n\t\tthis.cdsIcon = iconName;\n\t}\n\n\tstatic titleIdCounter = 0;\n\n\t@Input() cdsIcon = \"\";\n\n\t@Input() size = \"16\";\n\n\t@Input() title = \"\";\n\n\t@Input() ariaLabel = \"\";\n\n\t@Input() ariaLabelledBy = \"\";\n\n\t@Input() ariaHidden = \"\";\n\n\t@Input() isFocusable = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected iconService: IconService\n\t) {}\n\n\trenderIcon(iconName: string) {\n\t\tconst root = this.elementRef.nativeElement as HTMLElement;\n\n\t\tlet icon;\n\t\ttry {\n\t\t\ticon = this.iconService.get(iconName, this.size.toString());\n\t\t} catch (error) {\n\t\t\tconsole.warn(error);\n\t\t\t// bail out\n\t\t\treturn;\n\t\t}\n\n\t\tconst domParser = new DOMParser();\n\t\tconst rawSVG = icon.svg;\n\t\tconst svgElement = domParser.parseFromString(rawSVG, \"image/svg+xml\").documentElement;\n\n\t\tlet node: ChildNode = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : svgElement.firstChild;\n\t\troot.innerHTML = \"\"; // Clear root element\n\t\twhile (node) {\n\t\t\t// importNode makes a clone of the node\n\t\t\t// this ensures we keep looping over the nodes in the parsed document\n\t\t\troot.appendChild(root.ownerDocument.importNode(node, true));\n\t\t\t// type the node because the angular compiler freaks out if it\n\t\t\t// ends up thinking it's a `Node` instead of a `ChildNode`\n\t\t\tnode = node.nextSibling as ChildNode;\n\t\t}\n\n\t\tconst svg = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : root;\n\t\tsvg.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n\n\t\tconst attributes = getAttributes({\n\t\t\twidth: icon.attrs.width,\n\t\t\theight: icon.attrs.height,\n\t\t\tviewBox: icon.attrs.viewBox,\n\t\t\ttitle: this.title,\n\t\t\t\"aria-label\": this.ariaLabel,\n\t\t\t\"aria-labelledby\": this.ariaLabelledBy,\n\t\t\t\"aria-hidden\": this.ariaHidden,\n\t\t\tfocusable: this.isFocusable.toString()\n\t\t});\n\n\t\tconst attrKeys = Object.keys(attributes);\n\t\tfor (let i = 0; i < attrKeys.length; i++) {\n\t\t\tconst key = attrKeys[i];\n\t\t\tconst value = attributes[key];\n\n\t\t\tif (key === \"title\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tsvg.setAttribute(key, value);\n\t\t\t}\n\t\t}\n\n\t\tif (attributes[\"title\"]) {\n\t\t\tconst title = document.createElement(\"title\");\n\t\t\ttitle.textContent = attributes.title;\n\t\t\tIconDirective.titleIdCounter++;\n\t\t\ttitle.setAttribute(\"id\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t\t// title must be first for screen readers\n\t\t\tsvg.insertBefore(title, svg.firstElementChild);\n\t\t\tsvg.setAttribute(\"aria-labelledby\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.renderIcon(this.cdsIcon);\n\t}\n\n\tngOnChanges({ cdsIcon }: SimpleChanges) {\n\t\t// We want to ignore first change to let the icon register\n\t\t// and add only after view has been initialized\n\t\tif (cdsIcon && !cdsIcon.isFirstChange()) {\n\t\t\tthis.renderIcon(this.cdsIcon);\n\t\t}\n\t}\n}\n",
             "selector": "[cdsIcon], [ibmIcon]",
             "providers": [],
             "hostDirectives": [],
@@ -28402,7 +28402,7 @@
         },
         {
             "name": "DynamicTableStory",
-            "id": "component-DynamicTableStory-70201807a90d85ff5a7668524d729b920cc51650910a46e7c3be8fd006995ae27d23c52cb760a11e7124bffe0501df741aa10707f0c6036f28fc96533951937c",
+            "id": "component-DynamicTableStory-43dec1fee39d015661af87a2e0758230b3fe81f583b813b9295a920fa61c1f02e93d480424afab37673e46ee64fddb53093c74715a7b4269e5e642504d5fa75b",
             "file": "src/table/stories/app-custom-table.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -28622,12 +28622,12 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tTemplateRef,\n\tComponent,\n\tViewChild,\n\tOnInit,\n\tInput\n} from \"@angular/core\";\nimport { TableModel } from \"../table-model.class\";\nimport { TableItem } from \"../table-item.class\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\nimport { clone } from \"../../utils/index\";\n\nexport class 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-custom-table\",\n\ttemplate: `\n\t\t<cds-table-toolbar [model]=\"model\">\n\t\t\t<button cdsButton=\"primary\" (click)=\"addRow()\">Add row</button>\n\t\t\t<button cdsButton=\"primary\" (click)=\"addColumn()\">Add column</button>\n\t\t</cds-table-toolbar>\n\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 cdsTableHeadCellLabel><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[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t(sort)=\"customSort($event)\">\n\t\t</cds-table>\n\t`\n})\nexport class DynamicTableStory implements OnInit {\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\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef<any>;\n\n\tngOnInit() {\n\t\tthis.model.data = [\n\t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"swer\" })],\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\t[new TableItem({ data: \"Name 8\" }), 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\tariaSortLabel: \"Custom header\"\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\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\taddRow() {\n\t\tconst lastRowCopy = clone(this.model.row(this.model.data.length - 1));\n\t\tthis.model.addRow(lastRowCopy);\n\t}\n\n\taddColumn() {\n\t\tlet column = Array(this.model.data.length).fill(null).map(() => new TableItem({ data: `Column ${this.model.row(0).length}` }));\n\t\tthis.model.addColumn(column);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", 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\";\nimport { clone } from \"../../utils/index\";\n\nexport class 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-custom-table\",\n\ttemplate: `\n\t\t<cds-table-toolbar [model]=\"model\">\n\t\t\t<button cdsButton=\"primary\" (click)=\"addRow()\">Add row</button>\n\t\t\t<button cdsButton=\"primary\" (click)=\"addColumn()\">Add column</button>\n\t\t</cds-table-toolbar>\n\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 cdsTableHeadCellLabel><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[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t(rowClick)=\"onRowClick($event)\"\n\t\t\t(sort)=\"customSort($event)\">\n\t\t</cds-table>\n\t`\n})\nexport class DynamicTableStory 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\n\t@ViewChild(\"customTableItemTemplate\")\n\tprotected customTableItemTemplate: TemplateRef<any>;\n\n\tngAfterViewInit() {\n\t\tthis.model.data = [\n\t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: { name: \"Lessy\", link: \"#\" }, template: this.customTableItemTemplate })],\n\t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"swer\" })],\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\t[new TableItem({ data: \"Name 8\" }), 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\tariaSortLabel: \"Custom header\"\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\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\taddRow() {\n\t\tconst lastRowCopy = clone(this.model.row(this.model.data.length - 1));\n\t\tthis.model.addRow(lastRowCopy);\n\t}\n\n\taddColumn() {\n\t\tlet column = Array(this.model.data.length).fill(null).map(() => new TableItem({ data: `Column ${this.model.row(0).length}` }));\n\t\tthis.model.addColumn(column);\n\t}\n\n\tonRowClick(index: number) {\n\t\tconsole.log(\"Row item selected:\", index);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
             "implements": [
-                "OnInit"
+                "AfterViewInit"
             ]
         },
         {
@@ -33235,7 +33235,7 @@
         },
         {
             "name": "Label",
-            "id": "component-Label-a71cb8b410fa0fb9bc23d78aa7c0d630df9b07bd032c2dbc9b20dbe05f8cd24a8d2a4a834dffee9e566abe603fb16e7bae5e22ff50d4303ea4b1d43da10cc2ef",
+            "id": "component-Label-85ae03d1a6f24f3865f358410eff294acd9616a673c528045d0ad91a9ea366a3617c8675b4032ff09ed32efc5bb71effe767001bfad2a6ea8c435946c2bf4275",
             "file": "src/input/label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -33245,7 +33245,7 @@
             "selector": "cds-label, ibm-label",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-template #inputContentTemplate>\n\t<ng-content select=\"input,textarea,div\"></ng-content>\n</ng-template>\n\n<ng-template #labelContentTemplate>\n\t<ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"type\">\n\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t<cds-textarea-label\n\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[helperText]=\"helperText\"\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[ariaLabel]=\"ariaLabel\"\n\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t</cds-textarea-label>\n\t</ng-container>\n\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t<cds-text-label\n\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[helperText]=\"helperText\"\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[ariaLabel]=\"ariaLabel\"\n\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t</cds-text-label>\n\t</ng-container>\n\t<ng-container *ngSwitchDefault>\n\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t</ng-container>\n</ng-container>\n\n<ng-template #default>\n\t<label\n\t\t[for]=\"labelInputID\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t}\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t#wrapper>\n\t\t<svg\n\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\tibmIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tibmIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t</svg>\n\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t</div>\n\t<div\n\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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=\"!warn && 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</ng-template>\n\t",
+            "template": "<ng-template #inputContentTemplate>\n\t<ng-content select=\"input,textarea,div\"></ng-content>\n</ng-template>\n\n<ng-template #labelContentTemplate>\n\t<ng-content></ng-content>\n</ng-template>\n\n<ng-container [ngSwitch]=\"type\">\n\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t<cds-textarea-label\n\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[helperText]=\"helperText\"\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[ariaLabel]=\"ariaLabel\"\n\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t</cds-textarea-label>\n\t</ng-container>\n\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t<cds-text-label\n\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[helperText]=\"helperText\"\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[ariaLabel]=\"ariaLabel\"\n\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t</cds-text-label>\n\t</ng-container>\n\t<ng-container *ngSwitchDefault>\n\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t</ng-container>\n</ng-container>\n\n<ng-template #default>\n\t<label\n\t\t[for]=\"labelInputID\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--skeleton': skeleton\n\t\t}\">\n\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t}\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t#wrapper>\n\t\t<svg\n\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t</svg>\n\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t</div>\n\t<div\n\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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=\"!warn && 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</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -33477,7 +33477,7 @@
             "description": "<p><a href=\"../../?path=/story/components-input--label\">See demo</a></p>\n<p>To prevent attribute drilling, use <code>ibm-text-label</code> or <code>ibm-textarea-label</code> components</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-label&gt;\n    Label\n    &lt;input cdsText type=&quot;text&quot; class=&quot;input-field&quot;&gt;\n&lt;/cds-label&gt;</code></pre></div>",
             "rawdescription": "\n\n[See demo](../../?path=/story/components-input--label)\n\nTo prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n\n```html\n<cds-label>\n\tLabel\n\t<input cdsText type=\"text\" class=\"input-field\">\n</cds-label>\n```\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tAfterContentInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\nimport { TextInput } from \"./input.directive\";\n\n/**\n * [See demo](../../?path=/story/components-input--label)\n *\n * To prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n *\n * ```html\n * <cds-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-label>\n * ```\n */\n@Component({\n\tselector: \"cds-label, ibm-label\",\n\ttemplate: `\n\t\t<ng-template #inputContentTemplate>\n\t\t\t<ng-content select=\"input,textarea,div\"></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-template #labelContentTemplate>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-container [ngSwitch]=\"type\">\n\t\t\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t\t\t<cds-textarea-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-textarea-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t\t\t<cds-text-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-text-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchDefault>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\n\t\t<ng-template #default>\n\t\t\t<label\n\t\t\t\t[for]=\"labelInputID\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--skeleton': skeleton\n\t\t\t\t}\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tibmIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tibmIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!warn && 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</ng-template>\n\t`\n})\nexport class Label implements AfterContentInit, AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = `cds-label-${Label.labelCounter++}`;\n\t/**\n\t * Set to `true` for disabled state.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Optional helper text that appears under the label.\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 * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t@ViewChild(\"wrapper\") wrapper: ElementRef<HTMLDivElement>;\n\n\t@ContentChild(TextArea) textArea: TextArea;\n\n\t// @ts-ignore\n\t@ContentChild(TextInput, { static: false }) textInput: TextInput;\n\n\t@HostBinding(\"class.cds--form-item\") get labelClass() {\n\t\treturn this.type === undefined;\n\t}\n\n\ttype: \"TextArea\" | \"TextInput\";\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Update wrapper class if a textarea is hosted.\n\t */\n\tngAfterContentInit() {\n\t\tif (this.textArea) {\n\t\t\tthis.type = \"TextArea\";\n\t\t} else if (this.textInput) {\n\t\t\tthis.type = \"TextInput\";\n\t\t}\n\t}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\t// Will only be called when `default` template is being used\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` & `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input,textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tAfterContentInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\nimport { TextInput } from \"./input.directive\";\n\n/**\n * [See demo](../../?path=/story/components-input--label)\n *\n * To prevent attribute drilling, use `ibm-text-label` or `ibm-textarea-label` components\n *\n * ```html\n * <cds-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-label>\n * ```\n */\n@Component({\n\tselector: \"cds-label, ibm-label\",\n\ttemplate: `\n\t\t<ng-template #inputContentTemplate>\n\t\t\t<ng-content select=\"input,textarea,div\"></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-template #labelContentTemplate>\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-container [ngSwitch]=\"type\">\n\t\t\t<ng-container *ngSwitchCase=\"'TextArea'\">\n\t\t\t\t<cds-textarea-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textAreaTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-textarea-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchCase=\"'TextInput'\">\n\t\t\t\t<cds-text-label\n\t\t\t\t\t[labelInputID]=\"labelInputID\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t\t[labelTemplate]=\"labelContentTemplate\"\n\t\t\t\t\t[textInputTemplate]=\"inputContentTemplate\">\n\t\t\t\t</cds-text-label>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngSwitchDefault>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"default\"></ng-template>\n\t\t\t</ng-container>\n\t\t</ng-container>\n\n\t\t<ng-template #default>\n\t\t\t<label\n\t\t\t\t[for]=\"labelInputID\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--skeleton': skeleton\n\t\t\t\t}\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"labelContentTemplate\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!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--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"inputContentTemplate\"></ng-template>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!warn && 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</ng-template>\n\t`\n})\nexport class Label implements AfterContentInit, AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = `cds-label-${Label.labelCounter++}`;\n\t/**\n\t * Set to `true` for disabled state.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Optional helper text that appears under the label.\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 * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t@ViewChild(\"wrapper\") wrapper: ElementRef<HTMLDivElement>;\n\n\t@ContentChild(TextArea) textArea: TextArea;\n\n\t// @ts-ignore\n\t@ContentChild(TextInput, { static: false }) textInput: TextInput;\n\n\t@HostBinding(\"class.cds--form-item\") get labelClass() {\n\t\treturn this.type === undefined;\n\t}\n\n\ttype: \"TextArea\" | \"TextInput\";\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Update wrapper class if a textarea is hosted.\n\t */\n\tngAfterContentInit() {\n\t\tif (this.textArea) {\n\t\t\tthis.type = \"TextArea\";\n\t\t} else if (this.textInput) {\n\t\t\tthis.type = \"TextInput\";\n\t\t}\n\t}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\t// Will only be called when `default` template is being used\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` & `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input,textarea\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -50461,7 +50461,7 @@
         },
         {
             "name": "Table",
-            "id": "component-Table-c426871cf3f683296d5cfec2ff804bdaf4de4a2479a8b9181119bd4b4b219b8993961b85743aa7b3227766212f660c85082646b588e41c607f582f0470d59356",
+            "id": "component-Table-06d4bcd125acee9b5d25fce31d35b3f30b2d06e51d6dc8beb1728c292e43ea3a7c4104c328dd70351b3808d84ae3a81818cbe0a6bfe162b938eff9ce853c8bc7",
             "file": "src/table/table.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -50473,7 +50473,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[size]=\"size\"\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(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",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -50484,7 +50484,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nId of the table header description element\n",
                     "description": "<p>Id of the table header description element</p>\n",
-                    "line": 309,
+                    "line": 308,
                     "type": "string",
                     "decorators": []
                 },
@@ -50494,7 +50494,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nId of the table header title element\n",
                     "description": "<p>Id of the table header title element</p>\n",
-                    "line": 305,
+                    "line": 304,
                     "type": "string",
                     "decorators": []
                 },
@@ -50505,7 +50505,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": 398,
+                    "line": 397,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -50515,15 +50515,15 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 12389,
-                            "end": 12569,
+                            "pos": 12372,
+                            "end": 12552,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 330,
                             "tagName": {
-                                "pos": 12390,
-                                "end": 12394,
+                                "pos": 12373,
+                                "end": 12377,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50533,7 +50533,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": 426,
+                    "line": 425,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -50543,7 +50543,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": 487,
+                    "line": 486,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -50553,7 +50553,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": 367,
+                    "line": 366,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -50563,7 +50563,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": 315,
+                    "line": 314,
                     "type": "TableModel",
                     "decorators": []
                 },
@@ -50572,7 +50572,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 384,
+                    "line": 383,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -50583,7 +50583,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": 404,
+                    "line": 403,
                     "type": "number",
                     "decorators": []
                 },
@@ -50593,7 +50593,7 @@
                     "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<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": 499,
+                    "line": 498,
                     "type": "number",
                     "decorators": []
                 },
@@ -50604,7 +50604,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": 393,
+                    "line": 392,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -50615,7 +50615,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the table rows.\n",
                     "description": "<p>Size of the table rows.</p>\n",
-                    "line": 359,
+                    "line": 358,
                     "type": "TableRowSize",
                     "decorators": []
                 },
@@ -50626,7 +50626,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": 363,
+                    "line": 362,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -50637,7 +50637,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": 382,
+                    "line": 381,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -50645,7 +50645,7 @@
                     "name": "sortAscendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 440,
+                    "line": 439,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -50653,7 +50653,7 @@
                     "name": "sortDescendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 433,
+                    "line": 432,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -50664,7 +50664,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": 482,
+                    "line": 481,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -50675,7 +50675,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": 472,
+                    "line": 471,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -50685,7 +50685,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<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": 460,
+                    "line": 459,
                     "type": "any",
                     "decorators": []
                 }
@@ -50700,15 +50700,15 @@
                     "description": "<p>Emits if all rows are deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17289,
-                            "end": 17304,
+                            "pos": 17272,
+                            "end": 17287,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 17290,
-                                "end": 17295,
+                                "pos": 17273,
+                                "end": 17278,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50717,8 +50717,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 17296,
-                                "end": 17301,
+                                "pos": 17279,
+                                "end": 17284,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50729,7 +50729,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 571,
+                    "line": 570,
                     "type": "EventEmitter"
                 },
                 {
@@ -50741,15 +50741,15 @@
                     "description": "<p>Emits if a single row is deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17578,
-                            "end": 17636,
+                            "pos": 17561,
+                            "end": 17619,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 17579,
-                                "end": 17584,
+                                "pos": 17562,
+                                "end": 17567,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50758,8 +50758,8 @@
                             },
                             "comment": "<p>({model: this.model, deselectedRowIndex: index})</p>\n",
                             "name": {
-                                "pos": 17585,
-                                "end": 17585,
+                                "pos": 17568,
+                                "end": 17568,
                                 "flags": 8552448,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50770,7 +50770,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 585,
+                    "line": 584,
                     "type": "EventEmitter"
                 },
                 {
@@ -50780,7 +50780,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": 590,
+                    "line": 589,
                     "type": "EventEmitter"
                 },
                 {
@@ -50790,7 +50790,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": 595,
+                    "line": 594,
                     "type": "EventEmitter"
                 },
                 {
@@ -50802,15 +50802,15 @@
                     "description": "<p>Emits if all rows are selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17168,
-                            "end": 17183,
+                            "pos": 17151,
+                            "end": 17166,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 17169,
-                                "end": 17174,
+                                "pos": 17152,
+                                "end": 17157,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50819,8 +50819,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 17175,
-                                "end": 17180,
+                                "pos": 17158,
+                                "end": 17163,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50831,7 +50831,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 564,
+                    "line": 563,
                     "type": "EventEmitter"
                 },
                 {
@@ -50843,15 +50843,15 @@
                     "description": "<p>Emits if a single row is selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17413,
-                            "end": 17469,
+                            "pos": 17396,
+                            "end": 17452,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 17414,
-                                "end": 17419,
+                                "pos": 17397,
+                                "end": 17402,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50860,8 +50860,8 @@
                             },
                             "comment": "<p>({model: this.model, selectedRowIndex: index})</p>\n",
                             "name": {
-                                "pos": 17420,
-                                "end": 17420,
+                                "pos": 17403,
+                                "end": 17403,
                                 "flags": 8552448,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50872,7 +50872,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 578,
+                    "line": 577,
                     "type": "EventEmitter"
                 },
                 {
@@ -50884,15 +50884,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<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": 15630,
-                            "end": 15875,
+                            "pos": 15613,
+                            "end": 15858,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 330,
                             "tagName": {
-                                "pos": 15631,
-                                "end": 15640,
+                                "pos": 15614,
+                                "end": 15623,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50902,15 +50902,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": 15875,
-                            "end": 17069,
+                            "pos": 15858,
+                            "end": 17052,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 330,
                             "tagName": {
-                                "pos": 15876,
-                                "end": 15881,
+                                "pos": 15859,
+                                "end": 15864,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -50920,7 +50920,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": 557,
+                    "line": 556,
                     "type": "EventEmitter"
                 }
             ],
@@ -50933,7 +50933,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 614,
+                    "line": 613,
                     "modifierKind": [
                         123
                     ]
@@ -50946,7 +50946,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 615,
+                    "line": 614,
                     "modifierKind": [
                         123
                     ]
@@ -50959,7 +50959,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 613,
+                    "line": 612,
                     "modifierKind": [
                         123
                     ]
@@ -50972,7 +50972,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Controls if all checkboxes are viewed as selected.</p>\n",
-                    "line": 600,
+                    "line": 599,
                     "rawdescription": "\n\nControls if all checkboxes are viewed as selected.\n"
                 },
                 {
@@ -50983,7 +50983,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Controls the indeterminate state of the header checkbox.</p>\n",
-                    "line": 605,
+                    "line": 604,
                     "rawdescription": "\n\nControls the indeterminate state of the header checkbox.\n"
                 },
                 {
@@ -50994,7 +50994,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Allows table content to scroll horizontally</p>\n",
-                    "line": 477,
+                    "line": 476,
                     "rawdescription": "\n\nAllows table content to scroll horizontally\n",
                     "decorators": [
                         {
@@ -51027,7 +51027,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 810,
+                    "line": 809,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51076,7 +51076,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 815,
+                    "line": 814,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51134,7 +51134,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 820,
+                    "line": 819,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51192,7 +51192,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 824,
+                    "line": 823,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51244,7 +51244,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 804,
+                    "line": 803,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51293,7 +51293,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 832,
+                    "line": 831,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51345,7 +51345,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 785,
+                    "line": 784,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51388,7 +51388,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 780,
+                    "line": 779,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51431,7 +51431,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 767,
+                    "line": 766,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51461,7 +51461,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 695,
+                    "line": 694,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51478,7 +51478,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 843,
+                    "line": 842,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51499,7 +51499,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 665,
+                    "line": 664,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51516,7 +51516,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 291,
+                    "line": 290,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -51540,7 +51540,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 882,
+                    "line": 881,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51550,7 +51550,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 886,
+                    "line": 885,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51560,7 +51560,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 890,
+                    "line": 889,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51570,7 +51570,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 872,
+                    "line": 871,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51580,7 +51580,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 898,
+                    "line": 897,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51590,7 +51590,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 894,
+                    "line": 893,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51607,7 +51607,7 @@
                     "optional": false,
                     "returnType": "{ value: any; }",
                     "typeParameters": [],
-                    "line": 865,
+                    "line": 864,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51628,7 +51628,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 878,
+                    "line": 877,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51638,7 +51638,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 875,
+                    "line": 874,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51648,7 +51648,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 711,
+                    "line": 710,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51665,7 +51665,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 730,
+                    "line": 729,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51693,7 +51693,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 794,
+                    "line": 793,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggered when the user scrolls on the `<tbody>` element.\nEmits the `scrollLoad` event.\n",
@@ -51716,7 +51716,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 706,
+                    "line": 705,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51733,7 +51733,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 716,
+                    "line": 715,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51762,7 +51762,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 750,
+                    "line": 749,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51791,7 +51791,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 860,
+                    "line": 859,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggered when the user scrolls on the `<tbody>` element.\nEmits the `scrollLoad` event.\n",
@@ -51827,7 +51827,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 280,
+                    "line": 279,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -51873,7 +51873,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 261,
+                    "line": 260,
                     "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",
@@ -51908,7 +51908,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 734,
+                    "line": 733,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -51923,7 +51923,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAllows table content to scroll horizontally\n",
                     "description": "<p>Allows table content to scroll horizontally</p>\n",
-                    "line": 477,
+                    "line": 476,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -51934,7 +51934,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<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-table [model]=&quot;model&quot;&gt;&lt;/cds-table&gt;</code></pre></div><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<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><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<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<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<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<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\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[size]=\"size\"\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 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 (element.firstElementChild && element.firstElementChild.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) {\n\t\t\tfocusElementList[1].focus();\n\t\t} else if (focusElementList.length > 0) {\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\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\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\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\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 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 (element.firstElementChild && element.firstElementChild.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) {\n\t\t\tfocusElementList[1].focus();\n\t\t} else if (focusElementList.length > 0) {\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\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\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\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",
@@ -51963,7 +51963,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 640,
+                "line": 639,
                 "rawdescription": "\n\nCreates an instance of Table.\n",
                 "jsdoctags": [
                     {
@@ -52016,7 +52016,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 315,
+                        "line": 314,
                         "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": [
@@ -52035,7 +52035,7 @@
                         "name": "model",
                         "type": "",
                         "returnType": "TableModel",
-                        "line": 352
+                        "line": 351
                     }
                 },
                 "isDataGrid": {
@@ -52054,7 +52054,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 367,
+                        "line": 366,
                         "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": [
@@ -52073,7 +52073,7 @@
                         "name": "isDataGrid",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 386
+                        "line": 385
                     }
                 },
                 "expandButtonAriaLabel": {
@@ -52092,7 +52092,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 426,
+                        "line": 425,
                         "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": [
@@ -52111,7 +52111,7 @@
                         "name": "expandButtonAriaLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 429
+                        "line": 428
                     }
                 },
                 "sortDescendingLabel": {
@@ -52130,7 +52130,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 433,
+                        "line": 432,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -52147,7 +52147,7 @@
                         "name": "sortDescendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 436
+                        "line": 435
                     }
                 },
                 "sortAscendingLabel": {
@@ -52166,7 +52166,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 440,
+                        "line": 439,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -52183,7 +52183,7 @@
                         "name": "sortAscendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 443
+                        "line": 442
                     }
                 },
                 "translations": {
@@ -52202,7 +52202,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 460,
+                        "line": 459,
                         "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<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": [
@@ -52224,7 +52224,7 @@
                         "name": "noData",
                         "type": "",
                         "returnType": "",
-                        "line": 607
+                        "line": 606
                     }
                 }
             }
@@ -53467,7 +53467,7 @@
         },
         {
             "name": "TableHead",
-            "id": "component-TableHead-daac3df135039b32b5bb3ca1a1ba7d13dfc43a40592b8da36df5af16dfd6cbf2e75c019846bcf835fe3fa92b68e3c549ee5a326a12670d34aecebb6ce59c7332",
+            "id": "component-TableHead-32ba6d2ca460923efa25feb01055b692fbca4b444e812dc78335aa3950bf7ee2dbc8dbbc244e750fe32091db0beb5601c3ddca079626094b9066932ba332adf6",
             "file": "src/table/head/table-head.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -53479,7 +53479,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\tstyle=\"width: 0;\"\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[size]=\"size\"\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[skeleton]=\"skeleton\"\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[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\tstyle=\"width: 0;\"\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[skeleton]=\"skeleton\"\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": [],
@@ -53488,7 +53488,7 @@
                     "name": "checkboxHeaderLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 120,
+                    "line": 114,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -53497,7 +53497,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 98,
+                    "line": 97,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53505,7 +53505,7 @@
                     "name": "filterTitle",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 147,
+                    "line": 141,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -53513,7 +53513,7 @@
                     "name": "model",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 94,
+                    "line": 93,
                     "type": "TableModel",
                     "decorators": []
                 },
@@ -53522,7 +53522,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 102,
+                    "line": 101,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53531,7 +53531,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 100,
+                    "line": 99,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53540,27 +53540,16 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 96,
+                    "line": 95,
                     "type": "boolean",
                     "decorators": []
                 },
-                {
-                    "name": "size",
-                    "defaultValue": "\"md\"",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "rawdescription": "\n\nSize of the table rows.\n",
-                    "description": "<p>Size of the table rows.</p>\n",
-                    "line": 117,
-                    "type": "TableRowSize",
-                    "decorators": []
-                },
                 {
                     "name": "skeleton",
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 104,
+                    "line": 103,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53571,7 +53560,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": 112,
+                    "line": 111,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -53579,7 +53568,7 @@
                     "name": "sortAscendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 138,
+                    "line": 132,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -53587,7 +53576,7 @@
                     "name": "sortDescendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 129,
+                    "line": 123,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -53596,7 +53585,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 106,
+                    "line": 105,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -53611,15 +53600,15 @@
                     "description": "<p>Emits if all rows are deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 4169,
-                            "end": 4184,
+                            "pos": 4075,
+                            "end": 4090,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 4170,
-                                "end": 4175,
+                                "pos": 4076,
+                                "end": 4081,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53628,8 +53617,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 4176,
-                                "end": 4181,
+                                "pos": 4082,
+                                "end": 4087,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53640,7 +53629,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 170,
+                    "line": 164,
                     "type": "EventEmitter"
                 },
                 {
@@ -53652,15 +53641,15 @@
                     "description": "<p>Emits if all rows are selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 4045,
-                            "end": 4060,
+                            "pos": 3951,
+                            "end": 3966,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 4046,
-                                "end": 4051,
+                                "pos": 3952,
+                                "end": 3957,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53669,8 +53658,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 4052,
-                                "end": 4057,
+                                "pos": 3958,
+                                "end": 3963,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -53681,7 +53670,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 164,
+                    "line": 158,
                     "type": "EventEmitter"
                 },
                 {
@@ -53691,7 +53680,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": 158,
+                    "line": 152,
                     "type": "EventEmitter"
                 }
             ],
@@ -53704,7 +53693,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 172,
+                    "line": 166,
                     "modifierKind": [
                         123
                     ]
@@ -53717,7 +53706,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 195,
+                    "line": 189,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -53727,7 +53716,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 207,
+                    "line": 201,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -53737,7 +53726,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 203,
+                    "line": 197,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -53747,7 +53736,7 @@
                     "optional": false,
                     "returnType": "Observable<string>",
                     "typeParameters": [],
-                    "line": 199,
+                    "line": 193,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -53757,7 +53746,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 187,
+                    "line": 181,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -53771,7 +53760,7 @@
             "description": "<p>A subcomponent that creates the thead of the table</p>\n<h2>Basic usage</h2>\n<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\tstyle=\"width: 0;\"\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[size]=\"size\"\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[skeleton]=\"skeleton\"\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/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\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[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\tstyle=\"width: 0;\"\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[skeleton]=\"skeleton\"\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",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t.cds--table-expand-v2 {\n\t\t\tpadding-left: 2.5rem;\n\t\t}\n\t\n",
@@ -53788,7 +53777,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 177,
+                "line": 171,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -53821,7 +53810,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 120,
+                        "line": 114,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -53838,7 +53827,7 @@
                         "name": "checkboxHeaderLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 124
+                        "line": 118
                     }
                 },
                 "sortDescendingLabel": {
@@ -53857,7 +53846,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 129,
+                        "line": 123,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -53874,7 +53863,7 @@
                         "name": "sortDescendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 133
+                        "line": 127
                     }
                 },
                 "sortAscendingLabel": {
@@ -53893,7 +53882,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 138,
+                        "line": 132,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -53910,7 +53899,7 @@
                         "name": "sortAscendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 142
+                        "line": 136
                     }
                 },
                 "filterTitle": {
@@ -53929,7 +53918,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 147,
+                        "line": 141,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -53946,7 +53935,7 @@
                         "name": "filterTitle",
                         "type": "",
                         "returnType": "",
-                        "line": 151
+                        "line": 145
                     }
                 }
             }
@@ -57983,7 +57972,7 @@
         },
         {
             "name": "TextInputLabelComponent",
-            "id": "component-TextInputLabelComponent-1bf9a239744c22e681893cd17f608d144fbcd7c9c9c9febddb0b9dfd13c32543aac0c30c8ef75de7a47080d68d2788b4629cd15276ad4f188044ac18ce3baec8",
+            "id": "component-TextInputLabelComponent-f71db8d45024d4106cce6fdcc7be99bf211ca1f2c08b0f6c33cb0a9634f00cb220fc0afa62fa70e04331278e9ea1c79f92cbdd189d9f12c3dc382b60aafc14f7",
             "file": "src/input/text-input-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -57993,7 +57982,7 @@
             "selector": "cds-text-label, ibm-text-label",
             "styleUrls": [],
             "styles": [],
-            "template": "<label\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n<div\n\tclass=\"cds--text-input__field-wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t#wrapper>\n\t<svg\n\t\t*ngIf=\"!warn && invalid\"\n\t\tibmIcon=\"warning--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-input__invalid-icon\">\n\t</svg>\n\t<svg\n\t\t*ngIf=\"!invalid && warn\"\n\t\tibmIcon=\"warning--alt--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t</svg>\n\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t<ng-template #textInputContent>\n\t\t<ng-content select=\"input[type=text],div\"></ng-content>\n\t</ng-template>\n</div>\n<div\n\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n</div>\n<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n</div>\n\t",
+            "template": "<label\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n<div\n\tclass=\"cds--text-input__field-wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t#wrapper>\n\t<svg\n\t\t*ngIf=\"!warn && invalid\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-input__invalid-icon\">\n\t</svg>\n\t<svg\n\t\t*ngIf=\"!invalid && warn\"\n\t\tcdsIcon=\"warning--alt--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t</svg>\n\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t<ng-template #textInputContent>\n\t\t<ng-content select=\"input[type=text],div\"></ng-content>\n\t</ng-template>\n</div>\n<div\n\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n</div>\n<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -58218,7 +58207,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\tibmIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tibmIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t<ng-template #textInputContent>\n\t\t\t\t<ng-content select=\"input[type=text],div\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\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 * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t<ng-template #textInputContent>\n\t\t\t\t<ng-content select=\"input[type=text],div\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\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 * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\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 * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -81416,8 +81405,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TableHead",
-                "coveragePercent": 25,
-                "coverageCount": "6/24",
+                "coveragePercent": 21,
+                "coverageCount": "5/23",
                 "status": "low"
             },
             {