@db-ux/ngx-core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/components/control-panel-mobile/index.d.ts

@@ -0,0 +1 @@
+export { DBControlPanelMobile } from './control-panel-mobile';

package/components/control-panel-mobile/model.d.ts

@@ -0,0 +1,30 @@
+import { ContainerWidthProps, ControlPanelProps, GlobalProps, GlobalState, NavigationBehaviorState, ShellControlPanelMobilePositionType, ToggleEventProps, ToggleEventState } from '../../shared/model';
+export declare const ShellControlPanelMobileVariant: readonly ["drawer", "flat-icon"];
+export type ShellControlPanelMobileVariantType = (typeof ShellControlPanelMobileVariant)[number];
+export type DBControlPanelMobileDefaultProps = {
+    /**
+     * Text to pass in a headline for the drawer header.
+     */
+    drawerHeadlinePlain?: string;
+    /**
+     * This attribute sets the label for the burger menu button for mobile control-panel-desktops.
+     */
+    burgerMenuLabel?: string;
+    /**
+     * Change the position of the mobile content panel
+     */
+    position?: ShellControlPanelMobilePositionType;
+    /**
+     * Change the variant of the mobile content panel
+     */
+    variant?: ShellControlPanelMobileVariantType;
+    /**
+     * Optional flat icon navigation for a mobile app look. Only visible by using variant="flat-icon" as well.
+     */
+    flatIconNavigation?: any;
+};
+export type DBControlPanelMobileProps = DBControlPanelMobileDefaultProps & GlobalProps & ToggleEventProps & ContainerWidthProps & ControlPanelProps;
+export type DBControlPanelMobileDefaultState = {
+    open: boolean;
+};
+export type DBControlPanelMobileState = DBControlPanelMobileDefaultState & GlobalState & ToggleEventState<HTMLElement> & NavigationBehaviorState;

