\n\t\t\n\t\t\n\t\n\t`\n})\nexport class TableToolbar {\n\t@Input() model: TableModel;\n\n\t@Input() set batchText (value: string | { SINGLE: string, MULTIPLE: string }) {\n\t\tif (typeof value === \"object\") {\n\t\t\tthis._batchTextSingle.override(value.SINGLE);\n\t\t\tthis._batchTextMultiple.override(value.MULTIPLE);\n\t\t} else {\n\t\t\t// For compatibility with old code\n\t\t\tthis._batchTextLegacy.override(value);\n\t\t}\n\t}\n\t@Input() set ariaLabel (value: { ACTION_BAR: string }) {\n\t\tthis.actionBarLabel.override(value.ACTION_BAR);\n\t}\n\t@Input() set cancelText(value: { CANCEL: string }) {\n\t\tthis._cancelText.override(value.CANCEL);\n\t}\n\t@Input() size: TableRowSize = \"md\";\n\n\tget cancelText(): { CANCEL: string } {\n\t\treturn { CANCEL: this._cancelText.value as string };\n\t}\n\n\t@Output() cancel = new EventEmitter();\n\n\tactionBarLabel: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.ACTION_BAR\");\n\t_cancelText: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.CANCEL\");\n\t_batchTextLegacy: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT\");\n\t_batchTextSingle: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_SINGLE\");\n\t_batchTextMultiple: Overridable = this.i18n.getOverridable(\"TABLE_TOOLBAR.BATCH_TEXT_MULTIPLE\");\n\n\tconstructor(protected i18n: I18n) {}\n\n\tget count() {\n\t\treturn this.model.totalDataLength > 0 ? this.model.rowsSelected.reduce((previous, current) => previous + (current ? 1 : 0), 0) : 0;\n\t}\n\tget selected() {\n\t\treturn this.model.totalDataLength > 0 ? this.model.rowsSelected.some(item => item) : false;\n\t}\n\n\tonCancel() {\n\t\tthis.model.selectAll(false);\n\t\tthis.cancel.emit();\n\t}\n}\n","import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-table-toolbar-actions, ibm-table-toolbar-actions\",\n\ttemplate: ``\n})\nexport class TableToolbarActions {}\n","import { Search } from \"carbon-components-angular/search\";\nimport {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOnInit,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-table-toolbar-search, ibm-table-toolbar-search\",\n\ttemplateUrl: \"../../search/search.component.html\",\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: TableToolbarSearch,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class TableToolbarSearch extends Search implements AfterViewInit {\n\ttableSearch = true;\n\n\tsize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t@HostBinding(\"class.cds--toolbar-content\") hostClass = true;\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tif (this.value) {\n\t\t\t\tthis.openSearch();\n\t\t\t}\n\t\t});\n\t}\n}\n","\n\t\n\t\t{{ !skeleton ? label : ''}}\n\t\n\n\t\n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\n\n\t\n\t\t{{ clearButtonTitle }}\n\t\t\n\t\n\n","import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-table-toolbar-content, ibm-table-toolbar-content\",\n\ttemplate: ``\n})\nexport class TableToolbarContent {\n\t@HostBinding(\"class.cds--toolbar-content\") class = true;\n}\n","import { Directive, HostBinding, Input } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsTableHeaderDescription], [ibmTableHeaderDescription]\"\n})\nexport class TableHeaderDescription {\n\tstatic counter = 0;\n\n\t@HostBinding(\"attr.id\") @Input() id = `table-description-${TableHeaderDescription.counter++}`;\n\t@HostBinding(\"class.cds--data-table-header__description\") descriptionClass = true;\n}\n","import {\n\tDirective,\n\tHostBinding,\n\tInput\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsTableHeaderTitle], [ibmTableHeaderTitle]\"\n})\nexport class TableHeaderTitle {\n\tstatic counter = 0;\n\n\t@HostBinding(\"attr.id\") @Input() id = `table-title-${TableHeaderTitle.counter++}`;\n\t@HostBinding(\"class.cds--data-table-header__title\") titleClass = true;\n}\n","import { TableItem } from \"./table-item.class\";\nimport { TemplateRef } from \"@angular/core\";\n\nexport type SortType = \"ASCENDING\" | \"DESCENDING\" | \"NONE\";\nexport class TableHeaderItem {\n\t/**\n\t * If true, sort is set to ascending, if false descending will be true.\n\t *\n\t */\n\tset ascending(asc: boolean) {\n\t\tthis.sortDirection = asc ? \"ASCENDING\" : \"DESCENDING\";\n\t}\n\tget ascending() {\n\t\treturn this.sortDirection === \"ASCENDING\";\n\t}\n\n\t/**\n\t * If true, sort is set to descending, if false ascending will be true.\n\t *\n\t */\n\tset descending(desc: boolean) {\n\t\tthis.sortDirection = desc ? \"DESCENDING\" : \"ASCENDING\";\n\t}\n\tget descending() {\n\t\treturn this.sortDirection === \"DESCENDING\";\n\t}\n\n\tget title() {\n\t\tif (this._title) {\n\t\t\treturn this._title;\n\t\t}\n\n\t\tif (!this.data) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tif (typeof this.data === \"string\") {\n\t\t\treturn this.data;\n\t\t}\n\n\t\tif (\n\t\t\tthis.data.toString &&\n\t\t\tthis.data.constructor !== ({}).constructor\n\t\t) {\n\t\t\treturn this.data.toString();\n\t\t}\n\n\t\t// data can’t be reasonably converted to an end user readable string\n\t\treturn \"\";\n\t}\n\n\tset title(title) {\n\t\tthis._title = title;\n\t}\n\t/**\n\t * Defines if column under this TableHeaderItem should be displayed.\n\t *\n\t */\n\tvisible = true;\n\n\t/**\n\t * Disables sorting by default.\n\t *\n\t */\n\tsorted = false;\n\n\t/**\n\t * Enables sorting on click by default.\n\t * If false then this column won't show a sorting arrow at all.\n\t *\n\t */\n\tsortable = true;\n\n\t/**\n\t * Number of applied filters.\n\t *\n\t * `filter()` should set it to appropriate number.\n\t *\n\t */\n\tfilterCount = 0;\n\n\t/**\n\t * The number of rows to span\n\t * **NOTE:** not supported by the default carbon table\n\t */\n\trowSpan = 1;\n\n\t/**\n\t * The number of columns to span\n\t */\n\tcolSpan = 1;\n\n\t/**\n\t * Attach a class to the column, both the header and column cells.\n\t *\n\t */\n\tclassName: string;\n\n\t/**\n\t * Style for the column, applied to every element in the column.\n\t *\n\t * ngStyle-like format\n\t *\n\t */\n\tstyle = {};\n\n\t/**\n\t * Data for the header item.\n\t */\n\tdata: any;\n\n\t/**\n\t * Data for the header item for general usage in the controller.\n\t * For example, which `field` is this column related to.\n\t */\n\tmetadata: any;\n\n\t/**\n\t * Used to display data in a desired way.\n\t *\n\t * If not provided, displays data as a simple string.\n\t *\n\t * Usage:\n\t *\n\t * In a component where you're using the table create a template like:\n\t *\n\t * ```html\n\t * \n\t * \t\t{{data.name}}\n\t * \n\t * ```\n\t * where we assume your data contains `link` and `name`. `let-data=\"data\"` is\n\t * necessary for you to be able to access item's data in the template.\n\t *\n\t * Create `ViewChild` property with:\n\t *\n\t * ```typescript\n\t * (at)ViewChild(\"customHeaderTemplate\")\n\t * protected customHeaderTemplate: TemplateRef;\n\t * ```\n\t *\n\t * Set the template to the header item, for example:\n\t *\n\t * ```typescript\n\t * this.model.header = [\n\t * \t\tnew TableHeaderItem({data: {name: \"Custom header\", link: \"/table\"}, template: this.customHeaderTemplate})\n\t * ];\n\t * ```\n\t */\n\ttemplate: TemplateRef;\n\n\t/**\n\t * The label for the sort button\n\t */\n\tariaSortLabel: string;\n\n\t/**\n\t * A callback function to format the sort label. Will be heavily called.\n\t */\n\tformatSortLabel: (label: string, staticLabel?: string) => string;\n\n\t/**\n\t * Used as a template for popover filter.\n\t *\n\t * `let-popover=\"popover\"` will give you access to popover component and allow you to\n\t * manipulate it if needed.\n\t *\n\t * `let-filter=\"filter\"` will give you access to the \"filter\". The main takeaway is\n\t * store the data you need to `filter.data`. You will be able to access it as\n\t * `this.filterData.data` from your `filter()` function when you extend `TableHeaderItem`\n\t *\n\t * Example:\n\t * ```html\n\t * \n\t * \t\n\t * \t\tValue\n\t * \t\t\n\t * \t\n\t * \n\t *\n\t * \n\t * \t\n\t * \t\n\t * \n\t * ```\n\t *\n\t * Set the template with, for example:\n\t * ```typescript\n\t * new FilterableHeaderItem({\n\t * \tfilterTemplate: this.filter,\n\t *\tfilterFooter: this.filterFooter\n\t * })\n\t * ```\n\t *\n\t * ```typescript\n\t * class FilterableHeaderItem extends TableHeaderItem {\n\t * \t// custom filter function\n\t * \tfilter(item: TableItem): boolean {\n\t * \t\tif (typeof item.data === \"string\" && item.data.indexOf(this.filterData.data) >= 0) {\n\t * \t\t\tthis.filterCount = 1;\n\t * \t\t\treturn false;\n\t * \t\t}\n\t * \t\tthis.filterCount = 0;\n\t * \t\treturn true;\n\t * \t}\n\t * }\n\t * ```\n\t */\n\tfilterTemplate: TemplateRef;\n\n\t/**\n\t * Used along with `filterTemplate` to construct the filter popover\n\t */\n\tfilterFooter: TemplateRef;\n\n\t/**\n\t * This is where you store your data when applying filter.\n\t *\n\t * It is the actual object you have access to with `let-filter=\"data\"` in your template.\n\t *\n\t * Make sure to store data in `filter.data` in your template, and you will have it\n\t * available in `filterData.data` in your extension of `TableHeaderItem`.\n\t *\n\t * Because angular and object references.\n\t */\n\tfilterData: any;\n\n\tsortDirection: SortType = \"NONE\";\n\n\n\n\tprivate _title: string;\n\n\t/**\n\t * Creates an instance of TableHeaderItem.\n\t */\n\tconstructor(rawData?: any) {\n\t\t// defaults so we dont leave things empty\n\t\tconst defaults = {\n\t\t\tdata: \"\",\n\t\t\tvisible: this.visible,\n\t\t\tstyle: this.style,\n\t\t\tfilterCount: this.filterCount,\n\t\t\tfilterData: {data: \"\"}\n\t\t};\n\t\t// fill our object with provided props, and fallback to defaults\n\t\tconst data = Object.assign({}, defaults, rawData);\n\t\tfor (let property of Object.getOwnPropertyNames(data)) {\n\t\t\tif (data.hasOwnProperty(property)) {\n\t\t\t\tthis[property] = data[property];\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Used for sorting rows of the table.\n\t *\n\t * Override to enable different sorting.\n\t *\n\t * < 0 if `one` should go before `two`\n\t * > 0 if `one` should go after `two`\n\t * 0 if it doesn't matter (they are the same)\n\t */\n\tcompare(one: TableItem, two: TableItem): number {\n\t\tif (!one || !two) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (typeof one.data === \"string\") {\n\t\t\treturn one.data.localeCompare(two.data);\n\t\t}\n\n\t\tif (one.data < two.data) {\n\t\t\treturn -1;\n\t\t} else if (one.data > two.data) {\n\t\t\treturn 1;\n\t\t} else {\n\t\t\treturn 0;\n\t\t}\n\t}\n\n\t/**\n\t * Used to filter rows in the table.\n\t *\n\t * Override to make a custom filter.\n\t *\n\t * Even though there is just one filter function, there can be multiple filters.\n\t * When implementing filter, set `filterCount` before returning.\n\t *\n\t * `true` to hide the row\n\t * `false` to show the row\n\t */\n\tfilter(item: TableItem): boolean {\n\t\tthis.filterCount = 0;\n\t\treturn false;\n\t}\n}\n","import {\n\tTemplateRef\n} from \"@angular/core\";\n\nexport class TableItem {\n\t/**\n\t * Data for the table item.\n\t */\n\tdata: any;\n\n\t/**\n\t * Data for the expanded part of the row.\n\t *\n\t * You only need to set it for the first item in the row.\n\t *\n\t * See `expandAsTable` documentation if you need to the table to expand to additional\n\t * table rows.\n\t */\n\texpandedData: any;\n\n\t/**\n\t * Used to display data in a desired way.\n\t *\n\t * If not provided, displays data as a simple string.\n\t *\n\t * Usage:\n\t *\n\t * In a component where you're using the table create a template like:\n\t *\n\t * ```html\n\t * \n\t * \t{{data.name}}\n\t * \n\t * ```\n\t * where we assume your data contains `link` and `name`. `let-data=\"data\"` is\n\t * necessary for you to be able to access item's data in the template.\n\t *\n\t * Create `ViewChild` property with:\n\t *\n\t * ```typescript\n\t * (at)ViewChild(\"customItemTemplate\")\n\t * protected customItemTemplate: TemplateRef;\n\t * ```\n\t *\n\t * Set the template to the table item, for example:\n\t *\n\t * ```typescript\n\t * this.model.data = [\n\t * \t[new TableItem({data: {name: \"Custom item\", link: \"/table\"}, template: this.customItemTemplate})]\n\t * ];\n\t * ```\n\t */\n\ttemplate: TemplateRef;\n\n\t/**\n\t * Template for rendering `expandedData`\n\t *\n\t * You only need to set it for the first item in the row.\n\t *\n\t */\n\texpandedTemplate: TemplateRef;\n\n\t/**\n\t * Setting this to `true` makes table interpret `expandedData` as additional rows to insert in place\n\t * for expanded data. `expandedTemplate` is then ignored.\n\t *\n\t * You can apply the template for individual cells as usual.\n\t *\n\t * Example model data:\n\t *\n\t * ```typescript\n\t * this.model.data = [\n\t * \t[new TableItem({ data: \"Name 4\" }), new TableItem({ data: \"twer\" })], // regular row\n\t * \t[\n\t * \t\tnew TableItem({\n\t * \t\t\tdata: \"Name 3.1\",\n\t * \t\t\t// `expandedData` mimics the format of the rest of the table\n\t * \t\t\texpandedData: [\n\t * \t\t\t\t[\n\t * \t\t\t\t\tnew TableItem({ data: \"More names\", expandedData: \"No template\" }),\n\t * \t\t\t\t\tnew TableItem({ data: { name: \"Morey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t * \t\t\t\t],\n\t * \t\t\t\t[\n\t * \t\t\t\t\tnew TableItem({ data: \"Core names\", expandedData: \"No template\" }),\n\t * \t\t\t\t\tnew TableItem({ data: { name: \"Corey\", link: \"#\" }, template: this.customTableItemTemplate })\n\t * \t\t\t\t]\n\t * \t\t\t],\n\t * \t\t\t// `expandAsTable` tells the table to interpret `expandedData` as table data\n\t * \t\t\texpandAsTable: true\n\t * \t\t}),\n\t * \t\tnew TableItem({ data: \"swer\" })\n\t * \t],\n\t * \t[new TableItem({ data: \"Name 7\" }), new TableItem({data: \"twer\"})] // regular row\n\t * ];\n\t * ```\n\t */\n\texpandAsTable: false;\n\n\t/**\n\t * The number of rows to span\n\t */\n\trowSpan = 1;\n\n\t/**\n\t * The number of columns to span\n\t */\n\tcolSpan = 1;\n\n\tget title() {\n\t\tif (typeof this._title === \"string\") {\n\t\t\treturn this._title;\n\t\t}\n\n\t\tif (!this.data) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tif (typeof this.data === \"string\") {\n\t\t\treturn this.data;\n\t\t}\n\n\t\tif (\n\t\t\tthis.data.toString &&\n\t\t\tthis.data.constructor !== ({}).constructor\n\t\t) {\n\t\t\treturn this.data.toString();\n\t\t}\n\n\t\t// data can’t be reasonably converted to an end user readable string\n\t\treturn \"\";\n\t}\n\n\tset title(title) {\n\t\tthis._title = title;\n\t}\n\n\tprivate _title: string;\n\n\t/**\n\t * Creates an instance of TableItem.\n\t */\n\tconstructor(rawData?: any) {\n\t\t// defaults so we dont leave things empty\n\t\tconst defaults = {\n\t\t\tdata: \"\"\n\t\t};\n\t\t// fill our object with provided props, and fallback to defaults\n\t\tconst data = Object.assign({}, defaults, rawData);\n\t\tfor (const property of Object.getOwnPropertyNames(data)) {\n\t\t\tif (data.hasOwnProperty(property)) {\n\t\t\t\tthis[property] = data[property];\n\t\t\t}\n\t\t}\n\t}\n}\n","import { EventEmitter } from \"@angular/core\";\n\nimport { PaginationModel } from \"carbon-components-angular/pagination\";\nimport { TableHeaderItem } from \"./table-header-item.class\";\nimport { TableItem } from \"./table-item.class\";\nimport { TableRow } from \"./table-row.class\";\nimport { Subject } from \"rxjs\";\n\nexport type HeaderType = number | \"select\" | \"expand\";\n\n/**\n * TableModel represents a data model for two-dimensional data. It's used for all things table\n * (table component, table toolbar, pagination, etc)\n *\n * TableModel manages its internal data integrity very well if you use the provided helper\n * functions for modifying rows and columns and assigning header and data in that order.\n *\n * It also provides direct access to the data so you can read and modify it.\n * If you change the structure of the data (by directly pushing into the arrays or otherwise),\n * keep in mind to keep the data structure intact.\n *\n * Header length and length of every line in the data should be equal.\n *\n * If they are not consistent, unexpected things will happen.\n *\n * Use the provided functions when in doubt.\n */\nexport class TableModel implements PaginationModel {\n\t/**\n\t * The number of models instantiated, used for (among other things) unique id generation\n\t */\n\tprotected static COUNT = 0;\n\n\t/**\n\t * Sets data of the table.\n\t *\n\t * Make sure all rows are the same length to keep the column count accurate.\n\t */\n\tset data(newData: TableItem[][]) {\n\t\tif (!newData || (Array.isArray(newData) && newData.length === 0)) {\n\t\t\tnewData = [[]];\n\t\t}\n\n\t\tthis._data = newData;\n\n\t\t// init rowsSelected\n\t\tthis.rowsSelected = new Array(this._data.length).fill(false);\n\t\tthis.rowsExpanded = new Array(this._data.length).fill(false);\n\t\t// init rows indices\n\t\tthis.rowsIndices = [...Array(this._data.length).keys()];\n\t\t// init rowsContext\n\t\tthis.rowsContext = new Array(this._data.length);\n\n\t\t// init rowsClass\n\t\tthis.rowsClass = new Array(this._data.length);\n\n\t\t// only create a fresh header if necessary (header doesn't exist or differs in length)\n\t\tif (this.header == null || (this.header.length !== this._data[0].length && this._data[0].length > 0)) {\n\t\t\tlet header = new Array();\n\t\t\tfor (let i = 0; i < this._data[0].length; i++) {\n\t\t\t\theader.push(new TableHeaderItem());\n\t\t\t}\n\t\t\tthis.header = header;\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tdataChange = new EventEmitter();\n\trowsSelectedChange = new EventEmitter();\n\trowsExpandedChange = new EventEmitter();\n\trowsExpandedAllChange = new EventEmitter();\n\trowsCollapsedAllChange = new EventEmitter();\n\t/**\n\t * Gets emitted when `selectAll` is called. Emits false if all rows are deselected and true if\n\t * all rows are selected.\n\t */\n\tselectAllChange = new Subject();\n\n\t/**\n\t * Gets the full data.\n\t *\n\t * You can use it to alter individual `TableItem`s but if you need to change\n\t * table structure, use `addRow()` and/or `addColumn()`\n\t */\n\tget data() {\n\t\treturn this._data;\n\t}\n\n\t/**\n\t * Contains information about selection state of rows in the table.\n\t */\n\trowsSelected: boolean[] = [];\n\n\t/**\n\t * Contains information about expanded state of rows in the table.\n\t */\n\trowsExpanded: boolean[] = [];\n\n\t/**\n\t * Contains information about initial index of rows in the table\n\t */\n\trowsIndices: number[] = [];\n\n\t/**\n\t * Contains information about the context of the row.\n\t *\n\t * It affects styling of the row to reflect the context.\n\t *\n\t * string can be one of `\"success\" | \"warning\" | \"info\" | \"error\" | \"\"` and it's\n\t * empty or undefined by default\n\t */\n\trowsContext: string[] = [];\n\n\t/**\n\t * Contains class name(s) of the row.\n\t *\n\t * It affects styling of the row to reflect the appended class name(s).\n\t *\n\t * It's empty or undefined by default\n\t */\n\trowsClass: string[] = [];\n\n\t/**\n\t * Contains information about the header cells of the table.\n\t */\n\theader: TableHeaderItem[] = [];\n\n\t/**\n\t * Tracks the current page.\n\t */\n\tcurrentPage = 1;\n\n\t/**\n\t * Length of page.\n\t */\n\tpageLength = 10;\n\n\t/**\n\t * Set to true when there is no more data to load in the table\n\t */\n\tisEnd = false;\n\n\t/**\n\t * Set to true when lazy loading to show loading indicator\n\t */\n\tisLoading = false;\n\n\t/**\n\t * Absolute total number of rows of the table.\n\t */\n\tprotected _totalDataLength: number;\n\n\t/**\n\t * Manually set data length in case the data in the table doesn't\n\t * correctly reflect all the data that table is to display.\n\t *\n\t * Example: if you have multiple pages of data that table will display\n\t * but you're loading one at a time.\n\t *\n\t * Set to `null` to reset to default behavior.\n\t */\n\tset totalDataLength(length: number) {\n\t\t// if this function is called without a parameter we need to set to null to avoid having undefined != null\n\t\tthis._totalDataLength = isNaN(length) ? null : length;\n\t}\n\n\t/**\n\t * Total length of data that table has access to, or the amount manually set\n\t */\n\tget totalDataLength() {\n\t\t// if manually set data length\n\t\tif (this._totalDataLength !== null && this._totalDataLength >= 0) {\n\t\t\treturn this._totalDataLength;\n\t\t}\n\n\t\t// if empty dataset\n\t\tif (this.data && this.data.length === 1 && this.data[0].length === 0) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn this.data.length;\n\t}\n\n\t/**\n\t * Used in `data`\n\t */\n\tprotected _data: TableItem[][] = [[]];\n\n\t/**\n\t * The number of models instantiated, this is to make sure each table has a different\n\t * model count for unique id generation.\n\t */\n\tprotected tableModelCount = 0;\n\n\tconstructor() {\n\t\tthis.tableModelCount = TableModel.COUNT++;\n\t}\n\n\t/**\n\t * Returns an id for the given column\n\t *\n\t * @param column the column to generate an id for\n\t * @param row the row of the header to generate an id for\n\t */\n\tgetId(column: HeaderType, row = 0): string {\n\t\treturn `table-header-${row}-${column}-${this.tableModelCount}`;\n\t}\n\n\t/**\n\t * Returns the id of the header. Used to link the cells with headers (or headers with headers)\n\t *\n\t * @param column the column to start getting headers for\n\t * @param colSpan the number of columns to get headers for (defaults to 1)\n\t */\n\tgetHeaderId(column: HeaderType, colSpan = 1): string {\n\t\tif (column === \"select\" || column === \"expand\") {\n\t\t\treturn this.getId(column);\n\t\t}\n\n\t\tlet ids = [];\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tif (this.header[i]) {\n\t\t\t\tfor (let j = 0; j < colSpan; j++) {\n\t\t\t\t\tids.push(this.getId(i + j));\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\treturn ids.join(\" \");\n\t}\n\n\t/**\n\t * Finds closest header by trying the `column` and then working its way to the left\n\t *\n\t * @param column the target column\n\t */\n\tgetHeader(column: number): TableHeaderItem {\n\t\tif (!this.header) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfor (let i = column; i >= 0; i--) {\n\t\t\tconst headerCell = this.header[i];\n\t\t\tif (headerCell) {\n\t\t\t\treturn headerCell;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns how many rows is currently selected\n\t */\n\tselectedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsSelected) {\n\t\t\tthis.rowsSelected.forEach(rowSelected => {\n\t\t\t\tif (rowSelected) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns how many rows is currently expanded\n\t */\n\texpandedRowsCount(): number {\n\t\tlet count = 0;\n\t\tif (this.rowsExpanded) {\n\t\t\tthis.rowsExpanded.forEach(rowExpanded => {\n\t\t\t\tif (rowExpanded) {\n\t\t\t\t\tcount++;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t\treturn count;\n\t}\n\n\t/**\n\t * Returns `index`th row of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\trow(index: number): TableItem[] {\n\t\treturn this.data[this.realRowIndex(index)];\n\t}\n\n\t/**\n\t * Adds a row to the `index`th row or appends to table if index not provided.\n\t *\n\t * If row is shorter than other rows or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If row is longer than other rows, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [row]\n\t * @param [index]\n\t */\n\taddRow(row?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array>();\n\t\t\tnewData.push(row ? row : [new TableItem()]); // row or one empty one column row\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet realRow = row;\n\t\tconst columnCount = this.data[0].length;\n\n\t\tif (row == null) {\n\t\t\trealRow = new Array();\n\t\t\tfor (let i = 0; i < columnCount; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t}\n\n\t\tif (realRow.length < columnCount) {\n\t\t\t// extend the length of realRow\n\t\t\tconst difference = columnCount - realRow.length;\n\t\t\tfor (let i = 0; i < difference; i++) {\n\t\t\t\trealRow.push(new TableItem());\n\t\t\t}\n\t\t} else if (realRow.length > columnCount) {\n\t\t\t// extend the length of header\n\t\t\tlet difference = realRow.length - this.header.length;\n\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t\t// extend the length of every other row\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tlet currentRow = this.data[i];\n\t\t\t\tdifference = realRow.length - currentRow.length;\n\t\t\t\tfor (let j = 0; j < difference; j++) {\n\t\t\t\t\tcurrentRow.push(new TableItem());\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (index == null) {\n\t\t\tthis.data.push(realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.push(false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.push(false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.push(undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.push(undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.push(this.data.length - 1);\n\t\t} else {\n\t\t\tconst ri = this.realRowIndex(index);\n\t\t\tthis.data.splice(ri, 0, realRow);\n\n\t\t\t// update rowsSelected property for length\n\t\t\tthis.rowsSelected.splice(ri, 0, false);\n\n\t\t\t// update rowsExpanded property for length\n\t\t\tthis.rowsExpanded.splice(ri, 0, false);\n\n\t\t\t// update rowsContext property for length\n\t\t\tthis.rowsContext.splice(ri, 0, undefined);\n\n\t\t\t// update rowsClass property for length\n\t\t\tthis.rowsClass.splice(ri, 0, undefined);\n\n\t\t\t// update rowsIndices property for length\n\t\t\tthis.rowsIndices.splice(ri, 0, this.data.length - 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th row.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteRow(index: number) {\n\t\tconst rri = this.realRowIndex(index);\n\t\tthis.data.splice(rri, 1);\n\t\tthis.rowsSelected.splice(rri, 1);\n\t\tthis.rowsExpanded.splice(rri, 1);\n\t\tthis.rowsContext.splice(rri, 1);\n\t\tthis.rowsClass.splice(rri, 1);\n\n\t\tconst rowIndex = this.rowsIndices[rri];\n\t\tthis.rowsIndices.splice(rri, 1);\n\t\tthis.rowsIndices = this.rowsIndices.map((value) => (value > rowIndex) ? --value : value);\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes all rows.\n\t */\n\tdeleteAllRows() {\n\t\tthis.data = [];\n\t}\n\n\thasExpandableRows() {\n\t\treturn this.data.some(data => data.some(d => d && d.expandedData)); // checking for some in 2D array\n\t}\n\n\t/**\n\t * Number of rows that can be expanded.\n\t *\n\t * @returns number\n\t */\n\texpandableRowsCount() {\n\t\treturn this.data.reduce((counter, _, index) => {\n\t\t\tcounter = (this.isRowExpandable(index)) ? counter + 1 : counter;\n\t\t\treturn counter;\n\t\t}, 0);\n\t}\n\n\tisRowExpandable(index: number) {\n\t\treturn this.data[index].some(d => d && d.expandedData);\n\t}\n\n\tisRowExpanded(index: number) {\n\t\treturn this.rowsExpanded[index];\n\t}\n\n\tgetRowContext(index: number) {\n\t\treturn this.rowsContext[index];\n\t}\n\n\t/**\n\t * Returns `index`th column of the table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tcolumn(index: number): TableItem[] {\n\t\tlet column = new Array();\n\t\tconst ri = this.realColumnIndex(index);\n\t\tconst rc = this.data.length;\n\n\t\tfor (let i = 0; i < rc; i++) {\n\t\t\tconst row = this.data[i];\n\t\t\tcolumn.push(row[ri]);\n\t\t}\n\n\t\treturn column;\n\t}\n\n\t/**\n\t * Adds a column to the `index`th column or appends to table if index not provided.\n\t *\n\t * If column is shorter than other columns or not provided, it will be padded with\n\t * empty `TableItem` elements.\n\t *\n\t * If column is longer than other columns, others will be extended to match so no data is lost.\n\t *\n\t * If called on an empty table with no parameters, it creates a 1x1 table.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param [column]\n\t * @param [index]\n\t */\n\taddColumn(column?: TableItem[], index?: number) {\n\t\t// if table empty create table with row\n\t\tif (!this.data || this.data.length === 0 || this.data[0].length === 0) {\n\t\t\tlet newData = new Array>();\n\t\t\tif (column == null) {\n\t\t\t\tnewData.push([new TableItem()]);\n\t\t\t} else {\n\t\t\t\tfor (let i = 0; i < column.length; i++) {\n\t\t\t\t\tlet item = column[i];\n\t\t\t\t\tnewData.push([item]);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.data = newData;\n\n\t\t\treturn;\n\t\t}\n\n\t\tlet rc = this.data.length; // row count\n\t\tlet ci = this.realColumnIndex(index);\n\n\t\t// append missing rows\n\t\tfor (let i = 0; column != null && i < column.length - rc; i++) {\n\t\t\tthis.addRow();\n\t\t}\n\t\trc = this.data.length;\n\t\tif (index == null) {\n\t\t\t// append to end\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.push(column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.push(new TableHeaderItem());\n\t\t\t}\n\t\t} else {\n\t\t\tif (index >= this.data[0].length) {\n\t\t\t\t// if trying to append\n\t\t\t\tci++;\n\t\t\t}\n\t\t\t// insert\n\t\t\tfor (let i = 0; i < rc; i++) {\n\t\t\t\tlet row = this.data[i];\n\t\t\t\trow.splice(ci, 0, column == null || column[i] == null ? new TableItem() : column[i]);\n\t\t\t}\n\t\t\t// update header if not already set by user\n\t\t\tif (this.header.length < this.data[0].length) {\n\t\t\t\tthis.header.splice(ci, 0, new TableHeaderItem());\n\t\t\t}\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\t/**\n\t * Deletes `index`th column.\n\t *\n\t * Negative index starts from the end. -1 being the last element.\n\t *\n\t * @param index\n\t */\n\tdeleteColumn(index: number) {\n\t\tconst rci = this.realColumnIndex(index);\n\t\tconst rowCount = this.data.length;\n\t\tfor (let i = 0; i < rowCount; i++) {\n\t\t\tthis.data[i].splice(rci, 1);\n\t\t}\n\t\t// update header if not already set by user\n\t\tif (this.header.length > this.data[0].length) {\n\t\t\tthis.header.splice(rci, 1);\n\t\t}\n\n\t\tthis.dataChange.emit();\n\t}\n\n\tmoveColumn(indexFrom: number, indexTo: number) {\n\t\tconst headerFrom = this.header[indexFrom];\n\n\t\tthis.addColumn(this.column(indexFrom), indexTo);\n\t\tthis.deleteColumn(indexFrom + (indexTo < indexFrom ? 1 : 0));\n\n\t\tthis.header[indexTo + (indexTo > indexFrom ? -1 : 0)] = headerFrom;\n\t}\n\n\t/**\n\t * cycle through the three sort states\n\t * @param index\n\t */\n\tcycleSortState(index: number) {\n\t\t// no sort provided so do the simple sort\n\t\tswitch (this.header[index].sortDirection) {\n\t\t\tcase \"ASCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"DESCENDING\";\n\t\t\t\tbreak;\n\t\t\tcase \"DESCENDING\":\n\t\t\t\tthis.header[index].sortDirection = \"NONE\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tthis.header[index].sortDirection = \"ASCENDING\";\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Sorts the data currently present in the model based on `compare()`\n\t *\n\t * Direction is set by `ascending` and `descending` properties of `TableHeaderItem`\n\t * in `index`th column.\n\t *\n\t * @param index The column based on which it's sorting\n\t */\n\tsort(index: number) {\n\t\tthis.pushRowStateToModelData();\n\t\tconst headerSorted = this.header[index].sorted;\n\t\t// We only allow sorting by a single column, so reset sort state for all columns before specifying new sort state\n\t\tthis.header.forEach(column => column.sorted = false);\n\t\tif (this.header[index].sortDirection === \"NONE\" && headerSorted) {\n\t\t\t// Restore initial order of rows\n\t\t\tconst oldData = this._data;\n\t\t\tthis._data = [];\n\t\t\tfor (let i = 0; i < this.rowsIndices.length; i++) {\n\t\t\t\tconst ri = this.rowsIndices[i];\n\t\t\t\tthis._data[ri] = oldData[i];\n\t\t\t}\n\t\t} else {\n\t\t\tconst descending = this.header[index].sortDirection === \"DESCENDING\" ? -1 : 1;\n\t\t\tthis.data.sort((a, b) => {\n\t\t\t\treturn descending * this.header[index].compare(a[index], b[index]);\n\t\t\t});\n\t\t\tthis.header[index].sorted = true;\n\t\t}\n\t\tthis.popRowStateFromModelData();\n\t}\n\n\t/**\n\t * Appends `rowsSelected` and `rowsExpanded` info to model data.\n\t *\n\t * When sorting rows, do this first so information about row selection\n\t * gets sorted with the other row info.\n\t *\n\t * Call `popRowSelectionFromModelData()` after sorting to make everything\n\t * right with the world again.\n\t */\n\tpushRowStateToModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tconst rowSelectedMark = new TableItem();\n\t\t\trowSelectedMark.data = this.rowsSelected[i];\n\t\t\tthis.data[i].push(rowSelectedMark);\n\n\t\t\tconst rowExpandedMark = new TableItem();\n\t\t\trowExpandedMark.data = this.rowsExpanded[i];\n\t\t\tthis.data[i].push(rowExpandedMark);\n\n\t\t\tconst rowContext = new TableItem();\n\t\t\trowContext.data = this.rowsContext[i];\n\t\t\tthis.data[i].push(rowContext);\n\n\t\t\tconst rowClass = new TableItem();\n\t\t\trowClass.data = this.rowsClass[i];\n\t\t\tthis.data[i].push(rowClass);\n\n\t\t\tconst rowIndex = new TableItem();\n\t\t\trowIndex.data = this.rowsIndices[i];\n\t\t\tthis.data[i].push(rowIndex);\n\t\t}\n\t}\n\n\t/**\n\t * Restores `rowsSelected` from data pushed by `pushRowSelectionToModelData()`\n\t *\n\t * Call after sorting data (if you previously pushed to maintain selection order)\n\t * to make everything right with the world again.\n\t */\n\tpopRowStateFromModelData() {\n\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\tthis.rowsIndices[i] = this.data[i].pop().data;\n\t\t\tthis.rowsClass[i] = this.data[i].pop().data;\n\t\t\tthis.rowsContext[i] = this.data[i].pop().data;\n\t\t\tthis.rowsExpanded[i] = !!this.data[i].pop().data;\n\t\t\tthis.rowsSelected[i] = !!this.data[i].pop().data;\n\t\t}\n\t}\n\n\t/**\n\t * Checks if row is filtered out.\n\t *\n\t * @param index\n\t * @returns true if any of the filters in header filters out the `index`th row\n\t */\n\tisRowFiltered(index: number): boolean {\n\t\tconst realIndex = this.realRowIndex(index);\n\t\treturn this.header.some((item, i) => item && item.filter(this.row(realIndex)[i]));\n\t}\n\n\t/**\n\t * Select/deselect `index`th row based on value\n\t *\n\t * @param index index of the row to select\n\t * @param value state to set the row to. Defaults to `true`\n\t */\n\tselectRow(index: number, value = true) {\n\t\tif (this.isRowDisabled(index)) {\n\t\t\treturn;\n\t\t}\n\t\tthis.rowsSelected[index] = value;\n\t\tthis.rowsSelectedChange.emit(index);\n\t}\n\n\t/**\n\t * Selects or deselects all rows in the model\n\t *\n\t * @param value state to set all rows to. Defaults to `true`\n\t */\n\tselectAll(value = true) {\n\t\tif (this.data.length >= 1 && this.data[0].length >= 1) {\n\t\t\tfor (let i = 0; i < this.rowsSelected.length; i++) {\n\t\t\t\tthis.selectRow(i, value);\n\t\t\t}\n\t\t}\n\t\tthis.selectAllChange.next(value);\n\t}\n\n\tisRowSelected(index: number) {\n\t\treturn this.rowsSelected[index];\n\t}\n\n\t/**\n\t * Checks if row is disabled or not.\n\t */\n\tisRowDisabled(index: number) {\n\t\tconst row = this.data[index] as TableRow;\n\t\treturn !!row.disabled;\n\t}\n\n\t/**\n\t * Expands/Collapses `index`th row based on value\n\t *\n\t * @param index index of the row to expand or collapse\n\t * @param value expanded state of the row. `true` is expanded and `false` is collapsed\n\t */\n\texpandRow(index: number, value = true) {\n\t\tthis.rowsExpanded[index] = value;\n\t\tthis.rowsExpandedChange.emit(index);\n\t}\n\n\t/**\n\t * Expands / collapses all rows\n\t *\n\t * @param value expanded state of the rows. `true` is expanded and `false` is collapsed\n\t */\n\texpandAllRows(value = true) {\n\t\tif (this.data.length > 0) {\n\t\t\tfor (let i = 0; i < this.data.length; i++) {\n\t\t\t\tif (this.isRowExpandable(i)) {\n\t\t\t\t\tthis.rowsExpanded[i] = value;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tthis.rowsExpandedAllChange.emit();\n\t\t\t} else {\n\t\t\t\tthis.rowsCollapsedAllChange.emit();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Gets the true index of a row based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realRowIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data.length);\n\t}\n\n\t/**\n\t * Gets the true index of a column based on it's relative position.\n\t * Like in Python, positive numbers start from the top and\n\t * negative numbers start from the bottom.\n\t *\n\t * @param index\n\t */\n\tprotected realColumnIndex(index: number): number {\n\t\treturn this.realIndex(index, this.data[0].length);\n\t}\n\n\t/**\n\t * Generic function to calculate the real index of something.\n\t * Used by `realRowIndex()` and `realColumnIndex()`\n\t *\n\t * @param index\n\t * @param length\n\t */\n\tprotected realIndex(index: number, length: number): number {\n\t\tif (index == null) {\n\t\t\treturn length - 1;\n\t\t} else if (index >= 0) {\n\t\t\treturn index >= length ? length - 1 : index;\n\t\t} else {\n\t\t\treturn -index >= length ? 0 : length + index;\n\t\t}\n\t}\n}\n","import {\n\tBehaviorSubject,\n\tObservable,\n\tcombineLatest\n} from \"rxjs\";\nimport { map } from \"rxjs/operators\";\nimport { TableAdapter } from \"./table-adapter.class\";\nimport { tabbableSelectorIgnoreTabIndex, getFocusElementList } from \"carbon-components-angular/common\";\n\n/**\n * The current and previous position in the grid.\n *\n * `current` and `previous` are tuples that follow the `[row, column]` convention.\n */\nexport interface DataGridPosition {\n\tcurrent: [number, number];\n\tprevious: [number, number];\n}\n\n/**\n * `DataGridInteractionModel` provides centralized control over arbitrary 2d grids, following the w3 specs.\n *\n * Refs:\n * - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html\n * - https://www.w3.org/TR/wai-aria-practices/#grid\n *\n * Example usage (taken from `table.component`):\n```typescript\n// a standard HTML table\nconst table = this.elementRef.nativeElement.querySelector(\"table\") as HTMLTableElement;\n\n// `TableDomAdapter` implements `TableAdapter` and provides a consistent interface to query rows and columns in a table\nconst tableAdapter = new TableDomAdapter(table);\n\n// the keydown events that we'll use for keyboard navigation of the table\nconst keydownEventStream = fromEvent(table, \"keydown\");\n\n// the click events we'll use to ensure focus is updated correctly on click\nconst clickEventStream = fromEvent(table, \"click\");\n\n// the `DataGridInteractionModel` instance!\nthis.interactionModel = new DataGridInteractionModel(keydownEventStream, clickEventStream, tableAdapter);\n\n// subscribe to the combined position updates\nthis.interactionModel.position.subscribe(event => {\n\tconst [currentRow, currentColumn] = event.current;\n\tconst [previousRow, previousColumn] = event.previous;\n\n\t// query the TableAdapter for the cell at the current row and column ...\n\tconst currentElement = tableAdapter.getCell(currentRow, currentColumn);\n\t// ... and make it focusable it\n\tTable.setTabIndex(currentElement, 0);\n\n\t// if the model has just initialized don't focus or reset anything\n\tif (previousRow === -1 || previousColumn === -1) { return; }\n\n\t// query the TableAdapter for the cell at the previous row and column ...\n\tconst previousElement = tableAdapter.getCell(previousRow, previousColumn);\n\t// ... and make it unfocusable (now there is only a single focusable cell)\n\tTable.setTabIndex(previousElement, -1);\n\n\t// finally, focus the current cell (skipped during initilzation)\n\tTable.focus(currentElement);\n});\n```\n */\nexport class DataGridInteractionModel {\n\t/**\n\t * An Observable that provides an aggregated view of the `rowIndex` and `columnIndex` Observables\n\t */\n\treadonly position: Observable;\n\t/**\n\t * An Observable that provides the current and previous row indexes.\n\t */\n\treadonly rowIndex: Observable<{ current: number, previous: number }>;\n\t/**\n\t * An Observable that provides the current and previous column indexes.\n\t */\n\treadonly columnIndex: Observable<{ current: number, previous: number }>;\n\n\t/**\n\t * Internal subject to handle changes in row\n\t */\n\tprotected rowSubject = new BehaviorSubject({ current: 0, previous: -1 });\n\t/**\n\t * Internal subject to handle changes in column\n\t */\n\tprotected columnSubject = new BehaviorSubject({ current: 0, previous: -1 });\n\n\t/**\n\t * The latest value emitted by the rowSubject\n\t */\n\tprotected get currentRow() {\n\t\treturn this.rowSubject.getValue().current;\n\t}\n\n\t/**\n\t * The latest value emitted by the columnSubject\n\t */\n\tprotected get currentColumn() {\n\t\treturn this.columnSubject.getValue().current;\n\t}\n\n\t/**\n\t * The last column as reported by the adapter\n\t */\n\tprotected get lastColumn() {\n\t\treturn this.tableAdapter.lastColumnIndex;\n\t}\n\n\t/**\n\t * The last row as reported by the adapter\n\t */\n\tprotected get lastRow() {\n\t\treturn this.tableAdapter.lastRowIndex;\n\t}\n\n\t/**\n\t * `DataGridInteractionModel` requires knowledge of events, and a representation of your table/grid to be useful.\n\t *\n\t * @param keyboardEventStream an Observable of KeyboardEvents. Should be scoped to the table container.\n\t * @param clickEventStream an Observable of ClickEvents. should only include clicks that take action on items known by the TableAdapter\n\t * @param tableAdapter an instance of a concrete class that implements TableAdapter. The standard carbon table uses TableDomAdapter\n\t */\n\tconstructor(\n\t\tprotected keyboardEventStream: Observable,\n\t\tprotected clickEventStream: Observable,\n\t\tprotected tableAdapter: TableAdapter\n\t) {\n\t\tthis.rowIndex = this.rowSubject.asObservable();\n\t\tthis.columnIndex = this.columnSubject.asObservable();\n\t\tthis.position = combineLatest(this.rowIndex, this.columnIndex).pipe(map(positions => {\n\t\t\tconst [row, column] = positions;\n\t\t\treturn {\n\t\t\t\tcurrent: [row.current, column.current],\n\t\t\t\tprevious: [row.previous, column.previous]\n\t\t\t};\n\t\t})) as Observable;\n\t\tthis.keyboardEventStream.subscribe(this.handleKeyboardEvent.bind(this));\n\t\tthis.clickEventStream.subscribe(this.handleClickEvent.bind(this));\n\t}\n\n\t/**\n\t * Handles moving the position according to the w3 datagrid navigation specs\n\t *\n\t * Refs:\n\t * - https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html\n\t * - https://www.w3.org/TR/wai-aria-practices/#grid\n\t *\n\t * @param event the KeyboardEvent to handle\n\t */\n\thandleKeyboardEvent(event: KeyboardEvent) {\n\t\tconst currentCell = this.tableAdapter.getCell(this.currentRow, this.currentColumn);\n\t\tlet currentColumn = this.tableAdapter.findColumnIndex(currentCell);\n\t\tlet currentRow = this.tableAdapter.findRowIndex(currentCell);\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowRight\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// add the colspan since findColumnIndex will return the\n\t\t\t\t// first column containing the cell (of N columns it may span)\n\t\t\t\t// and we want to navigate to the next \"real\" column\n\t\t\t\tthis.goToColumn(currentColumn + currentCell.colSpan);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowLeft\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// we only ever need to subtract 1 from the column, since findColumnIndex returns the\n\t\t\t\t// first of N columns containing the cell\n\t\t\t\tthis.goToColumn(currentColumn - 1);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowDown\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.goToRow(currentRow + currentCell.rowSpan);\n\t\t\t\tbreak;\n\t\t\tcase \"ArrowUp\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.goToRow(currentRow - 1);\n\t\t\t\tbreak;\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (event.ctrlKey) {\n\t\t\t\t\tthis.goTo({row: 0, column: 0});\n\t\t\t\t} else {\n\t\t\t\t\tthis.goToColumn(0);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase \"End\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (event.ctrlKey) {\n\t\t\t\t\tthis.goTo({ row: this.lastRow, column: this.lastColumn });\n\t\t\t\t} else {\n\t\t\t\t\tthis.goToColumn(this.lastColumn);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/**\n\t * Handles moving the position to the clicked cell\n\t *\n\t * @param event the MouseEvent to handle\n\t */\n\thandleClickEvent(event: MouseEvent) {\n\t\tconst cell = (event.target as HTMLElement).closest(\"td, th\") as HTMLTableCellElement;\n\t\tconst [rowIndex, cellIndex] = this.tableAdapter.findIndex(cell);\n\t\tthis.goTo({ row: rowIndex, column: cellIndex });\n\t}\n\n\t/**\n\t * Jump to a specific column without changing the row\n\t *\n\t * @param index column to jump to\n\t */\n\tgoToColumn(index: number) {\n\t\tif (index > this.lastColumn || index < 0) { return; }\n\t\tthis.goTo({ row: this.currentRow, column: index});\n\t}\n\n\t/**\n\t * Jump to a specific row without changing the column\n\t *\n\t * @param index row to jump to\n\t */\n\tgoToRow(index: number) {\n\t\tif (index > this.lastRow || index < 0) { return; }\n\t\tthis.goTo({row: index, column: this.currentColumn});\n\t}\n\n\t/**\n\t * Jump to the specified row and column\n\t *\n\t * @param param0 an object that contains `row` and `column` properties\n\t */\n\tgoTo({row, column}) {\n\t\tthis.rowSubject.next({ current: row, previous: this.currentRow });\n\t\tthis.columnSubject.next({ current: column, previous: this.currentColumn });\n\t}\n\n\t/**\n\t * Convenience method to reset the tab indexes on a standard carbon table.\n\t * For custom tables you may want to reset the indexes manually and simply call `.reset()`\n\t */\n\tresetTabIndexes(newTabIndex = -1) {\n\t\tfor (let i = 0; i < this.tableAdapter.lastRowIndex; i++) {\n\t\t\tconst row = this.tableAdapter.getRow(i) as HTMLTableRowElement;\n\t\t\tfor (const cell of Array.from(row.cells)) {\n\t\t\t\tconst tabbableElements = getFocusElementList(cell, tabbableSelectorIgnoreTabIndex);\n\t\t\t\ttabbableElements.forEach((node: HTMLElement) => node.tabIndex = newTabIndex);\n\t\t\t\tcell.tabIndex = newTabIndex;\n\t\t\t}\n\t\t}\n\n\t\tthis.reset();\n\t}\n\n\t/**\n\t * Resets the models focus position\n\t */\n\treset() {\n\t\tthis.rowSubject.next({ current: 0, previous: -1 });\n\t\tthis.columnSubject.next({ current: 0, previous: -1 });\n\t}\n}\n","/**\n * An abstract class that represents a cell in a table\n */\nexport abstract class TableCellAdapter {\n\t/**\n\t * The index of the cell in the table\n\t */\n\tcellIndex: number;\n\t/**\n\t * The number of columns spanned by this cell\n\t */\n\tcolSpan: number;\n\t/**\n\t * The number of rows spanned by this cell\n\t */\n\trowSpan: number;\n}\n\n/**\n * An abstract class that represents a row in a table\n */\nexport abstract class TableRowAdapter {\n\t/**\n\t * The index of the row in the table\n\t */\n\trowIndex: number;\n\t/**\n\t * An array (or `HTMLCollection`) of `TableCellAdapter`s\n\t */\n\tcells: HTMLCollection | TableCellAdapter[];\n}\n\n/**\n * An abstract representation of a table that provides\n * a standard interface to query 2d tables for cell and row information.\n */\nexport abstract class TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex(): number { return; }\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex(): number { return; }\n\n\t/**\n\t * Returns a cell from the table\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): TableCellAdapter { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param column index of the column\n\t */\n\tgetColumn(column: number): TableCellAdapter[] { return; }\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): TableRowAdapter { return; }\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: TableCellAdapter): number { return; }\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: TableCellAdapter): [number, number] { return; }\n}\n\nenum TableDomSpanDirection {\n\tcolSpan = \"colSpan\",\n\trowSpan = \"rowSpan\"\n}\n\n/**\n * A concrete implementation of `TableAdapter`\n *\n * Provides standard and consistent access to table cells and rows\n */\nexport class TableDomAdapter implements TableAdapter {\n\t/**\n\t * The last accessible column in the table\n\t */\n\tpublic get lastColumnIndex() {\n\t\treturn this.getRealRowLength(this.tableElement.rows[0]);\n\t}\n\n\t/**\n\t * The last accessible row in the table\n\t */\n\tpublic get lastRowIndex() {\n\t\treturn this.tableElement.rows.length - 1;\n\t}\n\n\t/**\n\t * `TableDomAdapter` works on a normal HTML table structure.\n\t * Custom tables that don't follow the standard structure should use a custom implementation of `TableAdapter`.\n\t *\n\t * The standard structure allows us to directly query rows for cells and indexes - though we do have to handle colspans specially.\n\t *\n\t * @param tableElement the root HTML table element.\n\t */\n\tconstructor(public tableElement: HTMLTableElement) { }\n\n\t/**\n\t * Returns a cell from the table taking colspans in to account.\n\t *\n\t * @param row index of the row\n\t * @param column index of the column\n\t */\n\tgetCell(row: number, column: number): HTMLTableCellElement {\n\t\tconst col = this.getColumn(column);\n\n\t\treturn this.findCellInColumn(col, row).cell;\n\t}\n\n\t/**\n\t * Returns a column from the table, using the `id` and `headers` attributes\n\t *\n\t * See here for more detail these attributes: https://www.w3.org/TR/WCAG20-TECHS/H43.html\n\t *\n\t * @param column the index of the column\n\t */\n\tgetColumn(column: number): HTMLTableCellElement[] {\n\t\tconst firstHeader = Array.from(this.tableElement.rows[0].cells);\n\n\t\tconst { cell: header, realIndex: realColumnIndex } = this.findCellInRow(firstHeader, column);\n\n\t\tconst linkedCells: HTMLTableCellElement[] = [];\n\n\t\tfor (let i = 1; i < this.tableElement.rows.length; i++) {\n\t\t\tconst row = this.tableElement.rows[i];\n\t\t\t// query for any cells that are linked to the given header id\n\t\t\t// `~=` matches values in space separated lists - so `[headers~='foo']` would match `headers=\"foo bar\"` and `headers=\"foo\"`\n\t\t\t// but not `headers=\"bar\"` or `headers=\"bar baz\"`\n\t\t\tconst linkedRowCells: NodeListOf = row.querySelectorAll(`[headers~='${header.id}']`);\n\t\t\t// if we have more than one cell, get the one that is closest to the column\n\t\t\tif (linkedRowCells.length > 1) {\n\t\t\t\tconst { cell } = this.findCellInRow(Array.from(linkedRowCells), column - realColumnIndex);\n\t\t\t\tlinkedCells.push(cell);\n\t\t\t} else if (linkedRowCells[0]) {\n\t\t\t\tlinkedCells.push(linkedRowCells[0]);\n\t\t\t}\n\t\t}\n\n\t\t// return an empty array if we can't find any linked cells\n\t\t// returning anything else would be a lie\n\t\tif (!linkedCells) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn [header, ...linkedCells];\n\t}\n\n\t/**\n\t * Returns a row from the table\n\t *\n\t * @param row index of the row\n\t */\n\tgetRow(row: number): HTMLTableRowElement {\n\t\treturn this.tableElement.rows[row];\n\t}\n\n\t/**\n\t * Finds the column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindColumnIndex(cell: HTMLTableCellElement): number {\n\t\tconst row = this.getRow(this.findRowIndex(cell));\n\t\tif (!row) {\n\t\t\treturn;\n\t\t}\n\t\t// if the cell has linked headers we can do a more accurate lookup\n\t\tif (cell && cell.headers) {\n\t\t\tconst ids = cell.headers.split(\" \");\n\t\t\tconst headerRows = Array.from(this.tableElement.tHead.rows);\n\t\t\tconst indexes = [];\n\n\t\t\t// start from the last row and work up\n\t\t\tfor (const headerRow of headerRows.reverse()) {\n\t\t\t\tconst headerCells = Array.from(headerRow.cells);\n\t\t\t\tconst header = headerCells.find(headerCell => ids.includes(headerCell.id));\n\t\t\t\t// if we have a matching header, find it's index (adjusting for colspans)\n\t\t\t\tif (header) {\n\t\t\t\t\t// this is borrowed from below\n\t\t\t\t\tlet cellIndex = 0;\n\t\t\t\t\tfor (const c of headerCells) {\n\t\t\t\t\t\tif (c === header) { break; }\n\t\t\t\t\t\tcellIndex += c.colSpan;\n\t\t\t\t\t}\n\t\t\t\t\tindexes.push(cellIndex);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// sort the indexes largest to smallest to find the closest matching header index\n\t\t\tconst firstIndex = indexes.sort((a, b) => b - a)[0];\n\n\t\t\t// search the row for cells that share the header\n\t\t\tlet similarCells = [];\n\t\t\tfor (const id of ids) {\n\t\t\t\t// there's no selector that will match two space separated lists,\n\t\t\t\t// so we have to iterate through the ids and query the row for each\n\t\t\t\tconst rowCells = Array.from(row.querySelectorAll(`[headers~='${id}']`));\n\t\t\t\tfor (const rowCell of rowCells) {\n\t\t\t\t\t// only keep one set of cells\n\t\t\t\t\tif (!similarCells.includes(rowCell)) {\n\t\t\t\t\t\tsimilarCells.push(rowCell);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// DOM order is not preserved, so we have to sort the row\n\t\t\tsimilarCells = similarCells.sort((a: HTMLTableCellElement, b: HTMLTableCellElement) => a.cellIndex - b.cellIndex);\n\n\t\t\t// return the header index plus any adjustment within that headers column\n\t\t\treturn firstIndex + similarCells.indexOf(cell);\n\t\t}\n\n\t\t// fallback if the cell isn't linked to any headers\n\t\tlet cellIndex = 0;\n\t\tfor (const c of Array.from(row.cells)) {\n\t\t\tif (c === cell) { break; }\n\t\t\tcellIndex += c.colSpan;\n\t\t}\n\t\treturn cellIndex;\n\t}\n\n\t/**\n\t * Finds the row index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t */\n\tfindRowIndex(cell: HTMLTableCellElement): number {\n\t\tfor (const row of Array.from(this.tableElement.rows)) {\n\t\t\tif (row.contains(cell)) {\n\t\t\t\treturn row.rowIndex;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Finds the row and column index of a given cell\n\t *\n\t * @param cell the cell to search for\n\t * @returns a tuple that follows the `[row, column]` convention\n\t */\n\tfindIndex(cell: HTMLTableCellElement): [number, number] {\n\t\treturn [this.findRowIndex(cell), this.findColumnIndex(cell)];\n\t}\n\n\t/**\n\t * Helper function that returns the \"real\" length of a row.\n\t * Only accurate with regard to colspans (though that's sufficient for it's uses here)\n\t *\n\t * TODO: Take rowSpan into account\n\t *\n\t * @param row the row to get the length of\n\t */\n\tprotected getRealRowLength(row: HTMLTableRowElement): number {\n\t\t// start at -1 since the colspans will sum to 1 index greater than the total\n\t\treturn Array.from(row.cells).reduce((count, cell) => count + cell.colSpan, -1);\n\t}\n\n\t/**\n\t * Finds a cell and it's real index given an array of cells, a target index, and the spanning direction\n\t *\n\t * @param cells An array of cells to search\n\t * @param targetIndex The index we think the cell is located at\n\t * @param spanDirection The direction of the cell spans. Should be `\"colSpan\"` for a row and `\"rowSpan\"` for a column\n\t */\n\tprotected findCell(cells: HTMLTableCellElement[], targetIndex: number, spanDirection: TableDomSpanDirection) {\n\t\t// rows/cols can have fewer total cells than the actual table\n\t\t// the model pretends all rows/cols behave the same (with col/row spans > 1 being N cells long)\n\t\t// this maps that view to the HTML view (col/row spans > 1 are one element, so the array is shorter)\n\t\tlet realIndex = 0;\n\t\t// i is only used for iterating the cells\n\t\tfor (let i = 0; i < targetIndex;) {\n\t\t\t// skip the next N cells\n\t\t\ti += cells[realIndex][spanDirection];\n\t\t\t// don't bump realIndex if i now exceeds the cell we're shooting for\n\t\t\tif (i > targetIndex) { break; }\n\t\t\t// finally, increment realIndex (to keep it generally in step with i)\n\t\t\trealIndex++;\n\t\t}\n\n\t\treturn {\n\t\t\tcell: cells[realIndex],\n\t\t\trealIndex\n\t\t};\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a row of cells\n\t *\n\t * @param row the row of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInRow(row: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(row, index, TableDomSpanDirection.colSpan);\n\t}\n\n\t/**\n\t * Helper method around `findCell`, searches based on a column of cells\n\t *\n\t * @param col the column of elements to search\n\t * @param index the index of the element\n\t */\n\tprotected findCellInColumn(col: HTMLTableCellElement[], index: number) {\n\t\treturn this.findCell(col, index, TableDomSpanDirection.rowSpan);\n\t}\n}\n","import { Directive, HostBinding, Input } from \"@angular/core\";\nimport { TableRowSize } from \"./table.types\";\n\n@Directive({\n\tselector: \"[cdsTable], [ibmTable]\"\n})\nexport class TableDirective {\n\t@Input() @HostBinding(\"class.cds--data-table--sort\") sortable = true;\n\n\t@Input() @HostBinding(\"class.cds--data-table--no-border\") noBorder = true;\n\n\t@Input() @HostBinding(\"class.cds--data-table--zebra\") striped = false;\n\n\t@Input() @HostBinding(\"class.cds--skeleton\") skeleton = false;\n\n\t/**\n\t * Size of the table rows.\n\t */\n\t@Input() size: TableRowSize = \"md\";\n\n\t@HostBinding(\"class.cds--data-table\") tableClass = true;\n\n\t// Bind table size class\n\t@HostBinding(\"class.cds--data-table--xs\") get extraSmallSize() { return this.size === \"xs\"; }\n\t@HostBinding(\"class.cds--data-table--sm\") get smallSize() { return this.size === \"sm\"; }\n\t@HostBinding(\"class.cds--data-table--md\") get mediumSize() { return this.size === \"md\"; }\n\t@HostBinding(\"class.cds--data-table--lg\") get LargeSize() { return this.size === \"lg\"; }\n\t@HostBinding(\"class.cds--data-table--xl\") get extraLargeSize() { return this.size === \"xl\"; }\n\n}\n","import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsTableHeadCellLabel], [ibmTableHeadCellLabel]\"\n})\nexport class TableHeadCellLabel {\n\t@HostBinding(\"class.cds--table-header-label\") baseClass = true;\n}\n","import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tHostBinding,\n\tOnChanges\n} from \"@angular/core\";\nimport { Observable, OperatorFunction } from \"rxjs\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { map } from \"rxjs/operators\";\nimport { TableHeaderItem } from \"../table-header-item.class\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadCell], [ibmTableHeadCell]\",\n\ttemplate: `\n\t\t 0 && column.sortable\"\n\t\t\t[attr.aria-label]=\"(column.sorted && column.ascending ? getSortDescendingLabel() : getSortAscendingLabel()) | async\"\n\t\t\taria-live=\"polite\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--table-sort--active': column.sorted,\n\t\t\t\t'cds--table-sort--descending': column.ascending\n\t\t\t}\"\n\t\t\t(click)=\"onClick()\">\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t{{column.data}}\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t 0 && !column.sortable) || !sortable\">\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{{column.data}}\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TableHeadCell implements OnChanges {\n\t@Input() column: TableHeaderItem;\n\n\t@Input() skeleton = false;\n\n\t@Input() sortable = true;\n\n\t@Input()\n\tset sortDescendingLabel(value: string | Observable) {\n\t\tthis._sortDescendingLabel.override(value);\n\t}\n\n\tget sortDescendingLabel() {\n\t\treturn this._sortDescendingLabel.value;\n\t}\n\n\t@Input()\n\tset sortAscendingLabel(value: string | Observable) {\n\t\tthis._sortAscendingLabel.override(value);\n\t}\n\n\tget sortAscendingLabel() {\n\t\treturn this._sortAscendingLabel.value;\n\t}\n\n\t@Input()\n\tset filterTitle(value: string | Observable) {\n\t\tthis._filterTitle.override(value);\n\t}\n\n\tget filterTitle() {\n\t\treturn this._filterTitle.value;\n\t}\n\n\t/**\n\t * Notifies that the column should be sorted\n\t */\n\t@Output() sort = new EventEmitter();\n\n\t@HostBinding(\"class.thead_action\") theadAction = false;\n\n\tprotected _sortDescendingLabel = this.i18n.getOverridable(\"TABLE.SORT_DESCENDING\");\n\tprotected _sortAscendingLabel = this.i18n.getOverridable(\"TABLE.SORT_ASCENDING\");\n\tprotected _filterTitle = this.i18n.getOverridable(\"TABLE.FILTER\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tngOnChanges() {\n\t\t// Since it's not an input, and it touches the view, we're using `ngOnChanges`\n\t\t// `get`ters have caused issues in the past with the view updating outside of change detection\n\t\tthis.theadAction = !!this.column.filterTemplate || this.sort.observers.length > 0;\n\t}\n\n\tgetSortDescendingLabel(): Observable {\n\t\treturn this._sortDescendingLabel.subject.pipe(this.sortLabelMap());\n\t}\n\n\tgetSortAscendingLabel(): Observable {\n\t\treturn this._sortAscendingLabel.subject.pipe(this.sortLabelMap());\n\t}\n\n\tonClick() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.sort.emit();\n\t\t}\n\t}\n\n\tprotected sortLabelMap(): OperatorFunction {\n\t\treturn map((str: string) => {\n\t\t\tif (this.column.ariaSortLabel) {\n\t\t\t\treturn this.column.ariaSortLabel;\n\t\t\t}\n\t\t\tif (this.column.formatSortLabel) {\n\t\t\t\treturn this.column.formatSortLabel(str, this.column.ariaSortLabel);\n\t\t\t}\n\t\t\treturn `${this.column.data} - ${str}`;\n\t\t});\n\t}\n}\n","import {\n\tComponent,\n\tInput,\n\tOutput,\n\tHostBinding,\n\tEventEmitter\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadCheckbox], [ibmTableHeadCheckbox]\",\n\ttemplate: `\n\t\t\n\t\t\t\t{{getAriaLabel() | async}}\n\t\t\n\t`,\n\tstyles: [`\n :host { width: 10px; }\n `]\n})\nexport class TableHeadCheckbox {\n\tprivate static tableSelectAllCount = 0;\n\n\t@Input() checked = false;\n\n\t@Input() indeterminate = false;\n\n\t@Input() skeleton = false;\n\n\t@Input() name = `select-all-${TableHeadCheckbox.tableSelectAllCount++}`;\n\n\t@Input()\n\tset ariaLabel(value: string | Observable) {\n\t\tthis._ariaLabel.override(value);\n\t}\n\n\tget ariaLabel() {\n\t\treturn this._ariaLabel.value;\n\t}\n\n\t@Output() change = new EventEmitter();\n\n\t@HostBinding(\"class.cds--table-column-checkbox\") hostClass = true;\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.CHECKBOX_HEADER\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n","import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOutput\n} from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n@Component({\n\t// tslint:disable-next-line: component-selector\n\tselector: \"[cdsTableHeadExpand], [ibmTableHeadExpand]\",\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t`\n})\nexport class TableHeadExpand {\n\t@HostBinding(\"class.cds--table-expand\") hostClass = true;\n\n\t@Input() showExpandAllToggle = false;\n\n\t@Input() expanded = false;\n\n\t@Output() expandedChange = new EventEmitter();\n\n\t@HostBinding(\"attr.data-previous-value\") get previousValue() {\n\t\treturn this.expanded ? \"collapsed\" : null;\n\t}\n\n\tprotected _ariaLabel = this.i18n.getOverridable(\"TABLE.EXPAND_ALL_BUTTON\");\n\n\tconstructor(protected i18n: I18n) { }\n\n\tgetAriaLabel(): Observable {\n\t\treturn this._ariaLabel.subject;\n\t}\n}\n","import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tAfterViewInit\n} from \"@angular/core\";\n\nimport { TableModel } from \"../table-model.class\";\nimport { getScrollbarWidth } from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\nimport { TableRowSize } from \"../table.types\";\n\n/**\n * A subcomponent that creates the thead of the table\n *\n * ## Basic usage\n *\n * ```html\n * \t\n * ```\n */\n@Component({\n\t// tslint:disable-next-line:component-selector\n\tselector: \"[cdsTableHead], [ibmTableHead]\",\n\ttemplate: `\n\t\n\t\t