carbon-components-angular 5.12.4 → 5.13.1

package/docs/documentation.json

@@ -5233,7 +5233,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>The label for the sort button</p>\n",
-                    "line": 130,
+                    "line": 155,
                     "rawdescription": "\n\nThe label for the sort button\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5246,7 +5246,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>Attach a class to the column, both the header and column cells.</p>\n",
-                    "line": 50,
+                    "line": 97,
                     "rawdescription": "\n\nAttach a class to the column, both the header and column cells.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5260,7 +5260,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>The number of columns to span</p>\n",
-                    "line": 44,
+                    "line": 91,
                     "rawdescription": "\n\nThe number of columns to span\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5273,7 +5273,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>Data for the header item.</p>\n",
-                    "line": 85,
+                    "line": 110,
                     "rawdescription": "\n\nData for the header item.\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5287,7 +5287,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Number of applied filters.</p>\n<p><code>filter()</code> should set it to appropriate number.</p>\n",
-                    "line": 33,
+                    "line": 80,
                     "rawdescription": "\n\nNumber of applied filters.\n\n`filter()` should set it to appropriate number.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5300,7 +5300,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>This is where you store your data when applying filter.</p>\n<p>It is the actual object you have access to with <code>let-filter=&quot;data&quot;</code> in your template.</p>\n<p>Make sure to store data in <code>filter.data</code> in your template, and you will have it\navailable in <code>filterData.data</code> in your extension of <code>TableHeaderItem</code>.</p>\n<p>Because angular and object references.</p>\n",
-                    "line": 201,
+                    "line": 226,
                     "rawdescription": "\n\nThis is where you store your data when applying filter.\n\nIt is the actual object you have access to with `let-filter=\"data\"` in your template.\n\nMake sure to store data in `filter.data` in your template, and you will have it\navailable in `filterData.data` in your extension of `TableHeaderItem`.\n\nBecause angular and object references.\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5313,7 +5313,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used along with <code>filterTemplate</code> to construct the filter popover</p>\n",
-                    "line": 189,
+                    "line": 214,
                     "rawdescription": "\n\nUsed along with `filterTemplate` to construct the filter popover\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5326,7 +5326,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used as a template for popover filter.</p>\n<p><code>let-popover=&quot;popover&quot;</code> will give you access to popover component and allow you to\nmanipulate it if needed.</p>\n<p><code>let-filter=&quot;filter&quot;</code> will give you access to the &quot;filter&quot;. The main takeaway is\nstore the data you need to <code>filter.data</code>. You will be able to access it as\n<code>this.filterData.data</code> from your <code>filter()</code> function when you extend <code>TableHeaderItem</code></p>\n<p>Example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ng-template #filter let-popover=&quot;popover&quot;&gt;\n    &lt;cds-label class=&quot;first-label&quot;&gt;\n        Value\n        &lt;input type=&quot;text&quot; [(ngModel)]=&quot;filter1&quot; class=&quot;input-field&quot;&gt;\n    &lt;/cds-label&gt;\n&lt;/ng-template&gt;\n\n&lt;ng-template #filterFooter let-popover=&quot;popover&quot; let-filter=&quot;data&quot;&gt;\n    &lt;button class=&quot;btn--primary&quot; (click)=&quot;filter.data = filter1; popover.onClose()&quot;&gt;Apply&lt;/button&gt;\n    &lt;button class=&quot;btn--secondary&quot; (click)=&quot;popover.onClose()&quot;&gt;Cancel&lt;/button&gt;\n&lt;/ng-template&gt;</code></pre></div><p>Set the template with, for example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">new FilterableHeaderItem({\n    filterTemplate: this.filter,\n    filterFooter: this.filterFooter\n})</code></pre></div><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.indexOf(this.filterData.data) &gt;= 0) {\n            this.filterCount = 1;\n            return false;\n        }\n        this.filterCount = 0;\n        return true;\n    }\n}</code></pre></div>",
-                    "line": 184,
+                    "line": 209,
                     "rawdescription": "\n\nUsed as a template for popover filter.\n\n`let-popover=\"popover\"` will give you access to popover component and allow you to\nmanipulate it if needed.\n\n`let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\nstore the data you need to `filter.data`. You will be able to access it as\n`this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\nExample:\n```html\n<ng-template #filter let-popover=\"popover\">\n\t<cds-label class=\"first-label\">\n\t\tValue\n\t\t<input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\">\n\t</cds-label>\n</ng-template>\n\n<ng-template #filterFooter let-popover=\"popover\" let-filter=\"data\">\n\t<button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.onClose()\">Apply</button>\n\t<button class=\"btn--secondary\" (click)=\"popover.onClose()\">Cancel</button>\n</ng-template>\n```\n\nSet the template with, for example:\n```typescript\nnew FilterableHeaderItem({\n\tfilterTemplate: this.filter,\n\tfilterFooter: this.filterFooter\n})\n```\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.indexOf(this.filterData.data) >= 0) {\n\t\t\tthis.filterCount = 1;\n\t\t\treturn false;\n\t\t}\n\t\tthis.filterCount = 0;\n\t\treturn true;\n\t}\n}\n```\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5339,7 +5339,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>A callback function to format the sort label. Will be heavily called.</p>\n",
-                    "line": 135,
+                    "line": 160,
                     "rawdescription": "\n\nA callback function to format the sort label. Will be heavily called.\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5352,7 +5352,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>Data for the header item for general usage in the controller.\nFor example, which <code>field</code> is this column related to.</p>\n",
-                    "line": 91,
+                    "line": 116,
                     "rawdescription": "\n\nData for the header item for general usage in the controller.\nFor example, which `field` is this column related to.\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5366,7 +5366,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>The number of rows to span\n<strong>NOTE:</strong> not supported by the default carbon table</p>\n",
-                    "line": 39,
+                    "line": 86,
                     "rawdescription": "\n\nThe number of rows to span\n**NOTE:** not supported by the default carbon table\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5380,12 +5380,25 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Enables sorting on click by default.\nIf false then this column won&#39;t show a sorting arrow at all.</p>\n",
-                    "line": 25,
+                    "line": 72,
                     "rawdescription": "\n\nEnables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
                     }
                 },
+                {
+                    "name": "sortDirection",
+                    "defaultValue": "\"NONE\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "SortType",
+                    "optional": false,
+                    "description": "",
+                    "line": 228,
+                    "inheritance": {
+                        "file": "TableHeaderItem"
+                    }
+                },
                 {
                     "name": "sorted",
                     "defaultValue": "false",
@@ -5394,7 +5407,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Disables sorting by default.</p>\n",
-                    "line": 18,
+                    "line": 65,
                     "rawdescription": "\n\nDisables sorting by default.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5408,7 +5421,7 @@
                     "type": "object",
                     "optional": false,
                     "description": "<p>Style for the column, applied to every element in the column.</p>\n<p>ngStyle-like format</p>\n",
-                    "line": 58,
+                    "line": 105,
                     "rawdescription": "\n\nStyle for the column, applied to every element in the column.\n\nngStyle-like format\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5421,7 +5434,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used to display data in a desired way.</p>\n<p>If not provided, displays data as a simple string.</p>\n<p>Usage:</p>\n<p>In a component where you&#39;re using the table create a template like:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ng-template #customHeaderTemplate let-data=&quot;data&quot;&gt;\n        &lt;i&gt;&lt;a [routerLink]=&quot;data.link&quot;&gt;{{data.name}}&lt;/a&gt;&lt;/i&gt;\n&lt;/ng-template&gt;</code></pre></div><p>where we assume your data contains <code>link</code> and <code>name</code>. <code>let-data=&quot;data&quot;</code> is\nnecessary for you to be able to access item&#39;s data in the template.</p>\n<p>Create <code>ViewChild</code> property with:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">(at)ViewChild(&quot;customHeaderTemplate&quot;)\nprotected customHeaderTemplate: TemplateRef&lt;any&gt;;</code></pre></div><p>Set the template to the header item, for example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">this.model.header = [\n        new TableHeaderItem({data: {name: &quot;Custom header&quot;, link: &quot;/table&quot;}, template: this.customHeaderTemplate})\n];</code></pre></div>",
-                    "line": 125,
+                    "line": 150,
                     "rawdescription": "\n\nUsed to display data in a desired way.\n\nIf not provided, displays data as a simple string.\n\nUsage:\n\nIn a component where you're using the table create a template like:\n\n```html\n<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t<i><a [routerLink]=\"data.link\">{{data.name}}</a></i>\n</ng-template>\n```\nwhere we assume your data contains `link` and `name`. `let-data=\"data\"` is\nnecessary for you to be able to access item's data in the template.\n\nCreate `ViewChild` property with:\n\n```typescript\n(at)ViewChild(\"customHeaderTemplate\")\nprotected customHeaderTemplate: TemplateRef<any>;\n```\n\nSet the template to the header item, for example:\n\n```typescript\nthis.model.header = [\n\t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n];\n```\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5435,7 +5448,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Defines if column under this TableHeaderItem should be displayed.</p>\n",
-                    "line": 12,
+                    "line": 59,
                     "rawdescription": "\n\nDefines if column under this TableHeaderItem should be displayed.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5502,7 +5515,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 299,
+                    "line": 293,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to filter rows in the table.\n\nOverride to make a custom filter.\n\nEven though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set `filterCount` before returning.\n\n`true` to hide the row\n`false` to show the row\n",
@@ -5546,7 +5559,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>The label for the sort button</p>\n",
-                    "line": 130,
+                    "line": 155,
                     "rawdescription": "\n\nThe label for the sort button\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5559,7 +5572,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>Attach a class to the column, both the header and column cells.</p>\n",
-                    "line": 50,
+                    "line": 97,
                     "rawdescription": "\n\nAttach a class to the column, both the header and column cells.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5573,7 +5586,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>The number of columns to span</p>\n",
-                    "line": 44,
+                    "line": 91,
                     "rawdescription": "\n\nThe number of columns to span\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5586,7 +5599,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>Data for the header item.</p>\n",
-                    "line": 85,
+                    "line": 110,
                     "rawdescription": "\n\nData for the header item.\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5600,7 +5613,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Number of applied filters.</p>\n<p><code>filter()</code> should set it to appropriate number.</p>\n",
-                    "line": 33,
+                    "line": 80,
                     "rawdescription": "\n\nNumber of applied filters.\n\n`filter()` should set it to appropriate number.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5613,7 +5626,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>This is where you store your data when applying filter.</p>\n<p>It is the actual object you have access to with <code>let-filter=&quot;data&quot;</code> in your template.</p>\n<p>Make sure to store data in <code>filter.data</code> in your template, and you will have it\navailable in <code>filterData.data</code> in your extension of <code>TableHeaderItem</code>.</p>\n<p>Because angular and object references.</p>\n",
-                    "line": 201,
+                    "line": 226,
                     "rawdescription": "\n\nThis is where you store your data when applying filter.\n\nIt is the actual object you have access to with `let-filter=\"data\"` in your template.\n\nMake sure to store data in `filter.data` in your template, and you will have it\navailable in `filterData.data` in your extension of `TableHeaderItem`.\n\nBecause angular and object references.\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5626,7 +5639,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used along with <code>filterTemplate</code> to construct the filter popover</p>\n",
-                    "line": 189,
+                    "line": 214,
                     "rawdescription": "\n\nUsed along with `filterTemplate` to construct the filter popover\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5639,7 +5652,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used as a template for popover filter.</p>\n<p><code>let-popover=&quot;popover&quot;</code> will give you access to popover component and allow you to\nmanipulate it if needed.</p>\n<p><code>let-filter=&quot;filter&quot;</code> will give you access to the &quot;filter&quot;. The main takeaway is\nstore the data you need to <code>filter.data</code>. You will be able to access it as\n<code>this.filterData.data</code> from your <code>filter()</code> function when you extend <code>TableHeaderItem</code></p>\n<p>Example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ng-template #filter let-popover=&quot;popover&quot;&gt;\n    &lt;cds-label class=&quot;first-label&quot;&gt;\n        Value\n        &lt;input type=&quot;text&quot; [(ngModel)]=&quot;filter1&quot; class=&quot;input-field&quot;&gt;\n    &lt;/cds-label&gt;\n&lt;/ng-template&gt;\n\n&lt;ng-template #filterFooter let-popover=&quot;popover&quot; let-filter=&quot;data&quot;&gt;\n    &lt;button class=&quot;btn--primary&quot; (click)=&quot;filter.data = filter1; popover.onClose()&quot;&gt;Apply&lt;/button&gt;\n    &lt;button class=&quot;btn--secondary&quot; (click)=&quot;popover.onClose()&quot;&gt;Cancel&lt;/button&gt;\n&lt;/ng-template&gt;</code></pre></div><p>Set the template with, for example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">new FilterableHeaderItem({\n    filterTemplate: this.filter,\n    filterFooter: this.filterFooter\n})</code></pre></div><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.indexOf(this.filterData.data) &gt;= 0) {\n            this.filterCount = 1;\n            return false;\n        }\n        this.filterCount = 0;\n        return true;\n    }\n}</code></pre></div>",
-                    "line": 184,
+                    "line": 209,
                     "rawdescription": "\n\nUsed as a template for popover filter.\n\n`let-popover=\"popover\"` will give you access to popover component and allow you to\nmanipulate it if needed.\n\n`let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\nstore the data you need to `filter.data`. You will be able to access it as\n`this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\nExample:\n```html\n<ng-template #filter let-popover=\"popover\">\n\t<cds-label class=\"first-label\">\n\t\tValue\n\t\t<input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\">\n\t</cds-label>\n</ng-template>\n\n<ng-template #filterFooter let-popover=\"popover\" let-filter=\"data\">\n\t<button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.onClose()\">Apply</button>\n\t<button class=\"btn--secondary\" (click)=\"popover.onClose()\">Cancel</button>\n</ng-template>\n```\n\nSet the template with, for example:\n```typescript\nnew FilterableHeaderItem({\n\tfilterTemplate: this.filter,\n\tfilterFooter: this.filterFooter\n})\n```\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.indexOf(this.filterData.data) >= 0) {\n\t\t\tthis.filterCount = 1;\n\t\t\treturn false;\n\t\t}\n\t\tthis.filterCount = 0;\n\t\treturn true;\n\t}\n}\n```\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5652,7 +5665,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>A callback function to format the sort label. Will be heavily called.</p>\n",
-                    "line": 135,
+                    "line": 160,
                     "rawdescription": "\n\nA callback function to format the sort label. Will be heavily called.\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5665,7 +5678,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>Data for the header item for general usage in the controller.\nFor example, which <code>field</code> is this column related to.</p>\n",
-                    "line": 91,
+                    "line": 116,
                     "rawdescription": "\n\nData for the header item for general usage in the controller.\nFor example, which `field` is this column related to.\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5679,7 +5692,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>The number of rows to span\n<strong>NOTE:</strong> not supported by the default carbon table</p>\n",
-                    "line": 39,
+                    "line": 86,
                     "rawdescription": "\n\nThe number of rows to span\n**NOTE:** not supported by the default carbon table\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5693,12 +5706,25 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Enables sorting on click by default.\nIf false then this column won&#39;t show a sorting arrow at all.</p>\n",
-                    "line": 25,
+                    "line": 72,
                     "rawdescription": "\n\nEnables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
                     }
                 },
