@scania/tegel 1.26.0-value-prop-fix.beta.0 → 1.27.0

package/dist/components/{p-3cd8af42.js → p-663b8e51.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { c as convertToString, a as convertArrayToStrings } from './p-a1181b1f.js';
-import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
+import { d as defineCustomElement$1 } from './p-4487c541.js';
 
 /**
  * Find the next focusable element index in a list of focusable elements.
@@ -78,7 +78,7 @@ 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 = () => {
@@ -213,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;
@@ -221,14 +222,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.selectedOptions = [];
     }
     handleValueChange(newValue) {
-        console.log('Value changed:', newValue); // Debug
         // Normalize to array
         const normalizedValue = this.normalizeValue(newValue);
-        console.log('Normalized value:', normalizedValue); // Debug
         // Only update if actually changed
         if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
-            console.log('Value has changed, updating state'); // Debug
-            this.updateDropdownState(normalizedValue);
+            this.updateDropdownStateFromUser(normalizedValue);
         }
     }
     normalizeValue(value) {
@@ -257,11 +255,15 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             return true;
         return newValue.some((val) => !currentValue.includes(val));
     }
-    updateDropdownState(values) {
-        console.log('Updating dropdown state with values:', values); // Debug
+    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);
-        console.log('Valid values:', validValues); // Debug
         // Update internal state
         this.selectedOptions = [...validValues];
         // Update the value prop
@@ -272,8 +274,9 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         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();
     }
@@ -281,7 +284,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         // Make sure we have children before validation
         const children = this.getChildren();
         if (!children || children.length === 0) {
-            console.warn('No dropdown options found'); // Debug
+            console.warn('No dropdown options found');
             return values; // Return original values if no children yet
         }
         return values.filter((val) => {
@@ -322,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() {
@@ -413,10 +416,8 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
     componentWillLoad() {
         // First handle the value prop if it exists
         if (this.value !== null && this.value !== undefined) {
-            console.log('Initial value:', this.value); // Debug
             const normalizedValue = this.normalizeValue(this.value);
-            console.log('Normalized value:', normalizedValue); // Debug
-            this.updateDropdownState(normalizedValue);
+            this.updateDropdownStateInternal(normalizedValue);
             return; // Exit early if we handled the value prop
         }
         // Only use defaultValue if no value prop was provided
@@ -425,7 +426,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             const initialValue = this.multiselect
                 ? defaultValueStr.split(',').map(convertToString)
                 : [convertToString(this.defaultValue)];
-            this.updateDropdownState(initialValue);
+            this.updateDropdownStateInternal(initialValue);
         }
     }
     /** Method to handle slot changes */
@@ -441,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() {
@@ -459,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: 'a6be6e0f01f203fd2d5777f9026a5b7ed5afc313', 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: 'bf629a4d977f27f31cd056f126295d7f3bf00dd7', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '98ea1eee12a76341af8f2cc81846c93e99f2eae8', 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,
@@ -476,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',
@@ -490,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();
                 }
@@ -502,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;
                 }
@@ -514,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: 'ca3b744399468b3d74e1982b1cb648222e601646', 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,
@@ -525,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: '97fac699a505a4ce347ee5665aa251a5562d9c97', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'a549305b88f3de4a2dfd8050ea2652b459ecca7d', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3d336b6588a9b9f29f9ac3a92d4c0f81fc65a9d5', 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: 'fe85fe0e24269416805a570074a65c34224a6fc9', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '719a9da93ed73509c1a0694d3011f8e304d73cf9', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -556,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;