@db-ux/ngx-core-components 3.1.4 → 3.1.16

package/components/custom-select/custom-select.d.ts

@@ -113,7 +113,7 @@ export declare class DBCustomSelect implements AfterViewInit, ControlValueAccess
     getSelectAllLabel(): string;
     getOptionLabel(option: CustomSelectOptionType): string;
     getOptionChecked(value?: string): boolean | undefined;
-    getTagRemoveLabel(index: number): string;
+    getTagRemoveLabel(option: CustomSelectOptionType): string;
     handleTagRemove(option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void): void;
     handleAutoPlacement(): void;
     handleArrowDownUp(event: any): void;

package/components/custom-select/model.d.ts

@@ -194,7 +194,7 @@ export type DBCustomSelectDefaultState = {
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;
-    getTagRemoveLabel: (index: number) => string;
+    getTagRemoveLabel: (option: CustomSelectOptionType) => string;
     selectAllEnabled: boolean;
     searchEnabled: boolean;
     amountOptions: number;

package/components/switch/switch.d.ts

@@ -26,7 +26,6 @@ export declare class DBSwitch implements AfterViewInit, ControlValueAccessor {
     icon: InputSignal<DBSwitchProps["icon"]>;
     iconTrailing: InputSignal<DBSwitchProps["iconTrailing"]>;
     label: InputSignal<DBSwitchProps["label"]>;
-    change: import("@angular/core").OutputEmitterRef<void | Event>;
     blur: import("@angular/core").OutputEmitterRef<void | FocusEvent>;
     focus: import("@angular/core").OutputEmitterRef<void | FocusEvent>;
     _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
@@ -48,5 +47,5 @@ export declare class DBSwitch implements AfterViewInit, ControlValueAccessor {
     setDisabledState(disabled: boolean): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DBSwitch, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DBSwitch, "db-switch", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "visualAid": { "alias": "visualAid"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "emphasis": { "alias": "emphasis"; "required": false; "isSignal": true; }; "showRequiredAsterisk": { "alias": "showRequiredAsterisk"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "validation": { "alias": "validation"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "iconLeading": { "alias": "iconLeading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconTrailing": { "alias": "iconTrailing"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "change": "change"; "blur": "blur"; "focus": "focus"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBSwitch, "db-switch", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "visualAid": { "alias": "visualAid"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "emphasis": { "alias": "emphasis"; "required": false; "isSignal": true; }; "showRequiredAsterisk": { "alias": "showRequiredAsterisk"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "validation": { "alias": "validation"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "iconLeading": { "alias": "iconLeading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconTrailing": { "alias": "iconTrailing"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "blur": "blur"; "focus": "focus"; }, never, ["*"], true, never>;
 }

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -962,9 +962,7 @@ const CardElevationLevelList = ['1', '2', '3'];
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const handleFrameworkEventAngular = (component, event, modelValue = 'value') => {
-    // Change event to work with reactive and template driven forms
     component.propagateChange(event.target[modelValue]);
-    component.writeValue(event.target[modelValue]);
 };
 const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
     // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
@@ -2943,15 +2941,18 @@ class DBCustomSelect {
         }
         return false;
     }
-    getTagRemoveLabel(index) {
-        if (this.removeTagsTexts() && this.removeTagsTexts().length > index) {
-            return this.removeTagsTexts().at(index);
-        }
-        else {
-            return `${DEFAULT_REMOVE} ${this._selectedOptions()
-                ? this.getOptionLabel(this._selectedOptions()[index])
-                : ""}`;
+    getTagRemoveLabel(option) {
+        const removeTexts = this.removeTagsTexts();
+        const options = this.options();
+        if (removeTexts && options) {
+            // Find the index of the option in the original options array
+            const optionIndex = options.findIndex((opt) => opt.value === option.value);
+            if (optionIndex >= 0 && optionIndex < removeTexts.length) {
+                return removeTexts[optionIndex];
+            }
         }
+        // Fallback to default behavior
+        return `${DEFAULT_REMOVE} ${this.getOptionLabel(option)}`;
     }
     handleTagRemove(option, event) {
         if (event) {
@@ -2982,39 +2983,53 @@ class DBCustomSelect {
                     if (isCheckbox) {
                         const listElement = activeElement?.closest("li");
                         if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                            if (listElement?.nextElementSibling) {
-                                listElement?.nextElementSibling
-                                    ?.querySelector("input")
-                                    ?.focus();
+                            // Find next element with input, skipping group titles
+                            let nextElement = listElement?.nextElementSibling;
+                            while (nextElement) {
+                                const nextInput = nextElement.querySelector("input");
+                                if (nextInput) {
+                                    nextInput.focus();
+                                    break;
+                                }
+                                nextElement = nextElement.nextElementSibling;
                             }
-                            else {
+                            if (!nextElement) {
                                 // We are on the last checkbox we move to the top checkbox
                                 this.handleFocusFirstDropdownCheckbox(activeElement);
                             }
                         }
                         else {
-                            if (listElement?.previousElementSibling) {
-                                listElement?.previousElementSibling
-                                    ?.querySelector("input")
-                                    ?.focus();
-                            }
-                            else if (this.detailsRef()?.nativeElement.querySelector(`input[type="checkbox"]`) !== activeElement) {
-                                // We are on the top list checkbox but there is a select all checkbox as well
-                                this.handleFocusFirstDropdownCheckbox(activeElement);
+                            // Find previous element with input, skipping group titles
+                            let prevElement = listElement?.previousElementSibling;
+                            while (prevElement) {
+                                const prevInput = prevElement.querySelector("input");
+                                if (prevInput) {
+                                    prevInput.focus();
+                                    break;
+                                }
+                                prevElement = prevElement.previousElementSibling;
                             }
-                            else {
-                                // We are on the top checkbox, we need to move to the search
-                                // or to the last checkbox
-                                const search = getSearchInput(this.detailsRef()?.nativeElement);
-                                if (search) {
-                                    delay(() => {
-                                        search.focus();
-                                    }, 100);
+                            if (!prevElement) {
+                                // Check if we have a "select all" checkbox (only relevant for multi-select)
+                                const selectAllCheckbox = this.detailsRef()?.nativeElement.querySelector(`input[type="checkbox"]`);
+                                if (selectAllCheckbox && selectAllCheckbox !== activeElement) {
+                                    // We are on the top list checkbox but there is a select all checkbox as well
+                                    this.handleFocusFirstDropdownCheckbox(activeElement);
                                 }
                                 else {
-                                    const checkboxList = Array.from(this.detailsRef()?.nativeElement?.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
-                                    if (checkboxList.length) {
-                                        checkboxList.at(-1)?.focus();
+                                    // We are on the top checkbox, we need to move to the search
+                                    // or to the last checkbox
+                                    const search = getSearchInput(this.detailsRef()?.nativeElement);
+                                    if (search) {
+                                        delay(() => {
+                                            search.focus();
+                                        }, 100);
+                                    }
+                                    else {
+                                        const checkboxList = Array.from(this.detailsRef()?.nativeElement?.querySelectorAll(`input[type="checkbox"],input[type="radio"]`));
+                                        if (checkboxList.length) {
+                                            checkboxList.at(-1)?.focus();
+                                        }
                                     }
                                 }
                             }
@@ -3422,10 +3437,14 @@ class DBCustomSelect {
                 // --- Mitosis: Workaround to make sure the effect() is triggered ---
                 this.values();
                 // ---
-                if (this.values() &&
-                    Array.isArray(this.values()) &&
-                    this.values() !== this._values()) {
-                    this._values.set(this.values() ?? []);
+                const v = this.values();
+                if (Array.isArray(v)) {
+                    if (this._values() !== v) {
+                        this._values.set(v);
+                    }
+                }
+                else if (v == null && this._values()?.length !== 0) {
+                    this._values.set([]);
                 }
             }, {
             // Enable writing to signals inside effects
@@ -3724,7 +3743,7 @@ class DBCustomSelect {
           <db-tag
             emphasis="strong"
             behavior="removable"
-            [removeButton]="getTagRemoveLabel(index)"
+            [removeButton]="getTagRemoveLabel(option)"
             (remove)="handleTagRemove(option, $event)"
             >{{getOptionLabel(option)}}</db-tag
           >
@@ -3831,6 +3850,7 @@ class DBCustomSelect {
     >
     }
     <span
+      class="db-custom-select-placeholder"
       [attr.aria-hidden]="getBooleanAsString(true)"
       [attr.id]="_placeholderId()"
       >{{placeholder() ?? label()}}</span
@@ -3945,7 +3965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
           <db-tag
             emphasis="strong"
             behavior="removable"
-            [removeButton]="getTagRemoveLabel(index)"
+            [removeButton]="getTagRemoveLabel(option)"
             (remove)="handleTagRemove(option, $event)"
             >{{getOptionLabel(option)}}</db-tag
           >
@@ -4052,6 +4072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
     >
     }
     <span
+      class="db-custom-select-placeholder"
       [attr.aria-hidden]="getBooleanAsString(true)"
       [attr.id]="_placeholderId()"
       >{{placeholder() ?? label()}}</span
@@ -6398,7 +6419,11 @@ class DBSelect {
       }
     </select>
     @if(placeholder()){
-    <span [attr.id]="_placeholderId()">{{placeholder()}}</span>
+    <span
+      class="db-select-placeholder"
+      [attr.id]="_placeholderId()"
+      >{{placeholder()}}</span
+    >
     } @if(stringPropVisible(message(), showMessage())){
     <db-infotext
       size="small"
@@ -6494,7 +6519,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
       }
     </select>
     @if(placeholder()){
-    <span [attr.id]="_placeholderId()">{{placeholder()}}</span>
+    <span
+      class="db-select-placeholder"
+      [attr.id]="_placeholderId()"
+      >{{placeholder()}}</span
+    >
     } @if(stringPropVisible(message(), showMessage())){
     <db-infotext
       size="small"
@@ -6617,9 +6646,6 @@ const StackJustifyContentList = ['space-between', 'start', 'end', 'center'];
 const defaultProps$5 = {};
 class DBSwitch {
     handleChange(event) {
-        if (this.change) {
-            this.change.emit(event);
-        }
         handleFrameworkEventAngular(this, event, "checked");
     }
     handleBlur(event) {
@@ -6655,7 +6681,6 @@ class DBSwitch {
         this.icon = input();
         this.iconTrailing = input();
         this.label = input();
-        this.change = output();
         this.blur = output();
         this.focus = output();
         this._ref = viewChild("_ref");
@@ -6716,7 +6741,7 @@ class DBSwitch {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSwitch,
                 multi: true