@scania/tegel 1.12.1 → 1.13.0

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

@@ -8,6 +8,7 @@ export class TdsInlineTabs {
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
         this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
                 entries.forEach((entry) => {
@@ -22,20 +23,15 @@ export class TdsInlineTabs {
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
                     this.scrollWidth = buttonsWidth - componentWidth;
-                    if (this.buttonsWidth > this.componentWidth) {
-                        this.evaluateScrollButtons();
-                    }
-                    else {
-                        this.showLeftScroll = false;
-                        this.showRightScroll = false;
-                    }
+                    this.updateScrollButtons();
                 });
             });
             resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
-            this.children = this.children.map((item, index) => {
-                item.addEventListener('click', () => {
+            this.children = Array.from(this.host.children);
+            this.children.map((item, index) => {
+                const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
                             selectedTabIndex: this.children.indexOf(item),
@@ -46,19 +42,33 @@ export class TdsInlineTabs {
                             this.selectedIndex = index;
                         }
                     }
-                });
+                };
+                item.addEventListener('click', clickHandler);
+                this.clickHandlers.set(item, clickHandler); // Store the handler in WeakMap
                 return item;
             });
         };
+        this.removeEventListenerFromTabs = () => {
+            this.children.forEach((item) => {
+                const clickHandler = this.clickHandlers.get(item);
+                if (clickHandler) {
+                    item.removeEventListener('click', clickHandler);
+                    this.clickHandlers.delete(item);
+                }
+            });
+        };
         this.modeVariant = 'primary';
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
         this.showLeftScroll = false;
         this.showRightScroll = false;
-        this.buttonWidth = 0;
     }
     /** Selects a Tab based on tabindex, will not select a disabled Tab. */
     async selectTab(tabIndex) {
+        if (tabIndex < 0 || tabIndex >= this.children.length) {
+            throw new Error('Tab index out of bounds');
+        }
+        this.children = Array.from(this.host.children);
         if (!this.children[tabIndex].disabled) {
             this.children.forEach((element) => element.setSelected(false));
             this.children = this.children.map((element, index) => {
@@ -69,9 +79,11 @@ export class TdsInlineTabs {
                 return element;
             });
         }
-        return {
-            selectedTabIndex: this.selectedIndex,
-        };
+        return { selectedTabIndex: this.selectedIndex };
+    }
+    /** Reinitializes the component. */
+    async reinitialize() {
+        this.handleSlotChange();
     }
     handleSelectedIndexUpdate() {
         this.children = Array.from(this.host.children).map((tabElement) => {
@@ -92,41 +104,33 @@ export class TdsInlineTabs {
     }
     evaluateScrollButtons() {
         const scroll = this.navWrapperElement.scrollLeft;
-        if (scroll >= this.scrollWidth) {
-            this.showRightScroll = false;
-        }
-        else {
-            this.showRightScroll = true;
-        }
-        if (scroll <= 0) {
-            this.showLeftScroll = false;
-        }
-        else {
-            this.showLeftScroll = true;
-        }
+        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showLeftScroll = scroll > 0;
     }
-    connectedCallback() {
+    initializeTabs() {
         this.children = Array.from(this.host.children);
+        // remove first and last class from other tabs in case of initialization
+        this.children.forEach((child) => {
+            child.classList.remove('last');
+            child.classList.remove('first');
+        });
         this.children[0].classList.add('first');
         this.children[this.children.length - 1].classList.add('last');
     }
-    componentDidLoad() {
+    initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
             this.addEventListenerToTabs();
             this.children[this.defaultSelectedIndex].setSelected(true);
             this.selectedIndex = this.defaultSelectedIndex;
-            this.tdsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-            });
         }
         else {
             this.children[this.selectedIndex].setSelected(true);
-            this.tdsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-            });
         }
+        this.tdsChange.emit({
+            selectedTabIndex: this.selectedIndex,
+        });
     }
