@scania/tegel 1.40.0-ts-strict-mode-beta.0 → 1.41.0-angular-patch-types-beta.0

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

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-e627f11b.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-Ca3wGDna.js';
 
 const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;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) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){border-bottom:1px solid var(--tds-table-divider-hover)}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--focus-outline, 2px solid blue)}";
-const TdsTableBodyRowStyle0 = tableBodyRowCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -10,14 +9,19 @@ const relevantTableProps = [
     'compactDesign',
 ];
 const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsSelect = createEvent(this, "tdsSelect", 6);
         this.tdsClick = createEvent(this, "tdsClick", 6);
+        /** Marks the row as selected, used for multiselect table. */
         this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
         this.disabled = false;
+        /** Makes the row clickable and tabbable for accessibility purposes. */
         this.clickable = false;
         this.multiselect = false;
         this.mainCheckBoxStatus = false;
@@ -27,19 +31,17 @@ const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow
         this.tableId = '';
     }
     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()),
+            selectedRows: await this.tableEl.getSelectedRows(),
         });
     }
     handleRowClick(e) {
-        var _a, _b, _c;
         if (!this.clickable)
             return;
-        const rowIndex = Array.from((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : []).indexOf(this.host);
+        let rowIndex = Array.from(this.host.parentElement.children).indexOf(this.host);
         this.tdsClick.emit({
             event: e,
             tableId: this.tableId,
@@ -72,23 +74,22 @@ const TdsTableBodyRow$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow
     componentWillLoad() {
         if (this.tableEl) {
             relevantTableProps.forEach((tablePropName) => {
-                var _a;
-                this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+                this[tablePropName] = this.tableEl[tablePropName];
             });
         }
     }
     render() {
-        return (h(Host, { key: '377d16a55b6c2cb87940ee6ec8629e71dde6ad17', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: '6bf3fee7c066bc4686c9aa0ecba45c04ca7b2aae', 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: 'a65e6eed2e09e49c80c5f25312613c874a3d3b1a', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '37b7bb583a756031ee86c57015523fdb659d683d', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '35cdd94e92fc239d756b4ba240f10cd1e1914512' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '845e64408b938254887c7ec840eae48fc4ed01e3', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '817ef05632a9b2704148a0c9ce190b360b9cec3b', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '50cf1a5aeae24aaceeb813f432abe8e75ad53857' })));
     }
     get host() { return this; }
-    static get style() { return TdsTableBodyRowStyle0; }
-}, [1, "tds-table-body-row", {
+    static get style() { return tableBodyRowCss; }
+}, [257, "tds-table-body-row", {
         "selected": [516],
         "disabled": [516],
         "clickable": [516],

package/dist/components/tds-table-body.js

@@ -1,7 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
-const TdsTableBodyStyle0 = tableBodyCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -9,23 +8,24 @@ const relevantTableProps = [
     'zebraMode',
 ];
 const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
-        this.bodyCheckBoxClicked = () => {
-            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
-            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
-            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
-        };
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.multiselect = false;
         this.enablePaginationTableBody = false;
         this.expandableRows = false;
         this.multiselectArray = [];
-        this.multiselectArrayJSON = undefined;
         this.mainCheckboxStatus = false;
         this.columnsNumber = 0;
         this.zebraMode = 'none';
         this.tableId = '';
+        this.bodyCheckBoxClicked = () => {
+            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
+            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
+            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
+        };
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -44,20 +44,16 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
         this.bodyCheckBoxClicked();
     }
     connectedCallback() {
-        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
+        this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            var _a;
-            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+            this[tablePropName] = this.tableEl[tablePropName];
         });
     }
     componentWillRender() {
-        var _a, _b;
-        const headrColumn = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
-        const headerColumnsNo = (_b = headrColumn === null || headrColumn === void 0 ? void 0 : headrColumn.children.length) !== null && _b !== void 0 ? _b : 0;
+        const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
         // multiselect and expended features requires one extra column for controls...
         if (this.multiselect || this.expandableRows) {
             this.columnsNumber = headerColumnsNo + 1;
@@ -67,16 +63,16 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
         }
     }
     render() {
-        return (h(Host, { key: '80e470d85ca46b398d9254bbcf84865b65656c7c', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: 'f9472ae9b1dcad43aab101811dfe858dea4851e9', "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',
-            } }, h("slot", { key: 'ef1c5c7a13129ff08d48d568088c05e2416b8284' })));
+            } }, h("slot", { key: '61a0ec649d2f7f51ca386c46335a6ae018c993d0' })));
     }
     get host() { return this; }
