@scania/tegel 1.23.0-value-prop.beta.1 → 1.23.0-value-prop.beta.2

package/dist/collection/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot label - Slot for the label text.
@@ -43,19 +43,12 @@ export class TdsCheckbox {
     handleBlur(event) {
         this.tdsBlur.emit(event);
     }
-    /** Listens for a reset event inside a form */
-    handleFormReset(event) {
-        if (this.host.closest('form') === event.target) {
-            this.checked = false;
-            this.indeterminate = false;
-        }
-    }
     render() {
-        return (h("div", { key: '068b73081ab2b1b24d58fd2afd70f2b0e4308745', class: "tds-checkbox" }, h("input", { key: '97bd225b10dea56b8166ce3d5c2e4569a7dc76f9',
+        return (h("div", { key: '0efb982ab13c1d75681614675b649e010707b701', class: "tds-checkbox" }, h("input", { key: '834b29962978ea1cf7249018e6b7eea2417da5f4',
             // eslint-disable-next-line no-return-assign
             ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '9cfe0411c9b26d12229de7fdb9421b333da0199c', htmlFor: this.checkboxId }, h("slot", { key: '17d2e45ddf05aa409926f3df82caab7a4f110b72', name: "label" }))));
+            } }), h("label", { key: '2150346b336440768beac655de035bf470f9e492', htmlFor: this.checkboxId }, h("slot", { key: 'df61654810e46b8707709d86bae7bdfd627724ee', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -283,13 +276,4 @@ export class TdsCheckbox {
                 "methodName": "handleIndeterminateState"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "reset",
-                "method": "handleFormReset",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

package/dist/collection/components/dropdown/dropdown.js

@@ -7,39 +7,13 @@ import appendHiddenInput from "../../utils/appendHiddenInput";
  */
 export class TdsDropdown {
     constructor() {
-        this.handleChange = () => {
-            const value = Array.isArray(this.value) ? this.value.join(',') : this.value;
-            this.tdsChange.emit({
-                name: this.name,
-                value: value !== null && value !== void 0 ? value : null,
-            });
-        };
         this.setDefaultOption = () => {
             if (this.defaultValue) {
-                const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
-                if (children.length === 0) {
-                    console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
-                    return;
-                }
                 const defaultValues = this.multiselect
                     ? new Set(this.defaultValue.split(','))
                     : [this.defaultValue];
-                const childrenMap = new Map(children.map((element) => [element.value, element]));
-                const matchedValues = Array.from(defaultValues).filter((value) => {
-                    const element = childrenMap.get(value);
-                    if (element) {
-                        element.setSelected(true);
-                        return true;
-                    }
-                    return false;
-                });
-                if (matchedValues.length > 0) {
-                    this.value = [...new Set(this.value ? [...this.value, ...matchedValues] : matchedValues)];
-                    this.setValueAttribute();
-                }
-                else {
-                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
-                }
+                const normalizedValues = Array.from(defaultValues);
+                this.updateDropdownState(normalizedValues);
             }
         };
         this.getChildren = () => {
@@ -152,12 +126,6 @@ export class TdsDropdown {
         this.handleBlur = (event) => {
             this.tdsBlur.emit(event);
         };
-        this.resetInput = () => {
-            const inputEl = this.host.querySelector('input');
-            if (inputEl) {
-                this.reset();
-            }
-        };
         this.name = undefined;
         this.disabled = false;
         this.helper = undefined;
@@ -174,70 +142,75 @@ export class TdsDropdown {
         this.normalizeText = true;
         this.noResultText = 'No result';
         this.defaultValue = undefined;
-        this.value = undefined;
+        this.value = null;
         this.open = false;
         this.internalValue = undefined;
         this.filterResult = undefined;
         this.filterFocus = undefined;
+        this.selectedOptions = [];
     }
     handleValueChange(newValue) {
-        // Convert both newValue and this.value to arrays for comparison
-        const newValueArray = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
-        const currentValueArray = Array.isArray(this.value)
-            ? this.value
-            : this.value
-                ? [this.value]
-                : [];
-        // Check if the new value is different from the current value
-        const hasChanged = newValueArray.length !== currentValueArray.length ||
-            newValueArray.some((val, index) => val !== currentValueArray[index]);
-        if (hasChanged) {
-            // Proceed with updating selections and emitting changes
-            this.updateSelections(newValueArray);
-            this.handleChange();
+        // Normalize to array
+        const normalizedValue = this.normalizeValue(newValue);
+        // Only update if actually changed
+        if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
+            this.updateDropdownState(normalizedValue);
         }
     }
-    updateSelections(valueArray) {
-        // Reset current selections
-        this.getChildren().forEach((element) => {
-            element.setSelected(false);
-        });
-        if (valueArray) {
-            // Validate and filter values
-            const validValues = valueArray.filter((val) => {
-                const optionExists = this.getChildren().some((element) => element.value === val);
-                if (!optionExists) {
-                    console.warn(`Option with value "${val}" does not exist`);
-                }
-                return optionExists;
-            });
-            // Update internal state and selections
-            this.internalValue = validValues.join(', ');
-            this.getChildren().forEach((element) => {
-                if (validValues.includes(element.value)) {
-                    element.setSelected(true);
-                }
-            });
-            // Update value prop with validated values
-            if (this.multiselect) {
-                this.value = validValues;
-            }
-            else {
-                this.value = validValues[0] || null;
+    normalizeValue(value) {
+        if (!value)
+            return [];
+        return Array.isArray(value) ? value : [value];
+    }
+    hasValueChanged(newValue, currentValue) {
+        if (newValue.length !== currentValue.length)
+            return true;
+        return newValue.some((val) => !currentValue.includes(val));
+    }
+    updateDropdownState(values) {
+        // Update internal state
+        this.selectedOptions = this.validateValues(values);
+        // Update DOM
+        this.updateOptionElements();
+        // Update display value
+        this.updateDisplayValue();
+        // Emit change event
+        this.emitChange();
+        // Update value attribute
+        this.setValueAttribute();
+    }
+    validateValues(values) {
+        return values.filter((val) => {
+            var _a;
+            const isValid = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.some((element) => element.value === val);
+            if (!isValid) {
+                console.warn(`Option with value "${val}" does not exist`);
             }
-        }
-        else {
-            // Handle null/undefined case
-            this.internalValue = '';
-            this.value = this.multiselect ? [] : null;
-        }
-        // Emit change events
-        this.handleChange();
-        // Update filter input if present
+            return isValid;
+        });
+    }
+    updateOptionElements() {
+        var _a;
+        (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+            element.setSelected(this.selectedOptions.includes(element.value));
+        });
+    }
+    updateDisplayValue() {
+        this.internalValue = this.getSelectedChildrenLabels().join(', ');
         if (this.filter && this.inputElement) {
             this.inputElement.value = this.internalValue;
         }
-        this.setValueAttribute();
+    }
+    emitChange() {
+        // Update the value prop to match validated state
+        this.value = this.multiselect ? this.selectedOptions : this.selectedOptions[0] || null;
+        const value = this.multiselect
+            ? this.selectedOptions.join(',')
+            : this.selectedOptions[0] || null;
+        this.tdsChange.emit({
+            name: this.name,
+            value: value !== null && value !== void 0 ? value : null,
+        });
     }
     async setValue(value) {
         this.value = value;
@@ -335,23 +308,11 @@ export class TdsDropdown {
             this.value = value;
         }
     }
-    componentDidRender() {
-        const form = this.host.closest('form');
-        if (form) {
-            form.addEventListener('reset', this.resetInput);
-        }
-    }
-    disconnectedCallback() {
-        const form = this.host.closest('form');
-        if (form) {
-            form.removeEventListener('reset', this.resetInput);
-        }
-    }
     render() {
         var _a, _b, _c;
         const valueArray = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
         appendHiddenInput(this.host, this.name, valueArray.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '65dc50a4788d2fdade55db41bfc6cdfcad76b7d5', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '389e82159e7756782fc12af15d7efb43d8cfeafb', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'e7e4585e630ebbab3ae178bbe7b0d3eb0793ba60', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: 'c3a3742ba6f875aee1b9e7abb4ab2c2b2331d3fc', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '0b45d4e910577e1cfd350f6f60e544839f905865', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3557975c254df99c9f97dac71a6d9e66268c09f2', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -393,7 +354,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_c = this.value) === null || _c === void 0 ? void 0 : _c.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: 'c79561725649f2cda46d13e7290ec0ea698f930e', ref: (element) => (this.dropdownList = element), class: {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_c = this.value) === null || _c === void 0 ? void 0 : _c.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: 'bf74f7277ac93324469c9f371a1a41598366d833', ref: (element) => (this.dropdownList = element), class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
@@ -402,7 +363,7 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '958aa0e620a825c8d20ec4cfeae334c3c59e85dc', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '8138e3340cd62d46ea8938b2d9f0609c03951a1f', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3e7a1e9e8520eadc5b805d5512c6fbe177d69755', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '882c2152620d7d7c2ad576db12ecd65d04446600', name: "error", size: "16px" }), this.helper))));
+            } }, h("slot", { key: '0bbfde317a9c9f757236f9a3aa45bc7549cba134', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4a2d556e26c1aedc6aad4ec1031e5290d4d6e28a', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '506b816ed70834aef3fd3e22acc19567761d2645', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'f890f8df6431d6a437459a245711731091cbe4ad', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -715,7 +676,8 @@ export class TdsDropdown {
                     "text": "Value of the dropdown. For multiselect, provide array of strings. For single select, provide a string."
                 },
                 "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }
@@ -724,7 +686,8 @@ export class TdsDropdown {
             "open": {},
             "internalValue": {},
             "filterResult": {},
-            "filterFocus": {}
+            "filterFocus": {},
+            "selectedOptions": {}
         };
     }
     static get events() {

package/dist/collection/components/slider/slider.js

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsSlider {
     constructor() {
@@ -16,11 +16,6 @@ export class TdsSlider {
         this.useSnapping = false;
         this.supposedValueSlot = -1;
         this.resizeObserverAdded = false;
-        this.resetEventListenerAdded = false;
-        this.resetToInitialValue = () => {
-            this.forceValueUpdate(this.initialValue);
-            this.reset();
-        };
         this.label = '';
         this.value = '0';
         this.min = '0';
@@ -300,46 +295,26 @@ export class TdsSlider {
         }
         this.calculateThumbLeftFromValue(this.value);
         this.updateTrack();
-        // Only set the initial value once:
-        if (!this.initialValue) {
-            this.initialValue = this.value;
-        }
-    }
-    componentDidRender() {
-        // Only add the event listener once:
-        if (!this.resetEventListenerAdded) {
-            this.formElement = this.host.closest('form');
-            if (this.formElement) {
-                this.formElement.addEventListener('reset', this.resetToInitialValue);
-                this.resetEventListenerAdded = true;
-            }
-        }
-    }
-    disconnectedCallback() {
-        if (this.resetEventListenerAdded && this.formElement) {
-            this.formElement.removeEventListener('reset', this.resetToInitialValue);
-            this.resetEventListenerAdded = false;
-        }
     }
     render() {
-        return (h("div", { key: 'ed4c71d1701e0711d8b01c015f137f6a3f10457e', class: {
+        return (h("div", { key: 'fd7d051192c33b19e8c68cbeaa50ea43149457bb', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '7d85ba109ec41e45a4ced646cfe092832b2013a7', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '7c32efe653a6437068026e0b612bd1cdb0fd580d', class: {
+            } }, h("input", { key: 'd2fe02893f865f5791736cb5f05b5bcd2494e471', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '2d436a5654cb20923cd20ed61f9449bd0705edd2', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, h("label", { key: '5561410214fda42ddb4553084f312de9943f825b', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '37340de05febbca285f031bd8df7d9c2588e315d', class: "tds-slider__input-values" }, h("div", { key: 'e973831529eb93eb0b0da6c5f92bd838dfb9bcdb', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '1a710d2d1ffac7533f9bae2908d4341d3b40e2f0', class: "tds-slider__controls" }, h("div", { key: '0a741834782d8e69a7d55e6cd87a3fdf4938d744', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '8c67943ac2e15d742726e76c2b4c029d15c20f32', name: "minus", size: "16px" })))), h("div", { key: '96c4229007fbe882e106bcc3deb34f504c9604e3', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: '905fc1a02070f5419f76ec5d60d8f55d89d4650b', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'd2ccbea1b6e26ab1855c81e71730bebea0da37d8', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '30c9b4bb6f59631d443345ee6d1edf1973a83d0b', class: "tds-slider__track", ref: (el) => {
+            } }, h("label", { key: 'd9d444d15acabbbc23c7b7633e5312f405ff9120', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '2f0d0419138851724891e2ab04fef2f3b3e099f1', class: "tds-slider__input-values" }, h("div", { key: '7f23007c0f4a1aa6358ffa7c5aaae027d0927b63', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'df4a00a40c541b83aa8459dfcdaf22c348e2c80a', class: "tds-slider__controls" }, h("div", { key: '96cc419d369098137895b725f97a8fa3d7d50dfc', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '09ed43c9f2fe81baeada6a07e4cba18027f04ba1', name: "minus", size: "16px" })))), h("div", { key: '402647683b57076bd4ac3ce3d754585a89a48e08', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'd80c648eca47c7e52725e967a32fe4a4692a5729', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '030106df49f12a55c1b32a9c1c257f449629644a', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'fef7013f82a191c32bc3a4d297f5e10a4db127a1', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '7acbccae98c481c4cfaeb2dc66d67a2e19575b93', class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '24a583182c45114d1e011bffef0f81f1e4f93a36', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '46a5c3135c5f765d5fb0845372dc3854586fa44d', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '3bea53237beb92f41264386fb5ac181d1e9966a4', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: 'd39cd29d1e6302f8bd4a3d827797f8822e24b84d', class: "tds-slider__value" }, this.value, h("svg", { key: '5946f90b70b2afb2efc7f3a3bc5817a82ac3ca4a', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9456df642aca39b94b17bb529ca02e2d6a2fde6c', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'b4ca73a085f837d7e87e3334b8e58e5638125118', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '3ac44629cad3b03524602f9babe7fa4582b38660', class: "tds-slider__value" }, this.value, h("svg", { key: '5adbbcc274555d14454c5329f0eea8c072a3db2c', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '248b1f8521b89be4214631e411c0ba9c7bcc07a8', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'bc778a9ccd25a5229aa7685cc6c22ed5385b9d98', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '6574286ac7764807fd1e18875d6fa39ab7f7b304', class: "tds-slider__input-values" }, h("div", { key: '57a92adf59551f551c4ae06355c276a69b34028a', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '0e1632ca8c9510177d349147749e3162aa46f219', class: "tds-slider__input-field-wrapper" }, h("input", { key: '094d194bce54d1073a5d657f7bc3f30107f5fe41', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: '207398a3fd02e11f09c70ebbb8b293d6c16afd1f', class: "tds-slider__controls" }, h("div", { key: 'ca93ce9a55d0db25a3eaefd6e4dbc53106afc895', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: '6ab123f8701fdd93580a61c500ae6da658b547fd', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '077ffffeb0986504a2c9fc4e1b08095ec689402c', class: "tds-slider__input-values" }, h("div", { key: '74a528a286e2b49a6739c5817cca8a0436b908b9', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'af2a647636c8eecba19637aa92ddda37adc52a1b', class: "tds-slider__input-field-wrapper" }, h("input", { key: '02701d15de6119994f7be13b9c9ac69ae6f2269b', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'ef215ef613c381601674d4bb7dbea583a3ddde2a', class: "tds-slider__controls" }, h("div", { key: '4e553194348daf32529c9c8cedc32b0686ac32ff', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'd5d67ea7ff64ed19d28bd078acad56ebda742f93', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -698,7 +673,6 @@ export class TdsSlider {
             }
         };
     }
-    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "value",

package/dist/components/{p-e7868876.js → p-462b77e8.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-d921fe75.js';
+import { d as defineCustomElement$2 } from './p-e4d7c655.js';
 import { d as defineCustomElement$1 } from './p-18c1245b.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";

package/dist/components/{p-097af62b.js → p-4d8f8d5c.js}

@@ -72,39 +72,13 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
         this.tdsValueChange = createEvent(this, "tdsValueChange", 6);
-        this.handleChange = () => {
-            const value = Array.isArray(this.value) ? this.value.join(',') : this.value;
-            this.tdsChange.emit({
-                name: this.name,
-                value: value !== null && value !== void 0 ? value : null,
-            });
-        };
         this.setDefaultOption = () => {
             if (this.defaultValue) {
-                const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
-                if (children.length === 0) {
-                    console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
-                    return;
-                }
                 const defaultValues = this.multiselect
                     ? new Set(this.defaultValue.split(','))
                     : [this.defaultValue];
-                const childrenMap = new Map(children.map((element) => [element.value, element]));
-                const matchedValues = Array.from(defaultValues).filter((value) => {
-                    const element = childrenMap.get(value);
-                    if (element) {
-                        element.setSelected(true);
-                        return true;
-                    }
-                    return false;
-                });
-                if (matchedValues.length > 0) {
-                    this.value = [...new Set(this.value ? [...this.value, ...matchedValues] : matchedValues)];
-                    this.setValueAttribute();
-                }
-                else {
-                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
-                }
+                const normalizedValues = Array.from(defaultValues);
+                this.updateDropdownState(normalizedValues);
             }
         };
         this.getChildren = () => {
@@ -217,12 +191,6 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.handleBlur = (event) => {
             this.tdsBlur.emit(event);
         };
-        this.resetInput = () => {
-            const inputEl = this.host.querySelector('input');
-            if (inputEl) {
-                this.reset();
-            }
-        };
         this.name = undefined;
         this.disabled = false;
         this.helper = undefined;
@@ -239,70 +207,75 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.normalizeText = true;
         this.noResultText = 'No result';
         this.defaultValue = undefined;
-        this.value = undefined;
+        this.value = null;
         this.open = false;
         this.internalValue = undefined;
         this.filterResult = undefined;
         this.filterFocus = undefined;
+        this.selectedOptions = [];
     }
     handleValueChange(newValue) {
-        // Convert both newValue and this.value to arrays for comparison
-        const newValueArray = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
-        const currentValueArray = Array.isArray(this.value)
-            ? this.value
-            : this.value
-                ? [this.value]
-                : [];
-        // Check if the new value is different from the current value
-        const hasChanged = newValueArray.length !== currentValueArray.length ||
-            newValueArray.some((val, index) => val !== currentValueArray[index]);
-        if (hasChanged) {
-            // Proceed with updating selections and emitting changes
-            this.updateSelections(newValueArray);
-            this.handleChange();
+        // Normalize to array
+        const normalizedValue = this.normalizeValue(newValue);
+        // Only update if actually changed
+        if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
+            this.updateDropdownState(normalizedValue);
         }
     }
-    updateSelections(valueArray) {
-        // Reset current selections
-        this.getChildren().forEach((element) => {
-            element.setSelected(false);
-        });
-        if (valueArray) {
-            // Validate and filter values
-            const validValues = valueArray.filter((val) => {
-                const optionExists = this.getChildren().some((element) => element.value === val);
-                if (!optionExists) {
-                    console.warn(`Option with value "${val}" does not exist`);
-                }
-                return optionExists;
-            });
-            // Update internal state and selections
-            this.internalValue = validValues.join(', ');
-            this.getChildren().forEach((element) => {
-                if (validValues.includes(element.value)) {
-                    element.setSelected(true);
-                }
-            });
-            // Update value prop with validated values
-            if (this.multiselect) {
-                this.value = validValues;
-            }
-            else {
-                this.value = validValues[0] || null;
+    normalizeValue(value) {
+        if (!value)
+            return [];
+        return Array.isArray(value) ? value : [value];
+    }
+    hasValueChanged(newValue, currentValue) {
+        if (newValue.length !== currentValue.length)
+            return true;
+        return newValue.some((val) => !currentValue.includes(val));
+    }
+    updateDropdownState(values) {
+        // Update internal state
+        this.selectedOptions = this.validateValues(values);
+        // Update DOM
+        this.updateOptionElements();
+        // Update display value
+        this.updateDisplayValue();
+        // Emit change event
+        this.emitChange();
+        // Update value attribute
+        this.setValueAttribute();
+    }
+    validateValues(values) {
+        return values.filter((val) => {
+            var _a;
+            const isValid = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.some((element) => element.value === val);
+            if (!isValid) {
+                console.warn(`Option with value "${val}" does not exist`);
             }
-        }
-        else {
-            // Handle null/undefined case
-            this.internalValue = '';
-            this.value = this.multiselect ? [] : null;
-        }
-        // Emit change events
-        this.handleChange();
-        // Update filter input if present
+            return isValid;
+        });
+    }
+    updateOptionElements() {
+        var _a;
+        (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+            element.setSelected(this.selectedOptions.includes(element.value));
+        });
+    }
+    updateDisplayValue() {
+        this.internalValue = this.getSelectedChildrenLabels().join(', ');
         if (this.filter && this.inputElement) {
             this.inputElement.value = this.internalValue;
         }
-        this.setValueAttribute();
+    }
+    emitChange() {
+        // Update the value prop to match validated state
+        this.value = this.multiselect ? this.selectedOptions : this.selectedOptions[0] || null;
+        const value = this.multiselect
+            ? this.selectedOptions.join(',')
+            : this.selectedOptions[0] || null;
+        this.tdsChange.emit({
+            name: this.name,
+            value: value !== null && value !== void 0 ? value : null,
+        });
     }
     async setValue(value) {
         this.value = value;
@@ -400,23 +373,11 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             this.value = value;
         }
     }
-    componentDidRender() {
-        const form = this.host.closest('form');
-        if (form) {
-            form.addEventListener('reset', this.resetInput);
-        }
-    }
-    disconnectedCallback() {
-        const form = this.host.closest('form');
-        if (form) {
-            form.removeEventListener('reset', this.resetInput);
-        }
-    }
     render() {
         var _a, _b, _c;
         const valueArray = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
         appendHiddenInput(this.host, this.name, valueArray.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '65dc50a4788d2fdade55db41bfc6cdfcad76b7d5', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '389e82159e7756782fc12af15d7efb43d8cfeafb', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'e7e4585e630ebbab3ae178bbe7b0d3eb0793ba60', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: 'c3a3742ba6f875aee1b9e7abb4ab2c2b2331d3fc', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '0b45d4e910577e1cfd350f6f60e544839f905865', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3557975c254df99c9f97dac71a6d9e66268c09f2', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -458,7 +419,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_c = this.value) === null || _c === void 0 ? void 0 : _c.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: 'c79561725649f2cda46d13e7290ec0ea698f930e', ref: (element) => (this.dropdownList = element), class: {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_c = this.value) === null || _c === void 0 ? void 0 : _c.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: 'bf74f7277ac93324469c9f371a1a41598366d833', ref: (element) => (this.dropdownList = element), class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
@@ -467,7 +428,7 @@ 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: '958aa0e620a825c8d20ec4cfeae334c3c59e85dc', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '8138e3340cd62d46ea8938b2d9f0609c03951a1f', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3e7a1e9e8520eadc5b805d5512c6fbe177d69755', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '882c2152620d7d7c2ad576db12ecd65d04446600', name: "error", size: "16px" }), this.helper))));
+            } }, h("slot", { key: '0bbfde317a9c9f757236f9a3aa45bc7549cba134', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '4a2d556e26c1aedc6aad4ec1031e5290d4d6e28a', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '506b816ed70834aef3fd3e22acc19567761d2645', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'f890f8df6431d6a437459a245711731091cbe4ad', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -497,6 +458,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         "internalValue": [32],
         "filterResult": [32],
         "filterFocus": [32],
+        "selectedOptions": [32],
         "setValue": [64],
         "reset": [64],
         "removeValue": [64],