@scania/tegel 1.26.0 → 1.27.0-allow-numbers-and-zero-values-beta.0

package/dist/components/{p-a64dc22e.js → p-797c8dce.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { c as convertArrayToStrings, a as convertToString } from './p-b1d21573.js';
-import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
+import { c as convertToString, a as convertArrayToStrings } from './p-a1181b1f.js';
+import { d as defineCustomElement$1 } from './p-4487c541.js';
 
 /**
  * Find the next focusable element index in a list of focusable elements.
@@ -78,16 +78,15 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 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)
@@ -95,7 +94,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             return this.selectedOptions
                 .map((stringValue) => {
                 var _a;
-                const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => element.value === stringValue);
+                const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => convertToString(element.value) === convertToString(stringValue));
                 return matchingElement;
             })
                 .filter(Boolean);
@@ -214,6 +213,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.noResultText = 'No result';
         this.defaultValue = undefined;
         this.value = null;
+        this.tdsAriaLabel = undefined;
         this.open = false;
         this.internalValue = undefined;
         this.filterResult = undefined;
@@ -226,50 +226,69 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         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) {
+        if (value === null || value === undefined || value === '')
+            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`);
             }
@@ -306,18 +325,18 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         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() {
@@ -395,13 +414,19 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         }
     }
     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);
+                : [defaultValueStr];
+            this.updateDropdownStateInternal(initialValue);
         }
     }
     /** Method to handle slot changes */
@@ -417,10 +442,10 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
      */
     async appendValue(value) {
         if (this.multiselect) {
-            this.updateDropdownState([...this.selectedOptions, value]);
+            this.updateDropdownStateFromUser([...this.selectedOptions, value]);
         }
         else {
-            this.updateDropdownState([value]);
+            this.updateDropdownStateFromUser([value]);
         }
     }
     componentDidRender() {
@@ -435,11 +460,16 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             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: 'b8c418ebe609789c1610178d764a7d620e2231c2', 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: 'ee5c005d5020e2226ce54c93a90f2098e081a6df', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'ca674a2361f1301886bb855b7093c67b999a500a', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -452,7 +482,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     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',
@@ -466,8 +496,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 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();
                 }
@@ -478,7 +507,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 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;
                 }
@@ -490,7 +519,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     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: '14558013e5903958942dc7dd3ef2d3a49f79b245', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -501,11 +530,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 '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: '5f69c2fcb5b6a130888d7cd92d4cb882122e3e58', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'bae7a62960f90cd7b679ac4956a677dbff378ac7', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'be5fe56a1e19e812fa983c22f130c0d3001da55b', 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: 'c0ccc491caa1aca628aff12e02d8a917a74e9c86', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -532,6 +561,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         "noResultText": [1, "no-result-text"],
         "defaultValue": [8, "default-value"],
         "value": [1032],
+        "tdsAriaLabel": [1, "tds-aria-label"],
         "open": [32],
         "internalValue": [32],
         "filterResult": [32],

package/dist/components/{p-4c1e3344.js → p-83db8b35.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
 import { d as defineCustomElement$3 } from './p-e49a0ceb.js';
 import { d as defineCustomElement$2 } from './p-d61bd22e.js';
-import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
+import { d as defineCustomElement$1 } from './p-4487c541.js';
 
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
 const TdsHeaderLauncherButtonStyle0 = headerLauncherButtonCss;

package/dist/components/{p-b1d21573.js → p-a1181b1f.js}

@@ -13,4 +13,4 @@ const convertArrayToStrings = (values) => {
     return values.map((value) => convertToString(value));
 };
 
-export { convertToString as a, convertArrayToStrings as c };
+export { convertArrayToStrings as a, convertToString as c };