@db-ux/ngx-core-components 3.1.3 → 3.1.15

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"
@@ -2544,7 +2542,10 @@ class DBTooltip {
         if (this._ref()?.nativeElement) {
             // This is a workaround for angular
             delay(() => {
-                handleFixedPopover(this._ref()?.nativeElement, parent, this.placement() ?? "bottom");
+                // Due to race conditions we need to check for _ref again
+                if (this._ref()?.nativeElement) {
+                    handleFixedPopover(this._ref()?.nativeElement, parent, this.placement() ?? "bottom");
+                }
             }, 1);
         }
     }
@@ -2940,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) {
@@ -3419,10 +3423,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
@@ -3721,7 +3729,7 @@ class DBCustomSelect {
           <db-tag
             emphasis="strong"
             behavior="removable"
-            [removeButton]="getTagRemoveLabel(index)"
+            [removeButton]="getTagRemoveLabel(option)"
             (remove)="handleTagRemove(option, $event)"
             >{{getOptionLabel(option)}}</db-tag
           >
@@ -3828,6 +3836,7 @@ class DBCustomSelect {
     >
     }
     <span
+      class="db-custom-select-placeholder"
       [attr.aria-hidden]="getBooleanAsString(true)"
       [attr.id]="_placeholderId()"
       >{{placeholder() ?? label()}}</span
@@ -3942,7 +3951,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
           >
@@ -4049,6 +4058,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
@@ -6314,7 +6324,6 @@ class DBSelect {
         this.disabled.set(disabled);
     }
     ngAfterViewInit() {
-        this.writeValue(this.value() ?? "");
         if (typeof window !== "undefined") {
             const element = this._ref()?.nativeElement;
             this.enableAttributePassing(element, "db-select");
@@ -6326,6 +6335,8 @@ class DBSelect {
             this._invalidMessageId.set(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
             this._placeholderId.set(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
+            // @ts-ignore
+            this.writeValue?.(this.value?.() ?? "");
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -6394,7 +6405,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"
@@ -6490,7 +6505,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"
@@ -6613,9 +6632,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) {
@@ -6651,7 +6667,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");
@@ -6712,7 +6727,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