@db-ux/wc-core-components 2.0.0-0-custom-select-16b8cce → 2.0.0

package/dist/types/components/checkbox/checkbox.d.ts

@@ -1,5 +1,6 @@
 import { DBCheckboxProps } from "./model";
 import { ChangeEvent, InteractionEvent } from "../../shared/model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
 
@@ -7,20 +8,17 @@ import { ChangeEvent, InteractionEvent } from "../../shared/model";
 export declare class DBCheckbox {
     private _ref;
     id: DBCheckboxProps["id"];
+    invalidMessage: DBCheckboxProps["invalidMessage"];
     message: DBCheckboxProps["message"];
     showMessage: DBCheckboxProps["showMessage"];
     indeterminate: DBCheckboxProps["indeterminate"];
     checked: DBCheckboxProps["checked"];
-    onChange: any;
-    change: DBCheckboxProps["change"];
+    validMessage: DBCheckboxProps["validMessage"];
     validation: DBCheckboxProps["validation"];
-    invalidMessage: DBCheckboxProps["invalidMessage"];
     required: DBCheckboxProps["required"];
-    validMessage: DBCheckboxProps["validMessage"];
-    onBlur: any;
-    blur: DBCheckboxProps["blur"];
-    onFocus: any;
-    focus: DBCheckboxProps["focus"];
+    change: EventEmitter<Parameters<Required<DBCheckboxProps>["onChange"]>[number]> | void;
+    blur: EventEmitter<Parameters<Required<DBCheckboxProps>["onBlur"]>[number]> | void;
+    focus: EventEmitter<Parameters<Required<DBCheckboxProps>["onFocus"]>[number]> | void;
     className: DBCheckboxProps["className"];
     size: DBCheckboxProps["size"];
     showLabel: DBCheckboxProps["showLabel"];
@@ -34,11 +32,14 @@ export declare class DBCheckbox {
     _messageId: any;
     _validMessageId: any;
     _invalidMessageId: any;
+    _invalidMessage: any;
     _descByIds: string;
     _voiceOverFallback: string;
+    hasValidState(): boolean;
+    handleValidation(): void;
     handleChange(event: ChangeEvent<HTMLInputElement>): void;
-    handleBlur(event: InteractionEvent<HTMLInputElement>): void;
-    handleFocus(event: InteractionEvent<HTMLInputElement>): void;
+    handleBlur(event: InteractionEvent<HTMLInputElement> | any): void;
+    handleFocus(event: InteractionEvent<HTMLInputElement> | any): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -51,6 +52,8 @@ export declare class DBCheckbox {
     watch1(): void;
     watch2Fn(): void;
     watch2(): void;
+    watch3Fn(): void;
+    watch3(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/checkbox/model.d.ts

@@ -1,10 +1,10 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, FromValidState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
 export type DBCheckboxDefaultProps = {
     /**
      * Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox
      */
-    indeterminate?: boolean;
+    indeterminate?: boolean | string;
 };
 export type DBCheckboxProps = DBCheckboxDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & FormMessageProps & SizeProps;
 export type DBCheckboxDefaultState = {};
-export type DBCheckboxState = DBCheckboxDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;
+export type DBCheckboxState = DBCheckboxDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState & FromValidState;

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

@@ -1,4 +1,5 @@
 import { DBCustomSelectProps, CustomSelectOptionType } from "./model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
 
@@ -8,30 +9,29 @@ export declare class DBCustomSelect {
     private detailsRef;
     private selectRef;
     private selectAllRef;
+    private searchInputRef;
     id: DBCustomSelectProps["id"];
-    name: DBCustomSelectProps["name"];
+    invalidMessage: DBCustomSelectProps["invalidMessage"];
     message: DBCustomSelectProps["message"];
     showMessage: DBCustomSelectProps["showMessage"];
     showNoResults: DBCustomSelectProps["showNoResults"];
     multiple: DBCustomSelectProps["multiple"];
     showSelectAll: DBCustomSelectProps["showSelectAll"];
     showSearch: DBCustomSelectProps["showSearch"];
-    onSelect: any;
     values: DBCustomSelectProps["values"];
     validation: DBCustomSelectProps["validation"];
-    invalidMessage: DBCustomSelectProps["invalidMessage"];
-    required: DBCustomSelectProps["required"];
-    validMessage: DBCustomSelectProps["validMessage"];
     options: DBCustomSelectProps["options"];
     selectedType: DBCustomSelectProps["selectedType"];
     amountText: DBCustomSelectProps["amountText"];
-    onAmountChange: any;
-    onDropdownToggle: any;
+    amountChange: EventEmitter<Parameters<Required<DBCustomSelectProps>["onAmountChange"]>[number]> | void;
+    validMessage: DBCustomSelectProps["validMessage"];
+    required: DBCustomSelectProps["required"];
+    dropdownToggle: EventEmitter<Parameters<Required<DBCustomSelectProps>["onDropdownToggle"]>[number]> | void;
     selectAllLabel: DBCustomSelectProps["selectAllLabel"];
-    deSelectAllLabel: DBCustomSelectProps["deSelectAllLabel"];
     removeTagsTexts: DBCustomSelectProps["removeTagsTexts"];
+    optionSelected: EventEmitter<Parameters<Required<DBCustomSelectProps>["onOptionSelected"]>[number]> | void;
     className: DBCustomSelectProps["className"];
-    width: DBCustomSelectProps["width"];
+    formFieldWidth: DBCustomSelectProps["formFieldWidth"];
     variant: DBCustomSelectProps["variant"];
     placement: DBCustomSelectProps["placement"];
     showLabel: DBCustomSelectProps["showLabel"];
@@ -39,24 +39,26 @@ export declare class DBCustomSelect {
     showIcon: DBCustomSelectProps["showIcon"];
     label: DBCustomSelectProps["label"];
     form: DBCustomSelectProps["form"];
+    name: DBCustomSelectProps["name"];
     disabled: DBCustomSelectProps["disabled"];
     open: DBCustomSelectProps["open"];
     dropdownWidth: DBCustomSelectProps["dropdownWidth"];
     searchLabel: DBCustomSelectProps["searchLabel"];
     searchPlaceholder: DBCustomSelectProps["searchPlaceholder"];
     showLoading: DBCustomSelectProps["showLoading"];
+    ariaListLabel: DBCustomSelectProps["ariaListLabel"];
     noResultsText: DBCustomSelectProps["noResultsText"];
     loadingText: DBCustomSelectProps["loadingText"];
     mobileCloseButtonText: DBCustomSelectProps["mobileCloseButtonText"];
     showClearSelection: DBCustomSelectProps["showClearSelection"];
-    clearSelectionLabel: DBCustomSelectProps["clearSelectionLabel"];
+    clearSelectionText: DBCustomSelectProps["clearSelectionText"];
     placeholder: DBCustomSelectProps["placeholder"];
     messageIcon: DBCustomSelectProps["messageIcon"];
-    _name: any;
     _id: any;
     _messageId: any;
     _validMessageId: any;
     _invalidMessageId: any;
+    _invalidMessage: any;
     _selectId: any;
     _labelId: any;
     _summaryId: any;
@@ -74,10 +76,12 @@ export declare class DBCustomSelect {
     _values: any[];
     _options: any[];
     _hasNoOptions: boolean;
+    _documentClickListenerCallbackId: any;
     _internalChangeTimestamp: number;
-    _externalChangeTimestamp: number;
     selectAllChecked: boolean;
     selectAllIndeterminate: boolean;
+    hasValidState(): boolean;
+    handleValidation(): void;
     handleDropdownToggle(event: any): void;
     getNativeSelectValue(): any;
     setDescById(descId?: string): void;
@@ -92,6 +96,7 @@ export declare class DBCustomSelect {
     handleKeyboardPress(event: any): void;
     handleClose(event: any): void;
     handleDocumentClose(event: any): void;
+    handleOptionSelected(values: string[]): void;
     handleSelect(value?: string): void;
     handleSelectAll(): void;
     handleFocusFirstDropdownCheckbox(activeElement?: Element): void;
@@ -99,6 +104,7 @@ export declare class DBCustomSelect {
     handleSearch(event: any): void;
     handleClearAll(): void;
     handleSummaryFocus(): void;
+    satisfyReact: () => void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -137,9 +143,6 @@ export declare class DBCustomSelect {
     watch14(): void;
     watch15Fn(): void;
     watch15(): void;
-    watch16Fn(): void;
-    watch16(): void;
     componentDidLoad(): void;
-    disconnectedCallback(): void;
     render(): any;
 }

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

@@ -1,4 +1,4 @@
-import { BaseFormProps, CloseEventState, CustomFormProps, FormMessageProps, FormState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, PopoverState, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthProps } from '../../shared/model';
+import { BaseFormProps, CloseEventState, CustomFormProps, FormMessageProps, FormState, FromValidState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, PopoverState, 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';
@@ -22,7 +22,41 @@ export type CustomSelectOptionType = {
 } & 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: any) => void;
+    /**
+     * Informs the user when dropdown was toggled.
+     */
+    dropdownToggle?: (event: any) => void;
+};
 export type DBCustomSelectDefaultProps = {
+    /**
+     * Overwrite the default aria-label (props.label) for the custom-select-list
+     */
+    ariaListLabel?: string;
     /**
      * Optional: if select-type="amount" change the shown text
      */
@@ -30,17 +64,17 @@ export type DBCustomSelectDefaultProps = {
     /**
      * Label for the clear selection button
      */
-    clearSelectionLabel?: string;
-    /**
-     * Deselect all checkbox label
-     */
-    deSelectAllLabel?: string;
+    clearSelectionText?: string;
     /**
      * Changes the behavior of the dropdown with.
      * Default: fixed 328px
      * Auto: Based on the size of the form-field
      */
-    dropdownWidth?: CustomSelectDropdownWidthType | 'string';
+    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
      */
@@ -52,21 +86,15 @@ export type DBCustomSelectDefaultProps = {
     /**
      * Enables CustomSelect
      */
-    multiple?: boolean;
+    multiple?: boolean | string;
     /**
      * Dropdown - hint if there are no options
      */
     noResultsText?: string;
     /**
-     * Optional: if select-type="amount" when amount changes
-     * @param amount The amount of selected checkboxes
-     */
-    onAmountChange?: (amount: number) => void;
-    /**
-     * Triggers after some checkbox was clicked in dropdown
-     * @param values the changed values
+     * Programmatically open the dropdown. May differ if you don't use onDropdownToggle.
      */
-    onSelect?: (values: string[]) => void;
+    open?: boolean;
     /**
      * You should pass in the options as an array.
      */
@@ -119,16 +147,8 @@ export type DBCustomSelectDefaultProps = {
      * Initial value for multi select
      */
     values?: string[];
-    /**
-     * Programmatically open the dropdown. May differ if you don't use onDropdownToggle.
-     */
-    open?: boolean;
-    /**
-     * Informs the user when dropdown was toggled.
-     */
-    onDropdownToggle?: (event: any) => void;
 };
-export type DBCustomSelectProps = GlobalProps & CustomFormProps & BaseFormProps & RequiredProps & FormMessageProps & DBCustomSelectDefaultProps & DBCustomSelectFormFieldDefaultProps & WidthProps & IconProps & ShowIconProps & ShowLabelProps;
+export type DBCustomSelectProps = GlobalProps & CustomFormProps & BaseFormProps & RequiredProps & FormMessageProps & DBCustomSelectDefaultProps & DBCustomSelectEvents & DBCustomSelectFormFieldDefaultProps & IconProps & ShowIconProps & ShowLabelProps;
 export type DBCustomSelectDefaultState = {
     _validity?: ValidationType;
     _values?: string[];
@@ -142,9 +162,8 @@ export type DBCustomSelectDefaultState = {
     _selectedLabels?: string;
     _selectedLabelsId?: string;
     _infoTextId?: string;
-    _externalChangeTimestamp?: number;
-    _internalChangeTimestamp?: number;
-    _name?: string;
+    _internalChangeTimestamp: number;
+    _documentClickListenerCallbackId?: string;
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;
@@ -166,8 +185,9 @@ export type DBCustomSelectDefaultState = {
     handleKeyboardPress: (event: any) => void;
     handleArrowDownUp: (event: any) => void;
     handleSearch: (event: any) => void;
+    handleOptionSelected: (_values: string[]) => void;
     getSelectAllLabel: () => string;
     selectAllChecked: boolean;
     selectAllIndeterminate: boolean;
 };
-export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & CloseEventState & PopoverState;
+export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & FromValidState & CloseEventState & PopoverState;

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

@@ -1,5 +1,6 @@
 import { DBCustomSelectListItemProps } from "./model";
 import { ChangeEvent } from "../../shared/model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
 
@@ -9,8 +10,7 @@ export declare class DBCustomSelectListItem {
     id: DBCustomSelectListItemProps["id"];
     isGroupTitle: DBCustomSelectListItemProps["isGroupTitle"];
     showDivider: DBCustomSelectListItemProps["showDivider"];
-    onChange: any;
-    change: DBCustomSelectListItemProps["change"];
+    change: EventEmitter<Parameters<Required<DBCustomSelectListItemProps>["onChange"]>[number]> | void;
     type: DBCustomSelectListItemProps["type"];
     checked: DBCustomSelectListItemProps["checked"];
     className: DBCustomSelectListItemProps["className"];

package/dist/types/components/drawer/drawer.d.ts

@@ -1,4 +1,5 @@
 import { DBDrawerProps } from "./model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
  * @slot drawerHeader - TODO: Add description for slotDrawerHeader
@@ -8,7 +9,7 @@ export declare class DBDrawer {
     private dialogContainerRef;
     open: DBDrawerProps["open"];
     backdrop: DBDrawerProps["backdrop"];
-    close: any;
+    close: EventEmitter<Parameters<Required<DBDrawerProps>["onClose"]>[number]> | void;
     variant: DBDrawerProps["variant"];
     id: DBDrawerProps["id"];
     className: DBDrawerProps["className"];

package/dist/types/components/drawer/model.d.ts

@@ -23,12 +23,12 @@ export type DBDrawerDefaultProps = {
     /**
      * The open attribute opens or closes the drawer based on the state.
      */
-    open?: boolean;
+    open?: boolean | string;
     /**
      * The rounded attribute changes the border radius of the corners on the "end" of the drawer.
      * The "end" depends on which direction you use.
      */
-    rounded?: boolean;
+    rounded?: boolean | string;
     /**
      * Set the variant modal|inside. Defaults to modal.
      */

package/dist/types/components/header/header.d.ts

@@ -1,4 +1,5 @@
 import { DBHeaderProps } from "./model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
  * @slot metaNavigation - TODO: Add description for slotMetaNavigation
@@ -10,15 +11,15 @@ export declare class DBHeader {
     private _ref;
     id: DBHeaderProps["id"];
     forceMobile: DBHeaderProps["forceMobile"];
-    onToggle: any;
     drawerOpen: DBHeaderProps["drawerOpen"];
+    toggle: EventEmitter<Parameters<Required<DBHeaderProps>["onToggle"]>[number]> | void;
     className: DBHeaderProps["className"];
     width: DBHeaderProps["width"];
     burgerMenuLabel: DBHeaderProps["burgerMenuLabel"];
     _id: string;
     initialized: boolean;
     forcedToMobile: boolean;
-    toggle(): void;
+    handleToggle(): void;
     handleNavigationItemClick(event: unknown): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.

package/dist/types/components/header/model.d.ts

@@ -25,13 +25,13 @@ export type DBHeaderDefaultProps = {
     /**
      * Open/closes the drawer for mobile header or if `forceMobile` is true.
      */
-    drawerOpen?: boolean;
+    drawerOpen?: boolean | string;
     /**
      * Forces the header to use mobile layout for desktop as well.
      * You should only use this setting if you really can't provide a smaller navigation.
      * Overwrite size of the drawer with '--db-drawer-max-width: xxx'
      */
-    forceMobile?: boolean;
+    forceMobile?: boolean | string;
     /**
      * This attribute sets the label for the burger menu button for mobile headers.
      */

package/dist/types/components/input/input.d.ts

@@ -1,5 +1,6 @@
 import { DBInputProps } from "./model";
 import { ChangeEvent, InputEvent, InteractionEvent, ValueLabelType } from "../../shared/model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
 
@@ -7,25 +8,22 @@ import { ChangeEvent, InputEvent, InteractionEvent, ValueLabelType } from "../..
 export declare class DBInput {
     private _ref;
     id: DBInputProps["id"];
+    invalidMessage: DBInputProps["invalidMessage"];
     dataListId: DBInputProps["dataListId"];
     message: DBInputProps["message"];
     showMessage: DBInputProps["showMessage"];
     value: DBInputProps["value"];
-    onInput: any;
-    input: DBInputProps["input"];
-    onChange: any;
-    change: DBInputProps["change"];
+    validMessage: DBInputProps["validMessage"];
     validation: DBInputProps["validation"];
-    invalidMessage: DBInputProps["invalidMessage"];
     required: DBInputProps["required"];
     minLength: DBInputProps["minLength"];
     maxLength: DBInputProps["maxLength"];
     pattern: DBInputProps["pattern"];
-    validMessage: DBInputProps["validMessage"];
-    onBlur: any;
-    blur: DBInputProps["blur"];
-    onFocus: any;
-    focus: DBInputProps["focus"];
+    input: EventEmitter<Parameters<Required<DBInputProps>["onInput"]>[number]> | void;
+    change: EventEmitter<Parameters<Required<DBInputProps>["onChange"]>[number]> | void;
+    blur: EventEmitter<Parameters<Required<DBInputProps>["onBlur"]>[number]> | void;
+    focus: EventEmitter<Parameters<Required<DBInputProps>["onFocus"]>[number]> | void;
+    dataList: DBInputProps["dataList"];
     className: DBInputProps["className"];
     variant: DBInputProps["variant"];
     showLabel: DBInputProps["showLabel"];
@@ -38,29 +36,34 @@ export declare class DBInput {
     placeholder: DBInputProps["placeholder"];
     disabled: DBInputProps["disabled"];
     step: DBInputProps["step"];
+    maxlength: DBInputProps["maxlength"];
+    minlength: DBInputProps["minlength"];
     max: DBInputProps["max"];
     min: DBInputProps["min"];
     readOnly: DBInputProps["readOnly"];
+    readonly: DBInputProps["readonly"];
     form: DBInputProps["form"];
     size: DBInputProps["size"];
     autocomplete: DBInputProps["autocomplete"];
     autofocus: DBInputProps["autofocus"];
-    dataList: DBInputProps["dataList"];
     ariaDescribedBy: DBInputProps["ariaDescribedBy"];
     messageIcon: DBInputProps["messageIcon"];
     _id: any;
     _messageId: any;
     _validMessageId: any;
     _invalidMessageId: any;
+    _invalidMessage: any;
     _dataListId: any;
     _descByIds: string;
     _value: string;
     _voiceOverFallback: string;
+    hasValidState(): boolean;
+    handleValidation(): void;
     handleInput(event: InputEvent<HTMLInputElement>): void;
     handleChange(event: ChangeEvent<HTMLInputElement>): void;
-    handleBlur(event: InteractionEvent<HTMLInputElement>): void;
-    handleFocus(event: InteractionEvent<HTMLInputElement>): void;
-    getDataList(_list?: string[] | ValueLabelType[]): ValueLabelType[];
+    handleBlur(event: InteractionEvent<HTMLInputElement> | any): void;
+    handleFocus(event: InteractionEvent<HTMLInputElement> | any): void;
+    getDataList(): ValueLabelType[];
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
@@ -71,6 +74,8 @@ export declare class DBInput {
     watch0(): void;
     watch1Fn(): void;
     watch1(): void;
+    watch2Fn(): void;
+    watch2(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/input/model.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
 export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
 export type InputTypeType = (typeof InputTypeList)[number];
 export type DBInputDefaultProps = {
@@ -34,6 +34,6 @@ export type DBInputDefaultProps = {
 export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps & FormSizeProps;
 export type DBInputDefaultState = {
     _dataListId?: string;
-    getDataList: (_list?: string[] | ValueLabelType[]) => ValueLabelType[];
+    getDataList: () => ValueLabelType[];
 };
-export type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState;
+export type DBInputState = DBInputDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & FromValidState;

package/dist/types/components/link/link.d.ts

@@ -1,12 +1,13 @@
 import { DBLinkProps } from "./model";
 import { ClickEvent } from "../../shared/model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
 
  */
 export declare class DBLink {
     private _ref;
-    onClick: any;
+    click: EventEmitter<Parameters<Required<DBLinkProps>["onClick"]>[number]> | void;
     id: DBLinkProps["id"];
     className: DBLinkProps["className"];
     href: DBLinkProps["href"];

package/dist/types/components/navigation-item/model.d.ts

@@ -8,7 +8,7 @@ export type DBNavigationItemDefaultProps = {
     /**
      * The disabled attribute can be set to [keep a user from clicking on the item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
      */
-    disabled?: boolean;
+    disabled?: boolean | string;
     /**
      * React-specific property to pass in a slot for sub-navigation
      */
@@ -16,7 +16,7 @@ export type DBNavigationItemDefaultProps = {
     /**
      * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
      */
-    subNavigationExpanded?: boolean;
+    subNavigationExpanded?: boolean | string;
 };
 export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & NavigationBackButtonProps & ShowIconProps & TextProps;
 export type DBNavigationItemDefaultState = {
@@ -28,7 +28,6 @@ export type DBNavigationItemDefaultState = {
      * Internal state property to show/hide sub-navigation button
      */
     hasSubNavigation?: boolean;
-    updateSubNavigationState: () => void;
     navigationItemSafeTriangle?: NavigationItemSafeTriangle;
     autoClose?: boolean;
 };

package/dist/types/components/navigation-item/navigation-item.d.ts

@@ -1,5 +1,6 @@
 import { DBNavigationItemProps } from "./model";
 import { ClickEvent } from "../../shared/model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
  * @slot subNavigation - TODO: Add description for slotSubNavigation
@@ -7,7 +8,7 @@ import { ClickEvent } from "../../shared/model";
 export declare class DBNavigationItem {
     private _ref;
     subNavigationExpanded: DBNavigationItemProps["subNavigationExpanded"];
-    onClick: any;
+    click: EventEmitter<Parameters<Required<DBNavigationItemProps>["onClick"]>[number]> | void;
     id: DBNavigationItemProps["id"];
     className: DBNavigationItemProps["className"];
     width: DBNavigationItemProps["width"];
@@ -26,9 +27,8 @@ export declare class DBNavigationItem {
     subNavigationId: string;
     navigationItemSafeTriangle: any;
     handleNavigationItemClick(event: unknown): void;
-    handleClick(event: ClickEvent<HTMLButtonElement>): void;
-    handleBackClick(event: ClickEvent<HTMLButtonElement>): void;
-    updateSubNavigationState(): void;
+    handleClick(event: ClickEvent<HTMLButtonElement> | any): void;
+    handleBackClick(event: ClickEvent<HTMLButtonElement> | any): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component

package/dist/types/components/notification/model.d.ts

@@ -15,7 +15,7 @@ export type DBNotificationDefaultProps = {
     /**
      * The closeable attribute shows/hides the close button on the top right.
      */
-    closeable?: boolean;
+    closeable?: boolean | string;
     /**
      * The headline attribute changes the text of the bold headline.
      */
@@ -35,7 +35,7 @@ export type DBNotificationDefaultProps = {
     /**
      * Enables or disables the visibility of the headline.
      */
-    showHeadline?: boolean;
+    showHeadline?: boolean | string;
     /**
      * The timestamp attribute can be set for overlay notifications
      */
@@ -43,7 +43,7 @@ export type DBNotificationDefaultProps = {
     /**
      * Enables or disables the visibility of the timestamp.
      */
-    showTimestamp?: boolean;
+    showTimestamp?: boolean | string;
     /**
      * The variant attribute changes the styling of the notification.
      * The docked notifications are used e.g. between header and main content to show a global alert.

package/dist/types/components/notification/notification.d.ts

@@ -1,5 +1,6 @@
 import { DBNotificationProps } from "./model";
 import { ClickEvent } from "../../shared/model";
+import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
  * @slot image - TODO: Add description for slotImage
@@ -7,7 +8,7 @@ import { ClickEvent } from "../../shared/model";
  */
 export declare class DBNotification {
     private _ref;
-    onClose: any;
+    close: EventEmitter<Parameters<Required<DBNotificationProps>["onClose"]>[number]> | void;
     id: DBNotificationProps["id"];
     className: DBNotificationProps["className"];
     ariaLive: DBNotificationProps["ariaLive"];
@@ -24,7 +25,7 @@ export declare class DBNotification {
     closeable: DBNotificationProps["closeable"];
     closeButtonId: DBNotificationProps["closeButtonId"];
     closeButtonText: DBNotificationProps["closeButtonText"];
-    handleClose(event: ClickEvent<HTMLButtonElement>): void;
+    handleClose(event: ClickEvent<HTMLButtonElement> | any): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component

package/dist/types/components/page/model.d.ts

@@ -11,7 +11,7 @@ export type DBPageDefaultProps = {
     /**
      * Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/
      */
-    fadeIn?: boolean;
+    fadeIn?: boolean | string;
     /**
      * The slot can be used for React to set a footer.
      */