@scania/tegel 1.23.0-value-prop.beta.5 → 1.24.0-dropdown-numer-beta.0

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

@@ -56,11 +56,11 @@ const TdsCheckbox = class {
         }
     }
     render() {
-        return (h("div", { key: '068b73081ab2b1b24d58fd2afd70f2b0e4308745', class: "tds-checkbox" }, h("input", { key: '97bd225b10dea56b8166ce3d5c2e4569a7dc76f9',
+        return (h("div", { key: '1d0a8257cd1710277e076b4a277dff2c0c89b3d8', class: "tds-checkbox" }, h("input", { key: '689144e40c0be61db6b82aa6eaeb7ff3d09d7d72',
             // 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: '534eed7aa114861c528be0b776879484a35348bf', htmlFor: this.checkboxId }, h("slot", { key: 'db59bcc78f7f2be94037651b880a5ef149b90747', name: "label" }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -79,7 +79,7 @@ const TdsChip = class {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: 'de7555f8a452acf90f19908db73000ff2f917378' }, h("div", { key: '148eb930c309f1a6f53f8462a37ed6ee680d6703', class: "component" }, h("div", { key: '8020dd1198564e794fec8ec7dbd9dd7b3a9f188f', class: chipClasses }, h("input", Object.assign({ key: 'fe4a9718565e7dfc85700a026e7263adbc8258fb', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: 'af5687821c68ccada0d62290fd7f652392bb3fd1', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '55b7bc3855b45a3a2aee08f00bb8223564300ec1', name: "prefix" }), hasLabelSlot && h("slot", { key: '20c2024a51109edeb65503c10d8691449f806a6c', name: "label" }), hasSuffixSlot && h("slot", { key: '3a193b078226bef9f8b8ac45d74b9e82b51dcc52', name: "suffix" }))))));
+        return (h(Host, { key: 'f92aed7b75c11da93b841554edf2f07f5c1cccb3' }, h("div", { key: '1999e94f8206769fd8d751abbcfb9a7c40bd8810', class: "component" }, h("div", { key: '1e6a977c4bcd584ba519f1ee0ccd73e467c3abc5', class: chipClasses }, h("input", Object.assign({ key: '454afc046e22139b5e8121edfafa1345676d51bb', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: '8682130ad1d20966ba072d1a81fe50f683c39143', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: 'e0717c5608b870a813b3c0b86c2ce05d821bc7b2', name: "prefix" }), hasLabelSlot && h("slot", { key: 'e0e81a0e95cedbef3d7bc0f695f82a22356b6bee', name: "label" }), hasSuffixSlot && h("slot", { key: '70b48ca42bed4646fe1ce4f8699833aea3d48094', name: "suffix" }))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-core-header-item_2.entry.js

@@ -9,7 +9,7 @@ const TdsCoreHeaderItem = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'ef3825bce10e5d23e01b4be557014a5c90b8e7de' }, h("div", { key: '134696c5345b16dc15dc1940d7d42066597b3a4e', class: "item" }, h("slot", { key: '9e8fbe10a25cb6005d2ff03ce00adc5c6cdad495' }))));
+        return (h(Host, { key: 'a97f1ad7ef0398e2414f62374e69a738f8af8e18' }, h("div", { key: '3fd840c4cd4a7bd5bf27c3039c246f2faa085d51', class: "item" }, h("slot", { key: '5d521057588befd7509318ba5f053c6204e7344b' }))));
     }
 };
 TdsCoreHeaderItem.style = TdsCoreHeaderItemStyle0;
@@ -52,10 +52,10 @@ const TdsHeaderItem = class {
         this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
     }
     render() {
-        return (h(Host, { key: 'd5f256a30d131817e23f428b87a3604e2a299ad6' }, h("tds-core-header-item", { key: 'd2dc6486839af96bbd10938bf9e03ff50123da4f', class: {
+        return (h(Host, { key: '7317ab5668685390e2671908dd41855715267b1c' }, h("tds-core-header-item", { key: 'befc861a437912245c22413bbf774617fa84b289', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: 'a89a44221fe947e4075e6889ed3e3cf8478f6e96' }))));
+            } }, h("slot", { key: 'f4405b3881dc0d6e4b86f96aa90d0b045c7bf2d8' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -105,7 +105,7 @@ const TdsDatetime = class {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        return (h("div", { key: '0b0386d6ca214861e77014eb3c1b1ad5ac5176ea', class: `
+        return (h("div", { key: 'c09955258fa6a87c07efe2c4c327c72eb34688d8', class: `
         ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
         ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
         ${this.value.length > 0 ? 'tds-datetime-data' : ''}
@@ -115,7 +115,7 @@ const TdsDatetime = class {
         ${this.state === 'error' || this.state === 'success'
                 ? `tds-form-datetime-${this.state}`
                 : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '0ec4ae11802d336afb3480d93c6958b065974518', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '454f2935d7ba7fb0679812fdec1f7a1080eb9722', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '79dd5d7eb7492290857808202d573b1315f43e50', class: "tds-datetime-input-container" }, h("input", { key: '01002d1f987a863aa9289e47b485a3740f3a5786', ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '62bb064b898118016212f7009b8ff7ae08f9be84', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: 'a68bf6f45b79796ea5631225dc487ba27187dd03', size: "20px", name: "calendar" })), h("div", { key: 'd6d2425cae67f297c44f08de7d023013eec27547', class: "datetime-icon icon-time" }, h("tds-icon", { key: '5bdd8c430c232c4b01a612f9260e55d55a9fb44a', size: "20px", name: "clock" }))), h("div", { key: '3bb439913f3054041322de6d0056960a4eb1dd1c', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '3f7245fda7ee2c0d894d5e4fdd90beace078035e', class: "tds-datetime-helper" }, h("div", { key: '82d7b73b3ab1e6dc5d90762416d169d393c69c5d', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: '9ccebec9e7cbce668362884e7efeb3c92bec8e82', name: "error", size: "16px" }), this.helper)))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '42e0f48bc1e5c0fe34c492c9c4a4442dcb4982ec', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '9a09a448c5c46073b31c7cd6148ed8bf6334780e', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '78e81a9fbff444f76a2b46013cb9bc02e186ec86', class: "tds-datetime-input-container" }, h("input", { key: '385bb5d6d124951cd14151e6cda72007319f9dba', ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '12e390a5b6fed5c6c2702cccad2f14a5fc20eebe', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '1e8c1a91b23b9bd5f9e44929f6586652d7578df6', size: "20px", name: "calendar" })), h("div", { key: '496f500c9f1b948458d7ab1c5d86a466838e7b6d', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'b5dd412bf9d2286b2443aaf3ed2eb17a9f9045a9', size: "20px", name: "clock" }))), h("div", { key: '666193c97a4aa5435961d25b97d74bd3cc8b07a8', class: "tds-datetime-bar" })), this.helper && (h("div", { key: 'a7860edb4ab20cb633ec8309a991315358b53cd6', class: "tds-datetime-helper" }, h("div", { key: '84efbb36322ace185d66dd4f270a23b69e4bbad7', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'c304cdd2087c473a39304e9f926fee62286f3359', name: "error", size: "16px" }), this.helper)))));
     }
 };
 TdsDatetime.style = TdsDatetimeStyle0;

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

@@ -9,7 +9,7 @@ const Divider = class {
         this.orientation = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '52a57f6bab64f6329412bbab154f213864382e98', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '5ba2a5d20d84748b4b76e7ec24155f29cab69bc5', class: `divider ${this.orientation}` })));
+        return (h(Host, { key: 'a6195d6461fc6727d9e83c4152f446179160963f', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'f1cf2f97534adfe809f8ddda734cfdbcecd7989a', class: `divider ${this.orientation}` })));
     }
 };
 Divider.style = TdsDividerStyle0;

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

