@db-ux/ngx-core-components 2.2.3 → 2.2.4

package/components/accordion-item/accordion-item.d.ts

@@ -11,7 +11,7 @@ export declare class DBAccordionItem implements AfterViewInit {
     disabled: import("@angular/core").InputSignal<string | boolean | undefined>;
     headlinePlain: import("@angular/core").InputSignal<string | undefined>;
     text: import("@angular/core").InputSignal<string | undefined>;
-    toggle: import("@angular/core").OutputEmitterRef<any>;
+    toggle: import("@angular/core").OutputEmitterRef<boolean | void>;
     _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
     _id: import("@angular/core").WritableSignal<string | undefined>;
     _open: import("@angular/core").WritableSignal<boolean | undefined>;

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

@@ -1,6 +1,7 @@
 import { AfterViewInit, ElementRef, Renderer2 } from "@angular/core";
 import { ControlValueAccessor } from '@angular/forms';
 import { CustomSelectOptionType } from "./model";
+import { ClickEvent, GeneralEvent, InputEvent, InteractionEvent } from "../../shared/model";
 import * as i0 from "@angular/core";
 export declare class DBCustomSelect implements AfterViewInit, ControlValueAccessor {
     private renderer;
@@ -64,9 +65,9 @@ export declare class DBCustomSelect implements AfterViewInit, ControlValueAccess
     placeholder: import("@angular/core").InputSignal<string | undefined>;
     messageIcon: import("@angular/core").InputSignal<import("@db-ux/core-foundations").BaseIconTypes | import("@db-ux/core-foundations").LooseAutocomplete | undefined>;
     amountChange: import("@angular/core").OutputEmitterRef<number | void>;
-    dropdownToggle: import("@angular/core").OutputEmitterRef<any>;
+    dropdownToggle: import("@angular/core").OutputEmitterRef<void | Event>;
     optionSelected: import("@angular/core").OutputEmitterRef<void | string[]>;
-    search: import("@angular/core").OutputEmitterRef<any>;
+    search: import("@angular/core").OutputEmitterRef<void | Event>;
     _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
     selectRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
     detailsRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
@@ -104,25 +105,25 @@ export declare class DBCustomSelect implements AfterViewInit, ControlValueAccess
     handleDocumentScroll(event: any): void;
     hasValidState(): boolean;
     handleValidation(): void;
-    handleDropdownToggle(event: any): void;
+    handleDropdownToggle(event: GeneralEvent<HTMLDetailsElement>): void;
     getNativeSelectValue(): string;
     setDescById(descId?: string): void;
     getSelectAllLabel(): string;
     getOptionLabel(option: CustomSelectOptionType): string;
     getOptionChecked(value?: string): boolean | undefined;
     getTagRemoveLabel(index: number): string;
-    handleTagRemove(option: CustomSelectOptionType, event: any): void;
+    handleTagRemove(option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void): void;
     handleAutoPlacement(): void;
     handleArrowDownUp(event: any): void;
     handleKeyboardPress(event: any): void;
-    handleClose(event: any): void;
+    handleClose(event?: InteractionEvent<HTMLDetailsElement> | void, forceClose?: boolean): void;
     handleDocumentClose(event: any): void;
     handleOptionSelected(values: string[]): void;
     handleSelect(value?: string): void;
     handleSelectAll(event: any): void;
     handleFocusFirstDropdownCheckbox(activeElement?: Element): void;
     handleOpenByKeyboardFocus(): void;
-    handleSearch(event: any): void;
+    handleSearch(valueOrEvent?: InputEvent<HTMLInputElement> | string | void): void;
     handleClearAll(event: any): void;
     handleSummaryFocus(): void;
     satisfyReact(event: any): void;

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

@@ -1,4 +1,4 @@
-import { BaseFormProps, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
+import { BaseFormProps, ClickEvent, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GeneralEvent, GlobalProps, GlobalState, IconProps, InputEvent, InteractionEvent, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
 import { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
 import { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
 import { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
@@ -46,19 +46,19 @@ export type DBCustomSelectEvents = {
     /**
      * Informs the user when dropdown was toggled.
      */
-    onDropdownToggle?: (event: any) => void;
+    onDropdownToggle?: (event: GeneralEvent<HTMLDetailsElement>) => void;
     /**
      * Informs the user when dropdown was toggled.
      */
-    dropdownToggle?: (event: any) => void;
+    dropdownToggle?: (event: GeneralEvent<HTMLDetailsElement>) => void;
     /**
      * Informs the user when a search was performed.
      */
-    onSearch?: (event: any) => void;
+    onSearch?: (event: InputEvent<HTMLInputElement>) => void;
     /**
      * Informs the user when a search was performed.
      */
-    search?: (event: any) => void;
+    search?: (event: InputEvent<HTMLInputElement>) => void;
 };
 export type DBCustomSelectDefaultProps = {
     /**
@@ -198,7 +198,7 @@ export type DBCustomSelectDefaultState = {
     searchEnabled: boolean;
     amountOptions: number;
     setDescById: (descId?: string) => void;
-    handleTagRemove: (option: CustomSelectOptionType, event?: any) => void;
+    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void) => void;
     handleSummaryFocus: () => void;
     handleSelect: (value?: string) => void;
     handleSelectAll: (event: any) => void;
@@ -216,4 +216,4 @@ export type DBCustomSelectDefaultState = {
     selectAllIndeterminate: boolean;
     handleAutoPlacement: () => void;
 };
-export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState & DocumentScrollState;
+export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState<InteractionEvent<HTMLDetailsElement>> & DocumentScrollState;

package/components/drawer/drawer.d.ts

@@ -1,4 +1,5 @@
 import { AfterViewInit, ElementRef } from "@angular/core";
+import { ClickEvent, GeneralKeyboardEvent } from "../../shared/model";
 import * as i0 from "@angular/core";
 export declare class DBDrawer implements AfterViewInit {
     protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
@@ -15,10 +16,10 @@ export declare class DBDrawer implements AfterViewInit {
     rounded: import("@angular/core").InputSignal<string | boolean | undefined>;
     closeButtonId: import("@angular/core").InputSignal<string | undefined>;
     closeButtonText: import("@angular/core").InputSignal<string | undefined>;
-    close: import("@angular/core").OutputEmitterRef<any>;
+    close: import("@angular/core").OutputEmitterRef<void | KeyboardEvent | MouseEvent | undefined>;
     _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
     dialogContainerRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
-    handleClose(event: any, forceClose?: boolean): void;
+    handleClose(event?: ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement> | void, forceClose?: boolean): void;
     handleDialogOpen(): void;
     constructor();
     /**

package/components/drawer/model.d.ts

@@ -1,4 +1,4 @@
-import { CloseEventProps, CloseEventState, GlobalProps, GlobalState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
+import { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
 export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
 export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
 export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];
@@ -34,8 +34,8 @@ export type DBDrawerDefaultProps = {
      */
     variant?: DrawerVariantType;
 };
-export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps & InnerCloseButtonProps & WidthProps & SpacingProps;
+export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InnerCloseButtonProps & WidthProps & SpacingProps;
 export type DBDrawerDefaultState = {
     handleDialogOpen: () => void;
 };
-export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState;
+export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>>;

package/components/header/header.d.ts

@@ -13,7 +13,7 @@ export declare class DBHeader implements AfterViewInit {
     className: import("@angular/core").InputSignal<string | undefined>;
     width: import("@angular/core").InputSignal<"medium" | "small" | "large" | "full" | undefined>;
     burgerMenuLabel: import("@angular/core").InputSignal<string | undefined>;
-    toggle: import("@angular/core").OutputEmitterRef<any>;
+    toggle: import("@angular/core").OutputEmitterRef<boolean | void>;
     _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
     _id: import("@angular/core").WritableSignal<string | undefined>;
     initialized: import("@angular/core").WritableSignal<boolean>;

package/components/notification/model.d.ts

@@ -1,4 +1,4 @@
-import { CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
+import { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
 export declare const NotificationVariantList: readonly ["docked", "standalone", "overlay"];
 export type NotificationVariantType = (typeof NotificationVariantList)[number];
 export declare const NotificationLinkVariantList: readonly ["block", "inline"];
@@ -52,6 +52,6 @@ export type DBNotificationDefaultProps = {
      */
     variant?: NotificationVariantType;
 };
-export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & CloseEventProps & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
+export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement>> & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
 export type DBNotificationDefaultState = {};
-export type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState;
+export type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement>>;

package/components/notification/notification.d.ts

@@ -23,9 +23,9 @@ export declare class DBNotification implements AfterViewInit {
     closeable: import("@angular/core").InputSignal<string | boolean | undefined>;
     closeButtonId: import("@angular/core").InputSignal<string | undefined>;
     closeButtonText: import("@angular/core").InputSignal<string | undefined>;
-    close: import("@angular/core").OutputEmitterRef<any>;
+    close: import("@angular/core").OutputEmitterRef<void | MouseEvent | undefined>;
     _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
-    handleClose(event: ClickEvent<HTMLButtonElement> | any): void;
+    handleClose(event?: ClickEvent<HTMLButtonElement> | void): void;
     constructor();
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.

package/components/tabs/model.d.ts

@@ -1,4 +1,4 @@
-import { AlignmentProps, GlobalProps, GlobalState, InitializedState, OrientationProps, WidthProps } from '../../shared/model';
+import { AlignmentProps, InputEvent, GlobalProps, GlobalState, InitializedState, OrientationProps, WidthProps } from '../../shared/model';
 import { DBTabItemProps } from '../tab-item/model';
 import { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
@@ -28,27 +28,29 @@ export type DBTabsDefaultProps = {
      */
     name?: string;
     /**
-     * Informs the user if the current tab index has changed.
+     * Provide simple tabs with label + text as content
      */
-    onIndexChange?: (index?: number) => void;
+    tabs?: DBSimpleTabProps[] | string;
+};
+export type DBTabsEventProps = {
     /**
-     * Informs the user if another tab has been selected.
+     * Informs the user if the current tab index has changed.
      */
-    onTabSelect?: (event?: Event) => void;
+    indexChange?: (index?: number) => void;
     /**
      * Informs the user if the current tab index has changed.
      */
-    indexChange?: (index?: number) => void;
+    onIndexChange?: (index?: number) => void;
     /**
      * Informs the user if another tab has been selected.
      */
-    tabSelect?: (event?: Event) => void;
+    onTabSelect?: (event?: InputEvent<HTMLElement>) => void;
     /**
-     * Provide simple tabs with label + text as content
+     * Informs the user if another tab has been selected.
      */
-    tabs?: DBSimpleTabProps[] | string;
+    tabSelect?: (event?: InputEvent<HTMLElement>) => void;
 };
-export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & DBTabsEventProps;
 export type DBTabsDefaultState = {
     _name: string;
     scrollContainer?: Element | null;
@@ -59,6 +61,6 @@ export type DBTabsDefaultState = {
     convertTabs: () => DBSimpleTabProps[];
     initTabList: () => void;
     initTabs: (init?: boolean) => void;
-    handleChange: (event: any) => void;
+    handleChange: (event: InputEvent<HTMLElement>) => void;
 };
 export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState;

package/components/tabs/tabs.d.ts

@@ -1,5 +1,6 @@
 import { AfterViewInit, ElementRef } from "@angular/core";
 import { DBSimpleTabProps } from "./model";
+import { InputEvent } from "../../shared/model";
 import * as i0 from "@angular/core";
 export declare class DBTabs implements AfterViewInit {
     protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
@@ -28,7 +29,7 @@ export declare class DBTabs implements AfterViewInit {
     scroll(left?: boolean): void;
     initTabList(): void;
     initTabs(init?: boolean): void;
-    handleChange(event: any): void;
+    handleChange(event: InputEvent<HTMLElement>): void;
     trackByTab0(index: number, tab: any): string;
     trackByTab1(index: number, tab: any): string;
     constructor();

package/components/tag/model.d.ts

@@ -1,6 +1,16 @@
 import { ClickEvent, ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps, EmphasisProps } from '../../shared/model';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
+export type DBTagEventsProps = {
+    /**
+     * If "removeButton" attribute is set this function will be called when user clicks cancel button inside the tag.
+     */
+    onRemove?: (event?: ClickEvent<HTMLButtonElement> | void) => void;
+    /**
+     * If "removeButton" attribute is set this function will be called when user clicks cancel button inside the tag.
+     */
+    remove?: (event?: ClickEvent<HTMLButtonElement> | void) => void;
+};
 export type DBTagDefaultProps = {
     /**
      *	Defines the behavior of the component:
@@ -16,14 +26,6 @@ export type DBTagDefaultProps = {
      * Define the text next to the icon specified via the icon Property to get hidden.
      */
     noText?: boolean | string;
-    /**
-     * If "removeButton" attribute is set this function will be called when user clicks cancel button inside the tag.
-     */
-    onRemove?: (event?: any) => void;
-    /**
-     * If "removeButton" attribute is set this function will be called when user clicks cancel button inside the tag.
-     */
-    remove?: (event?: any) => void;
     /**
      * The removeButton attribute shows the cancel button.
      */
@@ -41,9 +43,9 @@ export type DBTagDefaultProps = {
      */
     value?: string;
 };
-export type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & EmphasisProps & ShowIconProps & ContentSlotProps;
+export type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & EmphasisProps & ShowIconProps & ContentSlotProps & DBTagEventsProps;
 export type DBTagDefaultState = {
     getRemoveButtonText: () => string;
-    handleRemove: (event?: ClickEvent<HTMLButtonElement>) => void;
+    handleRemove: (event?: ClickEvent<HTMLButtonElement> | void) => void;
 };
 export type DBTagState = DBTagDefaultState & GlobalState & InitializedState;

package/components/tag/tag.d.ts

@@ -18,10 +18,10 @@ export declare class DBTag implements AfterViewInit {
     overflow: import("@angular/core").InputSignal<string | boolean | undefined>;
     text: import("@angular/core").InputSignal<string | undefined>;
     behavior: import("@angular/core").InputSignal<string | undefined>;
-    remove: import("@angular/core").OutputEmitterRef<any>;
+    remove: import("@angular/core").OutputEmitterRef<void | MouseEvent | undefined>;
     _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
     initialized: import("@angular/core").WritableSignal<boolean>;
-    handleRemove(event?: ClickEvent<HTMLButtonElement>): void;
+    handleRemove(event?: ClickEvent<HTMLButtonElement> | void): void;
     getRemoveButtonText(): string | undefined;
     constructor();
     /**

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

@@ -107,6 +107,7 @@ const getOptionKey = (option, prefix) => {
     const key = option.id ?? option.value ?? uuid();
     return `${prefix}${key}`;
 };
+const isKeyboardEvent = (event) => event.key !== undefined;
 
 const defaultProps$z = {};
 class DBButton {
@@ -342,6 +343,8 @@ const TESTING_VIEWPORTS = [{
 const defaultProps$y = {};
 class DBNotification {
     handleClose(event) {
+        if (!event)
+            return;
         event.stopPropagation();
         if (this.close) {
             this.close.emit(event);
@@ -1262,19 +1265,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 const defaultProps$r = {};
 class DBDrawer {
     handleClose(event, forceClose) {
-        if (event.key === "Escape") {
-            event.preventDefault();
-        }
-        if (forceClose) {
-            event.stopPropagation();
+        if (!event)
+            return;
+        if (isKeyboardEvent(event)) {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                if (this.close) {
+                    this.close.emit(event);
+                }
+            }
         }
-        if (forceClose ||
-            event.key === "Escape" ||
-            (event.target.nodeName === "DIALOG" &&
+        else {
+            if (forceClose) {
+                event.stopPropagation();
+                if (this.close) {
+                    this.close.emit(event);
+                }
+            }
+            if (event.target?.nodeName === "DIALOG" &&
                 event.type === "click" &&
-                this.backdrop() !== "none")) {
-            if (this.close) {
-                this.close.emit(event);
+                this.backdrop() !== "none") {
+                if (this.close) {
+                    this.close.emit(event);
+                }
             }
         }
     }
@@ -4136,7 +4149,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 const defaultProps$f = {};
 class DBTag {
     handleRemove(event) {
-        event?.stopPropagation();
+        if (!event)
+            return;
+        event.stopPropagation();
         if (this.remove) {
             this.remove.emit(event);
         }
@@ -5736,10 +5751,13 @@ class DBTabs {
     }
     handleChange(event) {
         event.stopPropagation();
-        const list = event.target?.closest("ul");
+        const closest = event.target?.closest;
+        if (!closest)
+            return;
+        const list = closest("ul");
         const listItem = 
         // db-tab-item for angular and stencil wrapping elements
-        event.target.closest("db-tab-item") ?? event.target.closest("li");
+        closest("db-tab-item") ?? closest("li");
         if (list !== null && listItem !== null) {
             const indices = Array.from(list.childNodes).indexOf(listItem);
             if (this.indexChange) {
@@ -6493,12 +6511,12 @@ class DBCustomSelect {
             event.stopPropagation();
             this.dropdownToggle.emit(event);
         }
-        if (event.target.open) {
+        if (event.target instanceof HTMLDetailsElement && event.target.open) {
             this._documentClickListenerCallbackId.set(new DocumentClickListener().addCallback((event) => this.handleDocumentClose(event)));
             this._documentScrollListenerCallbackId.set(new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event)));
             this.handleAutoPlacement();
             this._observer()?.observe(this.detailsRef()?.nativeElement);
-            if (!event.target.dataset.test) {
+            if (!event.target.dataset["test"]) {
                 // We need this workaround for snapshot testing
                 this.handleOpenByKeyboardFocus();
             }
@@ -6552,7 +6570,9 @@ class DBCustomSelect {
         }
     }
     handleTagRemove(option, event) {
-        event.stopPropagation();
+        if (event) {
+            event.stopPropagation();
+        }
         this.handleSelect(option.value);
         this.handleSummaryFocus();
     }
@@ -6620,7 +6640,7 @@ class DBCustomSelect {
                         // 2. If we are on the search, and press up we go back to summary and close
                         if (activeElement.getAttribute("type") === "search" &&
                             (event.key === "ArrowUp" || event.key === "ArrowLeft")) {
-                            this.handleClose("close");
+                            this.handleClose(undefined, true);
                             this.handleSummaryFocus();
                         }
                         else {
@@ -6645,7 +6665,7 @@ class DBCustomSelect {
     handleKeyboardPress(event) {
         event.stopPropagation();
         if (event.key === "Escape" && this.detailsRef()?.nativeElement?.open) {
-            this.handleClose("close");
+            this.handleClose(undefined, true);
             this.handleSummaryFocus();
         }
         else if (event.key === "ArrowDown" ||
@@ -6655,19 +6675,20 @@ class DBCustomSelect {
             this.handleArrowDownUp(event);
         }
     }
-    handleClose(event) {
+    handleClose(event, forceClose) {
         if (this.detailsRef()?.nativeElement) {
-            if (event === "close") {
+            if (forceClose) {
                 this.detailsRef().nativeElement.open = false;
                 this.handleSummaryFocus();
             }
-            else if (this.detailsRef()?.nativeElement.open &&
-                event?.relatedTarget) {
-                const relatedTarget = event.relatedTarget;
-                if (!this.detailsRef()?.nativeElement.contains(relatedTarget)) {
-                    // We need to use delay here because the combination of `contains`
-                    // and changing the DOM element causes a race condition inside browser
-                    delay(() => (this.detailsRef().nativeElement.open = false), 1);
+            else if (this.detailsRef()?.nativeElement.open && event) {
+                if (event.relatedTarget) {
+                    const relatedTarget = event.relatedTarget;
+                    if (!this.detailsRef()?.nativeElement.contains(relatedTarget)) {
+                        // We need to use delay here because the combination of `contains`
+                        // and changing the DOM element causes a race condition inside browser
+                        delay(() => (this.detailsRef().nativeElement.open = false), 1);
+                    }
                 }
             }
         }
@@ -6709,7 +6730,7 @@ class DBCustomSelect {
             }
             else {
                 this.handleOptionSelected([value]);
-                this.handleClose("close");
+                this.handleClose(undefined, true);
             }
         }
     }
@@ -6766,12 +6787,16 @@ class DBCustomSelect {
             }
         }
     }
-    handleSearch(event) {
+    handleSearch(valueOrEvent) {
+        if (valueOrEvent === undefined) {
+            return;
+        }
         let filterText;
-        if (typeof event === "string") {
-            filterText = event;
+        if (typeof valueOrEvent === "string") {
+            filterText = valueOrEvent;
         }
         else {
+            const event = valueOrEvent;
             event.stopPropagation();
             if (this.search) {
                 this.search.emit(event);
@@ -7377,7 +7402,7 @@ class DBCustomSelect {
               size="small"
               [name]="_id()"
               [form]="_id()"
-              (click)="handleClose('close')"
+              (click)="handleClose(undefined, true)"
             >
               {{mobileCloseButtonText() ?? DEFAULT_CLOSE_BUTTON}}
             </db-button>
@@ -7588,7 +7613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
               size="small"
               [name]="_id()"
               [form]="_id()"
-              (click)="handleClose('close')"
+              (click)="handleClose(undefined, true)"
             >
               {{mobileCloseButtonText() ?? DEFAULT_CLOSE_BUTTON}}
             </db-button>
@@ -7707,5 +7732,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlignmentList, AutoCompleteList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, EmphasisList, FieldSizingList, GapSpacingList, LabelVariantList, LinkCurrentList, LinkReferrerPolicyList, LinkTargetList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, OrientationList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SemanticList, SizeList, SpacingList, TESTING_VIEWPORTS, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, getOptionKey, getSearchInput, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, stringPropVisible, uuid };
+export { AlignmentList, AutoCompleteList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, EmphasisList, FieldSizingList, GapSpacingList, LabelVariantList, LinkCurrentList, LinkReferrerPolicyList, LinkTargetList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, OrientationList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SemanticList, SizeList, SpacingList, TESTING_VIEWPORTS, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, getOptionKey, getSearchInput, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isKeyboardEvent, stringPropVisible, uuid };
 //# sourceMappingURL=db-ux-ngx-core-components.mjs.map