carbon-components-angular 5.23.1 → 5.23.3

package/docs/documentation.json

@@ -47515,7 +47515,7 @@
         },
         {
             "name": "SideNavItem",
-            "id": "component-SideNavItem-c7f33f795f7154b1ee127dad424fc25fed922d4948b47cd8720dbb64bf73001461f84b06a37c32193a9212b7c9c077e588fd16d866d175d3503c728024b82418",
+            "id": "component-SideNavItem-251be0e8c644af56dccc6a6f8363a640a33f5a2e1722e5c1e1f4ff7c7c99f8b5de68c8d6cc36f030811f929fc12def7346c6a18d137831418a4f178e9129b9b8",
             "file": "src/ui-shell/sidenav/sidenav-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -47594,7 +47594,7 @@
                 },
                 {
                     "name": "useRouter",
-                    "defaultValue": "true",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUse the routerLink attribute on <a> tag for navigation instead of using event handlers\n",
@@ -47712,7 +47712,7 @@
             "description": "<p><code>SideNavItem</code> can either be a child of <code>SideNav</code> or <code>SideNavMenu</code></p>\n",
             "rawdescription": "\n\n`SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tOnChanges,\n\tHostBinding,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n */\n@Component({\n\tselector: \"cds-sidenav-item, ibm-sidenav-item\",\n\ttemplate: `\n\t\t<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\n\t\t   class=\"cds--side-nav__link\"\n\t\t   [ngClass]=\"{\n\t\t\t\t'cds--side-nav__item--active': active\n\t\t\t}\"\n\t\t   [href]=\"href\"\n\t\t   [attr.aria-current]=\"(active ? 'page' : null)\"\n\t\t   [attr.title]=\"title ? title : null\"\n\t\t   (click)=\"navigate($event)\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t</a>\n\n\t\t<ng-template #sidenavItemRouterTpl>\n\t\t\t<a\n\t\t\t\t[routerLink]=\"route\"\n\t\t\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\t\t\tariaCurrentWhenActive=\"page\"\n\t\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t\tclass=\"cds--side-nav__link\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t\t</a>\n\t\t</ng-template>\n\n\t\t<ng-template #sidenavItemContentTpl>\n\t\t\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t\t\t</div>\n\t\t\t<span class=\"cds--side-nav__link-text\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-template>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class SideNavItem implements OnChanges {\n\t/**\n\t * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n\t */\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = true;\n\n\t@HostBinding(\"class.cds--side-nav__item\") get sideNav() {\n\t\treturn !this.isSubMenu;\n\t}\n\n\t@HostBinding(\"class.cds--side-nav__menu-item\") get menuItem() {\n\t\treturn this.isSubMenu;\n\t}\n\n\t/**\n\t * Toggles the active (current page) state for the link.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t@Input() isSubMenu = false;\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Title attribute of the anchor element.\n\t */\n\t@Input() title: string;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter<Promise<boolean>>();\n\n\t/**\n\t * Emits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\n\t * child sidenav item is active or not active.\n\t */\n\t@Output() selected = new EventEmitter<boolean>();\n\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) {}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.active) {\n\t\t\tthis.selected.emit(this.active);\n\t\t}\n\t}\n\n\tnavigate(event: MouseEvent) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOptional,\n\tOutput,\n\tEventEmitter,\n\tOnChanges,\n\tHostBinding,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { DomSanitizer } from \"@angular/platform-browser\";\nimport { Router } from \"@angular/router\";\n\n/**\n * `SideNavItem` can either be a child of `SideNav` or `SideNavMenu`\n */\n@Component({\n\tselector: \"cds-sidenav-item, ibm-sidenav-item\",\n\ttemplate: `\n\t\t<a *ngIf=\"!useRouter; else sidenavItemRouterTpl\"\n\t\t   class=\"cds--side-nav__link\"\n\t\t   [ngClass]=\"{\n\t\t\t\t'cds--side-nav__item--active': active\n\t\t\t}\"\n\t\t   [href]=\"href\"\n\t\t   [attr.aria-current]=\"(active ? 'page' : null)\"\n\t\t   [attr.title]=\"title ? title : null\"\n\t\t   (click)=\"navigate($event)\">\n\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t</a>\n\n\t\t<ng-template #sidenavItemRouterTpl>\n\t\t\t<a\n\t\t\t\t[routerLink]=\"route\"\n\t\t\t\trouterLinkActive=\"cds--side-nav__item--active\"\n\t\t\t\tariaCurrentWhenActive=\"page\"\n\t\t\t\t[attr.title]=\"title ? title : null\"\n\t\t\t\tclass=\"cds--side-nav__link\">\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"sidenavItemContentTpl\"></ng-template>\n\t\t\t</a>\n\t\t</ng-template>\n\n\t\t<ng-template #sidenavItemContentTpl>\n\t\t\t<div *ngIf=\"!isSubMenu\" class=\"cds--side-nav__icon\">\n\t\t\t\t<ng-content select=\"svg, [icon]\"></ng-content>\n\t\t\t</div>\n\t\t\t<span class=\"cds--side-nav__link-text\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</ng-template>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t`]\n})\nexport class SideNavItem implements OnChanges {\n\t/**\n\t * Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks\n\t */\n\t@Input() set href(v: string) {\n\t\t// Needed when component is created dynamically with a model.\n\t\tif (v === undefined) {\n\t\t\treturn;\n\t\t}\n\t\tthis._href = v;\n\t}\n\n\tget href() {\n\t\treturn this.domSanitizer.bypassSecurityTrustUrl(this._href) as string;\n\t}\n\n\t/**\n\t * Use the routerLink attribute on <a> tag for navigation instead of using event handlers\n\t */\n\t@Input() useRouter = false;\n\n\t@HostBinding(\"class.cds--side-nav__item\") get sideNav() {\n\t\treturn !this.isSubMenu;\n\t}\n\n\t@HostBinding(\"class.cds--side-nav__menu-item\") get menuItem() {\n\t\treturn this.isSubMenu;\n\t}\n\n\t/**\n\t * Toggles the active (current page) state for the link.\n\t */\n\t@Input() active = false;\n\n\t/**\n\t * Array of commands to send to the router when the link is activated\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() route: any[];\n\n\t@Input() isSubMenu = false;\n\n\t/**\n\t * Router options. Used in conjunction with `route`\n\t * See: https://angular.io/api/router/Router#navigate\n\t */\n\t@Input() routeExtras: any;\n\n\t/**\n\t * Title attribute of the anchor element.\n\t */\n\t@Input() title: string;\n\n\t/**\n\t * Emits the navigation status promise when the link is activated\n\t */\n\t@Output() navigation = new EventEmitter<Promise<boolean>>();\n\n\t/**\n\t * Emits when `active` input is changed. This is mainly used to indicate to any parent menu items that a\n\t * child sidenav item is active or not active.\n\t */\n\t@Output() selected = new EventEmitter<boolean>();\n\n\t@HostBinding(\"attr.role\") role = \"listitem\";\n\n\tprotected _href = \"#\";\n\n\tconstructor(protected domSanitizer: DomSanitizer, @Optional() protected router: Router) {}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.active) {\n\t\t\tthis.selected.emit(this.active);\n\t\t}\n\t}\n\n\tnavigate(event: MouseEvent) {\n\t\tif (this.router && this.route) {\n\t\t\tevent.preventDefault();\n\t\t\tconst status = this.router.navigate(this.route, this.routeExtras);\n\t\t\tthis.navigation.emit(status);\n\t\t} else if (this._href === \"#\") {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t:host {\n\t\t\tdisplay: list-item;\n\t\t}\n\t\n",
@@ -51737,7 +51737,7 @@
         },
         {
             "name": "Table",
-            "id": "component-Table-336338b18c45e0b604ff6a1c28747e5a8d5a6171314cd64f1e96d58caf00ed4c20a7ef3ab0db0dd91d72f89f1db6c76c9329fe8c385a04695f9f9dbfcd9d93c7",
+            "id": "component-Table-6d18aab8c1dcae26f2a66afd909fc4e266afd9e851aee8813007e53a0d111ca2abcac002be665d1d36d90b606f1da766faa33ad5c9afec71b25346aeef7cde74",
             "file": "src/table/table.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -51760,7 +51760,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nId of the table header description element\n",
                     "description": "<p>Id of the table header description element</p>\n",
-                    "line": 308,
+                    "line": 309,
                     "type": "string",
                     "decorators": []
                 },
