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

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

@@ -80,7 +80,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'af1229553e89c02aca1d7c11bbc80acd25ce44b5', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c93eb33d1864028690ab981c0f676f03993265c4', class: `dropdown-option 
+        return (h(Host, { key: 'f471d5238869b3a522b36d99d7549c1229cd83a2' }, h("div", { key: 'da9edccba96999b0ee40f8c599325774593de814', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -92,7 +92,7 @@ export class TdsDropdownOption {
                 this.handleMultiselect(event);
             }, disabled: this.disabled, checked: this.selected, class: {
                 [this.size]: true,
-            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
+            } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected, onClick: () => {
                 this.handleSingleSelect();
             }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
     }

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

@@ -14,16 +14,15 @@ export class TdsDropdown {
                 const defaultValues = this.multiselect
                     ? this.internalDefaultValue.split(',')
                     : [this.internalDefaultValue];
-                this.updateDropdownState(defaultValues);
+                this.updateDropdownStateInternal(defaultValues);
             }
         };
         this.getChildren = () => {
             const tdsDropdownOptions = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
             if (tdsDropdownOptions.length === 0) {
-                console.warn('TDS DROPDOWN: Data missing. Disregard if loading data asynchronously.');
+                console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
             }
-            else
-                return tdsDropdownOptions;
+            return tdsDropdownOptions;
         };
         this.getSelectedChildren = () => {
             if (this.selectedOptions.length === 0)
@@ -31,7 +30,7 @@ export class TdsDropdown {
             return this.selectedOptions
                 .map((stringValue) => {
                 var _a;
-                const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => element.value === stringValue);
+                const matchingElement = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.find((element) => convertToString(element.value) === convertToString(stringValue));
                 return matchingElement;
             })
                 .filter(Boolean);
@@ -150,6 +149,7 @@ export class TdsDropdown {
         this.noResultText = 'No result';
         this.defaultValue = undefined;
         this.value = null;
+        this.tdsAriaLabel = undefined;
         this.open = false;
         this.internalValue = undefined;
         this.filterResult = undefined;
@@ -162,50 +162,69 @@ export class TdsDropdown {
         const normalizedValue = this.normalizeValue(newValue);
         // Only update if actually changed
         if (this.hasValueChanged(normalizedValue, this.selectedOptions)) {
-            this.updateDropdownState(normalizedValue);
+            this.updateDropdownStateFromUser(normalizedValue);
         }
     }
     normalizeValue(value) {
-        if (!value || value === '')
-            return []; // Handle both null and empty string
-        // For multiselect, keep array. For single select, wrap in array
-        if (this.multiselect) {
+        if (value === null || value === undefined || value === '')
+            return [];
+        // For single select, ensure we handle both string and array inputs
+        if (!this.multiselect) {
+            // If array is passed to single select, take first value
             if (Array.isArray(value)) {
-                return convertArrayToStrings(value);
+                return [convertToString(value[0])];
             }
-            return value
-                .toString()
-                .split(',')
-                .filter((v) => v !== '');
+            return [convertToString(value)];
+        }
+        // For multiselect
+        if (Array.isArray(value)) {
+            return convertArrayToStrings(value);
         }
-        // Single select - convert to string array
-        return Array.isArray(value) ? convertArrayToStrings(value) : [convertToString(value)];
+        // Handle comma-separated string for multiselect
+        return value
+            .toString()
+            .split(',')
+            .filter((v) => v !== '');
     }
     hasValueChanged(newValue, currentValue) {
         if (newValue.length !== currentValue.length)
             return true;
         return newValue.some((val) => !currentValue.includes(val));
     }
-    updateDropdownState(values) {
+    updateDropdownStateInternal(values) {
+        this.updateDropdownState(values, false);
+    }
+    updateDropdownStateFromUser(values) {
+        this.updateDropdownState(values, true);
+    }
+    updateDropdownState(values, emitChange = true) {
+        // Validate the values first
+        const validValues = this.validateValues(values);
         // Update internal state
-        this.selectedOptions = [...this.validateValues(values)]; // Force new array reference
-        // Then update the value prop to match
+        this.selectedOptions = [...validValues];
+        // Update the value prop
         this.value = this.multiselect ? this.selectedOptions : this.selectedOptions[0] || null;
-        // Force update of internal value
+        // Update internal value for display
         this.internalValue = this.getValue();
         // Update DOM
         this.updateOptionElements();
         // Update display value
         this.updateDisplayValue();
-        // Emit change event
-        this.emitChange();
+        // Emit change event only if value has changed by user
+        if (emitChange)
+            this.emitChange();
         // Update value attribute
         this.setValueAttribute();
     }
     validateValues(values) {
+        // Make sure we have children before validation
+        const children = this.getChildren();
+        if (!children || children.length === 0) {
+            console.warn('No dropdown options found');
+            return values; // Return original values if no children yet
+        }
         return values.filter((val) => {
-            var _a;
-            const isValid = (_a = this.getChildren()) === null || _a === void 0 ? void 0 : _a.some((element) => element.value === val);
+            const isValid = children.some((element) => convertToString(element.value) === convertToString(val));
             if (!isValid) {
                 console.warn(`Option with value "${val}" does not exist`);
             }
@@ -242,18 +261,18 @@ export class TdsDropdown {
         else {
             normalizedValue = [convertToString(value)];
         }
-        this.updateDropdownState(normalizedValue);
+        this.updateDropdownStateFromUser(normalizedValue);
         return this.getSelectedChildren().map((element) => ({
             value: element.value,
             label: element.textContent.trim(),
         }));
     }
     async reset() {
-        this.updateDropdownState([]);
+        this.updateDropdownStateFromUser([]);
     }
     async removeValue(oldValue) {
         const newValues = this.selectedOptions.filter((v) => v !== oldValue);
-        this.updateDropdownState(newValues);
+        this.updateDropdownStateFromUser(newValues);
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
@@ -331,13 +350,19 @@ export class TdsDropdown {
         }
     }
     componentWillLoad() {
-        if (this.defaultValue && !this.value) {
-            // Convert defaultValue to string before splitting
+        // First handle the value prop if it exists
+        if (this.value !== null && this.value !== undefined) {
+            const normalizedValue = this.normalizeValue(this.value);
+            this.updateDropdownStateInternal(normalizedValue);
+            return; // Exit early if we handled the value prop
+        }
+        // Only use defaultValue if no value prop was provided
+        if (this.defaultValue !== null && this.defaultValue !== undefined) {
             const defaultValueStr = convertToString(this.defaultValue);
             const initialValue = this.multiselect
                 ? defaultValueStr.split(',').map(convertToString)
-                : [convertToString(this.defaultValue)];
-            this.updateDropdownState(initialValue);
+                : [defaultValueStr];
+            this.updateDropdownStateInternal(initialValue);
         }
     }
     /** Method to handle slot changes */
@@ -353,10 +378,10 @@ export class TdsDropdown {
      */
     async appendValue(value) {
         if (this.multiselect) {
-            this.updateDropdownState([...this.selectedOptions, value]);
+            this.updateDropdownStateFromUser([...this.selectedOptions, value]);
         }
         else {
-            this.updateDropdownState([value]);
+            this.updateDropdownStateFromUser([value]);
         }
     }
     componentDidRender() {
@@ -371,11 +396,16 @@ export class TdsDropdown {
             form.removeEventListener('reset', this.resetInput);
         }
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Dropdown component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
         appendHiddenInput(this.host, this.name, this.selectedOptions.join(','), this.disabled);
-        return (h(Host, { key: '490d34545b3a09c3b4342fa09d38f6bf9c782498', role: "select", class: {
+        return (h(Host, { key: 'b8c418ebe609789c1610178d764a7d620e2231c2', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '7eb96c0134032654df98a3b68ffb692a2cd91d2b', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '439fddb188ad65239e9d5451a82ab3bbe8f47fb7', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'ee5c005d5020e2226ce54c93a90f2098e081a6df', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'ca674a2361f1301886bb855b7093c67b999a500a', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -388,7 +418,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("input", {
+                    ` }, this.label)), h("input", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled,
             // eslint-disable-next-line no-return-assign
             ref: (inputEl) => (this.inputElement = inputEl), class: {
                 placeholder: this.labelPosition === 'inside',
@@ -402,8 +432,7 @@ export class TdsDropdown {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
-            }
-        })), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
+            } })), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleFilterReset();
                 }
@@ -414,7 +443,7 @@ export class TdsDropdown {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -426,7 +455,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'd6381f78466994f05415cf8981b3cedaaf4df6a9', ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '14558013e5903958942dc7dd3ef2d3a49f79b245', role: "listbox", "aria-label": this.tdsAriaLabel, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -437,11 +466,11 @@ 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: 'c36a9cb5398a7d290f11576431982e869986e4a0', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '5ec07552d105f8a4addc46da0172f67cf9233817', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'b3e240c31060f2d2bce6e3647f903f9ff1250ed5', class: {
+            } }, h("slot", { key: '5f69c2fcb5b6a130888d7cd92d4cb882122e3e58', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'bae7a62960f90cd7b679ac4956a677dbff378ac7', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'be5fe56a1e19e812fa983c22f130c0d3001da55b', class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'c0eb10dfeaa5236f5ac02dabf44329e85d52dcda', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: 'c0ccc491caa1aca628aff12e02d8a917a74e9c86', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -756,6 +785,23 @@ export class TdsDropdown {
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-label attribute for input"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/icon/icon.js

@@ -49,7 +49,7 @@ export class Icon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconNames",
-                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"copy\" | \"document\" | \"link\" | \"image\" | \"download\" | \"target\" | \"history\" | \"print\" | \"24v_battery_inactive\" | \"24v_battery\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"burger\" | \"calendar_inactive\" | \"calendar\" | \"card\" | \"cart\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"contact_inactive\" | \"contact\" | \"cross\" | \"dashboard\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"edit_inactive\" | \"edit\" | \"email\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"filters_inactive\" | \"filters\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"hatch_open_inactive\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"link_broken\" | \"lock_inactive\" | \"lock\" | \"maximize_fullscreen\" | \"meatballs\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"notification_inactive\" | \"notification\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"plus\" | \"print_inactive\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"report_inactive\" | \"report\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"text_inactive\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck\" | \"upload\" | \"wallet\" | \"warning\" | \"wifi_inactive\" | \"wifi\"",
+                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"merge\" | \"copy\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"placeholder\" | \"history\" | \"print\" | \"key\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"list\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
                     "references": {
                         "IconNames": {
                             "location": "import",