@@ -68,16 +68,35 @@ const TdsDropdown = class {
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
-        this.tdsValueChange = createEvent(this, "tdsValueChange", 6);
         this.setDefaultOption = () => {
-            if (this.defaultValue) {
+            if (this.internalDefaultValue) {
+                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 normalizedValues = Array.from(defaultValues);
-                this.updateDropdownState(normalizedValues);
+                    ? new Set(this.internalDefaultValue.split(','))
+                    : [this.internalDefaultValue];
+                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.internalDefaultValue}"`);
+                }
             }
         };
+        /* Returns a list of all children that are tds-dropdown-option elements */
         this.getChildren = () => {
             const tdsDropdownOptions = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
             if (tdsDropdownOptions.length === 0) {
@@ -86,36 +105,6 @@ const TdsDropdown = class {
             else
                 return tdsDropdownOptions;
         };
-        this.getSelectedChildren = () => {
-            if (this.selectedOptions.length === 0)
-                return [];
-            return this.selectedOptions
-                .map((stringValue) => {
-                var _a;
-                const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => element.value === stringValue);
-                return matchingElement;
-            })
-                .filter(Boolean);
-        };
-        this.getSelectedChildrenLabels = () => {
-            var _a;
-            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
-        };
-        this.getValue = () => {
-            const labels = this.getSelectedChildrenLabels();
-            if (!labels) {
-                return '';
-            }
-            return labels === null || labels === void 0 ? void 0 : labels.join(', ');
-        };
-        this.setValueAttribute = () => {
-            if (this.selectedOptions.length === 0) {
-                this.host.removeAttribute('value');
-            }
-            else {
-                this.host.setAttribute('value', this.selectedOptions.join(','));
-            }
-        };
         this.getOpenDirection = () => {
             var _a, _b, _c, _d, _e;
             if (this.openDirection === 'auto' || !this.openDirection) {
@@ -129,6 +118,7 @@ const TdsDropdown = class {
             }
             return this.openDirection;
         };
+        /* Toggles the open state of the Dropdown and sets focus to the input element */
         this.handleToggleOpen = () => {
             if (!this.disabled) {
                 this.open = !this.open;
@@ -137,10 +127,38 @@ const TdsDropdown = class {
                 }
             }
         };
+        /* Focuses the input element in the Dropdown, if the reference is present. */
         this.focusInputElement = () => {
             if (this.inputElement)
                 this.inputElement.focus();
         };
+        this.getSelectedChildren = () => {
+            var _a;
+            return (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((stringValue) => {
+                const matchingElement = this.getChildren().find((element) => element.value === stringValue);
+                return matchingElement;
+            }).filter(Boolean);
+        };
+        this.getSelectedChildrenLabels = () => {
+            var _a;
+            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
+        };
+        this.getValue = () => {
+            const labels = this.getSelectedChildrenLabels();
+            if (!labels) {
+                return '';
+            }
+            return labels === null || labels === void 0 ? void 0 : labels.join(', ');
+        };
+        this.setValueAttribute = () => {
+            var _a;
+            if (!this.value || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.toString()) === '') {
+                this.host.removeAttribute('value');
+            }
+            else {
+                this.host.setAttribute('value', this.value.map((val) => val).toString());
+            }
+        };
         this.handleFilter = (event) => {
             this.tdsInput.emit(event);
             const query = event.target.value.toLowerCase();
@@ -171,10 +189,8 @@ const TdsDropdown = class {
         this.handleFilterReset = () => {
             this.reset();
             this.inputElement.value = '';
-            this.handleFilter({ target: { value: '' } });
+            this.handleFilter({ target: { value: this.inputElement.value } });
             this.inputElement.focus();
-            // Add this line to ensure internal value is cleared
-            this.internalValue = '';
         };
         this.handleFocus = (event) => {
             this.open = true;
@@ -188,6 +204,13 @@ const TdsDropdown = class {
         this.handleBlur = (event) => {
             this.tdsBlur.emit(event);
         };
+        this.handleChange = () => {
+            var _a, _b;
+            this.tdsChange.emit({
+                name: this.name,
+                value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString()) !== null && _b !== void 0 ? _b : null,
+            });
+        };
         this.resetInput = () => {
             const inputEl = this.host.querySelector('input');
             if (inputEl) {
@@ -210,99 +233,108 @@ const TdsDropdown = class {
         this.normalizeText = true;
         this.noResultText = 'No result';
         this.defaultValue = undefined;
-        this.value = null;
         this.open = false;
-        this.internalValue = undefined;
+        this.value = undefined;
         this.filterResult = undefined;
         this.filterFocus = undefined;
-        this.selectedOptions = [];
-    }
-    handleValueChange(newValue) {
-        // Normalize to array
-        const normalizedValue = this.normalizeValue(newValue);
-        // Only update if actually changed
-        if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
-            this.updateDropdownState(normalizedValue);
-        }
+        this.internalDefaultValue = undefined;
     }
-    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 Array.isArray(value) ? value : value.split(',').filter((v) => v !== '');
-        }
-        return Array.isArray(value) ? value : [value];
-    }
-    hasValueChanged(newValue, currentValue) {
-        if (newValue.length !== currentValue.length)
-            return true;
-        return newValue.some((val) => !currentValue.includes(val));
+    /** Method that resets the Dropdown, marks all children as non-selected and resets the value to null. */
+    async reset() {
+        this.dropdownList.scrollTop = 0;
+        this.internalReset();
+        this.handleChange();
     }
-    updateDropdownState(values) {
-        // Update internal state
-        this.selectedOptions = this.validateValues(values);
-        // Then update the value prop to match
-        this.value = this.multiselect ? this.selectedOptions : this.selectedOptions[0] || null;
-        // Update DOM
-        this.updateOptionElements();
-        // Update display value
-        this.updateDisplayValue();
-        // Emit change event
-        this.emitChange();
-        // Update value attribute
-        this.setValueAttribute();
+    /** Method that forces focus on the input element. */
+    async focusElement() {
+        this.focusInputElement();
+        this.handleFocus({});
     }
-    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`);
+    /** Method for setting the value of the Dropdown.
+     *
+     * Single selection example:
+     *
+     * <code>
+     *  dropdown.setValue('option-1', 'Option 1');
+     * </code>
+     *
+     * Multiselect example:
+     *
+     * <code>
+     *  dropdown.setValue(['option-1', 'option-2']);
+     * </code>
+     */
+    //  The label is optional here ONLY to not break the API. Should be removed for 2.0.
+    // @ts-ignore
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    async setValue(value, label) {
+        let nextValue;
+        if (typeof value === 'string')
+            nextValue = [value];
+        else
+            nextValue = value;
+        if (!this.multiselect && nextValue.length > 1) {
+            console.warn('Tried to select multiple items, but multiselect is not enabled.');
+            nextValue = [nextValue[0]];
+        }
+        nextValue = [...new Set(nextValue)];
+        this.internalReset();
+        for (let i = 0; i < nextValue.length; i++) {
+            const optionExist = this.getChildren().some((element) => element.value === nextValue[i]);
+            if (!optionExist) {
+                nextValue.splice(i, 1);
             }
-            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;
         }
-    }
-    emitChange() {
-        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) {
-        const normalizedValue = this.normalizeValue(value);
-        this.updateDropdownState(normalizedValue);
-        return this.getSelectedChildren().map((element) => ({
+        this.value = nextValue;
+        this.setValueAttribute();
+        this.selectChildrenAsSelectedBasedOnSelectionProp();
+        this.handleChange();
+        /* This returns an array of object with a value and label pair. This is ONLY to not break the API. Should be removed for 2.0. */
+        /* https://tegel.atlassian.net/browse/CDEP-2703 */
+        const selection = this.getSelectedChildren().map((element) => ({
             value: element.value,
             label: element.textContent.trim(),
         }));
+        // Update inputElement value and placeholder text
+        if (this.filter) {
+            this.inputElement.value = this.getValue();
+        }
+        return selection;
     }
-    async reset() {
-        this.updateDropdownState([]);
+    /**
+     * @internal
+     */
+    async appendValue(value) {
+        if (this.multiselect && this.value) {
+            this.setValue([...this.value, value]);
+        }
+        else {
+            this.setValue(value);
+        }
     }
+    /** Method for removing a selected value in the Dropdown. */
     async removeValue(oldValue) {
-        const newValues = this.selectedOptions.filter((v) => v !== oldValue);
-        this.updateDropdownState(newValues);
-    }
-    /** Method that forces focus on the input element. */
-    async focusElement() {
-        this.focusInputElement();
-        this.handleFocus({});
+        var _a, _b;
+        let label;
+        if (this.multiselect) {
+            (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+                var _a;
+                if (element.value === oldValue) {
+                    this.value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.filter((value) => value !== element.value);
+                    label = element.textContent.trim();
+                    element.setSelected(false);
+                }
+                return element;
+            });
+        }
+        else {
+            this.reset();
+        }
+        this.handleChange();
+        this.setValueAttribute();
+        /* This returns an array of object with a value and label pair. This is ONLY to not break the API. Should be removed for 2.0. */
+        /* https://tegel.atlassian.net/browse/CDEP-2703 */
+        return (_b = this.value) === null || _b === void 0 ? void 0 : _b.map((value) => ({ value, label }));
     }
     /** Method for closing the Dropdown. */
     async close() {
@@ -351,15 +383,21 @@ const TdsDropdown = class {
     handleOpenState() {
         if (this.filter && this.multiselect) {
             if (!this.open) {
-                this.inputElement.value = this.selectedOptions.length ? this.getValue() : '';
+                this.inputElement.value = this.getValue();
             }
         }
     }
+    handleDefaultValueChange(newValue) {
+        if (newValue !== undefined && newValue !== null) {
+            this.internalDefaultValue = newValue.toString();
+            this.setDefaultOption();
+        }
+    }
     componentWillLoad() {
-        if (this.defaultValue && !this.value) {
-            const initialValue = this.multiselect ? this.defaultValue.split(',') : [this.defaultValue];
-            this.updateDropdownState(initialValue);
+        if (this.defaultValue !== undefined && this.defaultValue !== null) {
+            this.internalDefaultValue = this.defaultValue.toString();
         }
+        this.setDefaultOption();
     }
     /** Method to handle slot changes */
     handleSlotChange() {
@@ -369,13 +407,29 @@ const TdsDropdown = class {
     normalizeString(text) {
         return this.normalizeText ? text.normalize('NFD').replace(/\p{Diacritic}/gu, '') : text;
     }
-    async appendValue(value) {
-        if (this.multiselect) {
-            this.updateDropdownState([...this.selectedOptions, value]);
-        }
-        else {
-            this.updateDropdownState([value]);
-        }
+    /** Method that resets the dropdown without emitting an event. */
+    internalReset() {
+        this.getChildren().forEach((element) => {
+            element.setSelected(false);
+            return element;
+        });
+        this.value = null;
+        this.setValueAttribute();
+    }
+    selectChildrenAsSelectedBasedOnSelectionProp() {
+        this.getChildren().forEach((element) => {
+            this.value.forEach((selection) => {
+                if (element.value !== selection) {
+                    // If not multiselect, we need to unselect all other options.
+                    if (!this.multiselect) {
+                        element.setSelected(false);
+                    }
+                }
+                else {
+                    element.setSelected(true);
+                }
+            });
+        });
     }
     componentDidRender() {
         const form = this.host.closest('form');
@@ -390,8 +444,9 @@ const TdsDropdown = class {
         }
     }
     render() {
-        appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
-        return (h(Host, { key: 'b084be887c56fbce2c51c70c6c5e29d2dbff0555', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'b24fadee61a85c008cff52fe1e47570f7b3db29e', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '01ba50787cfdb187f5fa602ac6d21283a1fcd98b', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        var _a, _b, _c, _d;
+        appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
+        return (h(Host, { key: '59198c21800c375dde1f2429ec9ab83caea26a15', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '51ec664e6d72a7dfaaaf4c3420d0ec726d9c165a', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'cfb1b64bc1ec3c09edc7a4157be01159a56a737a', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -399,7 +454,7 @@ const TdsDropdown = class {
             } }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
                     label-inside-as-placeholder
                     ${this.size}
-                    ${this.selectedOptions.length ? 'selected' : ''}
+                    ${((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
                     ` }, this.label)), h("input", {
             // eslint-disable-next-line no-return-assign
             ref: (inputEl) => (this.inputElement = inputEl), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? '' : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
@@ -408,7 +463,15 @@ const TdsDropdown = class {
                     this.inputElement.value = this.getValue();
                 }
                 this.handleBlur(event);
-            }, onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => {
+            }, onFocus: (event) => {
+                this.open = true;
+                this.filterFocus = true;
+                if (this.multiselect) {
+                    this.inputElement.value = '';
+                }
+                this.handleFocus(event);
+                this.handleFilter({ target: { value: '' } });
+            }, onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -426,14 +489,14 @@ const TdsDropdown = class {
                     this.open = false;
                 }
             }, class: `
-                ${this.selectedOptions.length ? 'value' : 'placeholder'}
+                ${this.value ? 'value' : 'placeholder'}
                 ${this.open ? 'open' : 'closed'}
                 ${this.error ? 'error' : ''}
                 `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { 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: '849ff954ec4ae3fc46e1de5dd236d409e9796adb', ref: (element) => (this.dropdownList = element), class: {
+                    ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: 'a585073f41bf1cbf6855050fd45506892ac84e7a', ref: (element) => (this.dropdownList = element), class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
@@ -442,12 +505,12 @@ 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: 'bae1fc6a37421363f0f104a5b1637dad11b13722', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b8c57fb7c25949a603734eaff7ccae28aa01b787', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'c06e8e79f8ecaf3abc7fa97ea520b0e81ea48b33', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '7793cdff81b04b20111083c9ad288773339c570d', name: "error", size: "16px" }), this.helper))));
+            } }, h("slot", { key: '7047e1daff3ac9a7b5d85bd94885ac108eae2b68', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'c21388cbde54350252c0e6edcb6c16808cfc7a55', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '2ddf6a329c52025a50a0e6519af68b6f67c8d08b', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '3527c56932fab328ee1d06d403e7931e19fe8b8a', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "value": ["handleValueChange"],
-        "open": ["handleOpenState"]
+        "open": ["handleOpenState"],
+        "defaultValue": ["handleDefaultValueChange"]
     }; }
 };
 TdsDropdown.style = TdsDropdownStyle0;
@@ -473,10 +536,10 @@ const TdsDropdownOption = class {
         this.handleSingleSelect = () => {
             if (!this.disabled) {
                 this.selected = true;
-                this.parentElement.appendValue(this.value);
+                this.parentElement.appendValue(this.internalValue);
                 this.parentElement.close();
                 this.tdsSelect.emit({
-                    value: this.value,
+                    value: this.internalValue,
                     selected: this.selected,
                 });
             }
@@ -484,18 +547,18 @@ const TdsDropdownOption = class {
         this.handleMultiselect = (event) => {
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    this.parentElement.appendValue(this.value);
+                    this.parentElement.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
-                        value: this.value,
+                        value: this.internalValue,
                         selected: this.selected,
                     });
                 }
                 else {
-                    this.parentElement.removeValue(this.value);
+                    this.parentElement.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
-                        value: this.value,
+                        value: this.internalValue,
                         selected: this.selected,
                     });
                 }
@@ -509,6 +572,7 @@ const TdsDropdownOption = class {
             this.tdsBlur.emit(event);
         };
         this.value = undefined;
+        this.internalValue = undefined;
         this.disabled = false;
         this.selected = false;
         this.multiselect = undefined;
@@ -518,8 +582,15 @@ const TdsDropdownOption = class {
     async setSelected(selected) {
         this.selected = selected;
     }
+    valueWatcher(newValue) {
+        this.internalValue = String(newValue);
+    }
+    componentWillLoad() {
+        // Initialize the internal value
+        this.internalValue = String(this.value);
+    }
     render() {
-        return (h(Host, { key: '1cb00a19c5dbcc47e1b2bc97d1d5ccc8ac5a532a', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: '5deaf44c7306f4b1856200bf0a5640e99fcb449d', class: `dropdown-option 
+        return (h(Host, { key: '0c7e35e61a103af25df0a54d4dfd4b6811760de4', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'd256dd44efcfba4d13526d3b9f9fc74177e77e75', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -537,6 +608,9 @@ const TdsDropdownOption = class {
     }
     static get delegatesFocus() { return true; }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueWatcher"]
+    }; }
 };
 TdsDropdownOption.style = TdsDropdownOptionStyle0;
 

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

@@ -19,8 +19,10 @@ const TdsFolderTab = class {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: '37ae53ec0d9c0bc3674365d14d61c6b1fbafe168', role: "listitem" }, h("div", { key: 'a977243b499569668ef7428829644f3f2ca23033', class: `${this.disabled ? 'disabled' : ''}
-                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '1e8b9cc10f032a64ffef70bb061f57ddc8a4a1a5' }))));
+        return (h(Host, { key: '3ebe8719ec0bae1d4de2f698b032d9914f01fc65', role: "listitem" }, h("div", { key: '26e4df6a7c2c3ec3cc9b391004b0ecc2e08886ce', class: {
+                selected: this.selected,
+                disabled: this.disabled,
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '78549272532f6fa272660fde77c61464dbede36c' }))));
     }
 };
 TdsFolderTab.style = TdsFolderTabStyle0;