@scania/tegel 1.26.0 → 1.27.0-toast-aria-live.0

package/dist/esm/tds-dropdown_2.entry.js

@@ -89,16 +89,15 @@ const TdsDropdown = class {
                 const defaultValues = this.multiselect
                     ? this.internalDefaultValue.split(',')
                     : [this.internalDefaultValue];
-                this.updateDropdownState(defaultValues);
+                this.updateDropdownStateInternal(defaultValues);
             }
         };
         this.getChildren = () => {
             const tdsDropdownOptions = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
             if (tdsDropdownOptions.length === 0) {
-                console.warn('TDS DROPDOWN: Data missing. Disregard if loading data asynchronously.');
+                console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
             }
-            else
-                return tdsDropdownOptions;
+            return tdsDropdownOptions;
         };
         this.getSelectedChildren = () => {
             if (this.selectedOptions.length === 0)
@@ -225,6 +224,7 @@ const TdsDropdown = class {
         this.noResultText = 'No result';
         this.defaultValue = undefined;
         this.value = null;
+        this.tdsAriaLabel = undefined;
         this.open = false;
         this.internalValue = undefined;
         this.filterResult = undefined;
@@ -237,50 +237,69 @@ const TdsDropdown = class {
         const normalizedValue = this.normalizeValue(newValue);
         // Only update if actually changed
         if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
-            this.updateDropdownState(normalizedValue);
+            this.updateDropdownStateFromUser(normalizedValue);
         }
     }
     normalizeValue(value) {
         if (!value || value === '')
-            return []; // Handle both null and empty string
-        // For multiselect, keep array. For single select, wrap in array
-        if (this.multiselect) {
+            return [];
+        // For single select, ensure we handle both string and array inputs
+        if (!this.multiselect) {
+            // If array is passed to single select, take first value
             if (Array.isArray(value)) {
-                return convertArrayToStrings(value);
+                return [convertToString(value[0])];
             }
-            return value
-                .toString()
-                .split(',')
-                .filter((v) => v !== '');
+            return [convertToString(value)];
+        }
+        // For multiselect
+        if (Array.isArray(value)) {
+            return convertArrayToStrings(value);
         }
-        // Single select - convert to string array
-        return Array.isArray(value) ? convertArrayToStrings(value) : [convertToString(value)];
+        // Handle comma-separated string for multiselect
+        return value
+            .toString()
+            .split(',')
+            .filter((v) => v !== '');
     }
     hasValueChanged(newValue, currentValue) {
         if (newValue.length !== currentValue.length)
             return true;
         return newValue.some((val) => !currentValue.includes(val));
     }
-    updateDropdownState(values) {
+    updateDropdownStateInternal(values) {
+        this.updateDropdownState(values, false);
+    }
+    updateDropdownStateFromUser(values) {
+        this.updateDropdownState(values, true);
+    }
+    updateDropdownState(values, emitChange = true) {
+        // Validate the values first
+        const validValues = this.validateValues(values);
         // Update internal state
-        this.selectedOptions = [...this.validateValues(values)]; // Force new array reference
-        // Then update the value prop to match
+        this.selectedOptions = [...validValues];
+        // Update the value prop
         this.value = this.multiselect ? this.selectedOptions : this.selectedOptions[0] || null;
-        // Force update of internal value
+        // Update internal value for display
         this.internalValue = this.getValue();
         // Update DOM
         this.updateOptionElements();
         // Update display value
         this.updateDisplayValue();
-        // Emit change event
-        this.emitChange();
+        // Emit change event only if value has changed by user
+        if (emitChange)
+            this.emitChange();
         // Update value attribute
         this.setValueAttribute();
     }
     validateValues(values) {
+        // Make sure we have children before validation
+        const children = this.getChildren();
+        if (!children || children.length === 0) {
+            console.warn('No dropdown options found');
+            return values; // Return original values if no children yet
+        }
         return values.filter((val) => {
-            var _a;
-            const isValid = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.some((element) => element.value === val);
+            const isValid = children.some((element) => convertToString(element.value) === convertToString(val));
             if (!isValid) {
                 console.warn(`Option with value "${val}" does not exist`);
             }
@@ -317,18 +336,18 @@ const TdsDropdown = class {
         else {
             normalizedValue = [convertToString(value)];
         }
-        this.updateDropdownState(normalizedValue);
+        this.updateDropdownStateFromUser(normalizedValue);
         return this.getSelectedChildren().map((element) => ({
             value: element.value,
             label: element.textContent.trim(),
         }));
     }
     async reset() {
-        this.updateDropdownState([]);
+        this.updateDropdownStateFromUser([]);
     }
     async removeValue(oldValue) {
         const newValues = this.selectedOptions.filter((v) => v !== oldValue);
-        this.updateDropdownState(newValues);
+        this.updateDropdownStateFromUser(newValues);
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
@@ -406,13 +425,19 @@ const TdsDropdown = class {
         }
     }
     componentWillLoad() {
-        if (this.defaultValue && !this.value) {
-            // Convert defaultValue to string before splitting
+        // First handle the value prop if it exists
+        if (this.value !== null && this.value !== undefined) {
+            const normalizedValue = this.normalizeValue(this.value);
+            this.updateDropdownStateInternal(normalizedValue);
+            return; // Exit early if we handled the value prop
+        }
+        // Only use defaultValue if no value prop was provided
+        if (this.defaultValue !== null && this.defaultValue !== undefined) {
             const defaultValueStr = convertToString(this.defaultValue);
             const initialValue = this.multiselect
                 ? defaultValueStr.split(',').map(convertToString)
                 : [convertToString(this.defaultValue)];
-            this.updateDropdownState(initialValue);
+            this.updateDropdownStateInternal(initialValue);
         }
     }
     /** Method to handle slot changes */
@@ -428,10 +453,10 @@ const TdsDropdown = class {
      */
     async appendValue(value) {
         if (this.multiselect) {
-            this.updateDropdownState([...this.selectedOptions, value]);
+            this.updateDropdownStateFromUser([...this.selectedOptions, value]);
         }
         else {
-            this.updateDropdownState([value]);
+            this.updateDropdownStateFromUser([value]);
         }
     }
     componentDidRender() {
@@ -446,11 +471,16 @@ const TdsDropdown = class {
             form.removeEventListener('reset', this.resetInput);
         }
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
         appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
-        return (h(Host, { key: '490d34545b3a09c3b4342fa09d38f6bf9c782498', role: "select", class: {
+        return (h(Host, { key: 'dbd588020c5f634d489ca464c2a4fd568e9b905a', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '7eb96c0134032654df98a3b68ffb692a2cd91d2b', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '439fddb188ad65239e9d5451a82ab3bbe8f47fb7', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'e0b7d8efe2206136140695647f7b0656de6f4559', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'abc333e48a6ecc7d89f2ddeec0ff587371baf78c', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -463,7 +493,7 @@ const TdsDropdown = class {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("input", {
+                    ` }, this.label)), h("input", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled,
             // eslint-disable-next-line no-return-assign
             ref: (inputEl) => (this.inputElement = inputEl), class: {
                 placeholder: this.labelPosition === 'inside',
@@ -477,8 +507,7 @@ const TdsDropdown = class {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
-            }
-        })), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
+            } })), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleFilterReset();
                 }
@@ -489,7 +518,7 @@ const TdsDropdown = class {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -501,7 +530,7 @@ const TdsDropdown = class {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'd6381f78466994f05415cf8981b3cedaaf4df6a9', ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'd83c66bf81a1d2878827d5ed71cdeee73625cbd0', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -512,11 +541,11 @@ const TdsDropdown = class {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: 'c36a9cb5398a7d290f11576431982e869986e4a0', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '5ec07552d105f8a4addc46da0172f67cf9233817', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'b3e240c31060f2d2bce6e3647f903f9ff1250ed5', class: {
+            } }, h("slot", { key: '0133acc19540fb2ebfd44611fb906b5895d300d6', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '3cdf4874c3e5f593850b3238b9f87508ad67c312', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'a51e0a23e67f22427010ee9c965ab7535c46176e', class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'c0eb10dfeaa5236f5ac02dabf44329e85d52dcda', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '719a9da93ed73509c1a0694d3011f8e304d73cf9', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -611,7 +640,7 @@ const TdsDropdownOption = class {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'af1229553e89c02aca1d7c11bbc80acd25ce44b5', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c93eb33d1864028690ab981c0f676f03993265c4', class: `dropdown-option 
+        return (h(Host, { key: 'f471d5238869b3a522b36d99d7549c1229cd83a2' }, h("div", { key: 'da9edccba96999b0ee40f8c599325774593de814', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -623,7 +652,7 @@ const TdsDropdownOption = class {
                 this.handleMultiselect(event);
             }, disabled: this.disabled, checked: this.selected, class: {
                 [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
+            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, onClick: () => {
                 this.handleSingleSelect();
             }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
     }

package/dist/esm/tds-folder-tab.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 
 const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-left:1px solid;border-left-color:transparent}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host div:not(.selected){background-color:var(--tds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--tds-folder-tab-divider-color);border-top:2px solid var(--tds-folder-tab-background);color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top-color:var(--tds-folder-tab-background-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}:host div:not(.selected).disabled ::slotted(*:focus-visible){outline:none}:host div:not(.selected).disabled ::slotted(*:hover){cursor:not-allowed}:host div:not(.selected).disabled ::slotted(*::after){content:none}:host .selected{background-color:var(--tds-folder-tab-background-selected);border-top:2px solid var(--tds-folder-tab-border-selected)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-background-selected);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) :not(.selected) ::slotted(*){border-left-color:transparent}";
 const TdsFolderTabStyle0 = folderTabCss;
@@ -18,12 +18,31 @@ const TdsFolderTab = class {
     async setSelected(selected) {
         this.selected = selected;
     }
+    connectedCallback() {
+        const elements = this.host.querySelectorAll('button, a');
+        for (let index = 0; index < elements.length; index++) {
+            const element = elements[index];
+            if (!element.getAttribute('aria-controls')) {
+                console.warn('Tegel folder-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
+            }
+            if (element.getAttribute('role') !== 'tab') {
+                console.warn('Tegel folder-tab component: Interactive elements should have attribute role="tab"');
+            }
+            if (this.disabled) {
+                element.setAttribute('aria-disabled', 'true');
+            }
+            else {
+                element.removeAttribute('aria-disabled');
+            }
+        }
+    }
     render() {
-        return (h(Host, { key: '919cd453da1e3649fb5da8783ab8fabc47322d47', role: "listitem" }, h("div", { key: 'f00bf3eea1ee0d670d8989e23e27d6c54fbe7c17', class: {
+        return (h(Host, { key: '9290c4ab2f7d051bba9fec4dad9a7d07790ed5b7', "aria-selected": this.selected }, h("div", { key: '36225101c510f2d77282fd600c4ee00085791109', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '3e3bd62fd02c922fa0592dc0f2dae5a8b49d6c4c' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '05954c498b9fbd6a2a1231d84bf2657a0616db36' }))));
     }
+    get host() { return getElement(this); }
 };
 TdsFolderTab.style = TdsFolderTabStyle0;
 

package/dist/esm/tds-folder-tabs.entry.js

@@ -63,6 +63,8 @@ const TdsFolderTabs = class {
         this.modeVariant = null;
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        this.tdsScrollRightAriaLabel = 'Scroll right';
         this.buttonWidth = 0;
         this.showLeftScroll = false;
         this.showRightScroll = false;
@@ -163,9 +165,9 @@ const TdsFolderTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '19b773750f13304194341caf79242c7be95b41be', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '915b525f1d8fc67f3edf82f0841ea89cfd8424bc', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '54a3cceed49387a8f0dbe74eecb96ae284882ff9', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '170e5256bde8efdce412bbab1a674b23159d02d1', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '806f5ce973b4b9bf842ae4c3fdf42c6160255db4', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '4762c8fcfb5f7bb9a67ce2515fc3cab557180ca8', name: "chevron_left", size: "20px" })), h("slot", { key: '498f04374cb1ad240df2a6e02830eba9bc6c3c8d', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '47f114815e98c22f26b021df2b5f53f4498ba24b', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'b4f3a0e137c84b996bdf7eb7e497e788637ac401', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '1c74ef8c81361bfa6ff5d227c145a3371fb2f66f', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '94ddd85d4107c89487db727f13a9c443fd160fc6', name: "chevron_left", size: "20px" })), h("slot", { key: '63978c3c62482bc0a251377756630f555f10dfef', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'aeb86fbdb365e62df37b72daa0b53f51486834a9', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '2cc4d301a4490d6b8d8f2373fc2450c93922a814', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {