@scania/tegel 1.48.0 → 1.48.1

package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js

@@ -3,19 +3,21 @@
 var index = require('./index-DGsdvbvx.js');
 var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
 
-const tableBodyRowExpandableCss = () => `:host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}`;
+const tableBodyRowExpandableCss = () => `:host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}: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;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}: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{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)}`;
 
 const relevantTableProps = [
     'verticalDividers',
     'compactDesign',
     'noMinWidth',
     'modeVariant',
+    'multiselect',
 ];
 const TdsTableBodyRowExpandable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.internalTdsRowExpanded = index.createEvent(this, "internalTdsRowExpanded", 6);
         this.tdsChange = index.createEvent(this, "tdsChange", 6);
+        this.tdsSelect = index.createEvent(this, "tdsSelect", 6);
         /** In case that automatic count of columns does not work, user can manually set this one.
          *  Take in mind that expandable control is column too */
         this.colSpan = null;
@@ -28,6 +30,10 @@ const TdsTableBodyRowExpandable = class {
         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 +42,7 @@ const TdsTableBodyRowExpandable = class {
         this.compactDesign = false;
         this.noMinWidth = false;
         this.modeVariant = null;
+        this.multiselect = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -101,7 +108,15 @@ const TdsTableBodyRowExpandable = class {
         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 +128,38 @@ const TdsTableBodyRowExpandable = class {
         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 (index.h(index.Host, { key: '9747b45c606d94f6a79e35afd1e126e0d4940761', class: {
+        return (index.h(index.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,
-            } }, index.h("tr", { key: 'c3eb7c452c55cd64393d4d0820983a450b3c83de', id: `expandable-content-${this.rowId}`, class: {
+            } }, index.h("tr", { key: '6dc01208f1eb843e3e06c33f4e25913049957769', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, index.h("td", { key: 'a269a53c209ac33f82475c92408a824194feea0d', class: {
+                'tds-table__row--selected': this.selected,
+            }, part: "row" }, this.multiselect && (index.h("td", { key: '5a71e2f9bff42312b3cd9b2d45718c8344be06fe', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '9d7c37bec627e917ac93a2d5ebcd2eb3633b5208', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("td", { key: '5dfa199437435c4dc1c847f19a1dd2aa97803639', class: {
                 'tds-table__cell-expand': true,
-            } }, index.h("label", { key: '3a32f175d6f584850e442a279818bbdec8fbc00a', class: "tds-table__expand-control-container" }, index.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 }), index.h("span", { key: 'd3782b0bb66e7ac420c94eaa310a18ec97de34a8', class: "tds-expendable-row-icon" }, index.h("svg", { key: 'd25d24e492917ecea514da86a7e92238089bfe3c', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.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" }))))), index.h("slot", { key: 'c6af8843f62b83e6e96e3ea65087c276c0fb6e4f' })), index.h("tr", { key: '12d8127b203fd91f1b0a767b47aa752d84016aed', class: {
+            } }, index.h("label", { key: '010aef1164845e706485d3e5770c83225b6f0c70', class: "tds-table__expand-control-container" }, index.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 }), index.h("span", { key: 'b0ba2cb10f89f3e81bad48f982d2f84d994d49c3', class: "tds-expendable-row-icon" }, index.h("svg", { key: 'a0d7f78a7a7da51d056ed22b6092e74715f506af', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.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" }))))), index.h("slot", { key: 'c7e24da48dafb8ecd8d461a272897efa9723c634' })), index.h("tr", { key: '8b538e7208adf89505842965b969e0bcc393e1ab', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, index.h("td", { key: '9bd6d1292ede611479fe3f59239ca0ae1257fddc', class: {
+            }, part: "expand-row" }, index.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 }, index.h("div", { key: '6cfcd733564c5e6d1b55f6029e80e2b5713988d5', style: {
+            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, index.h("div", { key: '877805be7aa699870575767188b63bf9b5eb4ffe', style: {
                 overflow: this.overflow,
-            } }, index.h("slot", { key: 'fa74913d8c68ad2fbfc359fe9d67f27b9b254d28', name: "expand-row" }))))));
+            } }, index.h("slot", { key: '0fcc6e24283b7c8e755e42fc16a6adccdd0193b9', name: "expand-row" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/tds-table-body-row.cjs.entry.js

@@ -79,13 +79,13 @@ const TdsTableBodyRow = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '94bac5b3613998d805d62da4ce0ca9480e337fbc', tabindex: this.clickable ? '0' : null, class: {
+        return (index.h(index.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 && (index.h("td", { key: 'cb823140e532475537b7f7e78ae667173fa49259', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: 'f4727dca32c80f8c0ec36995f0ac072fc7af1106', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("slot", { key: '33046cf6051498b6b1b314f8d7dd380b4c2309d0' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (index.h("td", { key: '23fb993da5cac2a419719723d7a259460b179f55', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: 'eab391b07c02f9fa913022fc9c8ebef0dab16ce8', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("slot", { key: '5cd67b73cc428535ede2cb934d6b3dc36630e36d' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-table-body.cjs.entry.js

@@ -67,12 +67,12 @@ const TdsTableBody = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '38f8bf195ef802dbf2ee50e5ea6eb1ecc6d35549', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (index.h(index.Host, { key: 'd61524e078103156a13685d1071258a674767f5f', "data-selected-rows": this.multiselectArrayJSON, class: {
                 'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
                 'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
                 'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
                 'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
-            } }, index.h("slot", { key: '30787d97aa3a0f2a1f447d7ebc5434b6345fd7c3' })));
+            } }, index.h("slot", { key: '2e7d10195e21f906269ae74f262debc2d3b4f38b' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-table-footer.cjs.entry.js

@@ -7,6 +7,8 @@ const tableFooterCss = () => `:host{box-sizing:border-box;display:table-footer-g
 const relevantTableProps = [
     'compactDesign',
     'horizontalScrollWidth',
+    'multiselect',
+    'expandableRows',
 ];
 function removeShakeAnimation(e) {
     e.target.classList.remove('tds-table__page-selector-input--shake');
@@ -31,6 +33,10 @@ const TdsTableFooter = class {
         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;
@@ -91,6 +97,31 @@ const TdsTableFooter = class {
             });
         }
     }
+    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');
@@ -109,7 +140,17 @@ const TdsTableFooter = class {
             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 */
@@ -145,18 +186,27 @@ const TdsTableFooter = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '96d07c2b5e5b667c809b949d68f65be571ad1235', class: {
+        return (index.h(index.Host, { key: '961b5b3b5aa0311a2cc962601bbde69cb892c0df', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, index.h("tr", { key: '418f2868d0c4e5366f94d725b6cf3e7aa0346f27', class: "tds-table__footer-row" }, index.h("td", { key: '8734d546ea3cfba0738c4daf78242e4a5e5397ea', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (index.h("div", { key: 'b348c2a48e321423523f1b2a46b916a90dc94889', class: "tds-table__pagination" }, index.h("div", { key: '5ddf22f56fda6e794e34b5e11cc0f84842c9efde', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("div", { key: '39c3a7bdc7627c7710735804a121165d0fb204c8', class: "rows-per-page" }, index.h("p", { key: '0e33895d223c3e456f7847137a2242170ebea58b' }, "Rows per page"), index.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 (index.h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), index.h("div", { key: 'aa4872b13712174bfa21c94b15b93816c713fd29', class: "tds-table__page-selector" }, index.h("input", { key: 'fa1964c83ec002ccc6e4061ae1f8596d9ee15836', ref: (element) => {
+            }, style: this.getStyles() }, index.h("tr", { key: 'a95c34f7248fe17ff7e6911cb75ac5f8a7e66397', class: "tds-table__footer-row" }, index.h("td", { key: '3fa687650250154d63515696845c77b25a99a637', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (index.h("div", { key: '8484735a6d4d8d805b1a532a9ee3f982ac91aff5', class: "tds-table__pagination" }, index.h("div", { key: '543cfb0c349fb2a7b4443d4dfadb9b3891864ebc', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("div", { key: '40ee62cc8374dc8113bed771a814289be7d978bd', class: "rows-per-page" }, index.h("p", { key: '0a1f178e952e55b250c5ad1e0b59f1f8d664a947' }, "Rows per page"), index.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) => (index.h("tds-dropdown-option", { value: `${value}` }, value))))))), index.h("div", { key: '2ba6b8e4a67f3d82980f48f8d858f9fe228ef04e', class: "tds-table__page-selector" }, index.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 }), index.h("p", { key: 'a8b07a6e86e18800f7681eca6377a722f12069ac', class: "tds-table__footer-text" }, "of ", index.h("span", { key: '17019da6fe48ec045f5d1335d8c08a273dc0ac6a' }, this.pages), " pages"), index.h("button", { key: 'daa1446d15681d297a024bfa8da1ec2173ed921c', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, index.h("tds-icon", { key: '6abd73717c6c232ef603f749f68da72600bf48e8', name: "skip_backwards", size: "20px" })), index.h("button", { key: '1ea33dbc2d1bcdb0b3613a312a43997bfbc39a55', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, index.h("tds-icon", { key: '66c0d727d030b343d387b293f7cef4773f54e6b1', name: "chevron_left", size: "20px" })), index.h("button", { key: '05f18129f73975b81f252721b0f33686e32b8211', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, index.h("tds-icon", { key: '120e02ba680a6dad5cdfaed8002467d8f09565ad', name: "chevron_right", size: "20px" })), index.h("button", { key: '58e65e438020594246c0f64fc06c751b13879ee3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, index.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 }), index.h("p", { key: 'acf03cce754c2e2992af498855a8e65370f80c0e', class: "tds-table__footer-text" }, "of ", index.h("span", { key: '9fb1b364868e11ae9feb3cd560f17973a36f12bd' }, this.pages), " pages"), index.h("button", { key: 'd0945e0f2dbd43fb1c433388b14c517d94da4d95', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, index.h("tds-icon", { key: '8c2c3b150d61e4db7dcbf7558646be0f2b90fe84', name: "skip_backwards", size: "20px" })), index.h("button", { key: '7df941515765b780c4c72c52b0842c719b88ff2d', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, index.h("tds-icon", { key: 'b8af8f6c3eb7680169764124ade9f6f56899b83d', name: "chevron_left", size: "20px" })), index.h("button", { key: 'd4cfa0117ef5bfbda435584a505d330d5bfb86a3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, index.h("tds-icon", { key: 'e1fa66d3959ed648952b0fd170b00f43db23385f', name: "chevron_right", size: "20px" })), index.h("button", { key: 'e8290d680d8ac50cf61089813b94fefa6682b2d1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, index.h("tds-icon", { key: '3e26941199388b86bb0069967851d74921300950', name: "skip_forward", size: "20px" })))))))));
     }
     get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "cols": [{
+                "colsChanged": 0
+            }],
+        "multiselect": [{
+                "updateColumnsNumber": 0
+            }],
+        "expandableRows": [{
+                "updateColumnsNumber": 0
+            }]
+    }; }
 };
 TdsTableFooter.style = tableFooterCss();
 

package/dist/cjs/tds-table-header-input-wrapper.cjs.entry.js

@@ -70,7 +70,7 @@ const TdsTableHeaderInputWrapper = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '76de40e0a578e0592d9c85d278d65187d84d7573', class: {
+        return (index.h(index.Host, { key: '4528be1b81397ac403bb7ba6cd274f26e1a6aff3', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

package/dist/cjs/tds-table-header.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-DGsdvbvx.js');
 
-const tableHeaderCss = () => `:host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{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);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}: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;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}: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}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}`;
+const tableHeaderCss = () => `:host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{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);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}: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;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}`;
 
 const relevantTableProps = [
     'multiselect',
@@ -94,11 +94,11 @@ const TdsTableHeaderRow = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'd223210726dcf021431d5dbaae0339f46c948d01', class: {
+        return (index.h(index.Host, { key: '88b6399e20ad62915e2fc6b7dc77f0274bcc4c53', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, index.h("tr", { key: 'e0378b5a3843b17a322b41a6062edfa44a46fc95' }, this.multiselect && (index.h("th", { key: '9641cb2e3ee11abb9cf30a7592c0b6d00f5f7575', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { key: 'a0a02dad1e01d7ffaed5a8069dcd885021076e51', class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '5ed55d728588753457e279b955f1eba78b6dc311', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { key: '7a5451320a3909e333bdbc21c2f748f95eafef74', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", { key: '841f44149457dfe9f5a9e9d09bdddcd8cd443646' }))));
+            } }, index.h("tr", { key: '39f977fed7af33525ade2bc1ba56d90689bd95f2' }, this.multiselect && (index.h("th", { key: '94fdaf3504f4f8a30cc201fce98f094a70936dbb', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { key: '6e614faf8610379510fe440777a20083cb29f818', class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '59732675c10272928260a88bcdf7e01ddd5cbc0c', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { key: 'e359230499f01aed71f6c9c7dc929ebeb95bcde4', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", { key: '8d359504221abdb767a8334d2c7ef6d89091f746' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-table-toolbar.cjs.entry.js

@@ -76,10 +76,10 @@ const TdsTableToolbar = class {
         return styles;
     }
     render() {
-        return (index.h(index.Host, { key: '37a65522a8efe0d073906a1c0ad59bc0574faa0c', class: {
+        return (index.h(index.Host, { key: 'be05d6c6aea404550a6717e89d10b8927e135ff1', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, index.h("div", { key: 'f4116716bd302f31f5c5a1c6344cbd263f20aadb', class: "tds-table__upper-bar-flex" }, index.h("div", { key: '7c1088b56cd537ba8d6734bfdd8a87604c0038c3', class: "tds-table__actionbar-left" }, this.tableTitle && (index.h("caption", { key: 'aab5ff50d91410486069f9a734fd74606674819b', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), index.h("slot", { key: '2e7f6fdbe8865712cba24e3b4a6e5833dd684ef0', name: "start" })), index.h("div", { key: '1d78a673fc3d4af7955cfb9ee00ff4d2265b73e9', class: "tds-table__actionbar" }, this.filter && (index.h("div", { key: '6fcef1537fb441d8e835d6d6978a2ca8ae107eef', class: "tds-table__searchbar" }, index.h("input", { key: 'd74bd73c0b0a969d69ea6d5ac142215466ab3add', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), index.h("span", { key: '6b97b5d9b0ff3bb5b17f228d9786a64b1ea1ebe4', class: "tds-table__searchbar-icon" }, index.h("tds-icon", { key: '268d432c7c1ed126e2b0186e72ffd4fa53f33d3a', name: "search", size: "20px" })))), index.h("slot", { key: 'ef138ddefb88afc9967230c39600538a9d112dbb', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, index.h("div", { key: '7a352d94ee0b3d66cb5aff378bbaa50ab7cf7570', class: "tds-table__upper-bar-flex" }, index.h("div", { key: '0d5e20bcf75ee696d3fb6b9aabbe81e4d06caca3', class: "tds-table__actionbar-left" }, this.tableTitle && (index.h("caption", { key: '4fbd20e21eed929f095ed9ccc7b0976745a44d5c', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), index.h("slot", { key: '1f27b7ee7619d5fa0f3d7955d8389fd0a6ad240e', name: "start" })), index.h("div", { key: 'e1834ffef99023a09055afceabb3881b8dc9282e', class: "tds-table__actionbar" }, this.filter && (index.h("div", { key: 'b19d36b835ae78223f7aff455b7b737c9bd7e8b1', class: "tds-table__searchbar" }, index.h("input", { key: '0dc7030b377d68a4f38af12938a775f56a66f916', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), index.h("span", { key: '78ba2ad22e558359f43e6a3962df1cd62f5df087', class: "tds-table__searchbar-icon" }, index.h("tds-icon", { key: 'ccb72495379cf0bfed59263efc3c36bc9d004b55', name: "search", size: "20px" })))), index.h("slot", { key: 'baefd115b4f5b42a203698afdc9ce7b6d3a28d89', name: "end" })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-table.cjs.entry.js

@@ -48,10 +48,13 @@ const TdsTable = class {
     }
     /** Returns all selected rows data. */
     async getSelectedRows() {
-        var _a;
+        var _a, _b;
         let selectedRowsData = [];
         const tableBody = this.host.querySelector('tds-table-body');
-        const selectedRows = Array.from((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.querySelectorAll('tds-table-body-row')) !== null && _a !== void 0 ? _a : []).filter((element) => element.selected);
+        // Get both regular rows and expandable rows
+        const regularRows = Array.from((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.querySelectorAll('tds-table-body-row')) !== null && _a !== void 0 ? _a : []).filter((element) => element.selected);
+        const expandableRows = Array.from((_b = tableBody === null || tableBody === void 0 ? void 0 : tableBody.querySelectorAll('tds-table-body-row-expandable')) !== null && _b !== void 0 ? _b : []).filter((element) => element.selected);
+        const selectedRows = [...regularRows, ...expandableRows];
         selectedRows.forEach((row) => {
             let selectedRow = [];
             const rowCells = Array.from(row.getElementsByTagName('tds-body-cell'));
@@ -110,11 +113,11 @@ const TdsTable = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2518c49a6d15147aed6989edfbd4cd658ac2219a', class: {
+        return (index.h(index.Host, { key: '677bf0b8c1df0154c90438ad8af1c947b701a1f8', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, index.h("table", { key: '1a845328df98203bd3b4bc3c058310c75ebd83a6', style: this.getStyles(), class: {
+            } }, index.h("table", { key: '673a4b1bae0b0430760697b0312611d0a91421bf', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -125,7 +128,7 @@ const TdsTable = class {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, index.h("slot", { key: 'ded1d53ea8e07514e45797c0feffa83f58cce6b4' }))));
+            } }, index.h("slot", { key: '218dfb52cd9498b0c72839dd6d0c2f4bb71a89cb' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/tds-tag.cjs.entry.js

@@ -17,9 +17,9 @@ const TdsTag = class {
         const hasPrefixSlot = hasSlot.hasSlot('prefix', this.host);
         const getTagClasses = () => ({
             [`${this.size.toLowerCase()}`]: true,
-            [`${this.variant.toLowerCase()}`]: true,
+            [this.variant.toLowerCase()]: true,
         });
-        return (index.h(index.Host, { key: 'f2f854a15358d98bc4c55b093e243cc07cc8e439', class: getTagClasses() }, index.h("div", { key: 'a9b74511347d721ae769d42e4b0edb5ac9acdf85', class: "tds-tag__content" }, hasPrefixSlot && index.h("slot", { key: '95b1acec855e8e0caeadc3458222bf6a91795704', name: "prefix" }), index.h("span", { key: 'e40a01fda9aa32ae42032656ebf11375b45f9183' }, this.text))));
+        return (index.h(index.Host, { key: '2521098fe251ec50aee644245e26ab39b5ef7109', class: getTagClasses() }, index.h("div", { key: '5b4964c3589f3a43d7751198a79a514d55e04ac5', class: "tds-tag__content" }, hasPrefixSlot && index.h("slot", { key: '241aa451188336040446248322c3a1560b69cd20', name: "prefix" }), index.h("span", { key: '9bea95c3f292ef6c4767ba9461f13b47fc5b2a50' }, this.text))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-text-field.cjs.entry.js

@@ -117,7 +117,7 @@ const TdsTextField = class {
         var _a, _b, _c, _d;
         const usesPrefixSlot = hasSlot.hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot.hasSlot('suffix', this.host);
-        return (index.h("div", { key: '362cc8ca714fab4d75f8b594494413ce8b9ce210', class: {
+        return (index.h("div", { key: 'fc3f2e8ac55bbf7d58853eab5219aea93f7c9ab9', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -135,12 +135,12 @@ const TdsTextField = class {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (index.h("div", { key: 'ace1a48203813254c9d316b78723bb89d4aa5f06', class: "text-field-label-outside" }, index.h("label", { key: '3fd1cab7e1862cd718d3e54ae5ff89b227e53419', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), index.h("div", { key: '6250d6c3318b7ce36156304e8e7d780f91a3821e', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (index.h("div", { key: 'a891ed40d4d99129f126054fd79ce6c12d60b7f4', class: {
+            } }, this.labelPosition === 'outside' && (index.h("div", { key: '54b1ec0d30841b9dee730a5da4d95f7c2ec513a7', class: "text-field-label-outside" }, index.h("label", { key: '96ac690b7f5265d96c24e52aa895b92bd5588656', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), index.h("div", { key: 'ff11e245ef294a31ca2699fe2054059a702031ec', onClick: () => { var _a; return (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus(); }, class: "text-field-container" }, usesPrefixSlot && (index.h("div", { key: '3132c1999e07ce858f54b10b6340541c40c3e02e', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, index.h("slot", { key: '12ba7d529a5b5402f55d232697fd7db6a9efcfa2', name: "prefix" }))), index.h("div", { key: 'c191e5733ddfa074915a9ba2fbb1f99784334ca6', class: "text-field-input-container" }, index.h("input", { key: '692af173c615cddc90dd3306b993f216ca6eedee', ref: (inputEl) => {
+            } }, index.h("slot", { key: '049997c0ac032385aa50dc13d33a63bbadcdf049', name: "prefix" }))), index.h("div", { key: '99cbbffbb290cf35caee77163f48fed58c8d6ddb', class: "text-field-input-container" }, index.h("input", { key: '73d21ee3ed1f0cc8877e5a0a6b683c4e331b22b1', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -156,13 +156,13 @@ const TdsTextField = class {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-invalid": getAriaInvalid.getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (index.h("label", { key: 'bb62115ec19d0b6cfb499f3928bc39f77e510bbb', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (index.h("div", { key: '2125a08f72b015aa35bb66586d18d10c234bb212', class: {
+            }, "aria-invalid": getAriaInvalid.getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (index.h("label", { key: 'ad1c5bcdd51ff49e07602421f4e8f368160cc7b2', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (index.h("div", { key: '52ef806d5f168301485834bd95800941b91a7bd5', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, index.h("slot", { key: 'debdf5549b04c05a65913c8cea4723b5287cdbc8', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (index.h("span", { key: '22153b085a22b54a48610d965dbb1a571985e987', class: "text-field-icon__readonly" }, index.h("tds-tooltip", { key: '3a49b98a5ab420f58a834f871d40bdf98da5a8c7', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: '4be0d74de59aa0c552d951c051ca19a35e186510', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), index.h("div", { key: 'a9f23d11c8cea0a7e3cdc1f81402d81f48853458', "aria-live": "assertive" }, (this.helper || ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0) && (index.h("div", { key: '8d65fbefc728f29279b2fceedfef0bec0fb17fb3', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (index.h("div", { key: '5dd1fb8023341c1ef1f794ce8ee472ab476f866f', class: "text-field-helper-error-state" }, !this.readOnly && index.h("tds-icon", { key: 'a6e87371003644f090b02c7e5e0823f4b44dfc62', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && ((_b = this.maxLength) !== null && _b !== void 0 ? _b : 0) > 0 && (index.h("span", { key: '4790188e2a7bc819ce1eb5239950d432193bd083', class: {
+            } }, index.h("slot", { key: '837a31890e5a54fded2f05f40882f2756b9af41c', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (index.h("span", { key: '4c4d50d36c26bc7a68f61aed515f49cb1c6c510a', class: "text-field-icon__readonly" }, index.h("tds-tooltip", { key: '065e0ff598dba8db4aefffa977c1773d9326a4ed', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: '7825231a8693057fb9648c31f61631bed454b757', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), index.h("div", { key: '993e4fe3d5d51af92b6cd27c904561e4691e097e', "aria-live": "assertive" }, (this.helper || ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0) && (index.h("div", { key: '52089552d0b3c2c1dd74ad0eb726882eb29e333e', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (index.h("div", { key: '95f826115b61119d6c538071b4bff75320ff38c8', class: "text-field-helper-error-state" }, !this.readOnly && index.h("tds-icon", { key: 'a8b1536d5ad673abec3d0b56af758179bc694ef4', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && ((_b = this.maxLength) !== null && _b !== void 0 ? _b : 0) > 0 && (index.h("span", { key: '0a37e035b4a707e6b541d045c4b7d11345bb3a7a', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_c = this.value) === null || _c === void 0 ? void 0 : _c.length, " / ", (_d = this.maxLength) !== null && _d !== void 0 ? _d : 0)))))));

package/dist/cjs/tds-textarea.cjs.entry.js

@@ -80,7 +80,7 @@ const TdsTextarea = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: 'd7cf9dcacedf2b147de04a8e7a3bf3be9a3795a3', class: {
+        return (index.h("div", { key: '8ec1f4fa4fe4812b82df611215e0e4d70e7f9675', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -90,7 +90,7 @@ const TdsTextarea = class {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (index.h("label", { key: 'cb98c61db81f4efc7b72c50cc56ca121f3d449c8', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), index.h("div", { key: '8cfd739439df3a7a29ac73054c789f137b6aceb1', class: "textarea-wrapper" }, index.h("textarea", { key: 'd0d4eae432b70f1a5704e7d5c0fa351be37cf3b7', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (index.h("label", { key: '1934cea443322d3fe5985f4922d81adfc4b12050', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), index.h("div", { key: 'b5fa8ea9b76c0d6f15f56e8f7118e2515c9f0575', class: "textarea-wrapper" }, index.h("textarea", { key: '8a646f1469e1ad85929e14b3307108a61346051d', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
@@ -100,7 +100,7 @@ const TdsTextarea = class {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid.getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), index.h("span", { key: 'ea26d42ffcc583c3047101200f3abcdcc731bda7', class: "textarea-resizer-icon" }, index.h("svg", { key: 'b61a4cda00dde41c07961ba320b996b14b04ce80', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '33118433cdc99ce54347f6720912302d0d3e8c58', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (index.h("span", { key: 'b399c8b24f70b6f12b54045cc526fb858f162a06', class: "textarea-icon__readonly" }, index.h("tds-tooltip", { key: '61e7fa6193e2046a8d619078265cae1b0d43b482', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: 'e3e74b086fb69ced9d59be3802038e055b9a08d5', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), index.h("span", { key: 'be3f5a580e3b741229c61326c0e03df53b1510ee', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (index.h("tds-icon", { key: '2e201cf5e459f0b295ec32a25e1fd1d71e8491df', name: "error", size: "16px" })), this.helper), ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0 && (index.h("div", { key: 'bf7060e27d93495f349771d8b1cc5fb6d0f81e01', class: 'textarea-textcounter' }, this.value === null ? 0 : (_b = this.value) === null || _b === void 0 ? void 0 : _b.length, index.h("span", { key: 'fd01defdf5a5a3e854b082ed0f6e68e5c943151b', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid.getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), index.h("span", { key: '1862a87a0f4df2ce792224d52b7200e2dea869ce', class: "textarea-resizer-icon" }, index.h("svg", { key: '3d244807d961562154f440fe2fd5d9fcb646bf2d', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'c3156c218477a7561347c905fce3202ef30a2d70', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (index.h("span", { key: '01f19a2ffeb8eec26bd40f6c5fe528a51ab8efc2', class: "textarea-icon__readonly" }, index.h("tds-tooltip", { key: 'aad18ef17f48b67f16489c27259b6dc83d450ac7', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: 'a85ba4baecf20f9060ac9d31ae4cbdce6e55be52', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), index.h("span", { key: '9c091b88c2523593a4c17389500ea62bf9fb7daf', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (index.h("tds-icon", { key: 'bfcefc87cf89f9113947fc1ca198c047e1ba1844', name: "error", size: "16px" })), this.helper), ((_a = this.maxLength) !== null && _a !== void 0 ? _a : 0) > 0 && (index.h("div", { key: '6d47d2aa60ac968db9e0ce348f313b3a73e99ce8', class: 'textarea-textcounter' }, this.value === null ? 0 : (_b = this.value) === null || _b === void 0 ? void 0 : _b.length, index.h("span", { key: '0c852f6eb696e038b6b3d624f749e35b88a02a44', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-toast.cjs.entry.js

@@ -70,12 +70,12 @@ const TdsToast = class {
         const usesHeaderSlot = hasSlot.hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot.hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot.hasSlot('actions', this.host);
-        return (index.h(index.Host, { key: 'c486cb86a0e94181135e304cbda2b1bbbb20da22', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (index.h(index.Host, { key: '6b4edbfd2db3b36686d1f0a59efc37207bce1fe6', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, index.h("div", { key: '946ba38a6c95e3450936014cc46c1eb43f927f0d', class: `
+            } }, index.h("div", { key: 'bb9a497e06ebf8252d671dbebe4647e2a970e110', class: `
             wrapper
-            ${this.variant}` }, index.h("tds-icon", { key: '3af328a28e80e1b3f69ec0f4dda31f9d9c7c8571', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), index.h("div", { key: 'eec58153da1bc4dee5955e2393f0610db40242c1', class: `content` }, index.h("div", { key: 'd40f9433b851fbd3dcfd0d60099d5035a87af2e0', class: "header-subheader" }, this.header && index.h("div", { key: '7748dda823fc8c17f4a7eb94d15140ba4301fa83', class: "header" }, this.header), usesHeaderSlot && index.h("slot", { key: '880576822af000000c972125aea031c73569768d', name: "header" }), this.subheader && index.h("div", { key: 'cc9dee1cef953cce966ebee2ed6c82f693f21dc1', class: "subheader" }, this.subheader), usesSubheaderSlot && index.h("slot", { key: '01f596caf428985a0bb4dbc97282dead449fef61', name: "subheader" })), usesActionsSlot && (index.h("div", { key: '81e666f0d9810a0baf008782e6fee3f731b04ab2', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, index.h("slot", { key: '085aab762cc590904d6531fcf7e969d1fa0f4eca', name: "actions" })))), this.closable && (index.h("button", { key: '6e1c909296a175d3a994caccb57f59ab5da9eae2', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, index.h("tds-icon", { key: 'a1e5a6c21070afea181f6b5f20000458b50dbb45', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, index.h("tds-icon", { key: 'e80f0c5c9aa84c6af5b18a5c6419714256de15cc', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), index.h("div", { key: '3579f1a4df6bb2f8e470faff9ed37411b273d2e9', class: `content` }, index.h("div", { key: '498a462acefd6c1de9de16cff54bd0562ba10afd', class: "header-subheader" }, this.header && index.h("div", { key: '6766649b4b76fcece961ea1ee0d0f6d6e633a7f3', class: "header" }, this.header), usesHeaderSlot && index.h("slot", { key: '758f4a23e4d02245bf733c8a5d77d78231c8bd8d', name: "header" }), this.subheader && index.h("div", { key: 'ba10c4f9ec1202c014d290bfb36e68e055e1231d', class: "subheader" }, this.subheader), usesSubheaderSlot && index.h("slot", { key: '41c064fc3bcbcc4228b6ac1bf6315cc25af8109e', name: "subheader" })), usesActionsSlot && (index.h("div", { key: 'c8ea9ffecfd96eef5eaa229e3e04a9c92964ada0', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, index.h("slot", { key: 'ff8bf4c4ab15613895d2547ed666c435928ae9e4', name: "actions" })))), this.closable && (index.h("button", { key: '2d702e910607b1264d1c943a8c2cd2203b6b318b', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, index.h("tds-icon", { key: '856d5148a41cab121714c59d78d3da9281b2e780', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-toggle.cjs.entry.js

@@ -45,13 +45,13 @@ const TdsToggle = class {
         this.labelSlot = this.host.querySelector("[slot='label']");
     }
     render() {
-        return (index.h("div", { key: '18b73a45ee7d84119fa92e0510a6bc6aa0629dcd', class: "tds-toggle" }, this.headline && (index.h("div", { key: 'eac54354b87c7c825d0ad7fb162ec371ad88f24d', class: {
+        return (index.h("div", { key: 'c60055a21cec53a50361aedf9be5734f33312a0c', class: "tds-toggle" }, this.headline && (index.h("div", { key: '69db2c26d93322a105a1485d5699baa252239fcd', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), index.h("input", { key: '516d60fa34dad6fee640af0e3caad199e3408140', ref: (inputEl) => {
+            } }, this.headline)), index.h("input", { key: '95f8df390d76f15895dba32297602b368dd4e92f', ref: (inputEl) => {
                 if (inputEl)
                     this.inputElement = inputEl;
-            }, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (index.h("label", { key: '48aca635f98f92bcb669dcdae4accb2f5822fe42', class: { disabled: this.disabled }, htmlFor: this.toggleId }, index.h("slot", { key: '66a1c7fbd981dd02ccfe5e69f76b978ddca596ea', name: "label" })))));
+            }, "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (index.h("label", { key: '7ff4be2cc525da36416b27b73162dbb3c7af5f24', class: { disabled: this.disabled }, htmlFor: this.toggleId }, index.h("slot", { key: '0f950e7eee719502e6f283469cb5d8e535c7ce9e', name: "label" })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-tooltip.cjs.entry.js

@@ -67,7 +67,7 @@ const TdsTooltip = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '49b74045dffd614a85e5749c0f3e22a5c825b12a', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, index.h("tds-popover-core", Object.assign({ key: '8b02fca65300f241ddeb938977f6260477f10804' }, this.inheritedAttributes, { class: {
+        return (index.h(index.Host, { key: 'e814ba0c931d15c9bfcf8b50ad62e30c87c5dbc6', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, index.h("tds-popover-core", Object.assign({ key: 'eb7a20ba6b3c47fb58f7a2137574f22f02c329ee' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -76,7 +76,7 @@ const TdsTooltip = class {
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, index.h("slot", { key: '3dc322ae67df156173931c052dfd97b4f7fb8acb' }))));
+            }, defaultShow: this.defaultShow }), this.text, index.h("slot", { key: '7d0b1b149bcc61af44b378821ea6306b94d8b212' }))));
     }
     get host() { return index.getElement(this); }
 };