-    static get style() { return TdsTableBodyStyle0; }
-}, [4, "tds-table-body", {
+    static get style() { return tableBodyCss; }
+}, [260, "tds-table-body", {
         "multiselect": [32],
         "enablePaginationTableBody": [32],
         "expandableRows": [32],

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

@@ -1,11 +1,10 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$5 } from './p-e627f11b.js';
-import { d as defineCustomElement$4 } from './p-7e02ea3e.js';
-import { d as defineCustomElement$3 } from './p-98d082f9.js';
-import { d as defineCustomElement$2 } from './p-edc838a0.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$5 } from './p-Ca3wGDna.js';
+import { d as defineCustomElement$4 } from './p-BhQM9_yR.js';
+import { d as defineCustomElement$3 } from './p-SqXsUd-b.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:74px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
-const TdsTableFooterStyle0 = tableFooterCss;
 
 const relevantTableProps = [
     'compactDesign',
@@ -15,11 +14,32 @@ function removeShakeAnimation(e) {
     e.target.classList.remove('tds-table__page-selector-input--shake');
 }
 const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsPagination = createEvent(this, "tdsPagination", 7);
+        /** Enable pagination and show pagination controls  */
+        this.pagination = false;
+        /** Sets the pagination number. */
+        this.paginationValue = 1;
+        /** Enable rows per page dropdown */
+        this.rowsperpage = true;
+        /** Set available rows per page values */
+        this.rowsPerPageValues = [10, 25, 50];
+        /** Sets the number of pages. */
+        this.pages = null;
+        /** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
+        this.cols = null;
+        /** State that memorize number of columns to display colSpan correctly - set from parent level */
+        this.columnsNumber = 0;
+        /* Sets the footer to use compact design. */
+        this.compactDesign = false;
+        this.tableId = '';
+        this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -47,7 +67,7 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         this.nextPage = () => {
             /** If pages and greater or equal to the number of pages, increase pagination value.
              * This is to not get above the number of pages in pagination value.  */
-            if (this.pages && this.paginationValue <= this.pages) {
+            if (this.paginationValue <= this.pages) {
                 this.paginationValue++;
             }
             this.emitTdsPagination();
@@ -63,18 +83,6 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
             this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
-        this.pagination = false;
-        this.paginationValue = 1;
-        this.rowsperpage = true;
-        this.rowsPerPageValues = [10, 25, 50];
-        this.pages = 0;
-        this.cols = null;
-        this.columnsNumber = 0;
-        this.compactDesign = false;
-        this.lastCorrectValue = undefined;
-        this.tableId = '';
-        this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -89,19 +97,16 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         }
     }
     connectedCallback() {
-        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
+        this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
-        var _a, _b, _c;
         relevantTableProps.forEach((tablePropName) => {
-            var _a;
-            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+            this[tablePropName] = this.tableEl[tablePropName];
         });
         this.storeLastCorrectValue(this.paginationValue);
         /** Get the number of columns. */
-        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;
+        const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
         if (this.cols) {
             this.columnsNumber = this.cols;
         }
@@ -142,20 +147,16 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ccd4af0d18ff3abac93113618be574eaf4dfeccf', class: {
+        return (h(Host, { key: 'd064beda251b663ad3afccebc98fb4718e3f1d09', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '83352ad6041939ce7c7faecf0a3357254bf70d20', class: "tds-table__footer-row" }, h("td", { key: '1c3448a74dedf1523c37598a9cdec1c119d32e29', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '49e152077961293d0d61a7ec2f7e6dfe4441812e', class: "tds-table__pagination" }, h("div", { key: '9d1bb01cbb816deaa6cf1f93c9c851f137dca9cf', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '5f8609d37e29b4303bd21146113bfc7133a29df8', class: "rows-per-page" }, h("p", { key: '90d62b23f416cfb6544b50a21b83dc0e6de030be' }, "Rows per page"), h("tds-dropdown", { key: '653df3963055fddacad426f82d204f91a98749f4', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: '02d6c97e498e44ad70c86fd08cc665a8b89e2a07', class: "tds-table__footer-row" }, h("td", { key: 'e9d64ea0f3be240867d886973a40c557fe9899da', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '4a8f3f921a4e103a1a14e368a4702cd8f6ceb18b', class: "tds-table__pagination" }, h("div", { key: 'c536fb9916071677bf20f033ebb184d469aa0774', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '5a935d6c92a574e1ea0a081e955916526ec9da45', class: "rows-per-page" }, h("p", { key: 'ae9f908bc6803a814236a56e5801857a1989df54' }, "Rows per page"), h("tds-dropdown", { key: '1bcac2201accc7d613250c8f38b77ddc04bfb463', 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: '0990d81388b9f835edeb24c8cb17a6fb4d11caf9', class: "tds-table__page-selector" }, h("input", { key: 'b9f888009f0f0bfc38b5476c328bb92ae4c0962f', 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: '86f6a581d1f5fe50ea2106821ff4afa6dd479387', class: "tds-table__footer-text" }, "of ", h("span", { key: '91872a9e6eb05e4e1f540d2a6d203cc2e3fd7a27' }, this.pages), " pages"), h("button", { key: '03a354dde544ac8f6e622f6543b69278896963d3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '6d80869e6cf2eba108b141113dc3ba3fe31e0a6a', name: "skip_backwards", size: "20px" })), h("button", { key: '0a95763fc3da9a93ca109dcf668ce8c5c5bd0e89', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '43e2b68e24844eb964b63a3fb291921edbcd079a', name: "chevron_left", size: "20px" })), h("button", { key: 'c61b81dc60bd58383055c5d98b311bc74b593518', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'cdffb08f3cf5a72c98c6a526477add3feb4c5837', name: "chevron_right", size: "20px" })), h("button", { key: 'f6dc3bc7fc879bd205abce12dd235dbeaa767c5f', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '2c302a54f07077eb3dd3b9665aee6276caceab62', name: "skip_forward", size: "20px" })))))))));
+        }))))), h("div", { key: '08f90bbe4dd64812b95de4be540c65afea1a5d7c', class: "tds-table__page-selector" }, h("input", { key: '4e780ad0a24f39df03edc044d110b6278589a61a', ref: (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: '538690df3c6bef86bf14fe8b7c967b89257e5cb7', class: "tds-table__footer-text" }, "of ", h("span", { key: 'ec38ac0b07103bea8aec7ba3e7e88d73c2a756cb' }, this.pages), " pages"), h("button", { key: 'f196e4b87144a6e66a6a3d0451ca0d4ba32bd1af', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '80041ff46837e3ba072b740cf79d1cf9bbf21b63', name: "skip_backwards", size: "20px" })), h("button", { key: 'c51d570daeb97dbe2cae4e344eb51b97d88bb10a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'bc02c69dc75f412fac63d952458d0ea06530593c', name: "chevron_left", size: "20px" })), h("button", { key: 'df29a47121d892642b24533a0e132d1f2d13d545', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'b2ae455a7a62c647f5c79cfc8f41bcae4b41b12d', name: "chevron_right", size: "20px" })), h("button", { key: 'd333d73217b7ed86841810bd342e2dd3152ef560', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '9d94abd5c17bc50b6a33c21dcc74b2689d514f2a', name: "skip_forward", size: "20px" })))))))));
     }
     get host() { return this; }
-    static get style() { return TdsTableFooterStyle0; }
-}, [1, "tds-table-footer", {
+    static get style() { return tableFooterCss; }
+}, [257, "tds-table-footer", {
         "pagination": [516],
         "paginationValue": [1538, "pagination-value"],
         "rowsperpage": [516],

package/dist/components/tds-table-header-input-wrapper.js

@@ -1,15 +1,17 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-edc838a0.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) tds-icon{display:inline-block}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}tds-icon.search-icon{color:var(--tds-table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--tds-table-input-header-placeholder)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-header-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
-const TdsTableHeaderInputWrapperStyle0 = tableHeaderInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
 const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderInputWrapper extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Controls if the search icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -71,15 +73,15 @@ const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsT
         }
     }
     render() {
-        return (h(Host, { key: '5d46a27bdb22aec58736f8f0dce6855d6ef48f23', class: {
+        return (h(Host, { key: '62070c88b54c313b2db10890023db32f0eaf66b5', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
             } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { svgTitle: "search", class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
     }
     get host() { return this; }
-    static get style() { return TdsTableHeaderInputWrapperStyle0; }
-}, [1, "tds-table-header-input-wrapper", {
+    static get style() { return tableHeaderInputWrapperCss; }
+}, [257, "tds-table-header-input-wrapper", {
         "showIcon": [4, "show-icon"],
         "compactDesign": [4, "compact-design"],
         "renderSlot": [32],

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

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-e627f11b.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-Ca3wGDna.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 TdsTableHeaderStyle0 = tableHeaderCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -12,14 +11,18 @@ const relevantTableProps = [
     'noMinWidth',
 ];
 const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderRow extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsSelectAll = createEvent(this, "tdsSelectAll", 6);
+        /** @deprecated Deprecated, use selected instead. */
         this.allSelected = false;
-        this.selected = undefined;
+        /** Prop for controlling the enabled/disabled state of the "All selected"-checkbox. */
         this.disabled = false;
+        /** Prop for controlling the indeterminate state of the "All selected"-checkbox. */
         this.indeterminate = false;
         this.multiselect = false;
         this.expandableRows = false;
@@ -53,56 +56,50 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
         }
     }
     bodyExpandClicked() {
-        var _a;
-        const parentBody = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-body');
-        if (parentBody) {
-            const numberOfExtendRowsActive = parentBody.getElementsByClassName('tds-table__row-extend--active').length;
-            const numberOfExtendRows = parentBody.getElementsByTagName('tds-table-body-row-expendable').length;
-            if (numberOfExtendRows === numberOfExtendRowsActive) {
-                this.mainExpendSelected = true;
-            }
-            else {
-                this.mainExpendSelected = false;
-            }
+        const numberOfExtendRowsActive = this.host.parentElement
+            .querySelector('tds-table-body')
+            .getElementsByClassName('tds-table__row-extend--active').length;
+        const numberOfExtendRows = this.host.parentElement
+            .querySelector('tds-table-body')
+            .getElementsByTagName('tds-table-body-row-expendable').length;
+        if (numberOfExtendRows === numberOfExtendRowsActive) {
+            this.mainExpendSelected = true;
+        }
+        else {
+            this.mainExpendSelected = false;
         }
     }
     connectedCallback() {
-        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
+        this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            var _a;
-            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+            this[tablePropName] = this.tableEl[tablePropName];
         });
     }
     componentWillRender() {
-        const closestTable = this.host.closest('tds-table');
-        if (closestTable) {
-            this.enableToolbarDesign =
-                (closestTable === null || closestTable === void 0 ? void 0 : closestTable.getElementsByTagName('tds-table-toolbar').length) >= 1;
-        }
+        this.enableToolbarDesign =
+            this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
     async handleCheckboxChange(event) {
-        var _a;
         this.allSelected = event.detail.checked;
         this.tdsSelectAll.emit({
             tableId: this.tableId,
             checked: event.detail.checked,
-            selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
+            selectedRows: await this.tableEl.getSelectedRows(),
         });
     }
     render() {
-        return (h(Host, { key: '0870860808274b91304987249df6c43d3fd90daa', class: {
+        return (h(Host, { key: '6c1cc431846a627cab836e62a551f9f5d6558a9d', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '29fd58da4486a422897cf98468d284c36fcace41' }, this.multiselect && (h("th", { key: '2234f9207945d4aeeeb001def4b2e3d298f28a01', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a9ef50d2d8e0d81b7608e084dae9e37c52e49664', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '24579bfc15603dd29d73cc3a56cb2633a5aaf0f6', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '5f30578196a9bf2ca3322f249df7318ddd80146f', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '57fb6cecc52634b3f8e247c4eec14e26138d6117' }))));
+            } }, h("tr", { key: 'fe66a0019ffef72437ef0312e07d8e23b0c8f728' }, this.multiselect && (h("th", { key: 'a132d706ef3650e6909a2b1bd90ed51b53a8fe02', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a4a62796419d0f77a9a9b035a2493ec7cc184e9f', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2b9e308d8098b8e2825936f6ff2ab0e1ec0e8897', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '916a17bb35705db77de44bee119c579dd55c2d8f', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '79d44597fcb6fa6d2e94197c57a1c9dded7e9f3d' }))));
     }
     get host() { return this; }
-    static get style() { return TdsTableHeaderStyle0; }
-}, [1, "tds-table-header", {
+    static get style() { return tableHeaderCss; }
+}, [257, "tds-table-header", {
         "allSelected": [1540, "all-selected"],
         "selected": [1540],
         "disabled": [1540],

package/dist/components/tds-table-toolbar.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-edc838a0.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__actionbar-left{display:flex}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left;margin-right:var(--tds-spacing-element-8)}:host .tds-table__actionbar,:host slot[name=end]::slotted(*),:host slot[name=start]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.toolbar__horizontal-scroll){position:absolute;top:var(--tds-spacing-element-16)}:host(.tds-table--compact){height:56px}";
-const TdsTableToolbarStyle0 = tableToolbarCss;
 
 const relevantTableProps = [
     'compactDesign',
@@ -11,13 +10,18 @@ const relevantTableProps = [
     'horizontalScrollWidth',
 ];
 const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsFilter = createEvent(this, "tdsFilter", 7);
+        /** Adds title to the Table */
         this.tableTitle = '';
+        /** Enables preview of searchbar */
         this.filter = false;
+        /** Aria label for the search input, providing an accessible description */
         this.tdsSearchAriaLabel = '';
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -39,17 +43,15 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
         }
     }
     connectedCallback() {
-        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
+        this.tableId = this.tableEl.tableId;
         if (!this.tdsSearchAriaLabel) {
             console.warn('tds-table-toolbar: tdsSearchAriaLabel is highly recommended for accessibility');
         }
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            var _a;
-            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+            this[tablePropName] = this.tableEl[tablePropName];
         });
     }
     handleSearch(event) {
@@ -75,14 +77,14 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
         return styles;
     }
     render() {
-        return (h(Host, { key: 'e76b6fc0b933bd081686ab3e060cb35c07470f01', class: {
+        return (h(Host, { key: 'e7ce21fcad3bfbc9f93088f777855baa9c6e3869', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'f6cb90f651cac62f4161bc497426e2f364be93ee', class: "tds-table__upper-bar-flex" }, h("div", { key: 'b75b0b23fca7992adcea9848e8e6b950d667cd46', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ed679dba3b67ea6ecb43d9fb4318c264d22ab064', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '2937e33ed397413c608d58955083f5ecd9cfe136', name: "start" })), h("div", { key: 'c002e6d7e31ff3c21dec3a7a889b36ef930b8826', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'b6e45d1361ddb4c01f2cbce4a5af243e3aaed490', class: "tds-table__searchbar" }, h("input", { key: 'bb57c1a1a593ab22915903eabfb3216bec7a74e8', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '08bed8155351cba48a5934d797160973df0fc6de', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '9b5fda16df341aed692c05dc26ba319c563165d5', name: "search", size: "20px" })))), h("slot", { key: '32cbed6b093812e0e811a853b78e915ef091f098', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '7310ec2851d440ba6529eb2d48bb20bcb508429f', class: "tds-table__upper-bar-flex" }, h("div", { key: '5b901252d433968edb04de20a25ea9c09bb39b4b', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '661f8de9fe38cd72b098251b027c7e6f554033e5', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '8d00d01e2ac92c75f95dc6ae89e7b8769cde6dc1', name: "start" })), h("div", { key: 'fd28cb512ed5ad997cdb1f0b1dff8f7489f95db5', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'fb2649d623a21eeb1a8c3ed5c512d02d7bbb2efc', class: "tds-table__searchbar" }, h("input", { key: '9cd1284bec12081a2e99996eb6bd160ac926b751', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '015060f9c59d06c430fabb0acabb8b476a477616', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '5f990c7f452a46bb0471dd658f24afd848d029e9', name: "search", size: "20px" })))), h("slot", { key: 'a91b2aee680ef316d2fdd46d46bfe9ec3eb3e314', name: "end" })))));
     }
     get host() { return this; }
-    static get style() { return TdsTableToolbarStyle0; }
-}, [1, "tds-table-toolbar", {
+    static get style() { return tableToolbarCss; }
+}, [257, "tds-table-toolbar", {
         "tableTitle": [513, "table-title"],
         "filter": [516],
         "tdsSearchAriaLabel": [1, "tds-search-aria-label"],