@@ -51770,7 +51770,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nId of the table header title element\n",
                     "description": "<p>Id of the table header title element</p>\n",
-                    "line": 304,
+                    "line": 305,
                     "type": "string",
                     "decorators": []
                 },
@@ -51781,7 +51781,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls whether to enable multiple or single row selection.\n",
                     "description": "<p>Controls whether to enable multiple or single row selection.</p>\n",
-                    "line": 397,
+                    "line": 398,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -51791,15 +51791,15 @@
                     "deprecationMessage": "",
                     "jsdoctags": [
                         {
-                            "pos": 12372,
-                            "end": 12552,
+                            "pos": 12311,
+                            "end": 12491,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 330,
                             "tagName": {
-                                "pos": 12373,
-                                "end": 12377,
+                                "pos": 12312,
+                                "end": 12316,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -51809,7 +51809,7 @@
                             "comment": "<ul>\n<li>Enable column resize when Carbon officially supports feature\nSet to <code>true</code> to enable users to resize columns.</li>\n</ul>\n<p>Works for columns with width set in pixels.</p>\n"
                         }
                     ],
-                    "line": 425,
+                    "line": 426,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -51819,7 +51819,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet footer template to customize what is displayed in the tfoot section of the table\n",
                     "description": "<p>Set footer template to customize what is displayed in the tfoot section of the table</p>\n",
-                    "line": 486,
+                    "line": 487,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -51829,7 +51829,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a data grid with keyboard interactions.\n",
                     "description": "<p>Set to <code>true</code> for a data grid with keyboard interactions.</p>\n",
-                    "line": 366,
+                    "line": 367,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -51839,7 +51839,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`TableModel` with data the table is to display.\n",
                     "description": "<p><code>TableModel</code> with data the table is to display.</p>\n",
-                    "line": 314,
+                    "line": 315,
                     "type": "TableModel",
                     "decorators": []
                 },
@@ -51848,7 +51848,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 383,
+                    "line": 384,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -51859,7 +51859,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDistance (in px) from the bottom that view has to reach before\n`scrollLoad` event is emitted.\n",
                     "description": "<p>Distance (in px) from the bottom that view has to reach before\n<code>scrollLoad</code> event is emitted.</p>\n",