+                {
+                    "name": "sortDirection",
+                    "defaultValue": "\"NONE\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "SortType",
+                    "optional": false,
+                    "description": "",
+                    "line": 228,
+                    "inheritance": {
+                        "file": "TableHeaderItem"
+                    }
+                },
                 {
                     "name": "sorted",
                     "defaultValue": "false",
@@ -5707,7 +5733,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Disables sorting by default.</p>\n",
-                    "line": 18,
+                    "line": 65,
                     "rawdescription": "\n\nDisables sorting by default.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5721,7 +5747,7 @@
                     "type": "object",
                     "optional": false,
                     "description": "<p>Style for the column, applied to every element in the column.</p>\n<p>ngStyle-like format</p>\n",
-                    "line": 58,
+                    "line": 105,
                     "rawdescription": "\n\nStyle for the column, applied to every element in the column.\n\nngStyle-like format\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5734,7 +5760,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used to display data in a desired way.</p>\n<p>If not provided, displays data as a simple string.</p>\n<p>Usage:</p>\n<p>In a component where you&#39;re using the table create a template like:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ng-template #customHeaderTemplate let-data=&quot;data&quot;&gt;\n        &lt;i&gt;&lt;a [routerLink]=&quot;data.link&quot;&gt;{{data.name}}&lt;/a&gt;&lt;/i&gt;\n&lt;/ng-template&gt;</code></pre></div><p>where we assume your data contains <code>link</code> and <code>name</code>. <code>let-data=&quot;data&quot;</code> is\nnecessary for you to be able to access item&#39;s data in the template.</p>\n<p>Create <code>ViewChild</code> property with:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">(at)ViewChild(&quot;customHeaderTemplate&quot;)\nprotected customHeaderTemplate: TemplateRef&lt;any&gt;;</code></pre></div><p>Set the template to the header item, for example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">this.model.header = [\n        new TableHeaderItem({data: {name: &quot;Custom header&quot;, link: &quot;/table&quot;}, template: this.customHeaderTemplate})\n];</code></pre></div>",
-                    "line": 125,
+                    "line": 150,
                     "rawdescription": "\n\nUsed to display data in a desired way.\n\nIf not provided, displays data as a simple string.\n\nUsage:\n\nIn a component where you're using the table create a template like:\n\n```html\n<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t<i><a [routerLink]=\"data.link\">{{data.name}}</a></i>\n</ng-template>\n```\nwhere we assume your data contains `link` and `name`. `let-data=\"data\"` is\nnecessary for you to be able to access item's data in the template.\n\nCreate `ViewChild` property with:\n\n```typescript\n(at)ViewChild(\"customHeaderTemplate\")\nprotected customHeaderTemplate: TemplateRef<any>;\n```\n\nSet the template to the header item, for example:\n\n```typescript\nthis.model.header = [\n\t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n];\n```\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5748,7 +5774,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Defines if column under this TableHeaderItem should be displayed.</p>\n",
-                    "line": 12,
+                    "line": 59,
                     "rawdescription": "\n\nDefines if column under this TableHeaderItem should be displayed.\n\n",
                     "inheritance": {
                         "file": "TableHeaderItem"
@@ -5815,7 +5841,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 299,
+                    "line": 293,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to filter rows in the table.\n\nOverride to make a custom filter.\n\nEven though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set `filterCount` before returning.\n\n`true` to hide the row\n`false` to show the row\n",
@@ -6623,12 +6649,12 @@
         },
         {
             "name": "NumberChange",
-            "id": "class-NumberChange-5d2e7a3aae43e62d11dd84c335cf749fd31ff48a21b5320d26cece9725ee85166ae3f016e2ba6ded4e9a1e52a5859a115da3982e1b7b9bad0b631cc471b75923",
+            "id": "class-NumberChange-a6aacb7486479b480eface10d4c6826c322ea7990da07d0dab0028be78418c849142be19618daca2163db2ac8bc147cf6033d2df3a4865f9350355d93f406d49",
             "file": "src/number-input/number.component.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!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</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[attr.value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!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</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
             "properties": [
                 {
                     "name": "source",
@@ -7790,12 +7816,12 @@
         },
         {
             "name": "TableHeaderItem",
-            "id": "class-TableHeaderItem-f0bc0db9c786dbcc28fc8b900b067ecbf802769add5b9cbe85b60e17a00e0e700a086f7093f65683a5dda55cb57de7945090eaa4caf4832d2ce30dbf179ab44f",
+            "id": "class-TableHeaderItem-8546e7b6b9613f5bd626bf443294a91a5a2a559aa93d484ad79b8ba6baef091eda70f907cd76d84f7f32c7f4af93d85425765c1731fa9fe41e786c1b07020b27",
             "file": "src/table/table-header-item.class.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import { TableItem } from \"./table-item.class\";\nimport {\n\tEventEmitter,\n\tTemplateRef\n} from \"@angular/core\";\n\nexport class TableHeaderItem {\n\t/**\n\t * Defines if column under this TableHeaderItem should be displayed.\n\t *\n\t */\n\tvisible = true;\n\n\t/**\n\t * Disables sorting by default.\n\t *\n\t */\n\tsorted = false;\n\n\t/**\n\t * Enables sorting on click by default.\n\t * If false then this column won't show a sorting arrow at all.\n\t *\n\t */\n\tsortable = true;\n\n\t/**\n\t * Number of applied filters.\n\t *\n\t * `filter()` should set it to appropriate number.\n\t *\n\t */\n\tfilterCount = 0;\n\n\t/**\n\t * The number of rows to span\n\t * **NOTE:** not supported by the default carbon table\n\t */\n\trowSpan = 1;\n\n\t/**\n\t * The number of columns to span\n\t */\n\tcolSpan = 1;\n\n\t/**\n\t * Attach a class to the column, both the header and column cells.\n\t *\n\t */\n\tclassName: string;\n\n\t/**\n\t * Style for the column, applied to every element in the column.\n\t *\n\t * ngStyle-like format\n\t *\n\t */\n\tstyle = {};\n\n\t/**\n\t * If true, sort is set to ascending, if false descending will be true.\n\t *\n\t */\n\tset ascending(asc) {\n\t\tthis._ascending = asc;\n\t}\n\tget ascending() {\n\t\treturn this._ascending;\n\t}\n\n\t/**\n\t * If true, sort is set to descending, if false ascending will be true.\n\t *\n\t */\n\tset descending(desc) {\n\t\tthis._ascending = !desc;\n\t}\n\tget descending() {\n\t\treturn !this._ascending;\n\t}\n\n\t/**\n\t * Data for the header item.\n\t */\n\tdata: any;\n\n\t/**\n\t * Data for the header item for general usage in the controller.\n\t * For example, which `field` is this column related to.\n\t */\n\tmetadata: any;\n\n\t/**\n\t * Used to display data in a desired way.\n\t *\n\t * If not provided, displays data as a simple string.\n\t *\n\t * Usage:\n\t *\n\t * In a component where you're using the table create a template like:\n\t *\n\t * ```html\n\t * <ng-template #customHeaderTemplate let-data=\"data\">\n\t * \t\t<i><a [routerLink]=\"data.link\">{{data.name}}</a></i>\n\t * </ng-template>\n\t * ```\n\t * where we assume your data contains `link` and `name`. `let-data=\"data\"` is\n\t * necessary for you to be able to access item's data in the template.\n\t *\n\t * Create `ViewChild` property with:\n\t *\n\t * ```typescript\n\t * (at)ViewChild(\"customHeaderTemplate\")\n\t * protected customHeaderTemplate: TemplateRef<any>;\n\t * ```\n\t *\n\t * Set the template to the header item, for example:\n\t *\n\t * ```typescript\n\t * this.model.header = [\n\t * \t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n\t * ];\n\t * ```\n\t */\n\ttemplate: TemplateRef<any>;\n\n\t/**\n\t * The label for the sort button\n\t */\n\tariaSortLabel: string;\n\n\t/**\n\t * A callback function to format the sort label. Will be heavily called.\n\t */\n\tformatSortLabel: (label: string, staticLabel?: string) => string;\n\n\t/**\n\t * Used as a template for popover filter.\n\t *\n\t * `let-popover=\"popover\"` will give you access to popover component and allow you to\n\t * manipulate it if needed.\n\t *\n\t * `let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\n\t * store the data you need to `filter.data`. You will be able to access it as\n\t * `this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\t *\n\t * Example:\n\t * ```html\n\t * <ng-template #filter let-popover=\"popover\">\n\t * \t<cds-label class=\"first-label\">\n\t * \t\tValue\n\t * \t\t<input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\">\n\t * \t</cds-label>\n\t * </ng-template>\n\t *\n\t * <ng-template #filterFooter let-popover=\"popover\" let-filter=\"data\">\n\t * \t<button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.onClose()\">Apply</button>\n\t * \t<button class=\"btn--secondary\" (click)=\"popover.onClose()\">Cancel</button>\n\t * </ng-template>\n\t * ```\n\t *\n\t * Set the template with, for example:\n\t * ```typescript\n\t * new FilterableHeaderItem({\n\t * \tfilterTemplate: this.filter,\n\t *\tfilterFooter: this.filterFooter\n\t * })\n\t * ```\n\t *\n\t * ```typescript\n\t * class FilterableHeaderItem extends TableHeaderItem {\n\t * \t// custom filter function\n\t * \tfilter(item: TableItem): boolean {\n\t * \t\tif (typeof item.data === \"string\" && item.data.indexOf(this.filterData.data) >= 0) {\n\t * \t\t\tthis.filterCount = 1;\n\t * \t\t\treturn false;\n\t * \t\t}\n\t * \t\tthis.filterCount = 0;\n\t * \t\treturn true;\n\t * \t}\n\t * }\n\t * ```\n\t */\n\tfilterTemplate: TemplateRef<any>;\n\n\t/**\n\t * Used along with `filterTemplate` to construct the filter popover\n\t */\n\tfilterFooter: TemplateRef<any>;\n\n\t/**\n\t * This is where you store your data when applying filter.\n\t *\n\t * It is the actual object you have access to with `let-filter=\"data\"` in your template.\n\t *\n\t * Make sure to store data in `filter.data` in your template, and you will have it\n\t * available in `filterData.data` in your extension of `TableHeaderItem`.\n\t *\n\t * Because angular and object references.\n\t */\n\tfilterData: any;\n\n\t/**\n\t * used in `ascending`\n\t *\n\t * @protected\n\t */\n\tprotected _ascending = true;\n\n\tget title() {\n\t\tif (this._title) {\n\t\t\treturn this._title;\n\t\t}\n\n\t\tif (!this.data) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tif (typeof this.data === \"string\") {\n\t\t\treturn this.data;\n\t\t}\n\n\t\tif (\n\t\t\tthis.data.toString &&\n\t\t\tthis.data.constructor !== ({}).constructor\n\t\t) {\n\t\t\treturn this.data.toString();\n\t\t}\n\n\t\t// data can’t be reasonably converted to an end user readable string\n\t\treturn \"\";\n\t}\n\n\tset title(title) {\n\t\tthis._title = title;\n\t}\n\n\tprivate _title: string;\n\n\t/**\n\t * Creates an instance of TableHeaderItem.\n\t */\n\tconstructor(rawData?: any) {\n\t\t// defaults so we dont leave things empty\n\t\tconst defaults = {\n\t\t\tdata: \"\",\n\t\t\tvisible: this.visible,\n\t\t\tstyle: this.style,\n\t\t\tfilterCount: this.filterCount,\n\t\t\tfilterData: {data: \"\"}\n\t\t};\n\t\t// fill our object with provided props, and fallback to defaults\n\t\tconst data = Object.assign({}, defaults, rawData);\n\t\tfor (let property of Object.getOwnPropertyNames(data)) {\n\t\t\tif (data.hasOwnProperty(property)) {\n\t\t\t\tthis[property] = data[property];\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Used for sorting rows of the table.\n\t *\n\t * Override to enable different sorting.\n\t *\n\t * < 0 if `one` should go before `two`\n\t * > 0 if `one` should go after `two`\n\t * 0 if it doesn't matter (they are the same)\n\t */\n\tcompare(one: TableItem, two: TableItem): number {\n\t\tif (!one || !two) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (typeof one.data === \"string\") {\n\t\t\treturn one.data.localeCompare(two.data);\n\t\t}\n\n\t\tif (one.data < two.data) {\n\t\t\treturn -1;\n\t\t} else if (one.data > two.data) {\n\t\t\treturn 1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n\n\t/**\n\t * Used to filter rows in the table.\n\t *\n\t * Override to make a custom filter.\n\t *\n\t * Even though there is just one filter function, there can be multiple filters.\n\t * When implementing filter, set `filterCount` before returning.\n\t *\n\t * `true` to hide the row\n\t * `false` to show the row\n\t */\n\tfilter(item: TableItem): boolean {\n\t\tthis.filterCount = 0;\n\t\treturn false;\n\t}\n}\n",
+            "sourceCode": "import { TableItem } from \"./table-item.class\";\nimport { TemplateRef } from \"@angular/core\";\n\nexport type SortType = \"ASCENDING\" | \"DESCENDING\" | \"NONE\";\nexport class TableHeaderItem {\n\t/**\n\t * If true, sort is set to ascending, if false descending will be true.\n\t *\n\t */\n\tset ascending(asc: boolean) {\n\t\tthis.sortDirection = asc ? \"ASCENDING\" : \"DESCENDING\";\n\t}\n\tget ascending() {\n\t\treturn this.sortDirection === \"ASCENDING\";\n\t}\n\n\t/**\n\t * If true, sort is set to descending, if false ascending will be true.\n\t *\n\t */\n\tset descending(desc: boolean) {\n\t\tthis.sortDirection = desc ? \"DESCENDING\" : \"ASCENDING\";\n\t}\n\tget descending() {\n\t\treturn this.sortDirection === \"DESCENDING\";\n\t}\n\n\tget title() {\n\t\tif (this._title) {\n\t\t\treturn this._title;\n\t\t}\n\n\t\tif (!this.data) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tif (typeof this.data === \"string\") {\n\t\t\treturn this.data;\n\t\t}\n\n\t\tif (\n\t\t\tthis.data.toString &&\n\t\t\tthis.data.constructor !== ({}).constructor\n\t\t) {\n\t\t\treturn this.data.toString();\n\t\t}\n\n\t\t// data can’t be reasonably converted to an end user readable string\n\t\treturn \"\";\n\t}\n\n\tset title(title) {\n\t\tthis._title = title;\n\t}\n\t/**\n\t * Defines if column under this TableHeaderItem should be displayed.\n\t *\n\t */\n\tvisible = true;\n\n\t/**\n\t * Disables sorting by default.\n\t *\n\t */\n\tsorted = false;\n\n\t/**\n\t * Enables sorting on click by default.\n\t * If false then this column won't show a sorting arrow at all.\n\t *\n\t */\n\tsortable = true;\n\n\t/**\n\t * Number of applied filters.\n\t *\n\t * `filter()` should set it to appropriate number.\n\t *\n\t */\n\tfilterCount = 0;\n\n\t/**\n\t * The number of rows to span\n\t * **NOTE:** not supported by the default carbon table\n\t */\n\trowSpan = 1;\n\n\t/**\n\t * The number of columns to span\n\t */\n\tcolSpan = 1;\n\n\t/**\n\t * Attach a class to the column, both the header and column cells.\n\t *\n\t */\n\tclassName: string;\n\n\t/**\n\t * Style for the column, applied to every element in the column.\n\t *\n\t * ngStyle-like format\n\t *\n\t */\n\tstyle = {};\n\n\t/**\n\t * Data for the header item.\n\t */\n\tdata: any;\n\n\t/**\n\t * Data for the header item for general usage in the controller.\n\t * For example, which `field` is this column related to.\n\t */\n\tmetadata: any;\n\n\t/**\n\t * Used to display data in a desired way.\n\t *\n\t * If not provided, displays data as a simple string.\n\t *\n\t * Usage:\n\t *\n\t * In a component where you're using the table create a template like:\n\t *\n\t * ```html\n\t * <ng-template #customHeaderTemplate let-data=\"data\">\n\t * \t\t<i><a [routerLink]=\"data.link\">{{data.name}}</a></i>\n\t * </ng-template>\n\t * ```\n\t * where we assume your data contains `link` and `name`. `let-data=\"data\"` is\n\t * necessary for you to be able to access item's data in the template.\n\t *\n\t * Create `ViewChild` property with:\n\t *\n\t * ```typescript\n\t * (at)ViewChild(\"customHeaderTemplate\")\n\t * protected customHeaderTemplate: TemplateRef<any>;\n\t * ```\n\t *\n\t * Set the template to the header item, for example:\n\t *\n\t * ```typescript\n\t * this.model.header = [\n\t * \t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n\t * ];\n\t * ```\n\t */\n\ttemplate: TemplateRef<any>;\n\n\t/**\n\t * The label for the sort button\n\t */\n\tariaSortLabel: string;\n\n\t/**\n\t * A callback function to format the sort label. Will be heavily called.\n\t */\n\tformatSortLabel: (label: string, staticLabel?: string) => string;\n\n\t/**\n\t * Used as a template for popover filter.\n\t *\n\t * `let-popover=\"popover\"` will give you access to popover component and allow you to\n\t * manipulate it if needed.\n\t *\n\t * `let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\n\t * store the data you need to `filter.data`. You will be able to access it as\n\t * `this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\t *\n\t * Example:\n\t * ```html\n\t * <ng-template #filter let-popover=\"popover\">\n\t * \t<cds-label class=\"first-label\">\n\t * \t\tValue\n\t * \t\t<input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\">\n\t * \t</cds-label>\n\t * </ng-template>\n\t *\n\t * <ng-template #filterFooter let-popover=\"popover\" let-filter=\"data\">\n\t * \t<button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.onClose()\">Apply</button>\n\t * \t<button class=\"btn--secondary\" (click)=\"popover.onClose()\">Cancel</button>\n\t * </ng-template>\n\t * ```\n\t *\n\t * Set the template with, for example:\n\t * ```typescript\n\t * new FilterableHeaderItem({\n\t * \tfilterTemplate: this.filter,\n\t *\tfilterFooter: this.filterFooter\n\t * })\n\t * ```\n\t *\n\t * ```typescript\n\t * class FilterableHeaderItem extends TableHeaderItem {\n\t * \t// custom filter function\n\t * \tfilter(item: TableItem): boolean {\n\t * \t\tif (typeof item.data === \"string\" && item.data.indexOf(this.filterData.data) >= 0) {\n\t * \t\t\tthis.filterCount = 1;\n\t * \t\t\treturn false;\n\t * \t\t}\n\t * \t\tthis.filterCount = 0;\n\t * \t\treturn true;\n\t * \t}\n\t * }\n\t * ```\n\t */\n\tfilterTemplate: TemplateRef<any>;\n\n\t/**\n\t * Used along with `filterTemplate` to construct the filter popover\n\t */\n\tfilterFooter: TemplateRef<any>;\n\n\t/**\n\t * This is where you store your data when applying filter.\n\t *\n\t * It is the actual object you have access to with `let-filter=\"data\"` in your template.\n\t *\n\t * Make sure to store data in `filter.data` in your template, and you will have it\n\t * available in `filterData.data` in your extension of `TableHeaderItem`.\n\t *\n\t * Because angular and object references.\n\t */\n\tfilterData: any;\n\n\tsortDirection: SortType = \"NONE\";\n\n\n\n\tprivate _title: string;\n\n\t/**\n\t * Creates an instance of TableHeaderItem.\n\t */\n\tconstructor(rawData?: any) {\n\t\t// defaults so we dont leave things empty\n\t\tconst defaults = {\n\t\t\tdata: \"\",\n\t\t\tvisible: this.visible,\n\t\t\tstyle: this.style,\n\t\t\tfilterCount: this.filterCount,\n\t\t\tfilterData: {data: \"\"}\n\t\t};\n\t\t// fill our object with provided props, and fallback to defaults\n\t\tconst data = Object.assign({}, defaults, rawData);\n\t\tfor (let property of Object.getOwnPropertyNames(data)) {\n\t\t\tif (data.hasOwnProperty(property)) {\n\t\t\t\tthis[property] = data[property];\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Used for sorting rows of the table.\n\t *\n\t * Override to enable different sorting.\n\t *\n\t * < 0 if `one` should go before `two`\n\t * > 0 if `one` should go after `two`\n\t * 0 if it doesn't matter (they are the same)\n\t */\n\tcompare(one: TableItem, two: TableItem): number {\n\t\tif (!one || !two) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (typeof one.data === \"string\") {\n\t\t\treturn one.data.localeCompare(two.data);\n\t\t}\n\n\t\tif (one.data < two.data) {\n\t\t\treturn -1;\n\t\t} else if (one.data > two.data) {\n\t\t\treturn 1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n\n\t/**\n\t * Used to filter rows in the table.\n\t *\n\t * Override to make a custom filter.\n\t *\n\t * Even though there is just one filter function, there can be multiple filters.\n\t * When implementing filter, set `filterCount` before returning.\n\t *\n\t * `true` to hide the row\n\t * `false` to show the row\n\t */\n\tfilter(item: TableItem): boolean {\n\t\tthis.filterCount = 0;\n\t\treturn false;\n\t}\n}\n",
             "constructorObj": {
                 "name": "constructor",
                 "description": "<p>Creates an instance of TableHeaderItem.</p>\n",
@@ -7810,7 +7836,7 @@
                         "optional": true
                     }
                 ],
-                "line": 238,
+                "line": 232,
                 "rawdescription": "\n\nCreates an instance of TableHeaderItem.\n",
                 "jsdoctags": [
                     {
@@ -7833,7 +7859,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>The label for the sort button</p>\n",
-                    "line": 130,
+                    "line": 155,
                     "rawdescription": "\n\nThe label for the sort button\n"
                 },
                 {
@@ -7843,7 +7869,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>Attach a class to the column, both the header and column cells.</p>\n",
-                    "line": 50,
+                    "line": 97,
                     "rawdescription": "\n\nAttach a class to the column, both the header and column cells.\n\n"
                 },
                 {
@@ -7854,7 +7880,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>The number of columns to span</p>\n",
-                    "line": 44,
+                    "line": 91,
                     "rawdescription": "\n\nThe number of columns to span\n"
                 },
                 {
@@ -7864,7 +7890,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>Data for the header item.</p>\n",
-                    "line": 85,
+                    "line": 110,
                     "rawdescription": "\n\nData for the header item.\n"
                 },
                 {
@@ -7875,7 +7901,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Number of applied filters.</p>\n<p><code>filter()</code> should set it to appropriate number.</p>\n",
-                    "line": 33,
+                    "line": 80,
                     "rawdescription": "\n\nNumber of applied filters.\n\n`filter()` should set it to appropriate number.\n\n"
                 },
                 {
@@ -7885,7 +7911,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>This is where you store your data when applying filter.</p>\n<p>It is the actual object you have access to with <code>let-filter=&quot;data&quot;</code> in your template.</p>\n<p>Make sure to store data in <code>filter.data</code> in your template, and you will have it\navailable in <code>filterData.data</code> in your extension of <code>TableHeaderItem</code>.</p>\n<p>Because angular and object references.</p>\n",
-                    "line": 201,
+                    "line": 226,
                     "rawdescription": "\n\nThis is where you store your data when applying filter.\n\nIt is the actual object you have access to with `let-filter=\"data\"` in your template.\n\nMake sure to store data in `filter.data` in your template, and you will have it\navailable in `filterData.data` in your extension of `TableHeaderItem`.\n\nBecause angular and object references.\n"
                 },
                 {
@@ -7895,7 +7921,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used along with <code>filterTemplate</code> to construct the filter popover</p>\n",
-                    "line": 189,
+                    "line": 214,
                     "rawdescription": "\n\nUsed along with `filterTemplate` to construct the filter popover\n"
                 },
                 {
@@ -7905,7 +7931,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used as a template for popover filter.</p>\n<p><code>let-popover=&quot;popover&quot;</code> will give you access to popover component and allow you to\nmanipulate it if needed.</p>\n<p><code>let-filter=&quot;filter&quot;</code> will give you access to the &quot;filter&quot;. The main takeaway is\nstore the data you need to <code>filter.data</code>. You will be able to access it as\n<code>this.filterData.data</code> from your <code>filter()</code> function when you extend <code>TableHeaderItem</code></p>\n<p>Example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ng-template #filter let-popover=&quot;popover&quot;&gt;\n    &lt;cds-label class=&quot;first-label&quot;&gt;\n        Value\n        &lt;input type=&quot;text&quot; [(ngModel)]=&quot;filter1&quot; class=&quot;input-field&quot;&gt;\n    &lt;/cds-label&gt;\n&lt;/ng-template&gt;\n\n&lt;ng-template #filterFooter let-popover=&quot;popover&quot; let-filter=&quot;data&quot;&gt;\n    &lt;button class=&quot;btn--primary&quot; (click)=&quot;filter.data = filter1; popover.onClose()&quot;&gt;Apply&lt;/button&gt;\n    &lt;button class=&quot;btn--secondary&quot; (click)=&quot;popover.onClose()&quot;&gt;Cancel&lt;/button&gt;\n&lt;/ng-template&gt;</code></pre></div><p>Set the template with, for example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">new FilterableHeaderItem({\n    filterTemplate: this.filter,\n    filterFooter: this.filterFooter\n})</code></pre></div><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.indexOf(this.filterData.data) &gt;= 0) {\n            this.filterCount = 1;\n            return false;\n        }\n        this.filterCount = 0;\n        return true;\n    }\n}</code></pre></div>",
-                    "line": 184,
+                    "line": 209,
                     "rawdescription": "\n\nUsed as a template for popover filter.\n\n`let-popover=\"popover\"` will give you access to popover component and allow you to\nmanipulate it if needed.\n\n`let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\nstore the data you need to `filter.data`. You will be able to access it as\n`this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\nExample:\n```html\n<ng-template #filter let-popover=\"popover\">\n\t<cds-label class=\"first-label\">\n\t\tValue\n\t\t<input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\">\n\t</cds-label>\n</ng-template>\n\n<ng-template #filterFooter let-popover=\"popover\" let-filter=\"data\">\n\t<button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.onClose()\">Apply</button>\n\t<button class=\"btn--secondary\" (click)=\"popover.onClose()\">Cancel</button>\n</ng-template>\n```\n\nSet the template with, for example:\n```typescript\nnew FilterableHeaderItem({\n\tfilterTemplate: this.filter,\n\tfilterFooter: this.filterFooter\n})\n```\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.indexOf(this.filterData.data) >= 0) {\n\t\t\tthis.filterCount = 1;\n\t\t\treturn false;\n\t\t}\n\t\tthis.filterCount = 0;\n\t\treturn true;\n\t}\n}\n```\n"
                 },
                 {
@@ -7915,7 +7941,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>A callback function to format the sort label. Will be heavily called.</p>\n",
-                    "line": 135,
+                    "line": 160,
                     "rawdescription": "\n\nA callback function to format the sort label. Will be heavily called.\n"
                 },
                 {
@@ -7925,7 +7951,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "<p>Data for the header item for general usage in the controller.\nFor example, which <code>field</code> is this column related to.</p>\n",
-                    "line": 91,
+                    "line": 116,
                     "rawdescription": "\n\nData for the header item for general usage in the controller.\nFor example, which `field` is this column related to.\n"
                 },
                 {
@@ -7936,7 +7962,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>The number of rows to span\n<strong>NOTE:</strong> not supported by the default carbon table</p>\n",
-                    "line": 39,
+                    "line": 86,
                     "rawdescription": "\n\nThe number of rows to span\n**NOTE:** not supported by the default carbon table\n"
                 },
                 {
@@ -7947,9 +7973,19 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Enables sorting on click by default.\nIf false then this column won&#39;t show a sorting arrow at all.</p>\n",
-                    "line": 25,
+                    "line": 72,
                     "rawdescription": "\n\nEnables sorting on click by default.\nIf false then this column won't show a sorting arrow at all.\n\n"
                 },
+                {
+                    "name": "sortDirection",
+                    "defaultValue": "\"NONE\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "SortType",
+                    "optional": false,
+                    "description": "",
+                    "line": 228
+                },
                 {
                     "name": "sorted",
                     "defaultValue": "false",
@@ -7958,7 +7994,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Disables sorting by default.</p>\n",
-                    "line": 18,
+                    "line": 65,
                     "rawdescription": "\n\nDisables sorting by default.\n\n"
                 },
                 {
@@ -7969,7 +8005,7 @@
                     "type": "object",
                     "optional": false,
                     "description": "<p>Style for the column, applied to every element in the column.</p>\n<p>ngStyle-like format</p>\n",
-                    "line": 58,
+                    "line": 105,
                     "rawdescription": "\n\nStyle for the column, applied to every element in the column.\n\nngStyle-like format\n\n"
                 },
                 {
@@ -7979,7 +8015,7 @@
                     "type": "TemplateRef<any>",
                     "optional": false,
                     "description": "<p>Used to display data in a desired way.</p>\n<p>If not provided, displays data as a simple string.</p>\n<p>Usage:</p>\n<p>In a component where you&#39;re using the table create a template like:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;ng-template #customHeaderTemplate let-data=&quot;data&quot;&gt;\n        &lt;i&gt;&lt;a [routerLink]=&quot;data.link&quot;&gt;{{data.name}}&lt;/a&gt;&lt;/i&gt;\n&lt;/ng-template&gt;</code></pre></div><p>where we assume your data contains <code>link</code> and <code>name</code>. <code>let-data=&quot;data&quot;</code> is\nnecessary for you to be able to access item&#39;s data in the template.</p>\n<p>Create <code>ViewChild</code> property with:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">(at)ViewChild(&quot;customHeaderTemplate&quot;)\nprotected customHeaderTemplate: TemplateRef&lt;any&gt;;</code></pre></div><p>Set the template to the header item, for example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">this.model.header = [\n        new TableHeaderItem({data: {name: &quot;Custom header&quot;, link: &quot;/table&quot;}, template: this.customHeaderTemplate})\n];</code></pre></div>",
-                    "line": 125,
+                    "line": 150,
                     "rawdescription": "\n\nUsed to display data in a desired way.\n\nIf not provided, displays data as a simple string.\n\nUsage:\n\nIn a component where you're using the table create a template like:\n\n```html\n<ng-template #customHeaderTemplate let-data=\"data\">\n\t\t<i><a [routerLink]=\"data.link\">{{data.name}}</a></i>\n</ng-template>\n```\nwhere we assume your data contains `link` and `name`. `let-data=\"data\"` is\nnecessary for you to be able to access item's data in the template.\n\nCreate `ViewChild` property with:\n\n```typescript\n(at)ViewChild(\"customHeaderTemplate\")\nprotected customHeaderTemplate: TemplateRef<any>;\n```\n\nSet the template to the header item, for example:\n\n```typescript\nthis.model.header = [\n\t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n];\n```\n"
                 },
                 {
@@ -7990,7 +8026,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Defines if column under this TableHeaderItem should be displayed.</p>\n",
-                    "line": 12,
+                    "line": 59,
                     "rawdescription": "\n\nDefines if column under this TableHeaderItem should be displayed.\n\n"
                 }
             ],
@@ -8014,7 +8050,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 270,
+                    "line": 264,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed for sorting rows of the table.\n\nOverride to enable different sorting.\n\n< 0 if `one` should go before `two`\n> 0 if `one` should go after `two`\n0 if it doesn't matter (they are the same)\n",
@@ -8053,7 +8089,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 299,
+                    "line": 293,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to filter rows in the table.\n\nOverride to make a custom filter.\n\nEven though there is just one filter function, there can be multiple filters.\nWhen implementing filter, set `filterCount` before returning.\n\n`true` to hide the row\n`false` to show the row\n",
@@ -8083,19 +8119,19 @@
                         "args": [
                             {
                                 "name": "asc",
-                                "type": "",
+                                "type": "boolean",
                                 "deprecated": false,
                                 "deprecationMessage": ""
                             }
                         ],
                         "returnType": "void",
-                        "line": 64,
+                        "line": 10,
                         "rawdescription": "\n\nIf true, sort is set to ascending, if false descending will be true.\n\n",
                         "description": "<p>If true, sort is set to ascending, if false descending will be true.</p>\n",
                         "jsdoctags": [
                             {
                                 "name": "asc",
-                                "type": "",
+                                "type": "boolean",
                                 "deprecated": false,
                                 "deprecationMessage": "",
                                 "tagName": {
@@ -8108,7 +8144,7 @@
                         "name": "ascending",
                         "type": "",
                         "returnType": "",
-                        "line": 67
+                        "line": 13
                     }
                 },
                 "descending": {
@@ -8121,19 +8157,19 @@
                         "args": [
                             {
                                 "name": "desc",
-                                "type": "",
+                                "type": "boolean",
                                 "deprecated": false,
                                 "deprecationMessage": ""
                             }
                         ],
                         "returnType": "void",
-                        "line": 75,
+                        "line": 21,
                         "rawdescription": "\n\nIf true, sort is set to descending, if false ascending will be true.\n\n",
                         "description": "<p>If true, sort is set to descending, if false ascending will be true.</p>\n",
                         "jsdoctags": [
                             {
                                 "name": "desc",
-                                "type": "",
+                                "type": "boolean",
                                 "deprecated": false,
                                 "deprecationMessage": "",
                                 "tagName": {
@@ -8146,7 +8182,7 @@
                         "name": "descending",
                         "type": "",
                         "returnType": "",
-                        "line": 78
+                        "line": 24
                     }
                 },
                 "title": {
@@ -8165,7 +8201,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 234,
+                        "line": 52,
                         "jsdoctags": [
                             {
                                 "name": "title",
@@ -8182,7 +8218,7 @@
                         "name": "title",
                         "type": "",
                         "returnType": "",
-                        "line": 210
+                        "line": 28
                     }
                 }
             },
@@ -8349,19 +8385,19 @@
         },
         {
             "name": "TableModel",
-            "id": "class-TableModel-1b2f696a1fab4af02e0f5124c685e2c9855312ad69012e5318fbfa5bc5d4623d73584e7a40434fe67ab7c824dd2135d52b6c659036771e2e5eb0f96de221e21c",
+            "id": "class-TableModel-b433548b3707dafa0b0bd1551423e1ef143db428ebed1b33c17b265d91f1aa454e4a347ccd998a4677cfb55a291cb3e25f3b07d7c8008fe683ea7af3fd2040ce",
             "file": "src/table/table-model.class.ts",
             "deprecated": false,
             "deprecationMessage": "",
             "type": "class",
-            "sourceCode": "import {\n\tEventEmitter\n} from \"@angular/core\";\n\nimport { PaginationModel } from \"carbon-components-angular/pagination\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\nimport { TableRow } from \"./table-row.class\";\nimport { Subject } from \"rxjs\";\n\nexport type HeaderType = number | \"select\" | \"expand\";\n\n/**\n * TableModel represents a data model for two-dimensional data. It's used for all things table\n * (table component, table toolbar, pagination, etc)\n *\n * TableModel manages its internal data integrity very well if you use the provided helper\n * functions for modifying rows and columns and assigning header and data in that order.\n *\n * It also provides direct access to the data so you can read and modify it.\n * If you change the structure of the data (by directly pushing into the arrays or otherwise),\n * keep in mind to keep the data structure intact.\n *\n * Header length and length of every line in the data should be equal.\n *\n * If they are not consistent, unexpected things will happen.\n *\n * Use the provided functions when in doubt.\n */\nexport class TableModel implements PaginationModel {\n\t/**\n\t * The number of models instantiated, used for (among other things) unique id generation\n\t */\n\tprotected static COUNT = 0;\n\n\t/**\n\t * Sets data of the table.\n\t *\n\t * Make sure all rows are the same length to keep the column count accurate.\n\t */\n\tset data(newData: TableItem[][]) {\n\t\tif (!newData || (Array.isArray(newData) && newData.length === 0) ) {\n\t\t\tnewData = [[]];\n\t\t}\n\n\t\tthis._data = newData;\n\n\t\t// init rowsSelected\n\t\tthis.rowsSelected = new Array<boolean>(this._data.length).fill(false);\n\t\tthis.rowsExpanded = new Array<boolean>(this._data.length).fill(false);\n\n\t\t// init rowsContext\n\t\tthis.rowsContext = new Array<string>(this._data.length);\n\n\t\t// init rowsClass\n\t\tthis.rowsClass = new Array<string>(this._data.length);\n\n\t\t// only create a fresh header if necessary (header doesn't exist or differs in length)\n\t\tif (this.header == null || (this.header.length !== this._data[0].length && this._data[0].length > 0)) {\n\t\t\tlet header = new Array<TableHeaderItem>();\n\t\t\tfor (let i = 0; i < this._data[0].length; i++) {\n\t\t\t\theader.push(new TableHeaderItem());\n\t\t\t}\n\t\t\tthis.header = header;\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tdataChange = new EventEmitter();\n\trowsSelectedChange = new EventEmitter<number>();\n\trowsExpandedChange = new EventEmitter<number>();\n\t/**\n\t * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\n\t * all rows are selected.\n\t */\n\tselectAllChange = new Subject<boolean>();\n\n\t/**\n\t * Gets the full data.\n\t *\n\t * You can use it to alter individual `TableItem`s but if you need to change\n\t * table structure, use `addRow()` and/or `addColumn()`\n\t */\n\tget data() {\n\t\treturn this._data;\n\t}\n\n\t/**\n\t * Contains information about selection state of rows in the table.\n\t */\n\trowsSelected: boolean[] = [];\n\n\t/**\n\t * Contains information about expanded state of rows in the table.\n\t */\n\trowsExpanded: boolean[] = [];\n\n\t/**\n\t * Contains information about the context of the row.\n\t *\n\t * It affects styling of the row to reflect the context.\n\t *\n\t * string can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\n\t * empty or undefined by default\n\t */\n\trowsContext: string[] = [];\n\n\t/**\n\t * Contains class name(s) of the row.\n\t *\n\t * It affects styling of the row to reflect the appended class name(s).\n\t *\n\t * It's empty or undefined by default\n\t */\n\trowsClass: string[] = [];\n\n\t/**\n\t * Contains information about the header cells of the table.\n\t */\n\theader: TableHeaderItem[] = [];\n\n\t/**\n\t * Tracks the current page.\n\t */\n\tcurrentPage = 1;\n\n\t/**\n\t * Length of page.\n\t */\n\tpageLength = 10;\n\n\t/**\n\t * Set to true when there is no more data to load in the table\n\t */\n\tisEnd = false;\n\n\t/**\n\t * Set to true when lazy loading to show loading indicator\n\t */\n\tisLoading = false;\n\n\t/**\n\t * Absolute total number of rows of the table.\n\t */\n\tprotected _totalDataLength: number;\n\n\t/**\n\t * Manually set data length in case the data in the table doesn't\n\t * correctly reflect all the data that table is to display.\n\t *\n\t * Example: if you have multiple pages of data that table will display\n\t * but you're loading one at a time.\n\t *\n\t * Set to `null` to reset to default behavior.\n\t */\n\tset totalDataLength(length: number) {\n\t\t// if this function is called without a parameter we need to set to null to avoid having undefined != null\n\t\tthis._totalDataLength = isNaN(length) ? null : length;\n\t}\n\n\t/**\n\t * Total length of data that table has access to, or the amount manually set\n\t */\n\tget totalDataLength() {\n\t\t// if manually set data length\n\t\tif (this._totalDataLength !== null && this._totalDataLength >= 0) {\n\t\t\treturn this._totalDataLength;\n\t\t}\n\n\t\t// if empty dataset\n\t\tif (this.data && this.data.length === 1 && this.data[0].length === 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn this.data.length;\n\t}\n\n\t/**\n\t * Used in `data`\n\t */\n\tprotected _data: TableItem[][] = [[]];\n\n\t/**\n\t * The number of models instantiated, this is to make sure each table has a different\n\t * model count for unique id generation.\n\t */\n\tprotected tableModelCount = 0;\n\n\tconstructor() {\n\t\tthis.tableModelCount = TableModel.COUNT++;\n\t}\n\n\t/**\n\t * Returns an id for the given column\n\t *\n\t * @param column the column to generate an id for\n\t * @param row the row of the header to generate an id for\n\t */\n\tgetId(column: HeaderType, row = 0): string {\n\t\treturn `table-header-${row}-${column}-${this.tableModelCount}`;\n\t}\n\n\t/**\n\t * Returns the id of the header. Used to link the cells with headers (or headers with headers)\n\t *\n\t * @param column the column to start getting headers for\n\t * @param colSpan the number of columns to get headers for (defaults to 1)\n\t */\n\tgetHeaderId(column: HeaderType, colSpan = 1): string {\n\t\tif (column === \"select\" || column === \"expand\") {\n\t\t\treturn this.getId(column);\n\t\t}\n\n\t\tlet ids = [];\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tif (this.header[i]) {\n\t\t\t\tfor (let j = 0; j < colSpan; j++) {\n\t\t\t\t\tids.push(this.getId(i + j));\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn ids.join(\" \");\n\t}\n\n\t/**\n\t * Finds closest header by trying the `column` and then working its way to the left\n\t *\n\t * @param column the target column\n\t */\n\tgetHeader(column: number): TableHeaderItem {\n\t\tif (!this.header) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tconst headerCell = this.header[i];\n\t\t\tif (headerCell) {\n\t\t\t\treturn headerCell;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns how many rows is currently selected\n\t */\n\tselectedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsSelected) {\n\t\t\tthis.rowsSelected.forEach(rowSelected => {\n\t\t\t\tif (rowSelected) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns how many rows is currently expanded\n\t */\n\texpandedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsExpanded) {\n\t\t\tthis.rowsExpanded.forEach(rowExpanded => {\n\t\t\t\tif (rowExpanded) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns `index`th row of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\trow(index: number): TableItem[] {\n\t\treturn this.data[this.realRowIndex(index)];\n\t}\n\n\t/**\n\t * Adds a row to the `index`th row or appends to table if index not provided.\n\t *\n\t * If row is shorter than other rows or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If row is longer than other rows, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [row]\n\t * @param [index]\n\t */\n\taddRow(row?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array<Array<TableItem>>();\n\t\t\tnewData.push(row ? row : [new TableItem()]);  // row or one empty one column row\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet realRow = row;\n\t\tconst columnCount = this.data[0].length;\n\n\t\tif (row == null) {\n\t\t\trealRow = new Array<TableItem>();\n\t\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t}\n\n\t\tif (realRow.length < columnCount) {\n\t\t\t// extend the length of realRow\n\t\t\tconst difference = columnCount - realRow.length;\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t} else if (realRow.length > columnCount) {\n\t\t\t// extend the length of header\n\t\t\tlet difference = realRow.length - this.header.length;\n\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t\t// extend the length of every other row\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tlet currentRow = this.data[i];\n\t\t\t\tdifference = realRow.length - currentRow.length;\n\t\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\t\tcurrentRow.push(new TableItem());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (index == null) {\n\t\t\tthis.data.push(realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.push(false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.push(false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.push(undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.push(undefined);\n\t\t} else {\n\t\t\tconst ri = this.realRowIndex(index);\n\t\t\tthis.data.splice(ri, 0, realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.splice(ri, 0, false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.splice(ri, 0, false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.splice(ri, 0, undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.splice(ri, 0, undefined);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th row.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteRow(index: number) {\n\t\tconst rri = this.realRowIndex(index);\n\t\tthis.data.splice(rri, 1);\n\t\tthis.rowsSelected.splice(rri, 1);\n\t\tthis.rowsExpanded.splice(rri, 1);\n\t\tthis.rowsContext.splice(rri, 1);\n\t\tthis.rowsClass.splice(rri, 1);\n\n\t\tthis.dataChange.emit();\n\t}\n\n\thasExpandableRows() {\n\t\treturn this.data.some(data => data.some(d => d && d.expandedData)); // checking for some in 2D array\n\t}\n\n\tisRowExpandable(index: number) {\n\t\treturn this.data[index].some(d => d && d.expandedData);\n\t}\n\n\tisRowExpanded(index: number) {\n\t\treturn this.rowsExpanded[index];\n\t}\n\n\tgetRowContext(index: number) {\n\t\treturn this.rowsContext[index];\n\t}\n\n\t/**\n\t * Returns `index`th column of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tcolumn(index: number): TableItem[] {\n\t\tlet column = new Array<TableItem>();\n\t\tconst ri = this.realColumnIndex(index);\n\t\tconst rc = this.data.length;\n\n\t\tfor (let i = 0; i < rc; i++) {\n\t\t\tconst row = this.data[i];\n\t\t\tcolumn.push(row[ri]);\n\t\t}\n\n\t\treturn column;\n\t}\n\n\t/**\n\t * Adds a column to the `index`th column or appends to table if index not provided.\n\t *\n\t * If column is shorter than other columns or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If column is longer than other columns, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [column]\n\t * @param [index]\n\t */\n\taddColumn(column?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array<Array<TableItem>>();\n\t\t\tif (column == null) {\n\t\t\t\tnewData.push([new TableItem()]);\n\t\t\t} else {\n\t\t\t\tfor (let i = 0; i < column.length; i++) {\n\t\t\t\t\tlet item = column[i];\n\t\t\t\t\tnewData.push([item]);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet rc = this.data.length;  // row count\n\t\tlet ci = this.realColumnIndex(index);\n\n\t\t// append missing rows\n\t\tfor (let i = 0; column != null && i < column.length - rc; i++) {\n\t\t\tthis.addRow();\n\t\t}\n\t\trc = this.data.length;\n\t\tif (index == null) {\n\t\t\t// append to end\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.push(column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t} else {\n\t\t\tif (index >= this.data[0].length) {\n\t\t\t\t// if trying to append\n\t\t\t\tci++;\n\t\t\t}\n\t\t\t// insert\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.splice(ci, 0, new TableHeaderItem());\n\t\t\t}\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th column.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteColumn(index: number) {\n\t\tconst rci = this.realColumnIndex(index);\n\t\tconst rowCount = this.data.length;\n\t\tfor (let i = 0; i < rowCount; i++) {\n\t\t\tthis.data[i].splice(rci, 1);\n\t\t}\n\t\t// update header if not already set by user\n\t\tif (this.header.length > this.data[0].length) {\n\t\t\tthis.header.splice(rci, 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tmoveColumn(indexFrom: number, indexTo: number) {\n\t\tconst headerFrom = this.header[indexFrom];\n\n\t\tthis.addColumn(this.column(indexFrom), indexTo);\n\t\tthis.deleteColumn(indexFrom + (indexTo < indexFrom ? 1 : 0));\n\n\t\tthis.header[indexTo + (indexTo > indexFrom ? -1 : 0)] = headerFrom;\n\t}\n\n\t/**\n\t * Sorts the data currently present in the model based on `compare()`\n\t *\n\t * Direction is set by `ascending` and `descending` properties of `TableHeaderItem`\n\t * in `index`th column.\n\t *\n\t * @param index The column based on which it's sorting\n\t */\n\tsort(index: number) {\n\t\tthis.pushRowStateToModelData();\n\t\tthis.data.sort((a, b) => (this.header[index].descending ? -1 : 1) * this.header[index].compare(a[index], b[index]));\n\t\tthis.popRowStateFromModelData();\n\t\tthis.header.forEach(column => column.sorted = false);\n\t\tthis.header[index].sorted = true;\n\t}\n\n\t/**\n\t * Appends `rowsSelected` and `rowsExpanded` info to model data.\n\t *\n\t * When sorting rows, do this first so information about row selection\n\t * gets sorted with the other row info.\n\t *\n\t * Call `popRowSelectionFromModelData()` after sorting to make everything\n\t * right with the world again.\n\t */\n\tpushRowStateToModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tconst rowSelectedMark = new TableItem();\n\t\t\trowSelectedMark.data = this.rowsSelected[i];\n\t\t\tthis.data[i].push(rowSelectedMark);\n\n\t\t\tconst rowExpandedMark = new TableItem();\n\t\t\trowExpandedMark.data = this.rowsExpanded[i];\n\t\t\tthis.data[i].push(rowExpandedMark);\n\n\t\t\tconst rowContext = new TableItem();\n\t\t\trowContext.data = this.rowsContext[i];\n\t\t\tthis.data[i].push(rowContext);\n\n\t\t\tconst rowClass = new TableItem();\n\t\t\trowClass.data = this.rowsClass[i];\n\t\t\tthis.data[i].push(rowClass);\n\t\t}\n\t}\n\n\t/**\n\t * Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\t *\n\t * Call after sorting data (if you previously pushed to maintain selection order)\n\t * to make everything right with the world again.\n\t */\n\tpopRowStateFromModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tthis.rowsClass[i] = this.data[i].pop().data;\n\t\t\tthis.rowsContext[i] = this.data[i].pop().data;\n\t\t\tthis.rowsExpanded[i] = !!this.data[i].pop().data;\n\t\t\tthis.rowsSelected[i] = !!this.data[i].pop().data;\n\t\t}\n\t}\n\n\t/**\n\t * Checks if row is filtered out.\n\t *\n\t * @param index\n\t * @returns true if any of the filters in header filters out the `index`th row\n\t */\n\tisRowFiltered(index: number): boolean {\n\t\tconst realIndex = this.realRowIndex(index);\n\t\treturn this.header.some((item, i) => item && item.filter(this.row(realIndex)[i]));\n\t}\n\n\t/**\n\t * Select/deselect `index`th row based on value\n\t *\n\t * @param index index of the row to select\n\t * @param value state to set the row to. Defaults to `true`\n\t */\n\tselectRow(index: number, value = true) {\n\t\tif (this.isRowDisabled(index)) {\n\t\t\treturn;\n\t\t}\n\t\tthis.rowsSelected[index] = value;\n\t\tthis.rowsSelectedChange.emit(index);\n\t}\n\n\t/**\n\t * Selects or deselects all rows in the model\n\t *\n\t * @param value state to set all rows to. Defaults to `true`\n\t */\n\tselectAll(value = true) {\n\t\tif (this.data.length >= 1 && this.data[0].length >= 1) {\n\t\t\tfor (let i = 0; i < this.rowsSelected.length; i++) {\n\t\t\t\tthis.selectRow(i, value);\n\t\t\t}\n\t\t}\n\t\tthis.selectAllChange.next(value);\n\t}\n\n\tisRowSelected(index: number) {\n\t\treturn this.rowsSelected[index];\n\t}\n\n\t/**\n\t * Checks if row is disabled or not.\n\t */\n\tisRowDisabled(index: number) {\n\t\tconst row = this.data[index] as TableRow;\n\t\treturn !!row.disabled;\n\t}\n\n\t/**\n\t * Expands/Collapses `index`th row based on value\n\t *\n\t * @param index index of the row to expand or collapse\n\t * @param value expanded state of the row. `true` is expanded and `false` is collapsed\n\t */\n\texpandRow(index: number, value = true) {\n\t\tthis.rowsExpanded[index] = value;\n\t\tthis.rowsExpandedChange.emit(index);\n\t}\n\n\t/**\n\t * Gets the true index of a row based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realRowIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data.length);\n\t}\n\n\t/**\n\t * Gets the true index of a column based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realColumnIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data[0].length);\n\t}\n\n\t/**\n\t * Generic function to calculate the real index of something.\n\t * Used by `realRowIndex()` and `realColumnIndex()`\n\t *\n\t * @param index\n\t * @param length\n\t */\n\tprotected realIndex(index: number, length: number): number {\n\t\tif (index == null) {\n\t\t\treturn length - 1;\n\t\t} else if (index >= 0) {\n\t\t\treturn index >= length ? length - 1 : index;\n\t\t} else {\n\t\t\treturn -index >= length ? 0 : length + index;\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import { EventEmitter } from \"@angular/core\";\n\nimport { PaginationModel } from \"carbon-components-angular/pagination\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\nimport { TableRow } from \"./table-row.class\";\nimport { Subject } from \"rxjs\";\n\nexport type HeaderType = number | \"select\" | \"expand\";\n\n/**\n * TableModel represents a data model for two-dimensional data. It's used for all things table\n * (table component, table toolbar, pagination, etc)\n *\n * TableModel manages its internal data integrity very well if you use the provided helper\n * functions for modifying rows and columns and assigning header and data in that order.\n *\n * It also provides direct access to the data so you can read and modify it.\n * If you change the structure of the data (by directly pushing into the arrays or otherwise),\n * keep in mind to keep the data structure intact.\n *\n * Header length and length of every line in the data should be equal.\n *\n * If they are not consistent, unexpected things will happen.\n *\n * Use the provided functions when in doubt.\n */\nexport class TableModel implements PaginationModel {\n\t/**\n\t * The number of models instantiated, used for (among other things) unique id generation\n\t */\n\tprotected static COUNT = 0;\n\n\t/**\n\t * Sets data of the table.\n\t *\n\t * Make sure all rows are the same length to keep the column count accurate.\n\t */\n\tset data(newData: TableItem[][]) {\n\t\tif (!newData || (Array.isArray(newData) && newData.length === 0)) {\n\t\t\tnewData = [[]];\n\t\t}\n\n\t\tthis._data = newData;\n\n\t\t// init rowsSelected\n\t\tthis.rowsSelected = new Array<boolean>(this._data.length).fill(false);\n\t\tthis.rowsExpanded = new Array<boolean>(this._data.length).fill(false);\n\t\t// init rows indices\n\t\tthis.rowsIndices = [...Array(this._data.length).keys()];\n\t\t// init rowsContext\n\t\tthis.rowsContext = new Array<string>(this._data.length);\n\n\t\t// init rowsClass\n\t\tthis.rowsClass = new Array<string>(this._data.length);\n\n\t\t// only create a fresh header if necessary (header doesn't exist or differs in length)\n\t\tif (this.header == null || (this.header.length !== this._data[0].length && this._data[0].length > 0)) {\n\t\t\tlet header = new Array<TableHeaderItem>();\n\t\t\tfor (let i = 0; i < this._data[0].length; i++) {\n\t\t\t\theader.push(new TableHeaderItem());\n\t\t\t}\n\t\t\tthis.header = header;\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tdataChange = new EventEmitter();\n\trowsSelectedChange = new EventEmitter<number>();\n\trowsExpandedChange = new EventEmitter<number>();\n\t/**\n\t * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\n\t * all rows are selected.\n\t */\n\tselectAllChange = new Subject<boolean>();\n\n\t/**\n\t * Gets the full data.\n\t *\n\t * You can use it to alter individual `TableItem`s but if you need to change\n\t * table structure, use `addRow()` and/or `addColumn()`\n\t */\n\tget data() {\n\t\treturn this._data;\n\t}\n\n\t/**\n\t * Contains information about selection state of rows in the table.\n\t */\n\trowsSelected: boolean[] = [];\n\n\t/**\n\t * Contains information about expanded state of rows in the table.\n\t */\n\trowsExpanded: boolean[] = [];\n\n\t/**\n\t * Contains information about initial index of rows in the table\n\t */\n\trowsIndices: number[] = [];\n\n\t/**\n\t * Contains information about the context of the row.\n\t *\n\t * It affects styling of the row to reflect the context.\n\t *\n\t * string can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\n\t * empty or undefined by default\n\t */\n\trowsContext: string[] = [];\n\n\t/**\n\t * Contains class name(s) of the row.\n\t *\n\t * It affects styling of the row to reflect the appended class name(s).\n\t *\n\t * It's empty or undefined by default\n\t */\n\trowsClass: string[] = [];\n\n\t/**\n\t * Contains information about the header cells of the table.\n\t */\n\theader: TableHeaderItem[] = [];\n\n\t/**\n\t * Tracks the current page.\n\t */\n\tcurrentPage = 1;\n\n\t/**\n\t * Length of page.\n\t */\n\tpageLength = 10;\n\n\t/**\n\t * Set to true when there is no more data to load in the table\n\t */\n\tisEnd = false;\n\n\t/**\n\t * Set to true when lazy loading to show loading indicator\n\t */\n\tisLoading = false;\n\n\t/**\n\t * Absolute total number of rows of the table.\n\t */\n\tprotected _totalDataLength: number;\n\n\t/**\n\t * Manually set data length in case the data in the table doesn't\n\t * correctly reflect all the data that table is to display.\n\t *\n\t * Example: if you have multiple pages of data that table will display\n\t * but you're loading one at a time.\n\t *\n\t * Set to `null` to reset to default behavior.\n\t */\n\tset totalDataLength(length: number) {\n\t\t// if this function is called without a parameter we need to set to null to avoid having undefined != null\n\t\tthis._totalDataLength = isNaN(length) ? null : length;\n\t}\n\n\t/**\n\t * Total length of data that table has access to, or the amount manually set\n\t */\n\tget totalDataLength() {\n\t\t// if manually set data length\n\t\tif (this._totalDataLength !== null && this._totalDataLength >= 0) {\n\t\t\treturn this._totalDataLength;\n\t\t}\n\n\t\t// if empty dataset\n\t\tif (this.data && this.data.length === 1 && this.data[0].length === 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn this.data.length;\n\t}\n\n\t/**\n\t * Used in `data`\n\t */\n\tprotected _data: TableItem[][] = [[]];\n\n\t/**\n\t * The number of models instantiated, this is to make sure each table has a different\n\t * model count for unique id generation.\n\t */\n\tprotected tableModelCount = 0;\n\n\tconstructor() {\n\t\tthis.tableModelCount = TableModel.COUNT++;\n\t}\n\n\t/**\n\t * Returns an id for the given column\n\t *\n\t * @param column the column to generate an id for\n\t * @param row the row of the header to generate an id for\n\t */\n\tgetId(column: HeaderType, row = 0): string {\n\t\treturn `table-header-${row}-${column}-${this.tableModelCount}`;\n\t}\n\n\t/**\n\t * Returns the id of the header. Used to link the cells with headers (or headers with headers)\n\t *\n\t * @param column the column to start getting headers for\n\t * @param colSpan the number of columns to get headers for (defaults to 1)\n\t */\n\tgetHeaderId(column: HeaderType, colSpan = 1): string {\n\t\tif (column === \"select\" || column === \"expand\") {\n\t\t\treturn this.getId(column);\n\t\t}\n\n\t\tlet ids = [];\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tif (this.header[i]) {\n\t\t\t\tfor (let j = 0; j < colSpan; j++) {\n\t\t\t\t\tids.push(this.getId(i + j));\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn ids.join(\" \");\n\t}\n\n\t/**\n\t * Finds closest header by trying the `column` and then working its way to the left\n\t *\n\t * @param column the target column\n\t */\n\tgetHeader(column: number): TableHeaderItem {\n\t\tif (!this.header) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tconst headerCell = this.header[i];\n\t\t\tif (headerCell) {\n\t\t\t\treturn headerCell;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns how many rows is currently selected\n\t */\n\tselectedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsSelected) {\n\t\t\tthis.rowsSelected.forEach(rowSelected => {\n\t\t\t\tif (rowSelected) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns how many rows is currently expanded\n\t */\n\texpandedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsExpanded) {\n\t\t\tthis.rowsExpanded.forEach(rowExpanded => {\n\t\t\t\tif (rowExpanded) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns `index`th row of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\trow(index: number): TableItem[] {\n\t\treturn this.data[this.realRowIndex(index)];\n\t}\n\n\t/**\n\t * Adds a row to the `index`th row or appends to table if index not provided.\n\t *\n\t * If row is shorter than other rows or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If row is longer than other rows, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [row]\n\t * @param [index]\n\t */\n\taddRow(row?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array<Array<TableItem>>();\n\t\t\tnewData.push(row ? row : [new TableItem()]);  // row or one empty one column row\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet realRow = row;\n\t\tconst columnCount = this.data[0].length;\n\n\t\tif (row == null) {\n\t\t\trealRow = new Array<TableItem>();\n\t\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t}\n\n\t\tif (realRow.length < columnCount) {\n\t\t\t// extend the length of realRow\n\t\t\tconst difference = columnCount - realRow.length;\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t} else if (realRow.length > columnCount) {\n\t\t\t// extend the length of header\n\t\t\tlet difference = realRow.length - this.header.length;\n\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t\t// extend the length of every other row\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tlet currentRow = this.data[i];\n\t\t\t\tdifference = realRow.length - currentRow.length;\n\t\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\t\tcurrentRow.push(new TableItem());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (index == null) {\n\t\t\tthis.data.push(realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.push(false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.push(false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.push(undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.push(undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.push(this.data.length - 1);\n\t\t} else {\n\t\t\tconst ri = this.realRowIndex(index);\n\t\t\tthis.data.splice(ri, 0, realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.splice(ri, 0, false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.splice(ri, 0, false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.splice(ri, 0, undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.splice(ri, 0, undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.splice(ri, 0, this.data.length - 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th row.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteRow(index: number) {\n\t\tconst rri = this.realRowIndex(index);\n\t\tthis.data.splice(rri, 1);\n\t\tthis.rowsSelected.splice(rri, 1);\n\t\tthis.rowsExpanded.splice(rri, 1);\n\t\tthis.rowsContext.splice(rri, 1);\n\t\tthis.rowsClass.splice(rri, 1);\n\n\t\tconst rowIndex = this.rowsIndices[rri];\n\t\tthis.rowsIndices.splice(rri, 1);\n\t\tthis.rowsIndices = this.rowsIndices.map((value) => (value > rowIndex) ? --value : value);\n\n\t\tthis.dataChange.emit();\n\t}\n\n\thasExpandableRows() {\n\t\treturn this.data.some(data => data.some(d => d && d.expandedData)); // checking for some in 2D array\n\t}\n\n\tisRowExpandable(index: number) {\n\t\treturn this.data[index].some(d => d && d.expandedData);\n\t}\n\n\tisRowExpanded(index: number) {\n\t\treturn this.rowsExpanded[index];\n\t}\n\n\tgetRowContext(index: number) {\n\t\treturn this.rowsContext[index];\n\t}\n\n\t/**\n\t * Returns `index`th column of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tcolumn(index: number): TableItem[] {\n\t\tlet column = new Array<TableItem>();\n\t\tconst ri = this.realColumnIndex(index);\n\t\tconst rc = this.data.length;\n\n\t\tfor (let i = 0; i < rc; i++) {\n\t\t\tconst row = this.data[i];\n\t\t\tcolumn.push(row[ri]);\n\t\t}\n\n\t\treturn column;\n\t}\n\n\t/**\n\t * Adds a column to the `index`th column or appends to table if index not provided.\n\t *\n\t * If column is shorter than other columns or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If column is longer than other columns, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [column]\n\t * @param [index]\n\t */\n\taddColumn(column?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array<Array<TableItem>>();\n\t\t\tif (column == null) {\n\t\t\t\tnewData.push([new TableItem()]);\n\t\t\t} else {\n\t\t\t\tfor (let i = 0; i < column.length; i++) {\n\t\t\t\t\tlet item = column[i];\n\t\t\t\t\tnewData.push([item]);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet rc = this.data.length;  // row count\n\t\tlet ci = this.realColumnIndex(index);\n\n\t\t// append missing rows\n\t\tfor (let i = 0; column != null && i < column.length - rc; i++) {\n\t\t\tthis.addRow();\n\t\t}\n\t\trc = this.data.length;\n\t\tif (index == null) {\n\t\t\t// append to end\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.push(column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t} else {\n\t\t\tif (index >= this.data[0].length) {\n\t\t\t\t// if trying to append\n\t\t\t\tci++;\n\t\t\t}\n\t\t\t// insert\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.splice(ci, 0, new TableHeaderItem());\n\t\t\t}\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th column.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteColumn(index: number) {\n\t\tconst rci = this.realColumnIndex(index);\n\t\tconst rowCount = this.data.length;\n\t\tfor (let i = 0; i < rowCount; i++) {\n\t\t\tthis.data[i].splice(rci, 1);\n\t\t}\n\t\t// update header if not already set by user\n\t\tif (this.header.length > this.data[0].length) {\n\t\t\tthis.header.splice(rci, 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tmoveColumn(indexFrom: number, indexTo: number) {\n\t\tconst headerFrom = this.header[indexFrom];\n\n\t\tthis.addColumn(this.column(indexFrom), indexTo);\n\t\tthis.deleteColumn(indexFrom + (indexTo < indexFrom ? 1 : 0));\n\n\t\tthis.header[indexTo + (indexTo > indexFrom ? -1 : 0)] = headerFrom;\n\t}\n\n\t/**\n\t * cycle through the three sort states\n\t * @param index\n\t */\n\tcycleSortState(index: number) {\n\t\t// no sort provided so do the simple sort\n\t\tswitch (this.header[index].sortDirection) {\n\t\t\tcase \"ASCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"DESCENDING\";\n\t\t\t\tbreak;\n\t\t\tcase \"DESCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"NONE\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthis.header[index].sortDirection = \"ASCENDING\";\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Sorts the data currently present in the model based on `compare()`\n\t *\n\t * Direction is set by `ascending` and `descending` properties of `TableHeaderItem`\n\t * in `index`th column.\n\t *\n\t * @param index The column based on which it's sorting\n\t */\n\tsort(index: number) {\n\t\tthis.pushRowStateToModelData();\n\t\tconst headerSorted = this.header[index].sorted;\n\t\t// We only allow sorting by a single column, so reset sort state for all columns before specifying new sort state\n\t\tthis.header.forEach(column => column.sorted = false);\n\t\tif (this.header[index].sortDirection === \"NONE\" && headerSorted) {\n\t\t\t// Restore initial order of rows\n\t\t\tconst oldData = this._data;\n\t\t\tthis._data = [];\n\t\t\tfor (let i = 0; i < this.rowsIndices.length; i++) {\n\t\t\t\tconst ri = this.rowsIndices[i];\n\t\t\t\tthis._data[ri] = oldData[i];\n\t\t\t}\n\t\t} else {\n\t\t\tconst descending = this.header[index].sortDirection === \"DESCENDING\" ? -1 : 1;\n\t\t\tthis.data.sort((a, b) => {\n\t\t\t\treturn descending * this.header[index].compare(a[index], b[index]);\n\t\t\t});\n\t\t\tthis.header[index].sorted = true;\n\t\t}\n\t\tthis.popRowStateFromModelData();\n\t}\n\n\t/**\n\t * Appends `rowsSelected` and `rowsExpanded` info to model data.\n\t *\n\t * When sorting rows, do this first so information about row selection\n\t * gets sorted with the other row info.\n\t *\n\t * Call `popRowSelectionFromModelData()` after sorting to make everything\n\t * right with the world again.\n\t */\n\tpushRowStateToModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tconst rowSelectedMark = new TableItem();\n\t\t\trowSelectedMark.data = this.rowsSelected[i];\n\t\t\tthis.data[i].push(rowSelectedMark);\n\n\t\t\tconst rowExpandedMark = new TableItem();\n\t\t\trowExpandedMark.data = this.rowsExpanded[i];\n\t\t\tthis.data[i].push(rowExpandedMark);\n\n\t\t\tconst rowContext = new TableItem();\n\t\t\trowContext.data = this.rowsContext[i];\n\t\t\tthis.data[i].push(rowContext);\n\n\t\t\tconst rowClass = new TableItem();\n\t\t\trowClass.data = this.rowsClass[i];\n\t\t\tthis.data[i].push(rowClass);\n\n\t\t\tconst rowIndex = new TableItem();\n\t\t\trowIndex.data = this.rowsIndices[i];\n\t\t\tthis.data[i].push(rowIndex);\n\t\t}\n\t}\n\n\t/**\n\t * Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\t *\n\t * Call after sorting data (if you previously pushed to maintain selection order)\n\t * to make everything right with the world again.\n\t */\n\tpopRowStateFromModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tthis.rowsIndices[i] = this.data[i].pop().data;\n\t\t\tthis.rowsClass[i] = this.data[i].pop().data;\n\t\t\tthis.rowsContext[i] = this.data[i].pop().data;\n\t\t\tthis.rowsExpanded[i] = !!this.data[i].pop().data;\n\t\t\tthis.rowsSelected[i] = !!this.data[i].pop().data;\n\t\t}\n\t}\n\n\t/**\n\t * Checks if row is filtered out.\n\t *\n\t * @param index\n\t * @returns true if any of the filters in header filters out the `index`th row\n\t */\n\tisRowFiltered(index: number): boolean {\n\t\tconst realIndex = this.realRowIndex(index);\n\t\treturn this.header.some((item, i) => item && item.filter(this.row(realIndex)[i]));\n\t}\n\n\t/**\n\t * Select/deselect `index`th row based on value\n\t *\n\t * @param index index of the row to select\n\t * @param value state to set the row to. Defaults to `true`\n\t */\n\tselectRow(index: number, value = true) {\n\t\tif (this.isRowDisabled(index)) {\n\t\t\treturn;\n\t\t}\n\t\tthis.rowsSelected[index] = value;\n\t\tthis.rowsSelectedChange.emit(index);\n\t}\n\n\t/**\n\t * Selects or deselects all rows in the model\n\t *\n\t * @param value state to set all rows to. Defaults to `true`\n\t */\n\tselectAll(value = true) {\n\t\tif (this.data.length >= 1 && this.data[0].length >= 1) {\n\t\t\tfor (let i = 0; i < this.rowsSelected.length; i++) {\n\t\t\t\tthis.selectRow(i, value);\n\t\t\t}\n\t\t}\n\t\tthis.selectAllChange.next(value);\n\t}\n\n\tisRowSelected(index: number) {\n\t\treturn this.rowsSelected[index];\n\t}\n\n\t/**\n\t * Checks if row is disabled or not.\n\t */\n\tisRowDisabled(index: number) {\n\t\tconst row = this.data[index] as TableRow;\n\t\treturn !!row.disabled;\n\t}\n\n\t/**\n\t * Expands/Collapses `index`th row based on value\n\t *\n\t * @param index index of the row to expand or collapse\n\t * @param value expanded state of the row. `true` is expanded and `false` is collapsed\n\t */\n\texpandRow(index: number, value = true) {\n\t\tthis.rowsExpanded[index] = value;\n\t\tthis.rowsExpandedChange.emit(index);\n\t}\n\n\t/**\n\t * Gets the true index of a row based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realRowIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data.length);\n\t}\n\n\t/**\n\t * Gets the true index of a column based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realColumnIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data[0].length);\n\t}\n\n\t/**\n\t * Generic function to calculate the real index of something.\n\t * Used by `realRowIndex()` and `realColumnIndex()`\n\t *\n\t * @param index\n\t * @param length\n\t */\n\tprotected realIndex(index: number, length: number): number {\n\t\tif (index == null) {\n\t\t\treturn length - 1;\n\t\t} else if (index >= 0) {\n\t\t\treturn index >= length ? length - 1 : index;\n\t\t} else {\n\t\t\treturn -index >= length ? 0 : length + index;\n\t\t}\n\t}\n}\n",
             "constructorObj": {
                 "name": "constructor",
                 "description": "",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 188
+                "line": 192
             },
             "properties": [
                 {
@@ -8372,7 +8408,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Tracks the current page.</p>\n",
-                    "line": 126,
+                    "line": 130,
                     "rawdescription": "\n\nTracks the current page.\n"
                 },
                 {
@@ -8383,7 +8419,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 70
+                    "line": 69
                 },
                 {
                     "name": "header",
@@ -8393,7 +8429,7 @@
                     "type": "TableHeaderItem[]",
                     "optional": false,
                     "description": "<p>Contains information about the header cells of the table.</p>\n",
-                    "line": 121,
+                    "line": 125,
                     "rawdescription": "\n\nContains information about the header cells of the table.\n"
                 },
                 {
@@ -8404,7 +8440,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to true when there is no more data to load in the table</p>\n",
-                    "line": 136,
+                    "line": 140,
                     "rawdescription": "\n\nSet to true when there is no more data to load in the table\n"
                 },
                 {
@@ -8415,7 +8451,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to true when lazy loading to show loading indicator</p>\n",
-                    "line": 141,
+                    "line": 145,
                     "rawdescription": "\n\nSet to true when lazy loading to show loading indicator\n"
                 },
                 {
@@ -8426,7 +8462,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Length of page.</p>\n",
-                    "line": 131,
+                    "line": 135,
                     "rawdescription": "\n\nLength of page.\n"
                 },
                 {
@@ -8437,7 +8473,7 @@
                     "type": "string[]",
                     "optional": false,
                     "description": "<p>Contains class name(s) of the row.</p>\n<p>It affects styling of the row to reflect the appended class name(s).</p>\n<p>It&#39;s empty or undefined by default</p>\n",
-                    "line": 116,
+                    "line": 120,
                     "rawdescription": "\n\nContains class name(s) of the row.\n\nIt affects styling of the row to reflect the appended class name(s).\n\nIt's empty or undefined by default\n"
                 },
                 {
@@ -8448,7 +8484,7 @@
                     "type": "string[]",
                     "optional": false,
                     "description": "<p>Contains information about the context of the row.</p>\n<p>It affects styling of the row to reflect the context.</p>\n<p>string can be one of <code>&quot;success&quot; | &quot;warning&quot; | &quot;info&quot; | &quot;error&quot; | &quot;&quot;</code> and it&#39;s\nempty or undefined by default</p>\n",
-                    "line": 107,
+                    "line": 111,
                     "rawdescription": "\n\nContains information about the context of the row.\n\nIt affects styling of the row to reflect the context.\n\nstring can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\nempty or undefined by default\n"
                 },
                 {
@@ -8459,7 +8495,7 @@
                     "type": "boolean[]",
                     "optional": false,
                     "description": "<p>Contains information about expanded state of rows in the table.</p>\n",
-                    "line": 97,
+                    "line": 96,
                     "rawdescription": "\n\nContains information about expanded state of rows in the table.\n"
                 },
                 {
@@ -8470,7 +8506,18 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 72
+                    "line": 71
+                },
+                {
+                    "name": "rowsIndices",
+                    "defaultValue": "[]",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number[]",
+                    "optional": false,
+                    "description": "<p>Contains information about initial index of rows in the table</p>\n",
+                    "line": 101,
+                    "rawdescription": "\n\nContains information about initial index of rows in the table\n"
                 },
                 {
                     "name": "rowsSelected",
@@ -8480,7 +8527,7 @@
                     "type": "boolean[]",
                     "optional": false,
                     "description": "<p>Contains information about selection state of rows in the table.</p>\n",
-                    "line": 92,
+                    "line": 91,
                     "rawdescription": "\n\nContains information about selection state of rows in the table.\n"
                 },
                 {
@@ -8491,7 +8538,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 71
+                    "line": 70
                 },
                 {
                     "name": "selectAllChange",
@@ -8501,7 +8548,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Gets emitted when <code>selectAll</code> is called. Emits false if all rows are deselected and true if\nall rows are selected.</p>\n",
-                    "line": 77,
+                    "line": 76,
                     "rawdescription": "\n\nGets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\nall rows are selected.\n"
                 }
             ],
@@ -8529,7 +8576,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 449,
+                    "line": 463,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds a column to the `index`th column or appends to table if index not provided.\n\nIf column is shorter than other columns or not provided, it will be padded with\nempty `TableItem` elements.\n\nIf column is longer than other columns, others will be extended to match so no data is lost.\n\nIf called on an empty table with no parameters, it creates a 1x1 table.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -8537,8 +8584,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 11467,
-                                "end": 11473,
+                                "pos": 12019,
+                                "end": 12025,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8550,8 +8597,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 11460,
-                                "end": 11465,
+                                "pos": 12012,
+                                "end": 12017,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8562,8 +8609,8 @@
                         },
                         {
                             "name": {
-                                "pos": 11487,
-                                "end": 11492,
+                                "pos": 12039,
+                                "end": 12044,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8575,8 +8622,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 11480,
-                                "end": 11485,
+                                "pos": 12032,
+                                "end": 12037,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8608,7 +8655,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 304,
+                    "line": 308,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAdds a row to the `index`th row or appends to table if index not provided.\n\nIf row is shorter than other rows or not provided, it will be padded with\nempty `TableItem` elements.\n\nIf row is longer than other rows, others will be extended to match so no data is lost.\n\nIf called on an empty table with no parameters, it creates a 1x1 table.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -8616,8 +8663,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7672,
-                                "end": 7675,
+                                "pos": 7857,
+                                "end": 7860,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8629,8 +8676,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 7665,
-                                "end": 7670,
+                                "pos": 7850,
+                                "end": 7855,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8641,8 +8688,8 @@
                         },
                         {
                             "name": {
-                                "pos": 7689,
-                                "end": 7694,
+                                "pos": 7874,
+                                "end": 7879,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8654,8 +8701,8 @@
                             "deprecationMessage": "",
                             "optional": true,
                             "tagName": {
-                                "pos": 7682,
-                                "end": 7687,
+                                "pos": 7867,
+                                "end": 7872,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8679,7 +8726,7 @@
                     "optional": false,
                     "returnType": "TableItem[]",
                     "typeParameters": [],
-                    "line": 421,
+                    "line": 435,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns `index`th column of the table.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -8687,8 +8734,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 10714,
-                                "end": 10719,
+                                "pos": 11266,
+                                "end": 11271,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8699,8 +8746,53 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 10708,
-                                "end": 10713,
+                                "pos": 11260,
+                                "end": 11265,
+                                "flags": 8421376,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 79,
+                                "escapedText": "param"
+                            },
+                            "comment": ""
+                        }
+                    ]
+                },
+                {
+                    "name": "cycleSortState",
+                    "args": [
+                        {
+                            "name": "index",
+                            "type": "number",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 551,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\ncycle through the three sort states\n",
+                    "description": "<p>cycle through the three sort states</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": {
+                                "pos": 14331,
+                                "end": 14336,
+                                "flags": 8421376,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 79,
+                                "escapedText": "index"
+                            },
+                            "type": "number",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "pos": 14325,
+                                "end": 14330,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8724,7 +8816,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 510,
+                    "line": 524,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDeletes `index`th column.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -8732,8 +8824,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 13078,
-                                "end": 13083,
+                                "pos": 13630,
+                                "end": 13635,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8744,8 +8836,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 13072,
-                                "end": 13077,
+                                "pos": 13624,
+                                "end": 13629,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8769,7 +8861,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 387,
+                    "line": 397,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDeletes `index`th row.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -8777,8 +8869,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 9935,
-                                "end": 9940,
+                                "pos": 10317,
+                                "end": 10322,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8789,8 +8881,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 9929,
-                                "end": 9934,
+                                "pos": 10311,
+                                "end": 10316,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8807,7 +8899,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 266,
+                    "line": 270,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns how many rows is currently expanded\n",
@@ -8833,7 +8925,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 650,
+                    "line": 703,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpands/Collapses `index`th row based on value\n\n",
@@ -8841,8 +8933,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 16977,
-                                "end": 16982,
+                                "pos": 18666,
+                                "end": 18671,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8853,8 +8945,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 16971,
-                                "end": 16976,
+                                "pos": 18660,
+                                "end": 18665,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8865,8 +8957,8 @@
                         },
                         {
                             "name": {
-                                "pos": 17033,
-                                "end": 17038,
+                                "pos": 18722,
+                                "end": 18727,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8878,8 +8970,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "true",
                             "tagName": {
-                                "pos": 17027,
-                                "end": 17032,
+                                "pos": 18716,
+                                "end": 18721,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8903,7 +8995,7 @@
                     "optional": false,
                     "returnType": "TableHeaderItem",
                     "typeParameters": [],
-                    "line": 233,
+                    "line": 237,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFinds closest header by trying the `column` and then working its way to the left\n\n",
@@ -8911,8 +9003,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6211,
-                                "end": 6217,
+                                "pos": 6396,
+                                "end": 6402,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8923,8 +9015,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 6205,
-                                "end": 6210,
+                                "pos": 6390,
+                                "end": 6395,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8955,7 +9047,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 210,
+                    "line": 214,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns the id of the header. Used to link the cells with headers (or headers with headers)\n\n",
@@ -8963,8 +9055,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5627,
-                                "end": 5633,
+                                "pos": 5812,
+                                "end": 5818,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8975,8 +9067,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5621,
-                                "end": 5626,
+                                "pos": 5806,
+                                "end": 5811,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -8987,8 +9079,8 @@
                         },
                         {
                             "name": {
-                                "pos": 5685,
-                                "end": 5692,
+                                "pos": 5870,
+                                "end": 5877,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9000,8 +9092,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "1",
                             "tagName": {
-                                "pos": 5679,
-                                "end": 5684,
+                                "pos": 5864,
+                                "end": 5869,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9032,7 +9124,7 @@
                     "optional": false,
                     "returnType": "string",
                     "typeParameters": [],
-                    "line": 200,
+                    "line": 204,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns an id for the given column\n\n",
@@ -9040,8 +9132,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5291,
-                                "end": 5297,
+                                "pos": 5476,
+                                "end": 5482,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9052,8 +9144,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5285,
-                                "end": 5290,
+                                "pos": 5470,
+                                "end": 5475,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9064,8 +9156,8 @@
                         },
                         {
                             "name": {
-                                "pos": 5342,
-                                "end": 5345,
+                                "pos": 5527,
+                                "end": 5530,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9077,8 +9169,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "0",
                             "tagName": {
-                                "pos": 5336,
-                                "end": 5341,
+                                "pos": 5521,
+                                "end": 5526,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9102,7 +9194,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 410,
+                    "line": 424,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9123,7 +9215,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 398,
+                    "line": 412,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -9140,7 +9232,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 639,
+                    "line": 692,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nChecks if row is disabled or not.\n",
@@ -9170,7 +9262,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 402,
+                    "line": 416,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9198,7 +9290,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 406,
+                    "line": 420,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9226,7 +9318,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 599,
+                    "line": 652,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nChecks if row is filtered out.\n\n",
@@ -9234,8 +9326,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 15732,
-                                "end": 15737,
+                                "pos": 17421,
+                                "end": 17426,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9246,8 +9338,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 15726,
-                                "end": 15731,
+                                "pos": 17415,
+                                "end": 17420,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9258,8 +9350,8 @@
                         },
                         {
                             "tagName": {
-                                "pos": 15743,
-                                "end": 15750,
+                                "pos": 17432,
+                                "end": 17439,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9283,7 +9375,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 632,
+                    "line": 685,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9317,7 +9409,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 524,
+                    "line": 538,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -9347,7 +9439,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 584,
+                    "line": 636,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRestores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\nCall after sorting data (if you previously pushed to maintain selection order)\nto make everything right with the world again.\n",
@@ -9359,7 +9451,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 558,
+                    "line": 606,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAppends `rowsSelected` and `rowsExpanded` info to model data.\n\nWhen sorting rows, do this first so information about row selection\ngets sorted with the other row info.\n\nCall `popRowSelectionFromModelData()` after sorting to make everything\nright with the world again.\n",
@@ -9378,7 +9470,7 @@
                     "optional": false,
                     "returnType": "TableItem[]",
                     "typeParameters": [],
-                    "line": 285,
+                    "line": 289,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns `index`th row of the table.\n\nNegative index starts from the end. -1 being the last element.\n\n",
@@ -9386,8 +9478,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7116,
-                                "end": 7121,
+                                "pos": 7301,
+                                "end": 7306,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9398,8 +9490,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7110,
-                                "end": 7115,
+                                "pos": 7295,
+                                "end": 7300,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9424,7 +9516,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 623,
+                    "line": 676,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelects or deselects all rows in the model\n\n",
@@ -9432,8 +9524,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 16405,
-                                "end": 16410,
+                                "pos": 18094,
+                                "end": 18099,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9445,8 +9537,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "true",
                             "tagName": {
-                                "pos": 16399,
-                                "end": 16404,
+                                "pos": 18088,
+                                "end": 18093,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9463,7 +9555,7 @@
                     "optional": false,
                     "returnType": "number",
                     "typeParameters": [],
-                    "line": 251,
+                    "line": 255,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReturns how many rows is currently selected\n",
@@ -9489,7 +9581,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 610,
+                    "line": 663,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelect/deselect `index`th row based on value\n\n",
@@ -9497,8 +9589,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 16068,
-                                "end": 16073,
+                                "pos": 17757,
+                                "end": 17762,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9509,8 +9601,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 16062,
-                                "end": 16067,
+                                "pos": 17751,
+                                "end": 17756,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9521,8 +9613,8 @@
                         },
                         {
                             "name": {
-                                "pos": 16112,
-                                "end": 16117,
+                                "pos": 17801,
+                                "end": 17806,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9534,8 +9626,8 @@
                             "deprecationMessage": "",
                             "defaultValue": "true",
                             "tagName": {
-                                "pos": 16106,
-                                "end": 16111,
+                                "pos": 17795,
+                                "end": 17800,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9559,7 +9651,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 541,
+                    "line": 574,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSorts the data currently present in the model based on `compare()`\n\nDirection is set by `ascending` and `descending` properties of `TableHeaderItem`\nin `index`th column.\n\n",
@@ -9567,8 +9659,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 13928,
-                                "end": 13933,
+                                "pos": 14918,
+                                "end": 14923,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9579,8 +9671,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 13922,
-                                "end": 13927,
+                                "pos": 14912,
+                                "end": 14917,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -9610,7 +9702,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 41,
+                        "line": 39,
                         "rawdescription": "\n\nSets data of the table.\n\nMake sure all rows are the same length to keep the column count accurate.\n",
                         "description": "<p>Sets data of the table.</p>\n<p>Make sure all rows are the same length to keep the column count accurate.</p>\n",
                         "jsdoctags": [
@@ -9629,7 +9721,7 @@
                         "name": "data",
                         "type": "",
                         "returnType": "",
-                        "line": 85,
+                        "line": 84,
                         "rawdescription": "\n\nGets the full data.\n\nYou can use it to alter individual `TableItem`s but if you need to change\ntable structure, use `addRow()` and/or `addColumn()`\n",
                         "description": "<p>Gets the full data.</p>\n<p>You can use it to alter individual <code>TableItem</code>s but if you need to change\ntable structure, use <code>addRow()</code> and/or <code>addColumn()</code></p>\n"
                     }
@@ -9650,7 +9742,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 157,
+                        "line": 161,
                         "rawdescription": "\n\nManually set data length in case the data in the table doesn't\ncorrectly reflect all the data that table is to display.\n\nExample: if you have multiple pages of data that table will display\nbut you're loading one at a time.\n\nSet to `null` to reset to default behavior.\n",
                         "description": "<p>Manually set data length in case the data in the table doesn&#39;t\ncorrectly reflect all the data that table is to display.</p>\n<p>Example: if you have multiple pages of data that table will display\nbut you&#39;re loading one at a time.</p>\n<p>Set to <code>null</code> to reset to default behavior.</p>\n",
                         "jsdoctags": [
@@ -9669,7 +9761,7 @@
                         "name": "totalDataLength",
                         "type": "",
                         "returnType": "",
-                        "line": 165,
+                        "line": 169,
                         "rawdescription": "\n\nTotal length of data that table has access to, or the amount manually set\n",
                         "description": "<p>Total length of data that table has access to, or the amount manually set</p>\n"
                     }
@@ -20129,7 +20221,7 @@
         },
         {
             "name": "Checkbox",
-            "id": "component-Checkbox-8e045d7474c889e29a4cb640ce412de1282a0af9514497c874860675b135c44a9d74c9a7f49d48457a2d9c841acf84db74ef23216eed4e492f7d7c3965bd6ed1",
+            "id": "component-Checkbox-6867b7c8ca0114cc75323f10b4cf45c8179bc2ceccad44296a3f3afbbabe388791153a6af8ea1f2e8c41e9f06c217f595954d9c33e555e0eb548edeb22dd725f",
             "file": "src/checkbox/checkbox.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -20151,10 +20243,9 @@
             "inputsClass": [
                 {
                     "name": "ariaLabel",
-                    "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 103,
+                    "line": 102,
                     "type": "string",
                     "decorators": []
                 },
@@ -20162,7 +20253,7 @@
                     "name": "ariaLabelledby",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 105,
+                    "line": 103,
                     "type": "string",
                     "decorators": []
                 },
@@ -20172,7 +20263,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the `checked` state. `true` for checked, `false` for unchecked\n\nAllows double binding with the `checkedChange` Output.\n",
                     "description": "<p>Sets the <code>checked</code> state. <code>true</code> for checked, <code>false</code> for unchecked</p>\n<p>Allows double binding with the <code>checkedChange</code> Output.</p>\n",
-                    "line": 144,
+                    "line": 142,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -20215,7 +20306,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\nAllows double binding with the `indeterminateChange` Output.\n",
                     "description": "<p>Set the checkbox&#39;s indeterminate state to match the parameter and transition the view to reflect the change.</p>\n<p>Allows double binding with the <code>indeterminateChange</code> Output.</p>\n",
-                    "line": 112,
+                    "line": 110,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -20269,7 +20360,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when the value of the checkbox changes.\n\nAllows double biding with the `checked` Input.\n",
                     "description": "<p>Emits an event when the value of the checkbox changes.</p>\n<p>Allows double biding with the <code>checked</code> Input.</p>\n",
-                    "line": 165,
+                    "line": 163,
                     "type": "EventEmitter"
                 },
                 {
@@ -20279,7 +20370,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits click event.\n",
                     "description": "<p>Emits click event.</p>\n",
-                    "line": 158,
+                    "line": 156,
                     "type": "EventEmitter"
                 },
                 {
@@ -20289,7 +20380,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event notifying other classes when a change in state occurs specifically\non an indeterminate checkbox.\n",
                     "description": "<p>Emits event notifying other classes when a change in state occurs specifically\non an indeterminate checkbox.</p>\n",
-                    "line": 171,
+                    "line": 169,
                     "type": "EventEmitter"
                 }
             ],
@@ -20302,7 +20393,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to <code>true</code> if the input checkbox is selected (or checked).</p>\n",
-                    "line": 176,
+                    "line": 174,
                     "rawdescription": "\n\nSet to `true` if the input checkbox is selected (or checked).\n"
                 },
                 {
@@ -20313,7 +20404,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to <code>true</code> if the input checkbox is in state indeterminate.</p>\n",
-                    "line": 180,
+                    "line": 178,
                     "rawdescription": "\n\nSet to `true` if the input checkbox is in state indeterminate.\n"
                 },
                 {
@@ -20338,7 +20429,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Keeps a reference to the checkboxes current state, as defined in <code>CheckboxState</code>.</p>\n",
-                    "line": 185,
+                    "line": 183,
                     "rawdescription": "\n\nKeeps a reference to the checkboxes current state, as defined in `CheckboxState`.\n"
                 },
                 {
@@ -20348,7 +20439,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "<p>Maintains a reference to the view DOM element of the <code>Checkbox</code>.</p>\n",
-                    "line": 190,
+                    "line": 188,
                     "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Checkbox`.\n",
                     "decorators": [
                         {
@@ -20368,7 +20459,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Called when checkbox is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
-                    "line": 280,
+                    "line": 278,
                     "rawdescription": "\n\nCalled when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.\n"
                 },
                 {
@@ -20379,7 +20470,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
-                    "line": 309,
+                    "line": 307,
                     "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n"
                 }
             ],
@@ -20390,7 +20481,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 292,
+                    "line": 290,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates instance of `CheckboxChange` used to propagate the change event.\n",
@@ -20402,7 +20493,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 247,
+                    "line": 245,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -20428,7 +20519,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 254,
+                    "line": 252,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExecutes on the event of a change within `Checkbox` to block propagation.\n",
@@ -20458,7 +20549,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 261,
+                    "line": 259,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles click events on the `Checkbox` and emits changes to other classes.\n",
@@ -20488,7 +20579,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 222,
+                    "line": 220,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -20521,7 +20612,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 230,
+                    "line": 228,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -20532,8 +20623,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5411,
-                                "end": 5413,
+                                "pos": 5324,
+                                "end": 5326,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -20544,8 +20635,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5405,
-                                "end": 5410,
+                                "pos": 5318,
+                                "end": 5323,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -20569,7 +20660,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 241,
+                    "line": 239,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`ControlValueAccessor` method to programmatically disable the checkbox.\n\nex: `this.formGroup.get(\"myCheckbox\").disable();`\n\n",
@@ -20577,8 +20668,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5692,
-                                "end": 5702,
+                                "pos": 5605,
+                                "end": 5615,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -20589,8 +20680,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5686,
-                                "end": 5691,
+                                "pos": 5599,
+                                "end": 5604,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -20607,7 +20698,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 202,
+                    "line": 200,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggle the selected state of the checkbox.\n",
@@ -20629,7 +20720,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 285,
+                    "line": 283,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles changes between checkbox states.\n",
@@ -20659,7 +20750,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 214,
+                    "line": 212,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWrites a value from `ngModel` to the component.\n\nIn this case the value is the `checked` property.\n\n",
@@ -20670,8 +20761,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5003,
-                                "end": 5008,
+                                "pos": 4916,
+                                "end": 4921,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -20682,8 +20773,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4997,
-                                "end": 5002,
+                                "pos": 4910,
+                                "end": 4915,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -20705,7 +20796,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 247
+                    "line": 245
                 }
             ],
             "standalone": false,
@@ -20713,7 +20804,7 @@
             "description": "<p><a href=\"../../?path=/story/components-checkbox--basic\">See demo</a></p>\n",
             "rawdescription": "\n\n[See demo](../../?path=/story/components-checkbox--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tViewChild,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { CheckboxValue } from \"./checkbox.types\";\n\n/**\n * Defines the set of states for a checkbox component.\n */\nexport enum CheckboxState {\n\tInit,\n\tIndeterminate,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * [See demo](../../?path=/story/components-checkbox--basic)\n */\n@Component({\n\tselector: \"cds-checkbox, ibm-checkbox\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t<input\n\t\t\t\t#inputCheckbox\n\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t[id]=\"id + '_input'\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[name]=\"name\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t<label\n\t\t\t\t[for]=\"id + '_input'\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\tclass=\"cds--checkbox-label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<span [ngClass]=\"{'cds--visually-hidden' : hideLabel}\" class=\"cds--checkbox-label-text\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Checkbox,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class Checkbox implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Variable used for creating unique ids for checkbox components.\n\t */\n\tstatic checkboxCount = 0;\n\n\t/**\n\t * Set to `true` for a disabled checkbox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading checkbox.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` to hide the checkbox labels.\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the name attribute on the `input` element.\n\t */\n\t@Input() name: string;\n\t/**\n\t * The unique id for the checkbox component.\n\t */\n\t@Input() id = `checkbox-${Checkbox.checkboxCount}`;\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() value: CheckboxValue;\n\t// tslint:disable-next-line:no-input-rename\n\t@Input() ariaLabel = \"\";\n\t// tslint:disable-next-line:no-input-rename\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\t *\n\t * Allows double binding with the `indeterminateChange` Output.\n\t */\n\t@Input() set indeterminate(indeterminate: boolean) {\n\t\tif (indeterminate === this._indeterminate) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._indeterminate = indeterminate;\n\n\t\tif (this._indeterminate) {\n\t\t\tthis.transitionCheckboxState(CheckboxState.Indeterminate);\n\t\t} else {\n\t\t\tthis.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t}\n\n\t\tif (this.inputCheckbox && this.inputCheckbox.nativeElement) {\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = indeterminate;\n\t\t}\n\t\tthis.changeDetectorRef.markForCheck();\n\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t}\n\n\t/**\n\t * Reflects whether the checkbox state is indeterminate.\n\t */\n\tget indeterminate() {\n\t\treturn this._indeterminate;\n\t}\n\n\t/**\n\t * Sets the `checked` state. `true` for checked, `false` for unchecked\n\t *\n\t * Allows double binding with the `checkedChange` Output.\n\t */\n\t@Input() set checked (checked: boolean) {\n\t\tthis.setChecked(checked, false);\n\t}\n\n\t/**\n\t * Returns value `true` if state is selected for the checkbox.\n\t */\n\tget checked() {\n\t\treturn this._checked;\n\t}\n\n\t/**\n\t * Emits click event.\n\t */\n\t@Output() click = new EventEmitter<void>();\n\n\t/**\n\t * Emits an event when the value of the checkbox changes.\n\t *\n\t * Allows double biding with the `checked` Input.\n\t */\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\n\t/**\n\t * Emits event notifying other classes when a change in state occurs specifically\n\t * on an indeterminate checkbox.\n\t */\n\t@Output() indeterminateChange = new EventEmitter<boolean>();\n\n\t/**\n\t * Set to `true` if the input checkbox is selected (or checked).\n\t */\n\t_checked = false;\n\t/**\n\t * Set to `true` if the input checkbox is in state indeterminate.\n\t */\n\t_indeterminate = false;\n\n\t/**\n\t * Keeps a reference to the checkboxes current state, as defined in `CheckboxState`.\n\t */\n\tcurrentCheckboxState = CheckboxState.Init;\n\n\t/**\n\t * Maintains a reference to the view DOM element of the `Checkbox`.\n\t */\n\t@ViewChild(\"inputCheckbox\") inputCheckbox: ElementRef;\n\n\t/**\n\t * Creates an instance of `Checkbox`.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tCheckbox.checkboxCount++;\n\t}\n\n\t/**\n\t * Toggle the selected state of the checkbox.\n\t */\n\tpublic toggle() {\n\t\t// Flip checked and reset indeterminate\n\t\tthis.setChecked(!this.checked, true);\n\t}\n\n\t/**\n\t * Writes a value from `ngModel` to the component.\n\t *\n\t * In this case the value is the `checked` property.\n\t *\n\t * @param value boolean, corresponds to the `checked` property.\n\t */\n\tpublic writeValue(value: any) {\n\t\t// Set checked and reset indeterminate\n\t\tthis.setChecked(!!value, true);\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the checkbox.\n\t *\n\t * ex: `this.formGroup.get(\"myCheckbox\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the checkbox\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Executes on the event of a change within `Checkbox` to block propagation.\n\t */\n\tonChange(event: Event) {\n\t\tevent.stopPropagation();\n\t}\n\n\t/**\n\t * Handles click events on the `Checkbox` and emits changes to other classes.\n\t */\n\tonClick(event: Event) {\n\t\tif (this.click.observers.length) {\n\t\t\t// Disable default checkbox activation behavior which flips checked and resets indeterminate.\n\t\t\t// This allows the parent component to control the checked/indeterminate properties.\n\t\t\tevent.preventDefault();\n\t\t\tthis.click.emit();\n\t\t\treturn;\n\t\t}\n\t\tif (!this.disabled) {\n\t\t\tthis.toggle();\n\t\t\tthis.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\n\t/**\n\t * Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Handles changes between checkbox states.\n\t */\n\ttransitionCheckboxState(newState: CheckboxState) {\n\t\tthis.currentCheckboxState = newState;\n\t}\n\n\t/**\n\t * Creates instance of `CheckboxChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\t/**\n\t * Updates the checkbox if it is in the indeterminate state.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.indeterminate && this.inputCheckbox && this.inputCheckbox.nativeElement) {\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = true;\n\t\t}\n\t}\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\t/**\n\t * Sets checked state and optionally resets indeterminate state.\n\t */\n\tprivate setChecked(checked: boolean, resetIndeterminate: boolean) {\n\t\tif (checked === this._checked) {\n\t\t\treturn;\n\t\t}\n\t\tthis._checked = checked;\n\t\t// Reset indeterminate if requested\n\t\tif (resetIndeterminate && this._indeterminate) {\n\t\t\tthis._indeterminate = false;\n\t\t\tPromise.resolve().then(() => {\n\t\t\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t\t\t});\n\t\t}\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tViewChild,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { CheckboxValue } from \"./checkbox.types\";\n\n/**\n * Defines the set of states for a checkbox component.\n */\nexport enum CheckboxState {\n\tInit,\n\tIndeterminate,\n\tChecked,\n\tUnchecked\n}\n\n/**\n * [See demo](../../?path=/story/components-checkbox--basic)\n */\n@Component({\n\tselector: \"cds-checkbox, ibm-checkbox\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t<input\n\t\t\t\t#inputCheckbox\n\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t[id]=\"id + '_input'\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[name]=\"name\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t<label\n\t\t\t\t[for]=\"id + '_input'\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\tclass=\"cds--checkbox-label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t\t}\">\n\t\t\t\t<span [ngClass]=\"{'cds--visually-hidden' : hideLabel}\" class=\"cds--checkbox-label-text\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</span>\n\t\t\t</label>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Checkbox,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class Checkbox implements ControlValueAccessor, AfterViewInit {\n\t/**\n\t * Variable used for creating unique ids for checkbox components.\n\t */\n\tstatic checkboxCount = 0;\n\n\t/**\n\t * Set to `true` for a disabled checkbox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading checkbox.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` to hide the checkbox labels.\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the name attribute on the `input` element.\n\t */\n\t@Input() name: string;\n\t/**\n\t * The unique id for the checkbox component.\n\t */\n\t@Input() id = `checkbox-${Checkbox.checkboxCount}`;\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() value: CheckboxValue;\n\t@Input() ariaLabel: string;\n\t@Input() ariaLabelledby: string;\n\n\t/**\n\t * Set the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\t *\n\t * Allows double binding with the `indeterminateChange` Output.\n\t */\n\t@Input() set indeterminate(indeterminate: boolean) {\n\t\tif (indeterminate === this._indeterminate) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._indeterminate = indeterminate;\n\n\t\tif (this._indeterminate) {\n\t\t\tthis.transitionCheckboxState(CheckboxState.Indeterminate);\n\t\t} else {\n\t\t\tthis.transitionCheckboxState(this.checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t}\n\n\t\tif (this.inputCheckbox && this.inputCheckbox.nativeElement) {\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = indeterminate;\n\t\t}\n\t\tthis.changeDetectorRef.markForCheck();\n\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t}\n\n\t/**\n\t * Reflects whether the checkbox state is indeterminate.\n\t */\n\tget indeterminate() {\n\t\treturn this._indeterminate;\n\t}\n\n\t/**\n\t * Sets the `checked` state. `true` for checked, `false` for unchecked\n\t *\n\t * Allows double binding with the `checkedChange` Output.\n\t */\n\t@Input() set checked (checked: boolean) {\n\t\tthis.setChecked(checked, false);\n\t}\n\n\t/**\n\t * Returns value `true` if state is selected for the checkbox.\n\t */\n\tget checked() {\n\t\treturn this._checked;\n\t}\n\n\t/**\n\t * Emits click event.\n\t */\n\t@Output() click = new EventEmitter<void>();\n\n\t/**\n\t * Emits an event when the value of the checkbox changes.\n\t *\n\t * Allows double biding with the `checked` Input.\n\t */\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\n\t/**\n\t * Emits event notifying other classes when a change in state occurs specifically\n\t * on an indeterminate checkbox.\n\t */\n\t@Output() indeterminateChange = new EventEmitter<boolean>();\n\n\t/**\n\t * Set to `true` if the input checkbox is selected (or checked).\n\t */\n\t_checked = false;\n\t/**\n\t * Set to `true` if the input checkbox is in state indeterminate.\n\t */\n\t_indeterminate = false;\n\n\t/**\n\t * Keeps a reference to the checkboxes current state, as defined in `CheckboxState`.\n\t */\n\tcurrentCheckboxState = CheckboxState.Init;\n\n\t/**\n\t * Maintains a reference to the view DOM element of the `Checkbox`.\n\t */\n\t@ViewChild(\"inputCheckbox\") inputCheckbox: ElementRef;\n\n\t/**\n\t * Creates an instance of `Checkbox`.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tCheckbox.checkboxCount++;\n\t}\n\n\t/**\n\t * Toggle the selected state of the checkbox.\n\t */\n\tpublic toggle() {\n\t\t// Flip checked and reset indeterminate\n\t\tthis.setChecked(!this.checked, true);\n\t}\n\n\t/**\n\t * Writes a value from `ngModel` to the component.\n\t *\n\t * In this case the value is the `checked` property.\n\t *\n\t * @param value boolean, corresponds to the `checked` property.\n\t */\n\tpublic writeValue(value: any) {\n\t\t// Set checked and reset indeterminate\n\t\tthis.setChecked(!!value, true);\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the checkbox is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the checkbox.\n\t *\n\t * ex: `this.formGroup.get(\"myCheckbox\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the checkbox\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Executes on the event of a change within `Checkbox` to block propagation.\n\t */\n\tonChange(event: Event) {\n\t\tevent.stopPropagation();\n\t}\n\n\t/**\n\t * Handles click events on the `Checkbox` and emits changes to other classes.\n\t */\n\tonClick(event: Event) {\n\t\tif (this.click.observers.length) {\n\t\t\t// Disable default checkbox activation behavior which flips checked and resets indeterminate.\n\t\t\t// This allows the parent component to control the checked/indeterminate properties.\n\t\t\tevent.preventDefault();\n\t\t\tthis.click.emit();\n\t\t\treturn;\n\t\t}\n\t\tif (!this.disabled) {\n\t\t\tthis.toggle();\n\t\t\tthis.transitionCheckboxState(this._checked ? CheckboxState.Checked : CheckboxState.Unchecked);\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\n\t/**\n\t * Called when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Handles changes between checkbox states.\n\t */\n\ttransitionCheckboxState(newState: CheckboxState) {\n\t\tthis.currentCheckboxState = newState;\n\t}\n\n\t/**\n\t * Creates instance of `CheckboxChange` used to propagate the change event.\n\t */\n\temitChangeEvent() {\n\t\tthis.checkedChange.emit(this.checked);\n\t\tthis.propagateChange(this.checked);\n\t}\n\n\t/**\n\t * Updates the checkbox if it is in the indeterminate state.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.indeterminate && this.inputCheckbox && this.inputCheckbox.nativeElement) {\n\t\t\tthis.inputCheckbox.nativeElement.indeterminate = true;\n\t\t}\n\t}\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\t/**\n\t * Sets checked state and optionally resets indeterminate state.\n\t */\n\tprivate setChecked(checked: boolean, resetIndeterminate: boolean) {\n\t\tif (checked === this._checked) {\n\t\t\treturn;\n\t\t}\n\t\tthis._checked = checked;\n\t\t// Reset indeterminate if requested\n\t\tif (resetIndeterminate && this._indeterminate) {\n\t\t\tthis._indeterminate = false;\n\t\t\tPromise.resolve().then(() => {\n\t\t\t\tthis.indeterminateChange.emit(this._indeterminate);\n\t\t\t});\n\t\t}\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -20730,7 +20821,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 190,
+                "line": 188,
                 "rawdescription": "\n\nCreates an instance of `Checkbox`.\n",
                 "jsdoctags": [
                     {
@@ -20765,7 +20856,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 112,
+                        "line": 110,
                         "rawdescription": "\n\nSet the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\nAllows double binding with the `indeterminateChange` Output.\n",
                         "description": "<p>Set the checkbox&#39;s indeterminate state to match the parameter and transition the view to reflect the change.</p>\n<p>Allows double binding with the <code>indeterminateChange</code> Output.</p>\n",
                         "jsdoctags": [
@@ -20784,7 +20875,7 @@
                         "name": "indeterminate",
                         "type": "",
                         "returnType": "",
-                        "line": 135,
+                        "line": 133,
                         "rawdescription": "\n\nReflects whether the checkbox state is indeterminate.\n",
                         "description": "<p>Reflects whether the checkbox state is indeterminate.</p>\n"
                     }
@@ -20805,7 +20896,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 144,
+                        "line": 142,
                         "rawdescription": "\n\nSets the `checked` state. `true` for checked, `false` for unchecked\n\nAllows double binding with the `checkedChange` Output.\n",
                         "description": "<p>Sets the <code>checked</code> state. <code>true</code> for checked, <code>false</code> for unchecked</p>\n<p>Allows double binding with the <code>checkedChange</code> Output.</p>\n",
                         "jsdoctags": [
@@ -20824,7 +20915,7 @@
                         "name": "checked",
                         "type": "",
                         "returnType": "",
-                        "line": 151,
+                        "line": 149,
                         "rawdescription": "\n\nReturns value `true` if state is selected for the checkbox.\n",
                         "description": "<p>Returns value <code>true</code> if state is selected for the checkbox.</p>\n"
                     }
@@ -36189,7 +36280,7 @@
         },
         {
             "name": "NumberComponent",
-            "id": "component-NumberComponent-5d2e7a3aae43e62d11dd84c335cf749fd31ff48a21b5320d26cece9725ee85166ae3f016e2ba6ded4e9a1e52a5859a115da3982e1b7b9bad0b631cc471b75923",
+            "id": "component-NumberComponent-a6aacb7486479b480eface10d4c6826c322ea7990da07d0dab0028be78418c849142be19618daca2163db2ac8bc147cf6033d2df3a4865f9350355d93f406d49",
             "file": "src/number-input/number.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -36204,7 +36295,7 @@
             "selector": "cds-number, ibm-number",
             "styleUrls": [],
             "styles": [],
-            "template": "<div\n\tdata-numberinput\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\tclass=\"cds--number\"\n\t[ngClass]=\"{\n\t\t'cds--number--light': theme === 'light',\n\t\t'cds--number--nolabel': !label,\n\t\t'cds--number--helpertext': helperText,\n\t\t'cds--skeleton' : skeleton,\n\t\t'cds--number--sm': size === 'sm',\n\t\t'cds--number--md': size === 'md',\n\t\t'cds--number--lg': size === 'lg'\n\t}\">\n\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t<label\n\t\t*ngIf=\"!skeleton && label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--number__input-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t}\">\n\t\t<input\n\t\t\ttype=\"number\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[attr.min]=\"min\"\n\t\t\t[attr.max]=\"max\"\n\t\t\t[attr.step]=\"step\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t</svg>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!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</div>\n\t",
+            "template": "<div\n\tdata-numberinput\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\tclass=\"cds--number\"\n\t[ngClass]=\"{\n\t\t'cds--number--light': theme === 'light',\n\t\t'cds--number--nolabel': !label,\n\t\t'cds--number--helpertext': helperText,\n\t\t'cds--skeleton' : skeleton,\n\t\t'cds--number--sm': size === 'sm',\n\t\t'cds--number--md': size === 'md',\n\t\t'cds--number--lg': size === 'lg'\n\t}\">\n\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t<label\n\t\t*ngIf=\"!skeleton && label\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--number__input-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t}\">\n\t\t<input\n\t\t\ttype=\"number\"\n\t\t\t[id]=\"id\"\n\t\t\t[attr.value]=\"value\"\n\t\t\t[attr.min]=\"min\"\n\t\t\t[attr.max]=\"max\"\n\t\t\t[attr.step]=\"step\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t</svg>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t<button\n\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\taria-atomic=\"true\"\n\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t</div>\n\t</div>\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!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</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -36391,15 +36482,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` number input theme.",
                     "jsdoctags": [
                         {
-                            "pos": 4309,
-                            "end": 4409,
+                            "pos": 4314,
+                            "end": 4414,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 334,
                             "tagName": {
-                                "pos": 4310,
-                                "end": 4320,
+                                "pos": 4315,
+                                "end": 4325,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -36706,8 +36797,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7495,
-                                "end": 7497,
+                                "pos": 7500,
+                                "end": 7502,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -36718,8 +36809,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7489,
-                                "end": 7494,
+                                "pos": 7494,
+                                "end": 7499,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -36784,8 +36875,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 7171,
-                                "end": 7176,
+                                "pos": 7176,
+                                "end": 7181,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -36796,8 +36887,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 7165,
-                                "end": 7170,
+                                "pos": 7170,
+                                "end": 7175,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -36837,7 +36928,7 @@
             "description": "<p><a href=\"../../?path=/story/components-number--basic\">See demo</a></p>\n",
             "rawdescription": "\n\n[See demo](../../?path=/story/components-number--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!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</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding,\n\tEventEmitter,\n\tOutput,\n\tTemplateRef,\n\tHostListener\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Used to emit changes performed on number input components.\n */\nexport class NumberChange {\n\t/**\n\t * Contains the `Number` that has been changed.\n\t */\n\tsource: NumberComponent;\n\t/**\n\t * The value of the `Number` field encompassed in the `NumberChange` class.\n\t */\n\tvalue: number;\n}\n\n/**\n * [See demo](../../?path=/story/components-number--basic)\n */\n@Component({\n\tselector: \"cds-number, ibm-number\",\n\ttemplate: `\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\tclass=\"cds--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--number--light': theme === 'light',\n\t\t\t\t'cds--number--nolabel': !label,\n\t\t\t\t'cds--number--helpertext': helperText,\n\t\t\t\t'cds--skeleton' : skeleton,\n\t\t\t\t'cds--number--sm': size === 'sm',\n\t\t\t\t'cds--number--md': size === 'md',\n\t\t\t\t'cds--number--lg': size === 'lg'\n\t\t\t}\">\n\t\t\t<label *ngIf=\"skeleton && label\" class=\"cds--label cds--skeleton\"></label>\n\t\t\t<label\n\t\t\t\t*ngIf=\"!skeleton && label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"cds--number__input-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--number__input-wrapper--warning': warn\n\t\t\t\t}\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[attr.value]=\"value\"\n\t\t\t\t\t[attr.min]=\"min\"\n\t\t\t\t\t[attr.max]=\"max\"\n\t\t\t\t\t[attr.step]=\"step\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[attr.data-invalid]=\"invalid ? invalid : null\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton && !invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--number__invalid cds--number__invalid--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"cds--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn down-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getDecrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"subtract\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--number__control-btn up-icon\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t[attr.disabled]=\"disabled ? true : null\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t[attr.aria-label]=\"getIncrementLabel() | async\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<svg cdsIcon=\"add\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class=\"cds--number__rule-divider\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!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</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: NumberComponent,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class NumberComponent implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for number input components.\n\t */\n\tstatic numberCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") containerClass = true;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` number input theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` for a disabled number input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading number component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid number component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * The unique id for the number component.\n\t */\n\t@Input() id = `number-${NumberComponent.numberCount}`;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() set value(v: any) {\n\t\tif (v === \"\" || v === null) {\n\t\t\tthis._value = null;\n\t\t\treturn;\n\t\t}\n\t\tthis._value = Number(v);\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\t/**\n\t * Sets the min attribute on the `input` element.\n\t */\n\t@Input() min = null;\n\t/**\n\t * Sets the max attribute on the `input` element.\n\t */\n\t@Input() max = null;\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Sets the amount the number controls increment and decrement by.\n\t */\n\t@Input() step = 1;\n\t/**\n\t * If `step` is a decimal, we may want precision to be set to go around floating point precision.\n\t */\n\t@Input() precision: number;\n\t/**\n\t * Set to `true` to show a warning (contents set by warningText)\n\t */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the arialabel for input\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits event notifying other classes when a change in state occurs in the input.\n\t */\n\t@Output() change = new EventEmitter<NumberChange>();\n\n\t@Input()\n\tset decrementLabel(value: string | Observable<string>) {\n\t\tthis._decrementLabel.override(value);\n\t}\n\n\tget decrementLabel() {\n\t\treturn this._decrementLabel.value;\n\t}\n\n\t@Input()\n\tset incrementLabel(value: string | Observable<string>) {\n\t\tthis._incrementLabel.override(value);\n\t}\n\n\tget incrementLabel() {\n\t\treturn this._incrementLabel.value;\n\t}\n\n\tprotected _value = 0;\n\n\tprotected _decrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.DECREMENT\");\n\tprotected _incrementLabel: Overridable = this.i18n.getOverridable(\"NUMBER.INCREMENT\");\n\n\t/**\n\t * Creates an instance of `Number`.\n\t */\n\tconstructor(protected i18n: I18n) {\n\t\tNumberComponent.numberCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the number input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called when number input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => { };\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Adds `step` to the current `value`.\n\t */\n\tonIncrement(): void {\n\t\tif (this.max === null || this.value + this.step <= this.max) {\n\t\t\tthis.value += this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\t/**\n\t * Subtracts `step` to the current `value`.\n\t */\n\tonDecrement(): void {\n\t\tif (this.min === null || this.value - this.step >= this.min) {\n\t\t\tthis.value -= this.step;\n\t\t\tthis.value = parseFloat(this.value.toPrecision(this.precision));\n\t\t\tthis.emitChangeEvent();\n\t\t}\n\t}\n\n\tgetDecrementLabel(): Observable<string> {\n\t\treturn this._decrementLabel.subject;\n\t}\n\n\tgetIncrementLabel(): Observable<string> {\n\t\treturn this._incrementLabel.subject;\n\t}\n\n\t/**\n\t * Creates a class of `NumberChange` to emit the change in the `Number`.\n\t */\n\temitChangeEvent(): void {\n\t\tlet event = new NumberChange();\n\t\tevent.source = this;\n\t\tevent.value = this.value;\n\t\tthis.change.emit(event);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tonNumberInputChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.emitChangeEvent();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\nexport { NumberComponent as Number };\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -50699,7 +50790,7 @@
         },
         {
             "name": "Table",
-            "id": "component-Table-06d4bcd125acee9b5d25fce31d35b3f30b2d06e51d6dc8beb1728c292e43ea3a7c4104c328dd70351b3808d84ae3a81818cbe0a6bfe162b938eff9ce853c8bc7",
+            "id": "component-Table-336338b18c45e0b604ff6a1c28747e5a8d5a6171314cd64f1e96d58caf00ed4c20a7ef3ab0db0dd91d72f89f1db6c76c9329fe8c385a04695f9f9dbfcd9d93c7",
             "file": "src/table/table.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -51778,7 +51869,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 881,
+                    "line": 878,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51788,7 +51879,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 885,
+                    "line": 882,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51798,7 +51889,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 889,
+                    "line": 886,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51808,7 +51899,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 871,
+                    "line": 868,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51818,7 +51909,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 897,
+                    "line": 894,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51828,7 +51919,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 893,
+                    "line": 890,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51845,7 +51936,7 @@
                     "optional": false,
                     "returnType": "{ value: any; }",
                     "typeParameters": [],
-                    "line": 864,
+                    "line": 861,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -51866,7 +51957,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 877,
+                    "line": 874,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -51876,7 +51967,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 874,
+                    "line": 871,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52029,7 +52120,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 859,
+                    "line": 856,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggered when the user scrolls on the `<tbody>` element.\nEmits the `scrollLoad` event.\n",
@@ -52172,7 +52263,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[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\tthis.model.cycleSortState(index);\n\t\t\tthis.model.sort(index);\n\t\t}\n\n\t\tthis.sort.emit(index);\n\t}\n\n\t/**\n\t * Triggered when the user scrolls on the `<tbody>` element.\n\t * Emits the `scrollLoad` event.\n\t */\n\tscrollToTop(event) {\n\t\tevent.target.parentElement.parentElement.parentElement.parentElement.children[1].scrollTop = 0;\n\t\tthis.model.isEnd = false;\n\t}\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetExpandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.subject;\n\t}\n\tgetSortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\tgetSortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetCheckboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetCheckboxRowLabel() {\n\t\treturn this._checkboxRowLabel.subject;\n\t}\n\n\tgetEndOfDataText() {\n\t\treturn this._endOfDataText.subject;\n\t}\n\n\tgetScrollTopText() {\n\t\treturn this._scrollTopText.subject;\n\t}\n\n\tgetFilterTitle() {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t\n",
@@ -57920,7 +58011,7 @@
         },
         {
             "name": "TextareaLabelComponent",
-            "id": "component-TextareaLabelComponent-a6f0accbbfcb53c83d117be530312269824b2b2f813d72ec19169b4d748224d7882c5cb2ff8d7b51bb354b9e7c0db192ace07f15d4e7a892aa549bc52057d27b",
+            "id": "component-TextareaLabelComponent-b0cb92af0c0b5b5625687996da5ce4ba9dccb27e45b22e29b5db1b636dd2d87c08e3e2873a2a25a468d26be2e89f16cd3fd1ced76ea2b32dbbfa40495f8a83c4",
             "file": "src/input/textarea-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -57930,7 +58021,7 @@
             "selector": "cds-textarea-label, ibm-textarea-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-area__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-area__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=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t<ng-template #textAreaContent>\n\t\t<ng-content select=\"textarea\"></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-area__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-area__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=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t<ng-template #textAreaContent>\n\t\t<ng-content select=\"textarea\"></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": [],
@@ -58173,7 +58264,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tContentChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\n\n@Component({\n\tselector: \"cds-textarea-label, ibm-textarea-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-area__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-area__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=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t\t\t<ng-template #textAreaContent>\n\t\t\t\t<ng-content select=\"textarea\"></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 TextareaLabelComponent 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-textarea-\" + TextareaLabelComponent.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() textAreaTemplate: 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// @ts-ignore\n\t@ContentChild(TextArea, { static: false }) textArea: TextArea;\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 `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"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\tChangeDetectorRef\n} from \"@angular/core\";\n\nimport { TextArea } from \"./text-area.directive\";\n\n@Component({\n\tselector: \"cds-textarea-label, ibm-textarea-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-area__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-area__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=\"textAreaTemplate; else textAreaContent\" [ngTemplateOutlet]=\"textAreaTemplate\"></ng-template>\n\t\t\t<ng-template #textAreaContent>\n\t\t\t\t<ng-content select=\"textarea\"></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 TextareaLabelComponent 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-textarea-\" + TextareaLabelComponent.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() textAreaTemplate: 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// @ts-ignore\n\t@ContentChild(TextArea, { static: false }) textArea: TextArea;\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 `textarea` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"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": "",
@@ -60533,10 +60624,9 @@
                 },
                 {
                     "name": "ariaLabel",
-                    "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 103,
+                    "line": 102,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -60547,7 +60637,7 @@
                     "name": "ariaLabelledby",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 105,
+                    "line": 103,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -60560,7 +60650,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the `checked` state. `true` for checked, `false` for unchecked\n\nAllows double binding with the `checkedChange` Output.\n",
                     "description": "<p>Sets the <code>checked</code> state. <code>true</code> for checked, <code>false</code> for unchecked</p>\n<p>Allows double binding with the <code>checkedChange</code> Output.</p>\n",
-                    "line": 144,
+                    "line": 142,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -60601,7 +60691,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet the checkbox's indeterminate state to match the parameter and transition the view to reflect the change.\n\nAllows double binding with the `indeterminateChange` Output.\n",
                     "description": "<p>Set the checkbox&#39;s indeterminate state to match the parameter and transition the view to reflect the change.</p>\n<p>Allows double binding with the <code>indeterminateChange</code> Output.</p>\n",
-                    "line": 112,
+                    "line": 110,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -60656,7 +60746,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when the value of the checkbox changes.\n\nAllows double biding with the `checked` Input.\n",
                     "description": "<p>Emits an event when the value of the checkbox changes.</p>\n<p>Allows double biding with the <code>checked</code> Input.</p>\n",
-                    "line": 165,
+                    "line": 163,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Checkbox"
@@ -60669,7 +60759,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits click event.\n",
                     "description": "<p>Emits click event.</p>\n",
-                    "line": 158,
+                    "line": 156,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Checkbox"
@@ -60682,7 +60772,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event notifying other classes when a change in state occurs specifically\non an indeterminate checkbox.\n",
                     "description": "<p>Emits event notifying other classes when a change in state occurs specifically\non an indeterminate checkbox.</p>\n",
-                    "line": 171,
+                    "line": 169,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Checkbox"
@@ -60742,7 +60832,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to <code>true</code> if the input checkbox is selected (or checked).</p>\n",
-                    "line": 176,
+                    "line": 174,
                     "rawdescription": "\n\nSet to `true` if the input checkbox is selected (or checked).\n",
                     "inheritance": {
                         "file": "Checkbox"
@@ -60756,7 +60846,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Set to <code>true</code> if the input checkbox is in state indeterminate.</p>\n",
-                    "line": 180,
+                    "line": 178,
                     "rawdescription": "\n\nSet to `true` if the input checkbox is in state indeterminate.\n",
                     "inheritance": {
                         "file": "Checkbox"
@@ -60787,7 +60877,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Keeps a reference to the checkboxes current state, as defined in <code>CheckboxState</code>.</p>\n",
-                    "line": 185,
+                    "line": 183,
                     "rawdescription": "\n\nKeeps a reference to the checkboxes current state, as defined in `CheckboxState`.\n",
                     "inheritance": {
                         "file": "Checkbox"
@@ -60800,7 +60890,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "<p>Maintains a reference to the view DOM element of the <code>Checkbox</code>.</p>\n",
-                    "line": 190,
+                    "line": 188,
                     "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Checkbox`.\n",
                     "decorators": [
                         {
@@ -60823,7 +60913,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Called when checkbox is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
-                    "line": 280,
+                    "line": 278,
                     "rawdescription": "\n\nCalled when checkbox is blurred. Needed to properly implement `ControlValueAccessor`.\n",
                     "inheritance": {
                         "file": "Checkbox"
@@ -60837,7 +60927,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
-                    "line": 309,
+                    "line": 307,
                     "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n",
                     "inheritance": {
                         "file": "Checkbox"
@@ -60975,7 +61065,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 247,
+                    "line": 245,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -61004,7 +61094,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 254,
+                    "line": 252,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExecutes on the event of a change within `Checkbox` to block propagation.\n",
@@ -61037,7 +61127,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 261,
+                    "line": 259,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles click events on the `Checkbox` and emits changes to other classes.\n",
@@ -61070,7 +61160,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 222,
+                    "line": 220,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -61106,7 +61196,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 230,
+                    "line": 228,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -61117,8 +61207,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5411,
-                                "end": 5413,
+                                "pos": 5324,
+                                "end": 5326,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -61129,8 +61219,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 5405,
-                                "end": 5410,
+                                "pos": 5318,
+                                "end": 5323,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -61150,7 +61240,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 202,
+                    "line": 200,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggle the selected state of the checkbox.\n",
@@ -61175,7 +61265,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 285,
+                    "line": 283,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles changes between checkbox states.\n",
@@ -61208,7 +61298,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 214,
+                    "line": 212,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWrites a value from `ngModel` to the component.\n\nIn this case the value is the `checked` property.\n\n",
@@ -61219,8 +61309,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 5003,
-                                "end": 5008,
+                                "pos": 4916,
+                                "end": 4921,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -61231,8 +61321,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4997,
-                                "end": 5002,
+                                "pos": 4910,
+                                "end": 4915,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -61283,7 +61373,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 247,
+                    "line": 245,
                     "inheritance": {
                         "file": "Checkbox"
                     }
@@ -71652,6 +71742,17 @@
                 "description": "",
                 "kind": 189
             },
+            {
+                "name": "SortType",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "\"ASCENDING\" | \"DESCENDING\" | \"NONE\"",
+                "file": "src/table/table-header-item.class.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 189
+            },
             {
                 "name": "TableRowSize",
                 "ctype": "miscellaneous",
@@ -77338,6 +77439,19 @@
                     "kind": 189
                 }
             ],
+            "src/table/table-header-item.class.ts": [
+                {
+                    "name": "SortType",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "\"ASCENDING\" | \"DESCENDING\" | \"NONE\"",
+                    "file": "src/table/table-header-item.class.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 189
+                }
+            ],
             "src/table/table.types.ts": [
                 {
                     "name": "TableRowSize",
@@ -81688,8 +81802,8 @@
                 "type": "class",
                 "linktype": "classe",
                 "name": "CustomHeaderItem",
-                "coveragePercent": 89,
-                "coverageCount": "17/19",
+                "coveragePercent": 85,
+                "coverageCount": "17/20",
                 "status": "very-good"
             },
             {
@@ -81706,8 +81820,8 @@
                 "type": "class",
                 "linktype": "classe",
                 "name": "CustomHeaderItem",
-                "coveragePercent": 89,
-                "coverageCount": "17/19",
+                "coveragePercent": 85,
+                "coverageCount": "17/20",
                 "status": "very-good"
             },
             {
@@ -81823,8 +81937,8 @@
                 "type": "class",
                 "linktype": "classe",
                 "name": "TableHeaderItem",
-                "coveragePercent": 95,
-                "coverageCount": "19/20",
+                "coveragePercent": 90,
+                "coverageCount": "19/21",
                 "status": "very-good"
             },
             {
@@ -81841,9 +81955,9 @@
                 "type": "class",
                 "linktype": "classe",
                 "name": "TableModel",
-                "coveragePercent": 75,
-                "coverageCount": "30/40",
-                "status": "good"
+                "coveragePercent": 76,
+                "coverageCount": "32/42",
+                "status": "very-good"
             },
             {
                 "filePath": "src/table/table-row.class.ts",