package/components/control-panel-primary-actions/control-panel-primary-actions.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef, AfterViewInit, InputSignal } from "@angular/core";
+import { DBControlPanelPrimaryActionsProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBControlPanelPrimaryActions implements AfterViewInit {
+    protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: InputSignal<DBControlPanelPrimaryActionsProps["id"]>;
+    className: InputSignal<DBControlPanelPrimaryActionsProps["className"]>;
+    _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    constructor();
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBControlPanelPrimaryActions, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBControlPanelPrimaryActions, "db-control-panel-primary-actions", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/control-panel-primary-actions/index.d.ts

@@ -0,0 +1 @@
+export { DBControlPanelPrimaryActions } from './control-panel-primary-actions';

package/components/control-panel-primary-actions/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBControlPanelPrimaryActionsDefaultProps = {};
+export type DBControlPanelPrimaryActionsProps = DBControlPanelPrimaryActionsDefaultProps & GlobalProps;
+export type DBControlPanelPrimaryActionsDefaultState = {};
+export type DBControlPanelPrimaryActionsState = DBControlPanelPrimaryActionsDefaultState & GlobalState;

package/components/control-panel-secondary-actions/control-panel-secondary-actions.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef, AfterViewInit, InputSignal } from "@angular/core";
+import { DBControlPanelSecondaryActionsProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBControlPanelSecondaryActions implements AfterViewInit {
+    protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: InputSignal<DBControlPanelSecondaryActionsProps["id"]>;
+    className: InputSignal<DBControlPanelSecondaryActionsProps["className"]>;
+    _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    constructor();
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBControlPanelSecondaryActions, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBControlPanelSecondaryActions, "db-control-panel-secondary-actions", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/control-panel-secondary-actions/index.d.ts

@@ -0,0 +1 @@
+export { DBControlPanelSecondaryActions } from './control-panel-secondary-actions';

package/components/control-panel-secondary-actions/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBControlPanelSecondaryActionsDefaultProps = {};
+export type DBControlPanelSecondaryActionsProps = DBControlPanelSecondaryActionsDefaultProps & GlobalProps;
+export type DBControlPanelSecondaryActionsDefaultState = {};
+export type DBControlPanelSecondaryActionsState = DBControlPanelSecondaryActionsDefaultState & GlobalState;

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

@@ -0,0 +1,150 @@
+import { ElementRef, AfterViewInit, InputSignal, ModelSignal, Renderer2 } from "@angular/core";
+import { ControlValueAccessor } from '@angular/forms';
+import { ClickEvent, GeneralEvent, InputEvent, InteractionEvent } from "../../shared/model";
+import { CustomSelectOptionType, DBCustomSelectProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelect implements AfterViewInit, ControlValueAccessor {
+    private renderer;
+    protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    protected readonly getBooleanAsString: (originBool?: boolean | string) => any;
+    protected readonly getHideProp: (show?: boolean | string) => any;
+    protected readonly DEFAULT_LABEL: string;
+    protected readonly getBoolean: (originBool?: boolean | string, propertyName?: string) => boolean | undefined;
+    protected readonly getOptionKey: (option: {
+        id?: string;
+        value?: string | number | string[] | undefined;
+    }, prefix: string) => string;
+    protected readonly DEFAULT_MESSAGE: string;
+    protected readonly DEFAULT_CLOSE_BUTTON: string;
+    protected readonly stringPropVisible: (givenString?: string, showString?: boolean | string) => boolean;
+    protected readonly DEFAULT_VALID_MESSAGE: string;
+    id: InputSignal<DBCustomSelectProps["id"]>;
+    invalidMessage: InputSignal<DBCustomSelectProps["invalidMessage"]>;
+    message: InputSignal<DBCustomSelectProps["message"]>;
+    showMessage: InputSignal<DBCustomSelectProps["showMessage"]>;
+    ariaDescribedBy: InputSignal<DBCustomSelectProps["ariaDescribedBy"]>;
+    showNoResults: InputSignal<DBCustomSelectProps["showNoResults"]>;
+    showLoading: InputSignal<DBCustomSelectProps["showLoading"]>;
+    multiple: InputSignal<DBCustomSelectProps["multiple"]>;
+    showSelectAll: InputSignal<DBCustomSelectProps["showSelectAll"]>;
+    showSearch: InputSignal<DBCustomSelectProps["showSearch"]>;
+    values: ModelSignal<DBCustomSelectProps["values"]>;
+    validation: InputSignal<DBCustomSelectProps["validation"]>;
+    options: InputSignal<DBCustomSelectProps["options"]>;
+    searchValue: InputSignal<DBCustomSelectProps["searchValue"]>;
+    selectedLabels: InputSignal<DBCustomSelectProps["selectedLabels"]>;
+    transformSelectedLabels: InputSignal<DBCustomSelectProps["transformSelectedLabels"]>;
+    selectedType: InputSignal<DBCustomSelectProps["selectedType"]>;
+    amountText: InputSignal<DBCustomSelectProps["amountText"]>;
+    validMessage: InputSignal<DBCustomSelectProps["validMessage"]>;
+    required: InputSignal<DBCustomSelectProps["required"]>;
+    selectAllLabel: InputSignal<DBCustomSelectProps["selectAllLabel"]>;
+    removeTagsTexts: InputSignal<DBCustomSelectProps["removeTagsTexts"]>;
+    placement: InputSignal<DBCustomSelectProps["placement"]>;
+    searchFilter: InputSignal<DBCustomSelectProps["searchFilter"]>;
+    className: InputSignal<DBCustomSelectProps["className"]>;
+    formFieldWidth: InputSignal<DBCustomSelectProps["formFieldWidth"]>;
+    variant: InputSignal<DBCustomSelectProps["variant"]>;
+    showRequiredAsterisk: InputSignal<DBCustomSelectProps["showRequiredAsterisk"]>;
+    showLabel: InputSignal<DBCustomSelectProps["showLabel"]>;
+    icon: InputSignal<DBCustomSelectProps["icon"]>;
+    showIcon: InputSignal<DBCustomSelectProps["showIcon"]>;
+    label: InputSignal<DBCustomSelectProps["label"]>;
+    form: InputSignal<DBCustomSelectProps["form"]>;
+    name: InputSignal<DBCustomSelectProps["name"]>;
+    disabled: ModelSignal<DBCustomSelectProps["disabled"]>;
+    open: InputSignal<DBCustomSelectProps["open"]>;
+    dropdownWidth: InputSignal<DBCustomSelectProps["dropdownWidth"]>;
+    searchLabel: InputSignal<DBCustomSelectProps["searchLabel"]>;
+    searchPlaceholder: InputSignal<DBCustomSelectProps["searchPlaceholder"]>;
+    ariaListLabel: InputSignal<DBCustomSelectProps["ariaListLabel"]>;
+    loadingText: InputSignal<DBCustomSelectProps["loadingText"]>;
+    noResultsText: InputSignal<DBCustomSelectProps["noResultsText"]>;
+    mobileCloseButtonText: InputSignal<DBCustomSelectProps["mobileCloseButtonText"]>;
+    showClearSelection: InputSignal<DBCustomSelectProps["showClearSelection"]>;
+    clearSelectionText: InputSignal<DBCustomSelectProps["clearSelectionText"]>;
+    placeholder: InputSignal<DBCustomSelectProps["placeholder"]>;
+    messageIcon: InputSignal<DBCustomSelectProps["messageIcon"]>;
+    amountChange: import("@angular/core").OutputEmitterRef<number | void>;
+    dropdownToggle: import("@angular/core").OutputEmitterRef<void | Event>;
+    optionSelected: import("@angular/core").OutputEmitterRef<void | string[]>;
+    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>;
+    searchInputRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    selectAllRef: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    _id: import("@angular/core").WritableSignal<string | undefined>;
+    _messageId: import("@angular/core").WritableSignal<string | undefined>;
+    _validMessageId: import("@angular/core").WritableSignal<string | undefined>;
+    _invalidMessageId: import("@angular/core").WritableSignal<string | undefined>;
+    _invalidMessage: import("@angular/core").WritableSignal<string | undefined>;
+    _selectId: import("@angular/core").WritableSignal<string | undefined>;
+    _labelId: import("@angular/core").WritableSignal<string | undefined>;
+    _summaryId: import("@angular/core").WritableSignal<string | undefined>;
+    _placeholderId: import("@angular/core").WritableSignal<string | undefined>;
+    _infoTextId: import("@angular/core").WritableSignal<string | undefined>;
+    _validity: import("@angular/core").WritableSignal<"invalid" | "valid" | "no-validation" | undefined>;
+    _userInteraction: import("@angular/core").WritableSignal<boolean | undefined>;
+    _descByIds: import("@angular/core").WritableSignal<string | undefined>;
+    _selectedLabels: import("@angular/core").WritableSignal<string | undefined>;
+    _selectedLabelsId: import("@angular/core").WritableSignal<string | undefined>;
+    _voiceOverFallback: import("@angular/core").WritableSignal<string | undefined>;
+    _selectedOptions: import("@angular/core").WritableSignal<CustomSelectOptionType[] | undefined>;
+    selectAllEnabled: import("@angular/core").WritableSignal<boolean>;
+    searchEnabled: import("@angular/core").WritableSignal<boolean>;
+    amountOptions: import("@angular/core").WritableSignal<number>;
+    _values: import("@angular/core").WritableSignal<string[] | undefined>;
+    _options: import("@angular/core").WritableSignal<CustomSelectOptionType[] | undefined>;
+    _hasNoOptions: import("@angular/core").WritableSignal<boolean>;
+    _documentClickListenerCallbackId: import("@angular/core").WritableSignal<string | undefined>;
+    _internalChangeTimestamp: import("@angular/core").WritableSignal<number>;
+    _documentScrollListenerCallbackId: import("@angular/core").WritableSignal<string | undefined>;
+    _observer: import("@angular/core").WritableSignal<IntersectionObserver | undefined>;
+    _searchValue: import("@angular/core").WritableSignal<string | undefined>;
+    selectAllChecked: import("@angular/core").WritableSignal<boolean>;
+    selectAllIndeterminate: import("@angular/core").WritableSignal<boolean>;
+    handleDocumentScroll(event: any): void;
+    hasValidState(): boolean;
+    handleValidation(): 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?: ClickEvent<HTMLButtonElement> | void | any): void;
+    handleAutoPlacement(): void;
+    handleArrowDownUp(event: any): void;
+    handleKeyboardPress(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(valueOrEvent?: InputEvent<HTMLInputElement> | string | void): void;
+    handleClearAll(event: any): void;
+    handleSummaryFocus(): void;
+    satisfyReact(event: any): void;
+    trackByOption0(_: number, option: any): string;
+    trackByOption1(index: number, option: any): string;
+    trackByOption2(_: number, option: any): string;
+    constructor(renderer: Renderer2);
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    writeValue(value: any): void;
+    propagateChange(_: any): void;
+    registerOnChange(onChange: any): void;
+    registerOnTouched(onTouched: any): void;
+    setDisabledState(disabled: boolean): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCustomSelect, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCustomSelect, "db-custom-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "showMessage": { "alias": "showMessage"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "showNoResults": { "alias": "showNoResults"; "required": false; "isSignal": true; }; "showLoading": { "alias": "showLoading"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "validation": { "alias": "validation"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "selectedLabels": { "alias": "selectedLabels"; "required": false; "isSignal": true; }; "transformSelectedLabels": { "alias": "transformSelectedLabels"; "required": false; "isSignal": true; }; "selectedType": { "alias": "selectedType"; "required": false; "isSignal": true; }; "amountText": { "alias": "amountText"; "required": false; "isSignal": true; }; "validMessage": { "alias": "validMessage"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "removeTagsTexts": { "alias": "removeTagsTexts"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "searchFilter": { "alias": "searchFilter"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "formFieldWidth": { "alias": "formFieldWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showRequiredAsterisk": { "alias": "showRequiredAsterisk"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "ariaListLabel": { "alias": "ariaListLabel"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "mobileCloseButtonText": { "alias": "mobileCloseButtonText"; "required": false; "isSignal": true; }; "showClearSelection": { "alias": "showClearSelection"; "required": false; "isSignal": true; }; "clearSelectionText": { "alias": "clearSelectionText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "messageIcon": { "alias": "messageIcon"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "disabled": "disabledChange"; "amountChange": "amountChange"; "dropdownToggle": "dropdownToggle"; "optionSelected": "optionSelected"; "search": "search"; }, never, ["*"], true, never>;
+}

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

@@ -0,0 +1 @@
+export { DBCustomSelect } from './custom-select';

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

@@ -0,0 +1,223 @@
+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 { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
+import { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
+import { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
+export type CustomSelectOptionType = {
+    /**
+     * Disables this option
+     */
+    disabled?: boolean;
+    /**
+     * Identifier for option
+     */
+    id?: string;
+    /**
+     * If the value is different from the label you want to show to the user.
+     */
+    label?: string;
+    /**
+     * The value for the option
+     */
+    value?: string;
+} & DBCustomSelectListItemExtraProps;
+export declare const SelectedTypeList: readonly ["amount", "text", "tag"];
+export type SelectedTypeType = (typeof SelectedTypeList)[number];
+export type DBCustomSelectEvents = {
+    /**
+     * Optional: if select-type="amount" when amount changes
+     * @param amount The amount of selected checkboxes
+     */
+    onAmountChange?: (amount: number) => void;
+    /**
+     * Optional: if select-type="amount" when amount changes
+     * @param amount The amount of selected checkboxes
+     */
+    amountChange?: (amount: number) => void;
+    /**
+     * Triggers after some option was clicked in dropdown
+     * @param values the changed values
+     */
+    onOptionSelected?: (values: string[]) => void;
+    /**
+     * Triggers after some option was clicked in dropdown
+     * @param values the changed values
+     */
+    optionSelected?: (values: string[]) => void;
+    /**
+     * Informs the user when dropdown was toggled.
+     */
+    onDropdownToggle?: (event: GeneralEvent<HTMLDetailsElement>) => void;
+    /**
+     * Informs the user when dropdown was toggled.
+     */
+    dropdownToggle?: (event: GeneralEvent<HTMLDetailsElement>) => void;
+    /**
+     * Informs the user when a search was performed.
+     */
+    onSearch?: (event: InputEvent<HTMLInputElement>) => void;
+    /**
+     * Informs the user when a search was performed.
+     */
+    search?: (event: InputEvent<HTMLInputElement>) => void;
+};
+export type DBCustomSelectDefaultProps = {
+    /**
+     * Optional: if select-type="amount" change the shown text
+     */
+    amountText?: string;
+    /**
+     * Overwrite the default aria-label (props.label) for the custom-select-list
+     */
+    ariaListLabel?: string;
+    /**
+     * Label for the clear selection button
+     */
+    clearSelectionText?: string;
+    /**
+     * Changes the behavior of the dropdown with.
+     * Default: fixed 328px
+     * Auto: Based on the size of the form-field
+     */
+    dropdownWidth?: CustomSelectDropdownWidthType | string;
+    /**
+     * Width of the component. Auto width based on children size, full width based on parent elements width.
+     */
+    formFieldWidth?: WidthType | string;
+    /**
+     * Dropdown - hint if data has to be loaded
+     */
+    loadingText?: string;
+    /**
+     * Change the button text for mobile close
+     */
+    mobileCloseButtonText?: string;
+    /**
+     * Enables CustomSelect
+     */
+    multiple?: boolean | string;
+    /**
+     * Dropdown - hint if there are no options
+     */
+    noResultsText?: string;
+    /**
+     * Programmatically open the dropdown. May differ if you don't use onDropdownToggle.
+     */
+    open?: boolean;
+    /**
+     * You should pass in the options as an array.
+     */
+    options?: CustomSelectOptionType[];
+    /**
+     * The `placement` attributes values change the position to absolute and adds a transform based on the placement.
+     */
+    placement?: PlacementVerticalType;
+    /**
+     * Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users
+     */
+    removeTagsTexts?: string[];
+    /**
+     * Optional: Change the filter function for the search input
+     */
+    searchFilter?: (option: CustomSelectOptionType, filterText: string) => boolean;
+    /**
+     * Search label
+     */
+    searchLabel?: string;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Optional: Prefill the value of the search input
+     */
+    searchValue?: string;
+    /**
+     * Select all checkbox label
+     */
+    selectAllLabel?: string;
+    /**
+     * Optional: If you want to show a custom label for the selected values.
+     * You need to define the empty state as well based on selected options.
+     */
+    selectedLabels?: string;
+    /**
+     * Change the selected type for values shown in multi select
+     */
+    selectedType?: SelectedTypeType;
+    /**
+     * Show clear selection button (default:true). Hide it if you have very small inputs e.g. in tables.
+     */
+    showClearSelection?: boolean;
+    /**
+     * Dropdown - enable loading infotext and spinner
+     */
+    showLoading?: boolean;
+    /**
+     * Dropdown - enable no options infotext
+     */
+    showNoResults?: boolean;
+    /**
+     * Forces search in header.
+     */
+    showSearch?: boolean;
+    /**
+     * Forces select all checkbox (only for multiple).
+     */
+    showSelectAll?: boolean;
+    /**
+     * Optional: If you want to show a custom label based on the selected options.
+     */
+    transformSelectedLabels?: (selectedOptions?: CustomSelectOptionType[]) => string;
+    /**
+     * Initial value for multi select
+     */
+    values?: string[];
+};
+export type DBCustomSelectProps = GlobalProps & CustomFormProps & BaseFormProps & RequiredProps & FormMessageProps & DBCustomSelectDefaultProps & DBCustomSelectEvents & DBCustomSelectFormFieldDefaultProps & IconProps & ShowIconProps & ShowLabelProps;
+export type DBCustomSelectDefaultState = {
+    _validity?: ValidationType;
+    _values?: string[];
+    _options?: CustomSelectOptionType[];
+    _selectedOptions?: CustomSelectOptionType[];
+    _hasNoOptions: boolean;
+    _selectId?: string;
+    _labelId?: string;
+    _summaryId?: string;
+    _placeholderId?: string;
+    _selectedLabels?: string;
+    _selectedLabelsId?: string;
+    _infoTextId?: string;
+    _internalChangeTimestamp: number;
+    _documentClickListenerCallbackId?: string;
+    _documentScrollListenerCallbackId?: string;
+    handleDocumentScroll: (event: any) => void;
+    _observer?: IntersectionObserver;
+    _searchValue?: string;
+    _userInteraction?: boolean;
+    getNativeSelectValue: () => string;
+    getOptionLabel: (option: CustomSelectOptionType) => string;
+    getOptionChecked: (value?: string) => boolean;
+    getTagRemoveLabel: (index: number) => string;
+    selectAllEnabled: boolean;
+    searchEnabled: boolean;
+    amountOptions: number;
+    setDescById: (descId?: string) => void;
+    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void | any) => void;
+    handleSummaryFocus: () => void;
+    handleSelect: (value?: string) => void;
+    handleSelectAll: (event: any) => void;
+    handleClearAll: (event: any) => void;
+    handleDropdownToggle: (event: any) => void;
+    handleDocumentClose: (event: any) => void;
+    handleOpenByKeyboardFocus: () => void;
+    handleFocusFirstDropdownCheckbox: (activeElement?: Element) => void;
+    handleKeyboardPress: (event: any) => void;
+    handleArrowDownUp: (event: any) => void;
+    handleSearch: (event: any) => void;
+    handleOptionSelected: (_values: string[]) => void;
+    getSelectAllLabel: () => string;
+    selectAllChecked: boolean;
+    selectAllIndeterminate: boolean;
+    handleAutoPlacement: () => void;
+};
+export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState<InteractionEvent<HTMLDetailsElement>> & DocumentScrollState;

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

@@ -0,0 +1,20 @@
+import { ElementRef, AfterViewInit, InputSignal } from "@angular/core";
+import { DBCustomSelectDropdownProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelectDropdown implements AfterViewInit {
+    protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: InputSignal<DBCustomSelectDropdownProps["id"]>;
+    className: InputSignal<DBCustomSelectDropdownProps["className"]>;
+    width: InputSignal<DBCustomSelectDropdownProps["width"]>;
+    _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    constructor();
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCustomSelectDropdown, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCustomSelectDropdown, "db-custom-select-dropdown", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1 @@
+export { DBCustomSelectDropdown } from './custom-select-dropdown';

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

@@ -0,0 +1,15 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export declare const CustomSelectDropdownWidthList: readonly ["fixed", "auto", "full"];
+export type CustomSelectDropdownWidthType = (typeof CustomSelectDropdownWidthList)[number];
+export type DBCustomSelectDropdownDefaultProps = {
+    /**
+     * Changes the behavior of the dropdown with.
+     * Default: fixed 328px
+     * Full: Based on the size of the form-field
+     * Auto: Based on the size of the largest list item
+     */
+    width?: CustomSelectDropdownWidthType | string;
+};
+export type DBCustomSelectDropdownProps = DBCustomSelectDropdownDefaultProps & GlobalProps;
+export type DBCustomSelectDropdownDefaultState = {};
+export type DBCustomSelectDropdownState = DBCustomSelectDropdownDefaultState & GlobalState;

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

@@ -0,0 +1,19 @@
+import { ElementRef, AfterViewInit, InputSignal } from "@angular/core";
+import { DBCustomSelectFormFieldProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelectFormField implements AfterViewInit {
+    protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: InputSignal<DBCustomSelectFormFieldProps["id"]>;
+    className: InputSignal<DBCustomSelectFormFieldProps["className"]>;
+    _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    constructor();
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCustomSelectFormField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCustomSelectFormField, "db-custom-select-form-field", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/custom-select-form-field/index.d.ts

@@ -0,0 +1 @@
+export { DBCustomSelectFormField } from './custom-select-form-field';

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

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBCustomSelectFormFieldDefaultProps = {};
+export type DBCustomSelectFormFieldProps = DBCustomSelectFormFieldDefaultProps & GlobalProps;
+export type DBCustomSelectFormFieldDefaultState = {};
+export type DBCustomSelectFormFieldState = DBCustomSelectFormFieldDefaultState & GlobalState;

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

@@ -0,0 +1,21 @@
+import { ElementRef, AfterViewInit, InputSignal } from "@angular/core";
+import { DBCustomSelectListProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelectList implements AfterViewInit {
+    protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    multiple: InputSignal<DBCustomSelectListProps["multiple"]>;
+    label: InputSignal<DBCustomSelectListProps["label"]>;
+    id: InputSignal<DBCustomSelectListProps["id"]>;
+    className: InputSignal<DBCustomSelectListProps["className"]>;
+    _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    constructor();
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCustomSelectList, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCustomSelectList, "db-custom-select-list", never, { "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1 @@
+export { DBCustomSelectList } from './custom-select-list';

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

@@ -0,0 +1,8 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBCustomSelectListDefaultProps = {
+    label?: string;
+    multiple?: boolean;
+};
+export type DBCustomSelectListProps = DBCustomSelectListDefaultProps & GlobalProps;
+export type DBCustomSelectListDefaultState = {};
+export type DBCustomSelectListState = DBCustomSelectListDefaultState & GlobalState;

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

@@ -0,0 +1,45 @@
+import { ElementRef, AfterViewInit, InputSignal, ModelSignal, Renderer2 } from "@angular/core";
+import { ControlValueAccessor } from '@angular/forms';
+import { ChangeEvent } from "../../shared/model";
+import { DBCustomSelectListItemProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelectListItem implements AfterViewInit, ControlValueAccessor {
+    private renderer;
+    protected readonly cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    protected readonly getBooleanAsString: (originBool?: boolean | string) => any;
+    protected readonly getBoolean: (originBool?: boolean | string, propertyName?: string) => boolean | undefined;
+    id: InputSignal<DBCustomSelectListItemProps["id"]>;
+    isGroupTitle: InputSignal<DBCustomSelectListItemProps["isGroupTitle"]>;
+    showDivider: InputSignal<DBCustomSelectListItemProps["showDivider"]>;
+    type: InputSignal<DBCustomSelectListItemProps["type"]>;
+    checked: ModelSignal<DBCustomSelectListItemProps["checked"]>;
+    className: InputSignal<DBCustomSelectListItemProps["className"]>;
+    groupTitle: InputSignal<DBCustomSelectListItemProps["groupTitle"]>;
+    icon: InputSignal<DBCustomSelectListItemProps["icon"]>;
+    showIcon: InputSignal<DBCustomSelectListItemProps["showIcon"]>;
+    name: InputSignal<DBCustomSelectListItemProps["name"]>;
+    disabled: ModelSignal<DBCustomSelectListItemProps["disabled"]>;
+    value: InputSignal<DBCustomSelectListItemProps["value"]>;
+    label: InputSignal<DBCustomSelectListItemProps["label"]>;
+    change: import("@angular/core").OutputEmitterRef<void | Event>;
+    _ref: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    _id: import("@angular/core").WritableSignal<string | undefined>;
+    hasDivider: import("@angular/core").WritableSignal<boolean | undefined>;
+    handleChange(event: ChangeEvent<HTMLInputElement>): void;
+    getIconTrailing(): "check" | "x_placeholder" | undefined;
+    constructor(renderer: Renderer2);
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    writeValue(value: any): void;
+    propagateChange(_: any): void;
+    registerOnChange(onChange: any): void;
+    registerOnTouched(onTouched: any): void;
+    setDisabledState(disabled: boolean): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCustomSelectListItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCustomSelectListItem, "db-custom-select-list-item", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isGroupTitle": { "alias": "isGroupTitle"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "groupTitle": { "alias": "groupTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "change": "change"; }, never, ["*"], true, never>;
+}