@scania/tegel 1.12.1 → 1.13.0-card-stretch-beta.0

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-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

@@ -9,6 +9,9 @@ const relevantTableProps = [
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the cells.
  * @slot expand-row - Slot for the expanded row.
+
+ * @part row - Selector for the main row of the table.
+ * @part expand-row - Selector for the expanded row of the table.
  */
 export class TdsTableBodyRowExpandable {
     constructor() {
@@ -81,18 +84,18 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '74b02f93d3827e994ec32d6936861ca272cf6091', 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: '8c9b941b05eba4e785bd3d0d3b2fcc102e582e3b', class: {
+            } }, h("tr", { key: 'a3fec49a0b97a35f61db7c31dfc023ba3acebd86', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            } }, h("td", { key: '6ca2b7232372c6773b20cbebcf57c2dc22873b8e', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: '37831f286353d52f811edec384f2e8e9da65cd50', class: "tds-table__expand-control-container" }, h("input", { key: 'ecd7ac5041cba257b00485e44e9b2867fdd563a6', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '2eb29d27eea8ff2ee7a6afe74a70695b03aa141d', class: "tds-expendable-row-icon" }, h("svg", { key: '88731d236df24d952130566dfa395d3e161de82e', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '81a677c1f6a0b15145b879748cc4d9d6a93821d4', "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: 'deffa2b70b546db18812e4288e07fe6f8ac0d42d' })), h("tr", { key: '1515f8da52b7fec720a788ae9c2127d8a9a69fce', 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,
-            } }, h("td", { key: 'e16011d9e155b003d011de4a73518a81414f2e91', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: 'f60bf938090436423632bf93076bd41ee8def3ce', 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-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: 'c6d72c6812320b13b8469b3db8f64dcf00254ce3', 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: '492c4d5e7668b35272663d786469afd4aaf75e3f', class: "tds-table__upper-bar-flex" }, h("caption", { key: '9dd9312212caec5a475ad9e6440c2da9b57c5f1d', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'd56f02c75f9a438acaf9e845e5dc016432b5a551', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'b5c7303385e6b873e76448c7d1ca5a152cba5105', class: "tds-table__searchbar" }, h("input", { key: 'c758dc39e9726e21d7901028710641a5b41a91df', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: 'a0d89852cf74781619d21c2027d67b6138204f47', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'df40047f5741072ae67a5010cf441633ddeeb609', name: "search", size: "20px" })))), h("slot", { key: '0434ee11f55f20c0d56d761e525b4bac6637cce9', 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: '598a424136d016425720fe1908a73d33a945136b', role: "listitem" }, h("div", { key: '79b50ed2e10473ff8ce238fb415ff7304b945c3b', class: `${this.disabled ? 'disabled' : ''}
-                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '5b80397f2f1f3233088532b7a1f0b8952280e2d7' }))));
+        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

@@ -8,6 +8,7 @@ export class TdsFolderTabs {
         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,21 +23,15 @@ export class TdsFolderTabs {
                     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),
@@ -47,10 +42,21 @@ export class TdsFolderTabs {
                             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 = null;
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
@@ -60,6 +66,9 @@ export class TdsFolderTabs {
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
+        if (tabIndex < 0 || tabIndex >= this.children.length) {
+            throw new Error('Tab index out of bounds');
+        }
         if (!this.children[tabIndex].disabled) {
             this.children.forEach((element) => element.setSelected(false));
             this.children = this.children.map((element, index) => {
@@ -70,9 +79,11 @@ export class TdsFolderTabs {
                 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) => {
@@ -81,68 +92,45 @@ export class TdsFolderTabs {
         });
         this.children[this.selectedIndex].setSelected(true);
     }
-    calculateButtonWidth() {
-        this.children = this.children.map((tab) => {
-            if (tab.offsetWidth > this.buttonWidth) {
-                this.buttonWidth = tab.offsetWidth;
-            }
-            return tab;
-        });
-        this.children.forEach((tab) => {
-            tab.setTabWidth(this.buttonWidth);
-        });
-    }
     scrollRight() {
         const scroll = this.navWrapperElement.scrollLeft;
-        this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
+        this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
         const scroll = this.navWrapperElement.scrollLeft;
-        this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
+        this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     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.calculateButtonWidth();
-    }
-    componentDidUpdate() {
-        this.calculateButtonWidth();
+        this.tdsChange.emit({
+            selectedTabIndex: this.selectedIndex,
+        });
     }
-    componentDidRender() {
+    updateScrollButtons() {
         if (this.buttonsWidth > this.componentWidth) {
             this.evaluateScrollButtons();
         }
@@ -150,12 +138,31 @@ export class TdsFolderTabs {
             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: 'fd6d99b4cf81cc8ab1268cf58a7ba5175f6c3d88', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '6c8e749605f6bd1470858bdd31640a9724a5ada6', 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: '5d2686850ee046b3025bf4df0d160c5da2feab97', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '3cd46bbedfcc9382997521038e11f939dec6a43e', name: "chevron_left", size: "20px" })), h("slot", { key: '0679052928ad644d91d14694a7796d2a9dddaf37' }), h("button", { key: 'ea627e24449bd32838311293c25351d149e2df23', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'f4ef4fdba1c1a7bdee3f1b534a49a2ed349b91bd', 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"; }
@@ -273,6 +280,23 @@ export class TdsFolderTabs {
                     "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/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -12,8 +12,8 @@ export class TdsInlineTab {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: 'b0aa20dbd4919bd61672b8c9fa4e9630d2af9049', role: "listitem" }, h("div", { key: '0d8dbccc6c51f0aa85b0a2e0b61240325b4bbfe8', class: `inline-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '7ea9d7dd82b1387410286293fc36a780b1258265' }))));
+        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"; }