-                    "line": 403,
+                    "line": 404,
                     "type": "number",
                     "decorators": []
                 },
@@ -51869,7 +51869,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to populate the row selection checkbox label with a useful value if set.\n\nExample:\n```\n<cds-table [selectionLabelColumn]=\"0\"></cds-table>\n<!-- results in aria-label=\"Select first column value\"\n(where \"first column value\" is the value of the first column in the row -->\n```\n",
                     "description": "<p>Used to populate the row selection checkbox label with a useful value if set.</p>\n<p>Example:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-none\">&lt;cds-table [selectionLabelColumn]=&quot;0&quot;&gt;&lt;/cds-table&gt;\n&lt;!-- results in aria-label=&quot;Select first column value&quot;\n(where &quot;first column value&quot; is the value of the first column in the row --&gt;</code></pre></div>",
-                    "line": 498,
+                    "line": 499,
                     "type": "number",
                     "decorators": []
                 },
@@ -51880,7 +51880,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls whether to show the selection checkboxes column or not.\n",
                     "description": "<p>Controls whether to show the selection checkboxes column or not.</p>\n",
-                    "line": 392,
+                    "line": 393,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -51891,7 +51891,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the table rows.\n",
                     "description": "<p>Size of the table rows.</p>\n",
-                    "line": 358,
+                    "line": 359,
                     "type": "TableRowSize",
                     "decorators": []
                 },
@@ -51902,7 +51902,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading table.\n",
                     "description": "<p>Set to <code>true</code> for a loading table.</p>\n",
-                    "line": 362,
+                    "line": 363,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -51913,7 +51913,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSetting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.\n",
                     "description": "<p>Setting sortable to false will disable all headers including headers which are sortable. Is is\npossible to set the sortable state on the header item to disable/enable sorting for only some headers.</p>\n",
-                    "line": 381,
+                    "line": 382,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -51921,7 +51921,7 @@
                     "name": "sortAscendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 439,
+                    "line": 440,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -51929,7 +51929,7 @@
                     "name": "sortDescendingLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 432,
+                    "line": 433,
                     "type": "string | Observable",
                     "decorators": []
                 },
@@ -51940,7 +51940,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to stick the header to the top of the table\n",
                     "description": "<p>Set to <code>true</code> to stick the header to the top of the table</p>\n",
-                    "line": 481,
+                    "line": 482,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -51951,7 +51951,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `false` to remove table rows (zebra) stripes.\n",
                     "description": "<p>Set to <code>false</code> to remove table rows (zebra) stripes.</p>\n",
-                    "line": 471,
+                    "line": 472,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -51961,7 +51961,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"FILTER\": \"Filter\",\n\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t\t\"CHECKBOX_ROW\": \"Select row\"\n}\n```\n",
                     "description": "<p>Expects an object that contains some or all of:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-none\">{\n        &quot;FILTER&quot;: &quot;Filter&quot;,\n        &quot;END_OF_DATA&quot;: &quot;You&#39;ve reached the end of your content&quot;,\n        &quot;SCROLL_TOP&quot;: &quot;Scroll to top&quot;,\n        &quot;CHECKBOX_HEADER&quot;: &quot;Select all rows&quot;,\n        &quot;CHECKBOX_ROW&quot;: &quot;Select row&quot;\n}</code></pre></div>",
-                    "line": 459,
+                    "line": 460,
                     "type": "any",
                     "decorators": []
                 }
@@ -51976,15 +51976,15 @@
                     "description": "<p>Emits if all rows are deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17272,