-    componentDidRender() {
+    updateScrollButtons() {
         if (this.buttonsWidth > this.componentWidth) {
             this.evaluateScrollButtons();
         }
@@ -134,12 +138,31 @@ export class TdsInlineTabs {
             this.showLeftScroll = false;
             this.showRightScroll = false;
         }
+    }
+    handleSlotChange() {
+        this.initializeTabs();
+        this.addEventListenerToTabs();
+        this.initializeSelectedTab();
+        this.updateScrollButtons();
         this.addResizeObserver();
     }
+    connectedCallback() {
+        this.initializeTabs();
+    }
+    componentDidLoad() {
+        this.initializeSelectedTab();
+    }
+    componentDidRender() {
+        this.updateScrollButtons();
+        this.addResizeObserver();
+    }
+    disconnectedCallback() {
+        this.removeEventListenerFromTabs();
+    }
     render() {
-        return (h(Host, { key: '13f5f4fb4d32501c1a8f9cec78e92e941373eb13', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '67bddb0d4884a0940ed464c9fac72f696d4cb8dd', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '555e316c060f61dc63109016fac6905b228e6bee', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '1c44ccc797541d755c9ce0ead94b9a032afa5c09', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'c9fe10cd497f28588aafec197ce09469ed4a4d6f', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'e4693c5008ea111f4c7469ee19cd7747ef6a03ba', name: "chevron_left", size: "20px" })), h("slot", { key: '5e781cb1c9e0f4fb05471391779d05641d753fae' }), h("button", { key: 'b37bd9651c1f64eafcfacbac47ab774d10f2378f', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '8ecf69c6e068803bed69710328763ec91ccdaa3b', name: "chevron_right", size: "20px" })))));
+            } }, 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" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -213,8 +236,7 @@ export class TdsInlineTabs {
     static get states() {
         return {
             "showLeftScroll": {},
-            "showRightScroll": {},
-            "buttonWidth": {}
+            "showRightScroll": {}
         };
     }
     static get events() {
@@ -249,6 +271,14 @@ export class TdsInlineTabs {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "HTMLTdsInlineTabElement": {
+                            "location": "global",
+                            "id": "global::HTMLTdsInlineTabElement"
                         }
                     },
                     "return": "Promise<{ selectedTabIndex: number; }>"
@@ -257,6 +287,23 @@ export class TdsInlineTabs {
                     "text": "Selects a Tab based on tabindex, will not select a disabled Tab.",
                     "tags": []
                 }
+            },
+            "reinitialize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reinitializes the component.",
+                    "tags": []
+                }
             }
         };
     }

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: 'fc0173c2c7600a3c97991e297167289a7d6ce1be', role: "listitem" }, h("div", { key: 'bfcfbb30f0087cf2e3c3df16653f60b69ea641d4', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '3c8eeb97e1ea4f9afe04eb55b7b6c099c26169f0' }))));
+        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' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,6 +8,7 @@ export class TdsNavigationTabs {
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
         this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
                 entries.forEach((entry) => {
@@ -18,26 +19,19 @@ export class TdsNavigationTabs {
                         const style = window.getComputedStyle(navButton);
                         buttonsWidth +=
                             navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-                        navButton.classList.add('tds-navigation-tabs-tab');
                     });
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
                     this.scrollWidth = buttonsWidth - componentWidth;
-                    if (this.buttonsWidth > this.componentWidth) {
-                        this.evaluateScrollButtons();
-                    }
-                    else {
-                        this.showLeftScroll = false;
-                        this.showRightScroll = false;
-                    }
+                    this.updateScrollButtons();
                 });
             });
             resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
-            this.children = this.children.map((item, index) => {
-                item.addEventListener('click', () => {
+            this.children.map((item, index) => {
+                const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
                             selectedTabIndex: this.children.indexOf(item),
@@ -48,25 +42,20 @@ export class TdsNavigationTabs {
                             this.selectedIndex = index;
                         }
                     }
-                });
+                };
+                item.addEventListener('click', clickHandler);
+                this.clickHandlers.set(item, clickHandler); // Store the handler in WeakMap
                 return item;
             });
         };
-        this.componentDidLoad = () => {
-            if (this.selectedIndex === undefined) {
-                this.addEventListenerToTabs();
-                this.children[this.defaultSelectedIndex].setSelected(true);
-                this.selectedIndex = this.defaultSelectedIndex;
-                this.tdsChange.emit({
-                    selectedTabIndex: this.selectedIndex,
-                });
-            }
-            else {
-                this.children[this.selectedIndex].setSelected(true);
-                this.tdsChange.emit({
-                    selectedTabIndex: this.selectedIndex,
-                });
-            }
+        this.removeEventListenerFromTabs = () => {
+            this.children.forEach((item) => {
+                const clickHandler = this.clickHandlers.get(item);
+                if (clickHandler) {
+                    item.removeEventListener('click', clickHandler);
+                    this.clickHandlers.delete(item);
+                }
+            });
         };
         this.modeVariant = 'primary';
         this.defaultSelectedIndex = 0;
@@ -90,6 +79,10 @@ export class TdsNavigationTabs {
             selectedTabIndex: this.selectedIndex,
         };
     }
