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

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"; }

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: '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: '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: '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"; }
@@ -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: '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"; }