@scania/tegel 1.48.0 → 1.48.1

package/dist/collection/components/table/table-body-cell/table-body-cell.js

@@ -82,13 +82,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '2f095d2b2cf724d8ef18ffb895f327832ef5ce66', class: {
+        return (h(Host, { key: 'd16b67e516e23d4f1efee4d09dfc451f79af08b2', class: {
                 'tds-table__body-cell': true,
                 'tds-table__body-cell--hover': this.activeSorting,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
-            }, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: '85ffbf1e995c5e797971b97101d350b9e3bc3921' })));
+            } }, h("td", { key: '2ce3e0c0f219a4878deb118f2afa623d76c7cfbd', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: '5118a6568969761c1e4673ea0b2c1d947dc53164' }))));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -187,6 +187,44 @@ export class TdsTableBodyCell {
                 "setter": false,
                 "reflect": true,
                 "attribute": "text-align"
+            },
+            "colSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns the cell should span."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-span"
+            },
+            "rowSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of rows the cell should span."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-span"
             }
         };
     }

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -74,13 +74,13 @@ export class TdsTableBodyRow {
         }
     }
     render() {
-        return (h(Host, { key: '94bac5b3613998d805d62da4ce0ca9480e337fbc', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: 'de0e413cf92011d5b652d19512dd58c243fb40f2', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: 'cb823140e532475537b7f7e78ae667173fa49259', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'f4727dca32c80f8c0ec36995f0ac072fc7af1106', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '33046cf6051498b6b1b314f8d7dd380b4c2309d0' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '23fb993da5cac2a419719723d7a259460b179f55', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'eab391b07c02f9fa913022fc9c8ebef0dab16ce8', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '5cd67b73cc428535ede2cb934d6b3dc36630e36d' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css

@@ -16,10 +16,29 @@
 :host .tds-table__row--expanded {
   border-bottom: none;
 }
+:host .tds-table__row--selected {
+  background-color: var(--tds-table-body-row-background-selected);
+}
 :host .tds-table__row:hover,
 :host .tds-table__row-extend:hover {
   background-color: var(--tds-table-body-row-background-hover);
 }
+:host .tds-table__row--selected:hover {
+  background-color: var(--tds-table-body-row-background-selected-hover);
+}
+:host .tds-table__body-cell--checkbox {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+}
+:host .tds-form-label--table {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
 :host .tds-table__expand-control-container {
   display: flex;
   justify-content: center;
@@ -87,11 +106,17 @@
 :host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand {
   padding: 8px 16px 8px 66px;
 }
+:host(.tds-table__compact) .tds-form-label--table {
+  height: 32px;
+}
 
 :host(.tds-table__row--hidden) {
   display: none;
 }
 
-:host(.tds-table--divider) .tds-table__cell--expand {
+:host(.tds-table--divider) .tds-table__cell-expand {
+  border-right: 1px solid var(--tds-table-divider);
+}
+:host(.tds-table--divider) .tds-table__body-cell--checkbox {
   border-right: 1px solid var(--tds-table-divider);
 }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js

@@ -5,6 +5,7 @@ const relevantTableProps = [
     'compactDesign',
     'noMinWidth',
     'modeVariant',
+    'multiselect',
 ];
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the cells.
@@ -28,6 +29,10 @@ export class TdsTableBodyRowExpandable {
         this.autoCollapse = false;
         /** Aria label for the expand button, providing an accessible description */
         this.tdsAriaLabelExpandButton = '';
+        /** Marks the row as selected, used for multiselect table. */
+        this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
+        this.disabled = false;
         /** Sets isExpanded state to true or fals internally */
         this.isExpanded = false;
         this.tableId = '';
@@ -36,6 +41,7 @@ export class TdsTableBodyRowExpandable {
         this.compactDesign = false;
         this.noMinWidth = false;
         this.modeVariant = null;
+        this.multiselect = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -101,7 +107,15 @@ export class TdsTableBodyRowExpandable {
         else {
             const header = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
             if (header) {
-                this.columnsNumber = header.childElementCount + 1;
+                // Start with the number of data columns (header cells from slot)
+                let totalColumns = header.childElementCount;
+                // Add 1 for the expandable row control column
+                totalColumns += 1;
+                // Add 1 if multiselect is enabled (checkbox column)
+                if (this.multiselect) {
+                    totalColumns += 1;
+                }
+                this.columnsNumber = totalColumns;
             }
         }
     }
@@ -113,28 +127,38 @@ export class TdsTableBodyRowExpandable {
         this.isExpanded = event.currentTarget.checked === true;
         this.sendValue();
     }
+    async handleCheckboxChange(event) {
+        var _a;
+        this.selected = event.detail.checked;
+        this.tdsSelect.emit({
+            tableId: this.tableId,
+            checked: this.selected,
+            selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
+        });
+    }
     render() {
         var _a;
-        return (h(Host, { key: '9747b45c606d94f6a79e35afd1e126e0d4940761', class: {
+        return (h(Host, { key: '53c6c5c66dd79503113385dd2b70026ea160fbf6', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: 'c3eb7c452c55cd64393d4d0820983a450b3c83de', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: '6dc01208f1eb843e3e06c33f4e25913049957769', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: 'a269a53c209ac33f82475c92408a824194feea0d', class: {
+                'tds-table__row--selected': this.selected,
+            }, part: "row" }, this.multiselect && (h("td", { key: '5a71e2f9bff42312b3cd9b2d45718c8344be06fe', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '9d7c37bec627e917ac93a2d5ebcd2eb3633b5208', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("td", { key: '5dfa199437435c4dc1c847f19a1dd2aa97803639', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '3a32f175d6f584850e442a279818bbdec8fbc00a', class: "tds-table__expand-control-container" }, h("input", { key: '073584fdeda9b0aa6dc6fa51030ee84c1478f3a4', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'd3782b0bb66e7ac420c94eaa310a18ec97de34a8', class: "tds-expendable-row-icon" }, h("svg", { key: 'd25d24e492917ecea514da86a7e92238089bfe3c', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1849dbf3a843f1f98a415a0017ad32951e0af4ff', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: 'c6af8843f62b83e6e96e3ea65087c276c0fb6e4f' })), h("tr", { key: '12d8127b203fd91f1b0a767b47aa752d84016aed', class: {
+            } }, h("label", { key: '010aef1164845e706485d3e5770c83225b6f0c70', class: "tds-table__expand-control-container" }, h("input", { key: 'c27e847d9b855cb7a016236347c8af908f991f12', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'b0ba2cb10f89f3e81bad48f982d2f84d994d49c3', class: "tds-expendable-row-icon" }, h("svg", { key: 'a0d7f78a7a7da51d056ed22b6092e74715f506af', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '5dc808624d2fcff7b4b9dd83fc9ef2b2b00e2cea', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: 'c7e24da48dafb8ecd8d461a272897efa9723c634' })), h("tr", { key: '8b538e7208adf89505842965b969e0bcc393e1ab', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: '9bd6d1292ede611479fe3f59239ca0ae1257fddc', class: {
+            }, part: "expand-row" }, h("td", { key: 'b8cc7780fd35b1eb46718d1670f89b2c28c5e0fd', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: '6cfcd733564c5e6d1b55f6029e80e2b5713988d5', style: {
+            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: '877805be7aa699870575767188b63bf9b5eb4ffe', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: 'fa74913d8c68ad2fbfc359fe9d67f27b9b254d28', name: "expand-row" }))))));
+            } }, h("slot", { key: '0fcc6e24283b7c8e755e42fc16a6adccdd0193b9', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }
@@ -268,6 +292,46 @@ export class TdsTableBodyRowExpandable {
                 "reflect": true,
                 "attribute": "tds-aria-label-expand-button",
                 "defaultValue": "''"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as selected, used for multiselect table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as disabled, used for multiselect table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }
@@ -279,7 +343,8 @@ export class TdsTableBodyRowExpandable {
             "verticalDividers": {},
             "compactDesign": {},
             "noMinWidth": {},
-            "modeVariant": {}
+            "modeVariant": {},
+            "multiselect": {}
         };
     }
     static get events() {
@@ -316,6 +381,21 @@ export class TdsTableBodyRowExpandable {
                     "resolved": "{ rowId: string; isExpanded: boolean; tableId: string | undefined; }",
                     "references": {}
                 }
+            }, {
+                "method": "tdsSelect",
+                "name": "tdsSelect",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a row is selected/deselected."
+                },
+                "complexType": {
+                    "original": "{\n    tableId: string | undefined;\n    checked: boolean;\n    selectedRows: object[] | undefined;\n  }",
+                    "resolved": "{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/table/table-footer/table-footer.js

@@ -2,6 +2,8 @@ import { h, Host, } from "@stencil/core";
 const relevantTableProps = [
     'compactDesign',
     'horizontalScrollWidth',
+    'multiselect',
+    'expandableRows',
 ];
 function removeShakeAnimation(e) {
     e.target.classList.remove('tds-table__page-selector-input--shake');
@@ -24,6 +26,10 @@ export class TdsTableFooter {
         this.columnsNumber = 0;
         /* Sets the footer to use compact design. */
         this.compactDesign = false;
+        /* State to track if multiselect is enabled on parent table. */
+        this.multiselect = false;
+        /* State to track if expandableRows is enabled on parent table. */
+        this.expandableRows = false;
         this.lastCorrectValue = 1;
         this.tableId = '';
         this.horizontalScrollWidth = null;
@@ -84,6 +90,31 @@ export class TdsTableFooter {
             });
         }
     }
+    colsChanged(newValue) {
+        if (newValue !== null) {
+            this.columnsNumber = newValue;
+        }
+        else {
+            this.updateColumnsNumber();
+        }
+    }
+    updateColumnsNumber() {
+        var _a, _b, _c;
+        if (this.cols) {
+            return;
+        }
+        const numberOfColumns = (_c = (_b = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header')) === null || _b === void 0 ? void 0 : _b.childElementCount) !== null && _c !== void 0 ? _c : 0;
+        let totalColumns = numberOfColumns;
+        // Add 1 for multiselect checkbox column
+        if (this.multiselect) {
+            totalColumns += 1;
+        }
+        // Add 1 for expandable rows column
+        if (this.expandableRows) {
+            totalColumns += 1;
+        }
+        this.columnsNumber = totalColumns;
+    }
     connectedCallback() {
         var _a;
         this.tableEl = this.host.closest('tds-table');
@@ -102,7 +133,17 @@ export class TdsTableFooter {
             this.columnsNumber = this.cols;
         }
         else {
-            this.columnsNumber = numberOfColumns;
+            // Calculate total columns including multiselect and expandable columns
+            let totalColumns = numberOfColumns;
+            // Add 1 for multiselect checkbox column
+            if (this.multiselect) {
+                totalColumns += 1;
+            }
+            // Add 1 for expandable rows column
+            if (this.expandableRows) {
+                totalColumns += 1;
+            }
+            this.columnsNumber = totalColumns;
         }
     }
     /* Function to store last valid input */
@@ -138,16 +179,14 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: '96d07c2b5e5b667c809b949d68f65be571ad1235', class: {
+        return (h(Host, { key: '961b5b3b5aa0311a2cc962601bbde69cb892c0df', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '418f2868d0c4e5366f94d725b6cf3e7aa0346f27', class: "tds-table__footer-row" }, h("td", { key: '8734d546ea3cfba0738c4daf78242e4a5e5397ea', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'b348c2a48e321423523f1b2a46b916a90dc94889', class: "tds-table__pagination" }, h("div", { key: '5ddf22f56fda6e794e34b5e11cc0f84842c9efde', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '39c3a7bdc7627c7710735804a121165d0fb204c8', class: "rows-per-page" }, h("p", { key: '0e33895d223c3e456f7847137a2242170ebea58b' }, "Rows per page"), h("tds-dropdown", { key: 'efdaba5e2e40e0bb6eaee4b2fa3ac86a36dd99e7', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
-            return (h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), h("div", { key: 'aa4872b13712174bfa21c94b15b93816c713fd29', class: "tds-table__page-selector" }, h("input", { key: 'fa1964c83ec002ccc6e4061ae1f8596d9ee15836', ref: (element) => {
+            }, style: this.getStyles() }, h("tr", { key: 'a95c34f7248fe17ff7e6911cb75ac5f8a7e66397', class: "tds-table__footer-row" }, h("td", { key: '3fa687650250154d63515696845c77b25a99a637', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '8484735a6d4d8d805b1a532a9ee3f982ac91aff5', class: "tds-table__pagination" }, h("div", { key: '543cfb0c349fb2a7b4443d4dfadb9b3891864ebc', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '40ee62cc8374dc8113bed771a814289be7d978bd', class: "rows-per-page" }, h("p", { key: '0a1f178e952e55b250c5ad1e0b59f1f8d664a947' }, "Rows per page"), h("tds-dropdown", { key: 'c23f03459dd7bb4c90a646d61d604b1b9c7532aa', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: '2ba6b8e4a67f3d82980f48f8d858f9fe228ef04e', class: "tds-table__page-selector" }, h("input", { key: '45c5662f2c314d2616200f0faa10637cfadd8a0c', ref: (element) => {
                 if (element) {
                     this.inputElement = element;
                 }
-            }, class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'a8b07a6e86e18800f7681eca6377a722f12069ac', class: "tds-table__footer-text" }, "of ", h("span", { key: '17019da6fe48ec045f5d1335d8c08a273dc0ac6a' }, this.pages), " pages"), h("button", { key: 'daa1446d15681d297a024bfa8da1ec2173ed921c', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '6abd73717c6c232ef603f749f68da72600bf48e8', name: "skip_backwards", size: "20px" })), h("button", { key: '1ea33dbc2d1bcdb0b3613a312a43997bfbc39a55', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '66c0d727d030b343d387b293f7cef4773f54e6b1', name: "chevron_left", size: "20px" })), h("button", { key: '05f18129f73975b81f252721b0f33686e32b8211', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '120e02ba680a6dad5cdfaed8002467d8f09565ad', name: "chevron_right", size: "20px" })), h("button", { key: '58e65e438020594246c0f64fc06c751b13879ee3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '9ea98a3a7f40a9051eb46e300e5d5128dc01a95c', name: "skip_forward", size: "20px" })))))))));
+            }, class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'acf03cce754c2e2992af498855a8e65370f80c0e', class: "tds-table__footer-text" }, "of ", h("span", { key: '9fb1b364868e11ae9feb3cd560f17973a36f12bd' }, this.pages), " pages"), h("button", { key: 'd0945e0f2dbd43fb1c433388b14c517d94da4d95', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '8c2c3b150d61e4db7dcbf7558646be0f2b90fe84', name: "skip_backwards", size: "20px" })), h("button", { key: '7df941515765b780c4c72c52b0842c719b88ff2d', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'b8af8f6c3eb7680169764124ade9f6f56899b83d', name: "chevron_left", size: "20px" })), h("button", { key: 'd4cfa0117ef5bfbda435584a505d330d5bfb86a3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'e1fa66d3959ed648952b0fd170b00f43db23385f', name: "chevron_right", size: "20px" })), h("button", { key: 'e8290d680d8ac50cf61089813b94fefa6682b2d1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '3e26941199388b86bb0069967851d74921300950', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -287,6 +326,8 @@ export class TdsTableFooter {
         return {
             "columnsNumber": {},
             "compactDesign": {},
+            "multiselect": {},
+            "expandableRows": {},
             "lastCorrectValue": {},
             "tableId": {},
             "horizontalScrollWidth": {},
@@ -312,6 +353,18 @@ export class TdsTableFooter {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "cols",
+                "methodName": "colsChanged"
+            }, {
+                "propName": "multiselect",
+                "methodName": "updateColumnsNumber"
+            }, {
+                "propName": "expandableRows",
+                "methodName": "updateColumnsNumber"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "internalTdsTablePropChange",

package/dist/collection/components/table/table-header/table-header.css

@@ -49,9 +49,6 @@
 :host .tds-table__expand-control-container .tds-expandable-row-icon--opened {
   transform: rotate(180deg);
 }
-:host ::slotted(tds-header-cell:hover) {
-  background-color: var(--tds-table-header-background-hover);
-}
 
 :host(.tds-table--compact) .tds-table__header-cell--checkbox {
   height: 32px;

package/dist/collection/components/table/table-header/table-header.js

@@ -90,11 +90,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: 'd223210726dcf021431d5dbaae0339f46c948d01', class: {
+        return (h(Host, { key: '88b6399e20ad62915e2fc6b7dc77f0274bcc4c53', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'e0378b5a3843b17a322b41a6062edfa44a46fc95' }, this.multiselect && (h("th", { key: '9641cb2e3ee11abb9cf30a7592c0b6d00f5f7575', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a0a02dad1e01d7ffaed5a8069dcd885021076e51', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '5ed55d728588753457e279b955f1eba78b6dc311', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '7a5451320a3909e333bdbc21c2f748f95eafef74', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '841f44149457dfe9f5a9e9d09bdddcd8cd443646' }))));
+            } }, h("tr", { key: '39f977fed7af33525ade2bc1ba56d90689bd95f2' }, this.multiselect && (h("th", { key: '94fdaf3504f4f8a30cc201fce98f094a70936dbb', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '6e614faf8610379510fe440777a20083cb29f818', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '59732675c10272928260a88bcdf7e01ddd5cbc0c', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'e359230499f01aed71f6c9c7dc929ebeb95bcde4', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '8d359504221abdb767a8334d2c7ef6d89091f746' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header-cell/table-header-cell.css

@@ -1,8 +1,11 @@
-:host(.tds-table__header-cell) {
+:host {
+  display: contents;
+}
+
+:host(.tds-table__header-cell) th {
   box-sizing: border-box;
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
-  display: table-cell;
   text-align: left;
   color: var(--tds-table-color);
   background-color: var(--tds-table-header-background);
@@ -15,18 +18,22 @@
   overflow: hidden;
   transition: background-color 200ms ease;
 }
-:host(.tds-table__header-cell) * {
+:host(.tds-table__header-cell) th * {
   box-sizing: border-box;
 }
-:host(.tds-table__header-cell) .tds-table__header-text {
+:host(.tds-table__header-cell) th .tds-table__header-text {
   padding: 8px 16px;
   margin: 0;
 }
-:host(.tds-table__header-cell) .tds-table__header-text-no-padding {
+:host(.tds-table__header-cell) th .tds-table__header-text-no-padding {
   padding: 0;
 }
 
-:host(.tds-table__header-cell--sortable) .tds-table__header-button {
+:host(.tds-table__header-cell) th:hover {
+  background-color: var(--tds-table-header-background-hover);
+}
+
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -40,20 +47,20 @@
   cursor: pointer;
   transition: background-color 200ms ease;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:focus {
   outline: 2px solid var(--tds-table-header-btn-focus);
   outline-offset: -2px;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:focus .tds-table__header-button-icon {
   opacity: 1;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button .tds-table__header-button-text {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   text-align: left;
   color: var(--tds-table-header-btn-color);
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button .tds-table__header-button-icon {
   /* not to shrink on lot of text */
   flex: 0 0 16px;
   height: 16px;
@@ -63,67 +70,67 @@
   transition: opacity 200ms ease-in, transform 200ms ease;
   color: var(--tds-table-color);
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:hover .tds-table__header-button-icon {
   opacity: 1;
 }
 
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button {
   background-color: var(--tds-table-header-btn-background);
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button:hover {
   background-color: var(--tds-table-header-btn-background-hover);
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon {
   opacity: 1;
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon--rotate {
   transform: rotate(180deg);
 }
 
-:host(.tds-table--compact) {
+:host(.tds-table--compact) th {
   height: 33px;
 }
 
-:host(.tds-table--divider) {
+:host(.tds-table--divider) th {
   border-right: 1px solid var(--tds-table-divider);
 }
 
-:host(.tds-table--divider:last-of-type) {
+:host(.tds-table--divider:last-of-type) th {
   border-right: none;
 }
 
-:host(.tds-table--no-min-width) {
+:host(.tds-table--no-min-width) th {
   min-width: unset;
 }
 
-:host(.tds-table--no-padding) {
+:host(.tds-table--no-padding) th {
   height: unset;
 }
 
-:host(.tds-table__header-cell:first-of-type) {
+:host(.tds-table__header-cell:first-of-type) th {
   border-top-left-radius: 4px;
 }
 
-:host(.tds-table__header-cell:last-of-type) {
+:host(.tds-table__header-cell:last-of-type) th {
   border-top-right-radius: 4px;
 }
 
-:host(.tds-table--extra-column:first-of-type) {
+:host(.tds-table--extra-column:first-of-type) th {
   border-top-left-radius: 0;
 }
 
-:host(.tds-table--toolbar-available) {
+:host(.tds-table--toolbar-available) th {
   border-radius: 0;
 }
 
-:host(.tds-table--extra-column.tds-table--toolbar-available) {
+:host(.tds-table--extra-column.tds-table--toolbar-available) th {
   border-radius: 0;
 }
 
-:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type) {
+:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type) th {
   border-top-left-radius: 0;
 }
 
-:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type) {
+:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type) th {
   border-top-right-radius: 0;
 }