+    /** Reinitializes the component. */
+    async reinitialize() {
+        this.handleSlotChange();
+    }
     handleSelectedIndexUpdate() {
         this.children = Array.from(this.host.children).map((tabElement) => {
             tabElement.setSelected(false);
@@ -109,31 +102,65 @@ export class TdsNavigationTabs {
     }
     evaluateScrollButtons() {
         const scroll = this.navWrapperElement.scrollLeft;
-        if (scroll >= this.scrollWidth) {
-            this.showRightScroll = false;
+        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showLeftScroll = scroll > 0;
+    }
+    initializeTabs() {
+        this.children = Array.from(this.host.children);
+        // remove first and last class from other tabs in case of initialization
+        this.children.forEach((child) => {
+            child.classList.remove('last');
+            child.classList.remove('first');
+        });
+        this.children[0].classList.add('first');
+        this.children[this.children.length - 1].classList.add('last');
+    }
+    initializeSelectedTab() {
+        if (this.selectedIndex === undefined) {
+            this.addEventListenerToTabs();
+            this.children[this.defaultSelectedIndex].setSelected(true);
+            this.selectedIndex = this.defaultSelectedIndex;
         }
         else {
-            this.showRightScroll = true;
+            this.children[this.selectedIndex].setSelected(true);
         }
-        if (scroll <= 0) {
-            this.showLeftScroll = false;
+        this.tdsChange.emit({
+            selectedTabIndex: this.selectedIndex,
+        });
+    }
+    updateScrollButtons() {
+        if (this.buttonsWidth > this.componentWidth) {
+            this.evaluateScrollButtons();
         }
         else {
-            this.showLeftScroll = true;
+            this.showLeftScroll = false;
+            this.showRightScroll = false;
         }
     }
+    handleSlotChange() {
+        this.initializeTabs();
+        this.addEventListenerToTabs();
+        this.initializeSelectedTab();
+        this.updateScrollButtons();
+        this.addResizeObserver();
+    }
     connectedCallback() {
-        this.children = Array.from(this.host.children);
-        this.children[0].classList.add('first');
-        this.children[this.children.length - 1].classList.add('last');
+        this.initializeTabs();
+    }
+    componentDidLoad() {
+        this.initializeSelectedTab();
     }
     componentDidRender() {
+        this.updateScrollButtons();
         this.addResizeObserver();
     }
+    disconnectedCallback() {
+        this.removeEventListenerFromTabs();
+    }
     render() {
-        return (h(Host, { key: '86a8c02e34256be7677e0dffe354a2d96f28dee9', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '4f2ac824013bc4a946de48df262dedf25c0fb861', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'fea2449aaf66f65617b3752cbfc7f26aaa4804a1', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '9281904c74032d5b80b27c0b7d8fc1296403dae9', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'ab9bcd36a950c8155e1d52400c80a355d6a35692', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '1720b09524520516fa4364fcd51ac8d9821544f0', name: "chevron_left", size: "20px" })), h("slot", { key: '97a4d6d8593f550366aa665dddcb64c5c4118fa2' }), h("button", { key: 'd94a7b0f8c5b0d612105bfb9b834431bced085ad', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9d9e229f0983ea16814264df1fa30ff19a3e4aed', name: "chevron_right", size: "20px" })))));
+            } }, 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" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -250,6 +277,23 @@ export class TdsNavigationTabs {
                     "text": "Sets the passed tabindex as the selected Tab.",
                     "tags": []
                 }
+            },
+            "reinitialize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reinitializes the component.",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -30,8 +30,8 @@ export class TdsTextField {
     }
     // Data input event in value prop
     handleInput(event) {
-        this.tdsInput.emit(event);
         this.value = event.target.value;
+        this.tdsInput.emit(event);
     }
     /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
     handleFocus(event) {
@@ -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: 'af93aac8fe99744a466af32645df1159f6517621', class: {
+        return (h("div", { key: '2fa2e3f2de6eae88c0a1f4ee5e70ca3443e0dbb7', 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: 'ceffe4d0d2cbc71f0261b8e3d61e18b24ba22b68', class: "text-field-label-outside" }, h("div", { key: '2084087df1a986ab9c41fb741fd00ff6e22bb572' }, this.label))), h("div", { key: '3077fb9808ee0b09cb28cb69b9f2bb34b7224eb0', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '6e234045ab96c5d29a1119c2a7c16e77205f466e', class: {
+            } }, 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: {
                 '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: '76df42ef5b886284b471cf77552b1d7473857f0c', name: "prefix" }))), h("div", { key: '03b3ee869ba507a9decd9c9b5af1fda9bc47c671', class: "text-field-input-container" }, h("input", { key: '47049115cff82c06d88a77792388f37ffedc5dbc', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, 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: {
                 '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: '69deb0290018fd1649700266e706b0a55ed66b5e', class: "text-field-label-inside" }, this.label))), h("div", { key: '5cddf711727ef892849e3970a366854ce19fffc1', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'a169798c9699ebced30dd65660678358d8e63ac8', class: {
+            } }), 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: {
                 '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: '4043d0ab130b9a0e7d2c0966300b997537bae53e', name: "suffix" }))), h("span", { key: 'ef9e4d55f310cbc8132e46f1e74f89a9fbc62ca9', class: "text-field-icon__readonly" }, h("tds-icon", { key: 'a968990fc370038a3657c752720ae29905b8b115', name: "edit_inactive", size: "20px" })), h("span", { key: '7518767f23b8a424bdad9d3cc776c179bf745680', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '857ab4650416e7abb96637c4cb7a8bf5a6f7fbe5', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: 'bee202fccd49ba3cbe14a65d9e75b1d2a1e8d7a4', class: "text-field-helper-error-state" }, h("tds-icon", { key: '039457d06cccdf7a3a61b6b65952d2735df6aac3', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '92aa70e21712e92836ecd92b1d5faa2f31473f82', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '58559bb93ab041e096e6a6b383b6371cc49e40af', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
+            } }, 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))))));
     }
     static get is() { return "tds-text-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -27,8 +27,8 @@ export class TdsTextarea {
     }
     // Data input event in value prop
     handleInput(event) {
-        this.tdsInput.emit(event);
         this.value = event.target.value;
+        this.tdsInput.emit(event);
     }
     /* Set the input as focus when clicking the whole textarea with suffix/prefix */
     handleFocus(event) {
@@ -38,7 +38,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '755ac00cf894aac2a205af846cb36feb86035754', class: `
+        return (h("div", { key: 'd3d976213416280711e65fa300c72fd5055fed83', 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: '41953b1cf8951c3c29398adc80db618350944373', class: 'textarea-label' }, this.label), h("div", { key: '8ef9341455620e366f457ec365df44a12b87404a', class: "textarea-wrapper" }, h("textarea", { key: '784dfd2bf892c4452b400bec2e0c51d21a624ba7', 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: '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) => {
                 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: 'd06a243ac05c7504fac95b5fe5f4cba1dce7e9f9', class: "textarea-resizer-icon" }, h("svg", { key: 'fcffd85e4a8ad69e9616dd84d24fd9917e11b6ed', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '291f217768dbc7ae1f3768dca2be75fdfbaa9938', "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: '45d95dbdedead0c5db29449319756751b3bb7866', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'bb634b3a769cf1630e57e8dc64d5d69fe741401e', name: "edit_inactive" })), h("span", { key: 'a9bd4f2739ea611f91187649acb79e483cbff888', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: '0c34d469e1ca4cb19e98b23b074be388e333d33e', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '33a21a513d62a5785cf37edc7d595501b0295088', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '9c0c4292fcd652a7b40ee6eebf846c3e8f64e5bb', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '130fd514336bc5bdc910f608314755cc1c5c4789', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, 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))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/toast/toast.js

@@ -58,12 +58,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '40896b8e7fa322b37e69592486e7b128a52c2b97', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: 'c6d8408449213af94bdcb52dc5d8433770baea50', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '22c9563b7a6fe868455f03ec3d5ee6af735912d3', class: `
+            } }, h("div", { key: '0afa424fe1601689702a252043d5f779c7514a42', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '6c32c80e7994b1758576c934a3dab4fd4320a4d9', name: this.getIconName(), size: "20px" }), h("div", { key: 'eaf31eb3b1b6dae5931885909e8616333e462378', class: `content` }, h("div", { key: '5f93d7e05b6d7d3d5e6f178d1697cc9cf28bdf3c', class: "header-subheader" }, this.header && h("div", { key: '50c71fd695bf0ef5fd04ae9d110b6af8b9c4cf34', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '3ff01f3f1af157f21bd17c086275a33d993c0136', name: "header" }), this.subheader && h("div", { key: 'bacda64f72cd981b21d0efdcb0ea429a6c6cc80e', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'c298d09af3b4f10c9a5cf116f33cc7026d41b858', name: "subheader" })), usesActionsSlot && (h("div", { key: '64f62ad9c487798d02fe14b4cd3cb0cf4ac751bb', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '544c61fdaa8d8d3ffe49fc278e19fef0033e18c8', name: "actions" })))), this.closable && (h("button", { key: 'c62ddb0d20113571fcf4bf0b790b87727ba2a307', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '39f7e267c2ee46156f78235e9225436708d5911a', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '901b872f4a8f7cbb9c322f3ef61c163ec8abe5f7', name: this.getIconName(), size: "20px" }), h("div", { key: 'bff3f23b0635157ad275dcaad97215e86e45f44b', class: `content` }, h("div", { key: 'c806be8599140274994ec5fb7a9456f557563cec', class: "header-subheader" }, this.header && h("div", { key: '03f02a55b39fbc5ee137ad4204ffd7f0f89379e0', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '63058b8052c4a5fe943a3dc66dcfba9374cca63c', name: "header" }), this.subheader && h("div", { key: '706453138001deee57287c380b7930ba17604645', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '0faac5d6021b3d36c6b2902494a57635d73cd837', name: "subheader" })), usesActionsSlot && (h("div", { key: '35c67082ad0016816916e87aca2027d90bd23c63', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '88aa252c50e61103c1762a34b259bd9750a8b565', name: "actions" })))), this.closable && (h("button", { key: '33b1822b7e591f1c89bc8bbad56fd3fccd554934', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'e414151a1b74f6c03efb264a9f5129c97e7083ff', name: "cross", size: "20px" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.js

@@ -29,7 +29,7 @@ export class TdsToggle {
         };
     }
     render() {
-        return (h("div", { key: '4ca12f4ed989129407a0c7c0f41c33b57403783f', class: "tds-toggle" }, this.headline && (h("div", { key: '5b5e05e2405a13bbcfa86018d90bdbbc69782cee', class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { key: '81b9730f03c5a7cf702ed77441523320a9229398', "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { key: '4ed1d3700b76040f5f225da27bcd5eab5611939d', class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { key: '458f1d0867aa3064d61a0b568fd91be35d1f99f5', name: "label" }))));
+        return (h("div", { key: '0d243a59400988863389f3a66c847bd0fb848844', class: "tds-toggle" }, this.headline && (h("div", { key: 'a8eb6d04f1dcf6ba4a646b2fef55b991d71cd0c1', class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { key: '1e736480e3449364a3de9911d991271c12770471', "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { key: 'e71e01203291273241e8c2331fc0921c37f3ca76', class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { key: '236d8bbf052973f056c09f033d57fbe3c8f4b2e8', name: "label" }))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -51,7 +51,7 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '09e3cbcc6df68b45aba5ea2a83a7498b333816d3' }, h("tds-popover-core", Object.assign({ key: '818391a146b316b9830989a772c0ab050203eb71' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '2e3b4815fdae077fa27e37cbec9efb357667e031' }, h("tds-popover-core", Object.assign({ key: '807cdcd91ef5f67082ddd3a7a0d5cc5cac20882e' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -60,7 +60,7 @@ export class TdsTooltip {
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            } }), this.text, h("slot", { key: 'd62923964dd2d9221349e01ef6403e3a83e53932' }))));
+            } }), this.text, h("slot", { key: 'cf99ac4955c0f29722f5fd7ed1f6f22f22c22d20' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/components/index.js

@@ -1 +1 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-35fa6479.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-28ef5186.js';

package/dist/components/{p-d9cf3eaa.js → p-0676aa23.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-35fa6479.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as dfs } from './p-52bf0fdf.js';
-import { d as defineCustomElement$1 } from './p-ead7cac2.js';
+import { d as defineCustomElement$1 } from './p-30de8ac4.js';
 
 const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
 const TdsHeaderItemStyle0 = headerItemCss;

package/dist/components/{p-e5207615.js → p-09d36119.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-35fa6479.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 
 const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
 const TdsSideMenuUserLabelStyle0 = sideMenuUserLabelCss;
@@ -12,7 +12,7 @@ const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuU
         this.subheading = undefined;
     }
     render() {
-        return (h(Host, { key: '361c1868777c78a539e7c36a0acb9963f57fde3c' }, this.heading, this.subheading && h("div", { key: 'a1e15c671dcd77841051c52c3e17ef66bbf7730f', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '5b26493d17e356fa885a7b615ed4bda03e751eb6' }, this.heading, this.subheading && h("div", { key: '2dc511289427ef2ea490fec0308119c42956113c', class: "subheading" }, this.subheading)));
     }
     static get style() { return TdsSideMenuUserLabelStyle0; }
 }, [1, "tds-side-menu-user-label", {