-                            "end": 17287,
+                            "pos": 17211,
+                            "end": 17226,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 17273,
-                                "end": 17278,
+                                "pos": 17212,
+                                "end": 17217,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -51993,8 +51993,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 17279,
-                                "end": 17284,
+                                "pos": 17218,
+                                "end": 17223,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52005,7 +52005,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 570,
+                    "line": 571,
                     "type": "EventEmitter"
                 },
                 {
@@ -52017,15 +52017,15 @@
                     "description": "<p>Emits if a single row is deselected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17561,
-                            "end": 17619,
+                            "pos": 17500,
+                            "end": 17558,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 17562,
-                                "end": 17567,
+                                "pos": 17501,
+                                "end": 17506,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52034,8 +52034,8 @@
                             },
                             "comment": "<p>({model: this.model, deselectedRowIndex: index})</p>\n",
                             "name": {
-                                "pos": 17568,
-                                "end": 17568,
+                                "pos": 17507,
+                                "end": 17507,
                                 "flags": 8552448,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52046,7 +52046,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 584,
+                    "line": 585,
                     "type": "EventEmitter"
                 },
                 {
@@ -52056,7 +52056,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n",
                     "description": "<p>Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.</p>\n",
-                    "line": 589,
+                    "line": 590,
                     "type": "EventEmitter"
                 },
                 {
@@ -52066,7 +52066,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits when table requires more data to be loaded.\n",
                     "description": "<p>Emits when table requires more data to be loaded.</p>\n",
-                    "line": 594,
+                    "line": 595,
                     "type": "EventEmitter"
                 },
                 {
@@ -52078,15 +52078,15 @@
                     "description": "<p>Emits if all rows are selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17151,
-                            "end": 17166,
+                            "pos": 17090,
+                            "end": 17105,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 17152,
-                                "end": 17157,
+                                "pos": 17091,
+                                "end": 17096,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52095,8 +52095,8 @@
                             },
                             "comment": "",
                             "name": {
-                                "pos": 17158,
-                                "end": 17163,
+                                "pos": 17097,
+                                "end": 17102,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52107,7 +52107,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 563,
+                    "line": 564,
                     "type": "EventEmitter"
                 },
                 {
@@ -52119,15 +52119,15 @@
                     "description": "<p>Emits if a single row is selected.</p>\n",
                     "jsdoctags": [
                         {
-                            "pos": 17396,
-                            "end": 17452,
+                            "pos": 17335,
+                            "end": 17391,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 344,
                             "tagName": {
-                                "pos": 17397,
-                                "end": 17402,
+                                "pos": 17336,
+                                "end": 17341,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52136,8 +52136,8 @@
                             },
                             "comment": "<p>({model: this.model, selectedRowIndex: index})</p>\n",
                             "name": {
-                                "pos": 17403,
-                                "end": 17403,
+                                "pos": 17342,
+                                "end": 17342,
                                 "flags": 8552448,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52148,7 +52148,7 @@
                             "isBracketed": false
                         }
                     ],
-                    "line": 577,
+                    "line": 578,
                     "type": "EventEmitter"
                 },
                 {
@@ -52160,15 +52160,15 @@
                     "description": "<p>Emits an index of the column that wants to be sorted.</p>\n<p>If no observers are provided (default), table will attempt to do a simple sort of the data loaded\ninto the model.</p>\n<p>If an observer is provided, table will not attempt any sorting of its own and it is up to the observer\nto sort the table. This is what you typically want if you&#39;re using a backend query to get the sorted\ndata or want to sort data across multiple pages.</p>\n<p>Usage:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-typescript\">&#64;Component({\n    selector: &quot;app-table&quot;,\n    template: `\n        &lt;cds-table\n            [model]=&quot;model&quot;\n            (sort)=&quot;simpleSort($event)&quot;&gt;\n            No data.\n        &lt;/cds-table&gt;\n    `\n})\nexport class TableApp implements OnInit, OnChanges {\n    &#64;Input() model = new TableModel();\n\n    ngOnInit() {\n        this.model.header = [\n            new TableHeaderItem({ data: &quot;Name&quot; }),\n            new TableHeaderItem({ data: &quot;hwer&quot; })\n        ];\n\n        this.model.data = [\n            [new TableItem({ data: &quot;Name 1&quot; }), new TableItem({ data: &quot;qwer&quot; })],\n            [new TableItem({ data: &quot;Name 3&quot; }), new TableItem({ data: &quot;zwer&quot; })],\n            [new TableItem({ data: &quot;Name 2&quot; }), new TableItem({ data: &quot;swer&quot; })],\n            [new TableItem({ data: &quot;Name 4&quot; }), new TableItem({data: &quot;twer&quot;})],\n            [new TableItem({ data: &quot;Name 5&quot; }), new TableItem({data: &quot;twer&quot;})],\n            [new TableItem({ data: &quot;Name 6&quot; }), new TableItem({data: &quot;twer&quot;})]\n        ];\n    }\n\n    simpleSort(index: number) {\n        // this function does a simple sort, which is the default for the table and if that&#39;s\n        // all you want, you don&#39;t need to do this.\n\n        // here you can query your backend and update the model.data based on the result\n        if (this.model.header[index].sorted) {\n            // if already sorted flip sorting direction\n            this.model.header[index].ascending = this.model.header[index].descending;\n        }\n        this.model.sort(index);\n    }\n}</code></pre></div>",
                     "jsdoctags": [
                         {
-                            "pos": 15613,
-                            "end": 15858,
+                            "pos": 15552,
+                            "end": 15797,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 330,
                             "tagName": {
-                                "pos": 15614,
-                                "end": 15623,
+                                "pos": 15553,
+                                "end": 15562,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52178,15 +52178,15 @@
                             "comment": "<p>({\nselector: &quot;app-table&quot;,\ntemplate: <code>&lt;cds-table [model]=&quot;model&quot; (sort)=&quot;simpleSort($event)&quot;&gt; No data. &lt;/cds-table&gt;</code>\n})\nexport class TableApp implements OnInit, OnChanges {</p>\n"
                         },
                         {
-                            "pos": 15858,
-                            "end": 17052,
+                            "pos": 15797,
+                            "end": 16991,
                             "flags": 8421376,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 330,
                             "tagName": {
-                                "pos": 15859,
-                                "end": 15864,
+                                "pos": 15798,
+                                "end": 15803,
                                 "flags": 8421376,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -52196,7 +52196,7 @@
                             "comment": "<p>() model = new TableModel();</p>\n<p>ngOnInit() {\nthis.model.header = [\nnew TableHeaderItem({ data: &quot;Name&quot; }),\nnew TableHeaderItem({ data: &quot;hwer&quot; })\n];</p>\n<p>this.model.data = [\n[new TableItem({ data: &quot;Name 1&quot; }), new TableItem({ data: &quot;qwer&quot; })],\n[new TableItem({ data: &quot;Name 3&quot; }), new TableItem({ data: &quot;zwer&quot; })],\n[new TableItem({ data: &quot;Name 2&quot; }), new TableItem({ data: &quot;swer&quot; })],\n[new TableItem({ data: &quot;Name 4&quot; }), new TableItem({data: &quot;twer&quot;})],\n[new TableItem({ data: &quot;Name 5&quot; }), new TableItem({data: &quot;twer&quot;})],\n[new TableItem({ data: &quot;Name 6&quot; }), new TableItem({data: &quot;twer&quot;})]\n];\n}</p>\n<p>simpleSort(index: number) {\n// this function does a simple sort, which is the default for the table and if that&#39;s\n// all you want, you don&#39;t need to do this.</p>\n<p>// here you can query your backend and update the model.data based on the result\nif (this.model.header[index].sorted) {\n// if already sorted flip sorting direction\nthis.model.header[index].ascending = this.model.header[index].descending;\n}\nthis.model.sort(index);\n}\n}\n```</p>\n"
                         }
                     ],
-                    "line": 556,
+                    "line": 557,
                     "type": "EventEmitter"
                 }
             ],
@@ -52209,7 +52209,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 613,
+                    "line": 614,
                     "modifierKind": [
                         123
                     ]
@@ -52222,7 +52222,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 614,
+                    "line": 615,
                     "modifierKind": [
                         123
                     ]
@@ -52235,7 +52235,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 612,
+                    "line": 613,
                     "modifierKind": [
                         123
                     ]
@@ -52248,7 +52248,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Controls if all checkboxes are viewed as selected.</p>\n",
-                    "line": 599,
+                    "line": 600,
                     "rawdescription": "\n\nControls if all checkboxes are viewed as selected.\n"
                 },
                 {
@@ -52259,7 +52259,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Controls the indeterminate state of the header checkbox.</p>\n",
-                    "line": 604,
+                    "line": 605,
                     "rawdescription": "\n\nControls the indeterminate state of the header checkbox.\n"
                 },
                 {
@@ -52270,7 +52270,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Allows table content to scroll horizontally</p>\n",
-                    "line": 476,
+                    "line": 477,
                     "rawdescription": "\n\nAllows table content to scroll horizontally\n",
                     "decorators": [
                         {
@@ -52303,7 +52303,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 809,
+                    "line": 810,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52352,7 +52352,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 814,
+                    "line": 815,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52410,7 +52410,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 819,
+                    "line": 820,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52468,7 +52468,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 823,
+                    "line": 824,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52520,7 +52520,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 803,
+                    "line": 804,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52569,7 +52569,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 831,
+                    "line": 832,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52621,7 +52621,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 784,
+                    "line": 785,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52664,7 +52664,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 779,
+                    "line": 780,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52707,7 +52707,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 766,
+                    "line": 767,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52737,7 +52737,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 694,
+                    "line": 695,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52754,7 +52754,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 842,
+                    "line": 843,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52775,7 +52775,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 664,
+                    "line": 665,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52816,7 +52816,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 878,
+                    "line": 879,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52826,7 +52826,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 882,
+                    "line": 883,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52836,7 +52836,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 886,
+                    "line": 887,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52846,7 +52846,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 868,
+                    "line": 869,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52856,7 +52856,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 894,
+                    "line": 895,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52866,7 +52866,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 890,
+                    "line": 891,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52883,7 +52883,7 @@
                     "optional": false,
                     "returnType": "{ value: any; }",
                     "typeParameters": [],
-                    "line": 861,
+                    "line": 862,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52904,7 +52904,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 874,
+                    "line": 875,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52914,7 +52914,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 871,
+                    "line": 872,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52924,7 +52924,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 710,
+                    "line": 711,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -52941,7 +52941,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 729,
+                    "line": 730,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -52969,7 +52969,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 793,
+                    "line": 794,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggered when the user scrolls on the `<tbody>` element.\nEmits the `scrollLoad` event.\n",
@@ -52992,7 +52992,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 705,
+                    "line": 706,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -53009,7 +53009,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 715,
+                    "line": 716,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -53038,7 +53038,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 749,
+                    "line": 750,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -53067,7 +53067,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 856,
+                    "line": 857,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTriggered when the user scrolls on the `<tbody>` element.\nEmits the `scrollLoad` event.\n",
@@ -53184,7 +53184,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 733,
+                    "line": 734,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -53199,7 +53199,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAllows table content to scroll horizontally\n",
                     "description": "<p>Allows table content to scroll horizontally</p>\n",
-                    "line": 476,
+                    "line": 477,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -53210,7 +53210,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\tthis.model.cycleSortState(index);\n\t\t\tthis.model.sort(index);\n\t\t}\n\n\t\tthis.sort.emit(index);\n\t}\n\n\t/**\n\t * Triggered when the user scrolls on the `<tbody>` element.\n\t * Emits the `scrollLoad` event.\n\t */\n\tscrollToTop(event) {\n\t\tevent.target.parentElement.parentElement.parentElement.parentElement.children[1].scrollTop = 0;\n\t\tthis.model.isEnd = false;\n\t}\n\n\tgetSelectionLabelValue(row: TableItem[]) {\n\t\tif (!this.selectionLabelColumn) {\n\t\t\treturn { value: this.i18n.get().TABLE.ROW };\n\t\t}\n\t\treturn { value: row[this.selectionLabelColumn].data };\n\t}\n\n\tgetExpandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.subject;\n\t}\n\tgetSortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.subject;\n\t}\n\tgetSortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.subject;\n\t}\n\n\tgetCheckboxHeaderLabel() {\n\t\treturn this._checkboxHeaderLabel.subject;\n\t}\n\n\tgetCheckboxRowLabel() {\n\t\treturn this._checkboxRowLabel.subject;\n\t}\n\n\tgetEndOfDataText() {\n\t\treturn this._endOfDataText.subject;\n\t}\n\n\tgetScrollTopText() {\n\t\treturn this._scrollTopText.subject;\n\t}\n\n\tgetFilterTitle() {\n\t\treturn this._filterTitle.subject;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tApplicationRef,\n\tInput,\n\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 (\n\t\t\t(element.firstElementChild?.classList.contains(\"cds--table-sort\") && focusElementList.length > 1) ||\n\t\t\tfocusElementList.length > 0\n\t\t) {\n\t\t\tfocusElementList[0].focus();\n\t\t} else {\n\t\t\telement.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Id of the table header title element\n\t */\n\t@Input() ariaLabelledby: string;\n\t/**\n\t * Id of the table header description element\n\t */\n\t@Input() ariaDescribedby: string;\n\n\t/**\n\t * `TableModel` with data the table is to display.\n\t */\n\t@Input()\n\tset model(m: TableModel) {\n\t\tif (this._model) {\n\t\t\tthis.subscriptions.unsubscribe();\n\t\t\t// Need to create a new subscription instance here because unsubscribing prevents any new subscriptions\n\t\t\t// from being added for some reason. When a new model is set, none of the subscriptions would exist.\n\t\t\tthis.subscriptions = new Subscription();\n\t\t}\n\n\t\tthis._model = m;\n\n\t\tconst rowsChange = this._model.rowsSelectedChange.subscribe(() => this.updateSelectAllCheckbox());\n\t\tconst dataChange = this._model.dataChange.subscribe(() => {\n\t\t\tif (this.isDataGrid) {\n\t\t\t\tthis.resetTabIndex();\n\t\t\t}\n\t\t\tthis.updateSelectAllCheckbox();\n\t\t});\n\n\t\tthis.subscriptions.add(rowsChange);\n\t\tthis.subscriptions.add(dataChange);\n\n\t\tif (this.isDataGrid) {\n\t\t\tconst expandedChange = this._model.rowsExpandedChange.subscribe(() => {\n\t\t\t\t// Allows the expanded row to have a focus state when it exists in the DOM\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\tconst expandedRows = this.elementRef.nativeElement.querySelectorAll(\".cds--expandable-row:not(.cds--parent-row)\");\n\t\t\t\t\tArray.from<any>(expandedRows).forEach(row => {\n\t\t\t\t\t\tif (row.firstElementChild.tabIndex === undefined || row.firstElementChild.tabIndex !== -1) {\n\t\t\t\t\t\t\trow.firstElementChild.tabIndex = -1;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.subscriptions.add(expandedChange);\n\t\t}\n\t}\n\n\tget model(): TableModel {\n\t\treturn this._model;\n\t}\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\t/**\n\t * Set to `true` for a loading table.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for a data grid with keyboard interactions.\n\t */\n\t@Input() set isDataGrid(value: boolean) {\n\t\tthis._isDataGrid = value;\n\t\tif (this.isViewReady) {\n\t\t\tif (value) {\n\t\t\t\tthis.enableDataGridInteractions();\n\t\t\t} else {\n\t\t\t\tthis.disableDataGridInteractions();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Setting sortable to false will disable all headers including headers which are sortable. Is is\n\t * possible to set the sortable state on the header item to disable/enable sorting for only some headers.\n\t */\n\t@Input() sortable = true;\n\n\t@Input() noBorder = true;\n\n\tget isDataGrid(): boolean {\n\t\treturn this._isDataGrid;\n\t}\n\n\t/**\n\t * Controls whether to show the selection checkboxes column or not.\n\t */\n\t@Input() showSelectionColumn = true;\n\n\t/**\n\t * Controls whether to enable multiple or single row selection.\n\t */\n\t@Input() enableSingleSelect = false;\n\n\t/**\n\t * Distance (in px) from the bottom that view has to reach before\n\t * `scrollLoad` event is emitted.\n\t */\n\t@Input() scrollLoadDistance = 0;\n\n\t/**\n\t * @todo - Enable column resize when Carbon officially supports feature\n\t * Set to `true` to enable users to resize columns.\n\t *\n\t * Works for columns with width set in pixels.\n\t *\n\t */\n\t// @Input() columnsResizable = false;\n\n\t/**\n\t * @todo - Enable columns drag & drop when Carbon officially supports feature\n\t * Set to `true` to enable users to drag and drop columns.\n\t *\n\t * Changing the column order in table changes table model. Be aware of it when you add additional data\n\t * to the model.\n\t *\n\t */\n\t// @Input() columnsDraggable = false;\n\n\t@Input()\n\tset expandButtonAriaLabel(value: string | Observable<string>) {\n\t\tthis._expandButtonAriaLabel.override(value);\n\t}\n\tget expandButtonAriaLabel() {\n\t\treturn this._expandButtonAriaLabel.value;\n\t}\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable<string>) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable<string>) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t/**\n\t * Expects an object that contains some or all of:\n\t * ```\n\t * {\n\t *\t\t\"FILTER\": \"Filter\",\n\t *\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t *\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t *\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t *\t\t\"CHECKBOX_ROW\": \"Select row\"\n\t * }\n\t * ```\n\t */\n\t@Input()\n\tset translations(value) {\n\t\tconst valueWithDefaults = merge(this.i18n.getMultiple(\"TABLE\"), value);\n\t\tthis._filterTitle.override(valueWithDefaults.FILTER);\n\t\tthis._endOfDataText.override(valueWithDefaults.END_OF_DATA);\n\t\tthis._scrollTopText.override(valueWithDefaults.SCROLL_TOP);\n\t\tthis._checkboxHeaderLabel.override(valueWithDefaults.CHECKBOX_HEADER);\n\t\tthis._checkboxRowLabel.override(valueWithDefaults.CHECKBOX_ROW);\n\t}\n\n\t/**\n\t * Set to `false` to remove table rows (zebra) stripes.\n\t */\n\t@Input() striped = true;\n\n\t/**\n\t * Allows table content to scroll horizontally\n\t */\n\t@HostBinding(\"class.cds--data-table-content\") tableContent = true;\n\n\t/**\n\t * Set to `true` to stick the header to the top of the table\n\t */\n\t@HostBinding(\"class.cds--data-table_inner-container\") @Input() stickyHeader = false;\n\n\t/**\n\t * Set footer template to customize what is displayed in the tfoot section of the table\n\t */\n\t@Input() footerTemplate: TemplateRef<any>;\n\n\t/**\n\t * Used to populate the row selection checkbox label with a useful value if set.\n\t *\n\t * Example:\n\t * ```\n\t * <cds-table [selectionLabelColumn]=\"0\"></cds-table>\n\t * <!-- results in aria-label=\"Select first column value\"\n\t * (where \"first column value\" is the value of the first column in the row -->\n\t * ```\n\t */\n\t@Input() selectionLabelColumn: number;\n\n\t/**\n\t * Emits an index of the column that wants to be sorted.\n\t *\n\t * If no observers are provided (default), table will attempt to do a simple sort of the data loaded\n\t * into the model.\n\t *\n\t * If an observer is provided, table will not attempt any sorting of its own and it is up to the observer\n\t * to sort the table. This is what you typically want if you're using a backend query to get the sorted\n\t * data or want to sort data across multiple pages.\n\t *\n\t * Usage:\n\t *\n\t * ```typescript\n\t * @Component({\n\t * \tselector: \"app-table\",\n\t * \ttemplate: `\n\t * \t\t<cds-table\n\t * \t\t\t[model]=\"model\"\n\t * \t\t\t(sort)=\"simpleSort($event)\">\n\t * \t\t\tNo data.\n\t * \t\t</cds-table>\n\t * \t`\n\t * })\n\t * export class TableApp implements OnInit, OnChanges {\n\t * \t@Input() model = new TableModel();\n\t *\n\t * \tngOnInit() {\n\t * \t\tthis.model.header = [\n\t * \t\t\tnew TableHeaderItem({ data: \"Name\" }),\n\t * \t\t\tnew TableHeaderItem({ data: \"hwer\" })\n\t * \t\t];\n\t *\n\t * \t\tthis.model.data = [\n\t * \t\t\t[new TableItem({ data: \"Name 1\" }), new TableItem({ data: \"qwer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 3\" }), new TableItem({ data: \"zwer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 2\" }), new TableItem({ data: \"swer\" })],\n\t * \t\t\t[new TableItem({ data: \"Name 4\" }), new TableItem({data: \"twer\"})],\n\t * \t\t\t[new TableItem({ data: \"Name 5\" }), new TableItem({data: \"twer\"})],\n\t * \t\t\t[new TableItem({ data: \"Name 6\" }), new TableItem({data: \"twer\"})]\n\t * \t\t];\n\t * \t}\n\t *\n\t * \tsimpleSort(index: number) {\n\t * \t\t// this function does a simple sort, which is the default for the table and if that's\n\t * \t\t// all you want, you don't need to do this.\n\t *\n\t * \t\t// here you can query your backend and update the model.data based on the result\n\t * \t\tif (this.model.header[index].sorted) {\n\t * \t\t\t// if already sorted flip sorting direction\n\t * \t\t\tthis.model.header[index].ascending = this.model.header[index].descending;\n\t * \t\t}\n\t * \t\tthis.model.sort(index);\n\t * \t}\n\t * }\n\t * ```\n\t */\n\t@Output() sort = new EventEmitter<number>();\n\n\t/**\n\t * Emits if all rows are selected.\n\t *\n\t * @param model\n\t */\n\t@Output() selectAll = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if all rows are deselected.\n\t *\n\t * @param model\n\t */\n\t@Output() deselectAll = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a single row is selected.\n\t *\n\t * @param ({model: this.model, selectedRowIndex: index})\n\t */\n\t@Output() selectRow = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a single row is deselected.\n\t *\n\t * @param ({model: this.model, deselectedRowIndex: index})\n\t */\n\t@Output() deselectRow = new EventEmitter<Object>();\n\n\t/**\n\t * Emits if a row item excluding expandButtons, checkboxes, or radios is clicked.\n\t */\n\t@Output() rowClick = new EventEmitter<number>();\n\n\t/**\n\t * Emits when table requires more data to be loaded.\n\t */\n\t@Output() scrollLoad = new EventEmitter<TableModel>();\n\n\t/**\n\t * Controls if all checkboxes are viewed as selected.\n\t */\n\tselectAllCheckbox = false;\n\n\t/**\n\t * Controls the indeterminate state of the header checkbox.\n\t */\n\tselectAllCheckboxSomeSelected = false;\n\n\tget noData() {\n\t\treturn !this.model.data ||\n\t\t\tthis.model.data.length === 0 ||\n\t\t\tthis.model.data.length === 1 && this.model.data[0].length === 0;\n\t}\n\n\tpublic isColumnDragging = false;\n\tpublic columnDraggedHoverIndex = -1;\n\tpublic columnDraggedPosition = \"\";\n\n\tprotected _model: TableModel;\n\tprotected _isDataGrid = false;\n\t// flag to prevent getters/setters from querying the view before it's fully instantiated\n\tprotected isViewReady = false;\n\n\tprotected subscriptions = new Subscription();\n\tprotected positionSubscription: Subscription;\n\n\tprotected interactionModel: DataGridInteractionModel;\n\tprotected interactionPositionSubscription: Subscription;\n\n\tprotected _expandButtonAriaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_BUTTON\");\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _checkboxHeaderLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\tprotected _checkboxRowLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_ROW\");\n\tprotected _endOfDataText = this.i18n.getOverridable(\"TABLE.END_OF_DATA\");\n\tprotected _scrollTopText = this.i18n.getOverridable(\"TABLE.SCROLL_TOP\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tprotected columnResizeWidth: number;\n\tprotected columnResizeMouseX: number;\n\tprotected mouseMoveSubscription: Subscription;\n\tprotected mouseUpSubscription: Subscription;\n\n\t/**\n\t * Creates an instance of Table.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected applicationRef: ApplicationRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\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",
@@ -53239,7 +53239,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 639,
+                "line": 640,
                 "rawdescription": "\n\nCreates an instance of Table.\n",
                 "jsdoctags": [
                     {
@@ -53292,7 +53292,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 314,
+                        "line": 315,
                         "rawdescription": "\n\n`TableModel` with data the table is to display.\n",
                         "description": "<p><code>TableModel</code> with data the table is to display.</p>\n",
                         "jsdoctags": [
@@ -53311,7 +53311,7 @@
                         "name": "model",
                         "type": "",
                         "returnType": "TableModel",
-                        "line": 351
+                        "line": 352
                     }
                 },
                 "isDataGrid": {
@@ -53330,7 +53330,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 366,
+                        "line": 367,
                         "rawdescription": "\n\nSet to `true` for a data grid with keyboard interactions.\n",
                         "description": "<p>Set to <code>true</code> for a data grid with keyboard interactions.</p>\n",
                         "jsdoctags": [
@@ -53349,7 +53349,7 @@
                         "name": "isDataGrid",
                         "type": "boolean",
                         "returnType": "boolean",
-                        "line": 385
+                        "line": 386
                     }
                 },
                 "expandButtonAriaLabel": {
@@ -53368,7 +53368,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 425,
+                        "line": 426,
                         "rawdescription": "\n\nSet to `true` to enable users to drag and drop columns.\n\nChanging the column order in table changes table model. Be aware of it when you add additional data\nto the model.\n\n",
                         "description": "<p>Set to <code>true</code> to enable users to drag and drop columns.</p>\n<p>Changing the column order in table changes table model. Be aware of it when you add additional data\nto the model.</p>\n",
                         "jsdoctags": [
@@ -53387,7 +53387,7 @@
                         "name": "expandButtonAriaLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 428
+                        "line": 429
                     }
                 },
                 "sortDescendingLabel": {
@@ -53406,7 +53406,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 432,
+                        "line": 433,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -53423,7 +53423,7 @@
                         "name": "sortDescendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 435
+                        "line": 436
                     }
                 },
                 "sortAscendingLabel": {
@@ -53442,7 +53442,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 439,
+                        "line": 440,
                         "jsdoctags": [
                             {
                                 "name": "value",
@@ -53459,7 +53459,7 @@
                         "name": "sortAscendingLabel",
                         "type": "",
                         "returnType": "",
-                        "line": 442
+                        "line": 443
                     }
                 },
                 "translations": {
@@ -53478,7 +53478,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 459,
+                        "line": 460,
                         "rawdescription": "\n\nExpects an object that contains some or all of:\n```\n{\n\t\t\"FILTER\": \"Filter\",\n\t\t\"END_OF_DATA\": \"You've reached the end of your content\",\n\t\t\"SCROLL_TOP\": \"Scroll to top\",\n\t\t\"CHECKBOX_HEADER\": \"Select all rows\",\n\t\t\"CHECKBOX_ROW\": \"Select row\"\n}\n```\n",
                         "description": "<p>Expects an object that contains some or all of:</p>\n<div><pre class=\"line-numbers\"><code class=\"language-none\">{\n        &quot;FILTER&quot;: &quot;Filter&quot;,\n        &quot;END_OF_DATA&quot;: &quot;You&#39;ve reached the end of your content&quot;,\n        &quot;SCROLL_TOP&quot;: &quot;Scroll to top&quot;,\n        &quot;CHECKBOX_HEADER&quot;: &quot;Select all rows&quot;,\n        &quot;CHECKBOX_ROW&quot;: &quot;Select row&quot;\n}</code></pre></div>",
                         "jsdoctags": [
@@ -53500,7 +53500,7 @@
                         "name": "noData",
                         "type": "",
                         "returnType": "",
-                        "line": 606
+                        "line": 607
                     }
                 }
             }