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

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

@@ -69,39 +69,13 @@ const TdsDropdown = class {
         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 = () => {
@@ -113,12 +87,12 @@ const TdsDropdown = class {
                 return tdsDropdownOptions;
         };
         this.getSelectedChildren = () => {
-            if (!this.value)
+            if (this.selectedOptions.length === 0)
                 return [];
-            const valueArray = Array.isArray(this.value) ? this.value : [this.value];
-            return valueArray
+            return this.selectedOptions
                 .map((stringValue) => {
-                const matchingElement = this.getChildren().find((element) => element.value === stringValue);
+                var _a;
+                const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => element.value === stringValue);
                 return matchingElement;
             })
                 .filter(Boolean);
@@ -135,13 +109,11 @@ const TdsDropdown = class {
             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()) === '') {
+            if (this.selectedOptions.length === 0) {
                 this.host.removeAttribute('value');
             }
             else {
-                const valueArray = Array.isArray(this.value) ? this.value : [this.value];
-                this.host.setAttribute('value', valueArray.map((val) => val).toString());
+                this.host.setAttribute('value', this.selectedOptions.join(','));
             }
         };
         this.getOpenDirection = () => {
@@ -236,88 +208,94 @@ const TdsDropdown = class {
         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;
-            }
-        }
-        else {
-            // Handle null/undefined case
-            this.internalValue = '';
-            this.value = this.multiselect ? [] : null;
+    normalizeValue(value) {
+        if (!value)
+            return [];
+        // For multiselect, keep array. For single select, wrap in array
+        if (this.multiselect) {
+            return Array.isArray(value) ? value : value.split(',');
         }
-        // Emit change events
-        this.handleChange();
-        // Update filter input if present
+        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);
+        // 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();
+    }
+    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`);
+            }
+            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() {
+        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;
+        const normalizedValue = this.normalizeValue(value);
+        this.updateDropdownState(normalizedValue);
         return this.getSelectedChildren().map((element) => ({
             value: element.value,
             label: element.textContent.trim(),
         }));
     }
     async reset() {
-        this.value = this.multiselect ? [] : null;
+        this.updateDropdownState([]);
     }
     async removeValue(oldValue) {
-        if (this.multiselect && Array.isArray(this.value)) {
-            this.value = this.value.filter((v) => v !== oldValue);
-        }
-        else {
-            this.value = null;
-        }
+        const newValues = this.selectedOptions.filter((v) => v !== oldValue);
+        this.updateDropdownState(newValues);
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
@@ -377,9 +355,9 @@ const TdsDropdown = class {
     }
     componentWillLoad() {
         if (this.defaultValue && !this.value) {
-            this.value = this.defaultValue;
+            const initialValue = this.multiselect ? this.defaultValue.split(',') : [this.defaultValue];
+            this.updateDropdownState(initialValue);
         }
-        this.setDefaultOption();
     }
     /** Method to handle slot changes */
     handleSlotChange() {
@@ -391,10 +369,10 @@ const TdsDropdown = class {
     }
     async appendValue(value) {
         if (this.multiselect) {
-            this.value = Array.isArray(this.value) ? [...this.value, value] : [value];
+            this.updateDropdownState([...this.selectedOptions, value]);
         }
         else {
-            this.value = value;
+            this.updateDropdownState([value]);
         }
     }
     componentDidRender() {
@@ -410,10 +388,8 @@ const TdsDropdown = class {
         }
     }
     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: {
+        appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
+        return (h(Host, { key: 'b80b938a7e06df4883e939cf9cf06cbb5d2dc12b', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '75172f55ac3adc34a050bbeba543165b6c6ec445', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'd0498b07c2446b7ccde5bd09a95157454ffc2331', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -421,7 +397,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}
-                    ${((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? 'selected' : ''}
+                    ${this.selectedOptions.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) => {
@@ -448,14 +424,14 @@ const TdsDropdown = class {
                     this.open = false;
                 }
             }, class: `
-                ${this.value ? 'value' : 'placeholder'}
+                ${this.selectedOptions.length ? '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}
-                    ${((_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.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: '999a08cee6035f37217270681b58411badc1596d', ref: (element) => (this.dropdownList = element), class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
@@ -464,7 +440,7 @@ 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: '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: 'f6e55be5581a1b5a24da4643508c4fe76767c9c7', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '6184dce7e827ee6c2c0403e8531ea8ac782e3073', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '33bd5d3695247cfaaa66bb67b6ac6a5ced795c72', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '6f3681a038fc95bb90e7877c54eff0b4c807b877', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-51d04e39.js';
 
-const linkCss = ":host{display:inline}:host ::slotted(*){all:unset;cursor:pointer;outline:none;color:var(--tds-link);text-decoration:underline}:host ::slotted(*:focus-visible){color:var(--tds-link-focus);text-decoration:none;outline:2px solid var(--tds-link-focus);outline-offset:-2px}:host ::slotted(*:active){color:var(--tds-link);text-decoration:underline;text-decoration-color:var(--tds-link)}:host ::slotted(*:hover){color:var(--tds-link-hover);text-decoration:underline;text-decoration-color:var(--tds-link-hover)}:host ::slotted(*:visited){color:var(--tds-link-visited);text-decoration-color:var(--tds-link-visited)}.disabled ::slotted(*){color:var(--tds-link-disabled);text-decoration-color:var(--tds-link-disabled);pointer-events:none}.no-underline ::slotted(*){text-decoration:none}.no-underline:hover ::slotted(*){text-decoration:none}";
+const linkCss = ":host{display:inline}:host ::slotted(*){all:unset;cursor:pointer;outline:none;color:var(--tds-link);text-decoration:underline}:host ::slotted(*:focus-visible){color:var(--tds-link-focus);text-decoration:none;outline:2px solid var(--tds-link-focus);outline-offset:-2px}:host ::slotted(*:active){color:var(--tds-link);text-decoration:underline;text-decoration-color:var(--tds-link)}:host ::slotted(*:hover){color:var(--tds-link-hover);text-decoration:underline;text-decoration-color:var(--tds-link-hover)}:host ::slotted(*:visited){color:var(--tds-link-visited);text-decoration-color:var(--tds-link-visited)}.disabled ::slotted(*),.disabled ::slotted(*:visited){color:var(--tds-link-disabled);text-decoration-color:var(--tds-link-disabled);pointer-events:none}.no-underline ::slotted(*){text-decoration:none}.no-underline:hover ::slotted(*){text-decoration:none}.standalone ::slotted(*){font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}";
 const TdsLinkStyle0 = linkCss;
 
 const TdsLink = class {
@@ -8,15 +8,17 @@ const TdsLink = class {
         registerInstance(this, hostRef);
         this.disabled = false;
         this.underline = true;
+        this.standalone = false;
     }
     connectedCallback() {
         this.host.children[0].classList.add('tds-link-component');
     }
     render() {
-        return (h("span", { key: 'd812a60488213cdd31c3ace934ae93c3b3781cf9', class: `        
+        return (h("span", { key: '619f52601e4716a34fd39752704acf06acd94dd8', class: `        
           ${this.disabled ? 'disabled' : ''}
           ${!this.underline ? 'no-underline' : ''}
-          ` }, h("slot", { key: '2b9675a2abd7b7c16200cda28fa5ded499c03fcd' })));
+          ${this.standalone ? 'standalone' : ''}
+          ` }, h("slot", { key: '636596dae6e69aff2f10666e86fb965e46efb059' })));
     }
     get host() { return getElement(this); }
 };