@scania/tegel 1.13.0 → 1.13.2

package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.js

@@ -0,0 +1,124 @@
+import { h, Host } from "@stencil/core";
+const relevantTableProps = ['compactDesign'];
+export class TdsTableBodyInputWrapper {
+    constructor() {
+        this.showIcon = true;
+        this.renderSlot = true;
+        this.inputFocused = false;
+        this.compactDesign = false;
+        this.tableId = '';
+    }
+    internalTdsPropChangeListener(event) {
+        if (this.tableId === event.detail.tableId) {
+            event.detail.changed
+                .filter((changedProp) => relevantTableProps.includes(changedProp))
+                .forEach((changedProp) => {
+                if (typeof this[changedProp] === 'undefined') {
+                    console.error(`Table prop is not supported: ${changedProp}`); // More informative error
+                    throw new Error(`Table prop is not supported: ${changedProp}`);
+                }
+                this[changedProp] = event.detail[changedProp];
+            });
+        }
+    }
+    connectedCallback() {
+        const tableEl = this.host.closest('tds-table');
+        if (tableEl) {
+            this.tableId = tableEl.getAttribute('table-id');
+        }
+        else {
+            console.error('Failed to find parent tds-table element.');
+        }
+    }
+    componentWillLoad() {
+        const tableEl = this.host.closest('tds-table');
+        if (tableEl) {
+            relevantTableProps.forEach((tablePropName) => {
+                this[tablePropName] = tableEl[tablePropName];
+            });
+        }
+        else {
+            console.error('Failed to find parent tds-table element.');
+        }
+    }
+    handleSlotChange() {
+        this.validateSlot();
+    }
+    validateSlot() {
+        const children = Array.from(this.host.children).filter((element) => element.tagName === 'INPUT');
+        if (children.length !== 1) {
+            console.warn('TABLE-BODY-INPUT-WRAPPER: Wrapper only accepts input as children.');
+            this.renderSlot = false;
+        }
+        else {
+            if (!this.renderSlot)
+                this.renderSlot = true;
+            const input = children[0];
+            input.addEventListener('focus', () => {
+                this.inputFocused = true;
+            });
+            input.addEventListener('blur', () => {
+                this.inputFocused = false;
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: 'c40a17a264d914934ea4f0e5c4a27b58f06d8055', 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", { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
+    }
+    static get is() { return "tds-table-body-input-wrapper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["table-body-input-wrapper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table-body-input-wrapper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls if the edit icon is shown"
+                },
+                "attribute": "show-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "renderSlot": {},
+            "inputFocused": {},
+            "compactDesign": {},
+            "tableId": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "internalTdsTablePropChange",
+                "method": "internalTdsPropChangeListener",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -48,12 +48,12 @@ export class TdsTableBodyRow {
         });
     }
     render() {
-        return (h(Host, { key: '568df05f38e664b80bc4f8a79f5fa6036b0367f9', class: {
+        return (h(Host, { key: '2b99a5336354cb5e7e2e7ef9c81bac76a55c6895', class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, this.multiselect && (h("td", { key: '936bbaf30630ac9b16cc35234bc10bb38acd5f6b', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '44f6fdd316079ed175bbc609f65d447a52d11b9a', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '1b71459782d2a14682f7b98fef03c6924753f111' })));
+            } }, this.multiselect && (h("td", { key: '049e91ea474a539b6fbe344db4aed9de42297f3d', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2af9307e3143db71cae028c1cc2116382b20f4c9', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '2eff0d398eb53934ca0b152d25422a5febbbffbb' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,6 +56,8 @@
   border-bottom: 1px solid var(--tds-table-divider);
 }
 :host .tds-table__row-expand .tds-table__cell-expand {
+  max-width: 1px;
+  overflow: scroll;
   padding: 16px 16px 16px 66px;
   color: var(--tds-table-color);
 }

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

@@ -84,18 +84,18 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '542357b920775b6abce4e3b2dbe03dee5303e2ee', class: {
+        return (h(Host, { key: 'cd23997b2d0b659691199b0f6a7be6aa51689ee4', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: 'ef75d8bfb300fa32185bf65059c7c7303e0796fc', class: {
+            } }, h("tr", { key: 'a3fec49a0b97a35f61db7c31dfc023ba3acebd86', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '5a6a5e6aa793447f4d7f667fb3aa44c10d5e9aa5', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: 'ac9258f6922efb133d9b3f676271fff8309b81f8', class: "tds-table__expand-control-container" }, h("input", { key: '023c0ebba1845e376993ab2761cedc7fb2123d19', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: 'bbdc01972b2cdc61b59376fd60ae26f377c4274f', class: "tds-expendable-row-icon" }, h("svg", { key: '4cc97d85f6a43814746d4833a684cf3d9aa78dcf', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '7a8cdff1044b0edbc68ff781ee1bf7efb1d4dd02', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '01393ce1817a0aadb468fce0abac6ca3c0fc5e69' })), h("tr", { key: '34a33b5edcb395a11870f2fb3dd977064328d72c', class: {
+            }, part: "row" }, h("td", { key: 'd995074fc578640544f59df3426762ff6595dd0b', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: '0f905bda5651a8c9dc30094dbc402e5e618e4030', class: "tds-table__expand-control-container" }, h("input", { key: '9b316a0e3a44cfa21851a1ac2ec0980d53d3aa54', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '022d891384b907d3ebce4b2138fef4f5c6f7d44f', class: "tds-expendable-row-icon" }, h("svg", { key: 'fb7ccb4d599e72a9d7a56808f59226779ffe611b', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1e2c766463813a4b1edc32093abbbf501b99974b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '7f0e3d93df3da8eeff969daa9aba8eecaa1e6e23' })), h("tr", { key: '89766434b64dd9bf0aecf805fdd494aab68f8af9', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: '0b2eceb0c5a81337de2ac40eb324d198023790f4', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: 'c38cffba7013bd8f7bafd4e443b9550c09d0cbe3', name: "expand-row" })))));
+            }, part: "expand-row" }, h("td", { key: 'f0c746d12fae92eae3e6bf9651c826fb3aacbefe', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: '0a9e454379a7a6a72b3d6ea33a66a4aaaac09e8f', name: "expand-row" })))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,10 +94,10 @@ export class TdsTableFooter {
         this.storeLastCorrectValue(this.paginationValue);
     }
     render() {
-        return (h(Host, { key: '5ad60a88018eb67ce0e6a1c11b31a4ab49d28103', class: {
+        return (h(Host, { key: 'fe6221e5dd2ec57e63afefc5e45c0b3f5ad85d8f', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {} }, h("tr", { key: 'c3df22ed332b3e0b5964a40b3ef6e2fb9e7847bb', class: "tds-table__footer-row" }, h("td", { key: '9ba6be5a63bc5150312e07baba026d853767c171', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '5a772abf14cee6aa8143bf20628e576bf6294707', class: "tds-table__pagination" }, h("div", { key: '26cba6033dc7089cdfe044f457b76f869b103cab', class: "tds-table__row-selector" }), h("div", { key: 'bde7a9338de67b94d8d05908d91ef14ba0aabdb5', class: "tds-table__page-selector" }, h("input", { key: '00af6505e27bf4ada9af7baa0c3cea77f38c6eab', 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: '420147b53d1a37d44b66153e6ea39212bc60a09d', class: "tds-table__footer-text" }, "of ", h("span", { key: '94659781759ca4047c6438b384e572f29391f08b' }, this.pages), " pages"), h("button", { key: '1f19864726a3b9e899f9d4541de07ec588ec59da', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '2767b545e48df7618b3f853cd3e51b16058574a3', name: "chevron_left", size: "20px" })), h("button", { key: 'cb3f308dc45e176c98b92a9050b542e4d4de83df', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '28037a03f7933d2502e6f955c0a07861d5937fa0', name: "chevron_right", size: "20px" })))))))));
+            }, style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {} }, h("tr", { key: '6f6bfca5e7719084b2c4564b86806f6eb7867601', class: "tds-table__footer-row" }, h("td", { key: '2c4389dfa2c028798246a5c4d8b9bdcc05a780f2', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '0831e596963e20222feee940fb7d7d489f832b5e', class: "tds-table__pagination" }, h("div", { key: '1129e67d9b69b06a1fadde589f9ad37a1bd9fcca', class: "tds-table__row-selector" }), h("div", { key: '81e685df813d615027470d4c84c468bb2c5fccca', class: "tds-table__page-selector" }, h("input", { key: '4b116837ae02fcbf6b51b940587ae6159d40f5cb', 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: '927af4715b33f50679aef3ec5eccc5fd4044add7', class: "tds-table__footer-text" }, "of ", h("span", { key: '2d89421fbbbb0828623465f39edc506b9bfa82da' }, this.pages), " pages"), h("button", { key: '37916d812b7b4510b088b382f48b2d9f04d212b2', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'd89ac980f4c48fe6c14610f27ccc05e43994631e', name: "chevron_left", size: "20px" })), h("button", { key: '246b17fc6ff26e3830d5a359a4a5de844bc93a1b', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '6fa3441ed75b484974e50ee41ea1444bea7c30e2', name: "chevron_right", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -82,11 +82,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: '6c020ce84d357e6d2808d696a23be7efa881b611', class: {
+        return (h(Host, { key: '5f212887d3d35e32240e9745d62685b7024100e1', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '77b54e2805b2b24c4bee4fd4c26d2bee6970f514' }, this.multiselect && (h("th", { key: 'bd6a40dc40e6f282cf5f24783c7811ab7fbc09f9', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '2ac070c35c4ced6979bdc2a031c0b3e7ac3884e8', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '984b5ad63d5da8cfd0b3f2c4993a0ec517233f7d', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'a09c1db65f7fdbdb0e4435b006585f8559981168', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '5427d0496e6f4dfa57ff1615c30c7dab413e7030' }))));
+            } }, h("tr", { key: '1a40af0dddfb627c39ae5df47aedc80eb1006f04' }, this.multiselect && (h("th", { key: '17d16e6bf8964b30e0ce93a76c436112ac0a6540', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '98f282baf5a0b4a929ad04c850319e04955090a0', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '9d8115deb1403df121309d32a166ccc6eac685d5', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '7cc0e1c0d3d7ec9f4bef917a5b8346cca8bc58ae', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '2f7aa3bd3acdd69f1f2a20d3525ad5901f0ac239' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -105,7 +105,7 @@ export class TdsTableHeaderCell {
             this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
     render() {
-        return (h(Host, { key: 'bf923a391d612d2167d45c6b4a38f483b03893c0', class: {
+        return (h(Host, { key: '6a051465b3a5af5460f7c5ac112798b521f9b4a8', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,

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

@@ -0,0 +1,53 @@
+: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; /* Reduced height for compact design */
+}

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

@@ -0,0 +1,141 @@
+import { h, Host } from "@stencil/core";
+const relevantTableProps = ['compactDesign'];
+export class TdsTableHeaderInputWrapper {
+    constructor() {
+        this.showIcon = true;
+        this.renderSlot = true;
+        this.inputFocused = false;
+        this.compactDesign = false;
+        this.tableId = '';
+    }
+    internalTdsPropChangeListener(event) {
+        if (this.tableId === event.detail.tableId) {
+            event.detail.changed
+                .filter((changedProp) => relevantTableProps.includes(changedProp))
+                .forEach((changedProp) => {
+                if (typeof this[changedProp] === 'undefined') {
+                    console.error(`Table prop is not supported: ${changedProp}`); // More informative error
+                    throw new Error(`Table prop is not supported: ${changedProp}`);
+                }
+                this[changedProp] = event.detail[changedProp];
+            });
+        }
+    }
+    connectedCallback() {
+        const tableEl = this.host.closest('tds-table');
+        if (tableEl) {
+            this.tableId = tableEl.getAttribute('table-id');
+        }
+        else {
+            console.error('Failed to find parent tds-table element.');
+        }
+    }
+    componentWillLoad() {
+        const tableEl = this.host.closest('tds-table');
+        if (tableEl) {
+            relevantTableProps.forEach((tablePropName) => {
+                this[tablePropName] = tableEl[tablePropName];
+            });
+        }
+        else {
+            console.error('Failed to find parent tds-table element.');
+        }
+    }
+    handleSlotChange() {
+        this.validateSlot();
+    }
+    validateSlot() {
+        const children = Array.from(this.host.children).filter((element) => element.tagName === 'INPUT');
+        if (children.length !== 1) {
+            console.warn('TABLE-HEADER-INPUT-WRAPPER: Wrapper only accepts input as children.');
+            this.renderSlot = false;
+        }
+        else {
+            if (!this.renderSlot)
+                this.renderSlot = true;
+            const input = children[0];
+            input.addEventListener('focus', () => {
+                this.inputFocused = true;
+            });
+            input.addEventListener('blur', () => {
+                this.inputFocused = false;
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '43243a6c8e1a0ef0f18d9f1f1d4cd4cba6bc15b4', 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", { class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
+    }
+    static get is() { return "tds-table-header-input-wrapper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["table-header-input-wrapper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table-header-input-wrapper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls if the search icon is shown"
+                },
+                "attribute": "show-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "compactDesign": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "compact-design",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "renderSlot": {},
+            "inputFocused": {},
+            "tableId": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "internalTdsTablePropChange",
+                "method": "internalTdsPropChangeListener",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -56,10 +56,10 @@ export class TdsTableToolbar {
         }
     }
     render() {
-        return (h(Host, { key: '22e5ee224210c21da2a111d21f7ed835e78b2da0', class: {
+        return (h(Host, { key: '9c864dc219ed17a50a4d84881c676e05b3e0ef92', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {} }, h("div", { key: '3151e2786871111cf5ac68838539bb1c7a2b1513', class: "tds-table__upper-bar-flex" }, h("caption", { key: '41badd1054e16fbd748d6b00d0b17a2bbbe11b0a', class: "tds-table__title" }, this.tableTitle), h("div", { key: '3c7d6b75d7b1b7ccc3861287f2a551705eff8eb4', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'a64d5563cb3dd4e06a84e0a078225836c69c239c', class: "tds-table__searchbar" }, h("input", { key: 'f498e54e51fc0b287b0e0d55926e76e9432043bf', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '2b40182a25b5e002141781d1d3a01375e3cd074e', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'bf6b70cedb294c2da7eada2da05706e02a2e6be1', name: "search", size: "20px" })))), h("slot", { key: '7601845496b244f34d8ea1d41284fba1f6941378', name: "end" })))));
+            }, style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {} }, h("div", { key: '035b5a5396344e3d682fb5370a4e1c0484045579', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'f1f5ba362eda8a0ae25fb63c89a25fe3606365c9', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'b94a83cf81e1aaa06d1b29a4e9207c99bccbbbbc', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '358798e484d1892acb6a4e7e3b30702002ba860d', class: "tds-table__searchbar" }, h("input", { key: 'f062bf19e13e312ee9089324bdfc6d4e2e9a1db4', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '9e874b39910b2d32b0a3193b14e01ed5f681b928', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '38d5a1b800d849b66a0c35d01d496fc4708f53c2', name: "search", size: "20px" })))), h("slot", { key: 'f362385a5719c51dbce2b213774b6397ede8714b', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -17,8 +17,8 @@ export class TdsFolderTab {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: '101be5c67007e8f1f6e35527ac929a774ae58495', role: "listitem" }, h("div", { key: 'e1d6ebec7a43f096fd635dabd02639a37c4dfc30', class: `${this.disabled ? 'disabled' : ''}
-                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '4e4b490dea87f381ed8ff0695d4128b9e62c0b27' }))));
+        return (h(Host, { key: '3c4a3fe10ff0011f1f9619232c2216cbfcbfb148', role: "listitem" }, h("div", { key: '61fb49491d4f0c2098277b33f13c41ca34782563', class: `${this.disabled ? 'disabled' : ''}
+                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'f57d05129e3185aa36887a84ff980b8a44ec20a4' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -160,9 +160,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '8c90acd4a7f46a37ffabb568f4c37e183140e953', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '9184c054af4bc54f68e896f7b17e86cd3454cd6e', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '748bacbb3d58d37735385a8c926dacb637d8eff1', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '4c4f764a6a8c8a095bd1d030ef85a34014d8d284', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'd7f0043b76715faa3144d775d08139d2da02212f', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'c88e7ad84aacef16bf34811f132ffc0d8657fa23', name: "chevron_left", size: "20px" })), h("slot", { key: 'b8dd6342cb887b85304b238346818ed40b9bec10', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'c2c34ad8d08ef45e6bb3e7b5c39735f3674957d8', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '1ddb3be79edec73d684b3f74d1b3d8292ba08514', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'ca859bdc9b9d10a7bcfaae194bbee508f308c1a2', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '70aaa7044418b79234b9f3bd7eef2c1e0bf96e61', name: "chevron_left", size: "20px" })), h("slot", { key: 'ca1990c7333322885aa37b164cc7d74708b22116', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6321d42b6a42a9bf63ae844b94541f56806195fd', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '40a0e7a3297bdf6d4abbe5fc62114020fdb7aee3', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -12,8 +12,8 @@ export class TdsInlineTab {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: 'd3603943b36ee39920c10699008d81fa3752918d', role: "listitem" }, h("div", { key: 'a36bc8b02787dc0aac7bc048520c9721762b7acf', class: `inline-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7c46252d0119b406cce0395a4a3112c781f40330' }))));
+        return (h(Host, { key: '56d12f8a46ac69783e0f6cc060b9f99151fbe846', role: "listitem" }, h("div", { key: '01b43d6447a5122efaf0b8d58254708dad49fa39', class: `inline-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'bf865d7caa72ee0fa2aff284e55dd2a794ffb620' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -160,9 +160,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '555e316c060f61dc63109016fac6905b228e6bee', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '1c44ccc797541d755c9ce0ead94b9a032afa5c09', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'fdf1cc28637a8bd207c84aba91f60d145acd10c9', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '068e21bac127323f56d858abf59c1f905a4ee315', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'd09970fd677477d6bd28b97243ed867b5aa72b71', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '035eebcadfeba3ce8ee90034f709e92cfbd87152', name: "chevron_left", size: "20px" })), h("slot", { key: 'effa5144b2fd95de8fffa50146cd1c87dd010776', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '3c889a25b419fc4b5eb0eafef16800bc5ae72f78', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '57bb719894cfc20931c599c810bb0abec0273520', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '646917420741478a9492cec16c066833d3e3266e', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '939eb79ed238163057dcc8316f6efdec89262ff8', name: "chevron_left", size: "20px" })), h("slot", { key: 'f3306035cce33e3efb3e89ab4650c3781703f9e5', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6b2023939d94eb9f9822e25fd4facce715fdf227', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0b2626c78903ce14239891aa667a61ed913097ac', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -12,8 +12,8 @@ export class TdsNavigationTab {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: '43185969215e564763f8f0a7b729fd9fad61f711', role: "listitem" }, h("div", { key: '4c7e0bf7cbee825fb685c6cb2f91c416f16b1db3', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '3ca45a310141c7eb3c9c2f725058a5ab14136d63' }))));
+        return (h(Host, { key: 'f8daf87eb0fce9c5229c6223a4188875000b4003', role: "listitem" }, h("div", { key: '692831fb82b1822550b6d715977970b327cb3448', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'afe5caebb5389f4386aa6c6ab57f9a81d2482a61' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -158,9 +158,9 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'fea2449aaf66f65617b3752cbfc7f26aaa4804a1', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '9281904c74032d5b80b27c0b7d8fc1296403dae9', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'eaf7fd47f5f4132d7920d5deafb659828cab01e9', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '1fe0e2f45e6cf32175a3ef6c556aa63ba3b46b97', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '5a6ba7233ed7de5cda5dc346c28a4e492be7641c', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '49963f53d5a4eb603750128f3e9d172654c59ef2', name: "chevron_left", size: "20px" })), h("slot", { key: 'a1eac2f21563c0b4995c87693da1cf6bd6fe7a83', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6c141970ae26167f2f6ce7f0f4205fbab5f61faa', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'c3dece9ef9a120ddce0a16fea959e285b8e308fe', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'fa71abb901a1c6ab70dde90d759d9aa537a72ec2', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '0aff4668869fa761e03e8c81ed054561787beb49', name: "chevron_left", size: "20px" })), h("slot", { key: '169f8b9eb18a33fb4fc739863eaf4a730e066c83', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '9c9757d3c818191ce5aec5bbd64699c04dfc07db', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'e38ac8674d9e3e4aeaa67bd888cd411002353634', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-field/text-field.js

@@ -48,7 +48,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '2fa2e3f2de6eae88c0a1f4ee5e70ca3443e0dbb7', class: {
+        return (h("div", { key: '1b4348574e1a9e7e315c61a2d555b487b619f22e', class: {
                 'form-text-field-nomin': this.noMinWidth,
                 'form-text-field': !this.focusInput || this.disabled,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -62,12 +62,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: 'b61c4470c802234029034a95ea02c11e04fcf0ea', class: "text-field-label-outside" }, h("div", { key: 'c82f0cb38f4abf88da03431dae0899a326fcedf7' }, this.label))), h("div", { key: '653740469fb503ba65411bae0754e81f9a2837ce', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'eca102f7be82d64de4246d732c2203e534a00738', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '7f604df386ece3c8c01e5b60e75ef80de4500e81', class: "text-field-label-outside" }, h("div", { key: 'c13f468f76d9484c016a8218d9cc73b18724458f' }, this.label))), h("div", { key: '992c9076d7b1f9c6bec1847851bcfd989b6b0497', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'dfb616b9083ce42d90c180b5217e2e60ee3784af', 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',
-            } }, h("slot", { key: 'eec12f75e2560f98b075ffef117fe94ed48ba4d2', name: "prefix" }))), h("div", { key: 'a4fb363e71b86a6aca97bb265588a39d9a0ec991', class: "text-field-input-container" }, h("input", { key: '862bd43587cb4e9f5b20447285e71623259d1dfa', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, h("slot", { key: '98ed143615ad68a3cd51aca034999bfc279fce6b', name: "prefix" }))), h("div", { key: '8079b57a7e047255ed45f3f1ba9e28655a16ebed', class: "text-field-input-container" }, h("input", { key: '11782cd5c55f092a02ec741ecd9b20f2b8bfae91', ref: (inputEl) => (this.textInput = inputEl), class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
@@ -80,13 +80,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'dec8b6c0eb36afbf638960277a46b3fd08b682ea', class: "text-field-label-inside" }, this.label))), h("div", { key: 'e7ed6ea0ce0e0234fa41cc28fce3555c4f4013ad', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '64c0c93f877fd74019f6023ff2ff068eae2d2f0b', class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'f72126827829ec26bafee0b5d0eb29a9b96e8628', class: "text-field-label-inside" }, this.label))), h("div", { key: 'c21c6a8cd0d5c8a4814efa1a8f93a5e99b3e092e', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '9029f584ea0ef6cc081985a087692e066394a01b', 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,
-            } }, h("slot", { key: 'e12da795f74722243808e2dc3257ad5802d203ec', name: "suffix" }))), h("span", { key: 'c63e621d57eba89f1a46088e045de6e5ed89cf51', class: "text-field-icon__readonly" }, h("tds-icon", { key: '3effe0bc970ad6fbfb20d5a354dd113f8952376b', name: "edit_inactive", size: "20px" })), h("span", { key: '66f5375d68bcd2ff58ba72b761801c55adca719e', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '63ac10f9418278963d65ef7db02be9b9bbc7560b', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '51fd316dfb707b92360f643b954586ed3740c294', class: "text-field-helper-error-state" }, h("tds-icon", { key: '0f784f343a3d561077de1723f811ef05f1d64987', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '004035a01554451de4cb6e4a46ea41e3323b535c', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '649d38378ba23097e1d690f2ea61b128443c339f', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
+            } }, h("slot", { key: 'f50d3a85bfd324529516a2b8180129e194202465', name: "suffix" }))), h("span", { key: '6f7f160b3a1b425a7ace18b748b64e50cfd8389f', class: "text-field-icon__readonly" }, h("tds-icon", { key: '82b1d06cfb8a3b08543a77c839ccfcba2e9fae13', name: "edit_inactive", size: "20px" })), h("span", { key: '0c9c2ab0b8f620db172050e1db1dd4324b3ab094', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '84c9baa2bce9159f5ea084ed35051a878cfac1f9', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '888d0185686e5ba16bf7b4a064ea1926e17d5c96', class: "text-field-helper-error-state" }, h("tds-icon", { key: '752d5c6c9dee5a7eff5abae9d60e2eb353ee2e60', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'ead6aba2e4f11010dc4d6c17977abaac0b242e76', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '27e1880b203314c781260116b99fd1474a6a8041', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
     }
     static get is() { return "tds-text-field"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/textarea/textarea.js

@@ -38,7 +38,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: 'd3d976213416280711e65fa300c72fd5055fed83', class: `
+        return (h("div", { key: 'f110536792da6122221dc6941b6da71900ea2111', class: `
         textarea-container
         ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
         ${this.focusInput ? 'textarea-focus' : ''}
@@ -48,7 +48,7 @@ export class TdsTextarea {
         ${this.value ? 'textarea-data' : ''}
         ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
         ${this.noMinWidth ? 'no-min-width' : ''}
-        ` }, this.labelPosition !== 'no-label' && h("span", { key: 'd0500ea7aa6e46b47bb1c872a699cfaeddeda5ab', class: 'textarea-label' }, this.label), h("div", { key: '8a5999f270542c3683b3f9fff39f2df92ad080b9', class: "textarea-wrapper" }, h("textarea", { key: '2d3a7efcf14fab1ef3fdd9f292f98d92f1b69b86', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: 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) => {
+        ` }, this.labelPosition !== 'no-label' && h("span", { key: '67784499bde176257853f1f4c7a8757ce98b07ee', class: 'textarea-label' }, this.label), h("div", { key: '7ad9c6b9c897995a98af2b9e9babefc3e2ae8831', class: "textarea-wrapper" }, h("textarea", { key: '94d944bb5e9722d89f7b0c98d18199c52f81b458', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: 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) {
                     this.handleFocus(event);
                 }
@@ -56,7 +56,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: 'b811d84dc63c4803b5967b281480be220b4154b5', class: "textarea-resizer-icon" }, h("svg", { key: '5d7644678276e650b24d563883e698ce89f6f425', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b710c3c25054ee3fc10bbb3b8c1fbbb4bc1db1d2', "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" }))), h("span", { key: '6827f8580ed60340f01f350dc4b250db4805d040', class: "textarea-icon__readonly" }, h("tds-icon", { key: '005280ab7d4d9dfd931c99d37eb71aed28362214', name: "edit_inactive" })), h("span", { key: '79ad38f6f860038c7d50b815f8eb94b1a463d194', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'b933345ab1ba224b7f5b028e6acd011b54c2ed11', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '84143864f2c4e083e5c635d3e56f7c6b8a17a785', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: 'fc1a5750392733253961036693833566e1087979', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'df7721d236a9e7e7dac11811219b728641ade2d7', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '719da60a6975556fa37b2104d435bf99fb99efa5', class: "textarea-resizer-icon" }, h("svg", { key: '6b6969d6e49824fb8791343ac62bd1a9f5c4e0fa', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1e4d31007fef3c520cfa32686cf9b888919b314a', "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" }))), h("span", { key: '144143c8af4351e0d2370ebeb0c50a0124ab8f9b', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'e2c0ab89e72258d46bc6479b663f4d62466fa8b0', name: "edit_inactive" })), h("span", { key: 'c07af4893c1fd32de8988c1ef6ef3b77c4a63768', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'dd8ae6cbd2cdde4a08392c6905faae07bd7d58e7', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: 'c282dcee39da4e70d207e41221c557852a06fb43', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '7f05bc68e67825742fe9c8c49853a39fabf1199e', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '32dd0095c4500558fbe9c9d46ba6db3eb67d9034', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }