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

package/README.md

@@ -7,7 +7,7 @@
 
 An Angular library containing all styles & components of [DB UX Design System (technical components)](https://github.com/db-ux-design-system/core-web).
 
-> **Note:** Find more information about specific components [here](https://db-ux-design-system.github.io/core-web/review/main)
+> **Note:** Find more information about specific components [here](https://design-system.deutschebahn.com/core-web/review/main)
 
 ## Install
 
@@ -115,7 +115,7 @@ There are 3 ways to use Events in Angular:
 
 ## Deutsche Bahn brand
 
-As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
+As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
 Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
 
 For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and

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

@@ -0,0 +1,131 @@
+import { EventEmitter, ElementRef, SimpleChanges, Renderer2 } from "@angular/core";
+import { ControlValueAccessor } from '@angular/forms';
+import { DBCustomSelectProps, DBCustomSelectState, CustomSelectOptionType } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelect implements ControlValueAccessor {
+    private renderer;
+    constructor(renderer: Renderer2);
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    getBooleanAsString: (originBool?: boolean | undefined) => any;
+    getHideProp: (show?: boolean | undefined) => any;
+    DEFAULT_CLOSE_BUTTON: string;
+    DEFAULT_INVALID_MESSAGE: string;
+    DEFAULT_LABEL: string;
+    DEFAULT_MESSAGE: string;
+    DEFAULT_VALID_MESSAGE: string;
+    id: DBCustomSelectProps["id"];
+    name: DBCustomSelectProps["name"];
+    message: DBCustomSelectProps["message"];
+    showMessage: DBCustomSelectProps["showMessage"];
+    showNoResults: DBCustomSelectProps["showNoResults"];
+    multiple: DBCustomSelectProps["multiple"];
+    showSelectAll: DBCustomSelectProps["showSelectAll"];
+    showSearch: DBCustomSelectProps["showSearch"];
+    values: DBCustomSelectProps["values"];
+    validation: DBCustomSelectProps["validation"];
+    invalidMessage: DBCustomSelectProps["invalidMessage"];
+    required: DBCustomSelectProps["required"];
+    validMessage: DBCustomSelectProps["validMessage"];
+    options: DBCustomSelectProps["options"];
+    selectedType: DBCustomSelectProps["selectedType"];
+    amountText: DBCustomSelectProps["amountText"];
+    selectAllLabel: DBCustomSelectProps["selectAllLabel"];
+    deSelectAllLabel: DBCustomSelectProps["deSelectAllLabel"];
+    removeTagsTexts: DBCustomSelectProps["removeTagsTexts"];
+    className: DBCustomSelectProps["className"];
+    width: DBCustomSelectProps["width"];
+    variant: DBCustomSelectProps["variant"];
+    placement: DBCustomSelectProps["placement"];
+    showLabel: DBCustomSelectProps["showLabel"];
+    icon: DBCustomSelectProps["icon"];
+    showIcon: DBCustomSelectProps["showIcon"];
+    label: DBCustomSelectProps["label"];
+    form: DBCustomSelectProps["form"];
+    disabled: DBCustomSelectProps["disabled"];
+    open: DBCustomSelectProps["open"];
+    dropdownWidth: DBCustomSelectProps["dropdownWidth"];
+    searchLabel: DBCustomSelectProps["searchLabel"];
+    searchPlaceholder: DBCustomSelectProps["searchPlaceholder"];
+    showLoading: DBCustomSelectProps["showLoading"];
+    noResultsText: DBCustomSelectProps["noResultsText"];
+    loadingText: DBCustomSelectProps["loadingText"];
+    mobileCloseButtonText: DBCustomSelectProps["mobileCloseButtonText"];
+    showClearSelection: DBCustomSelectProps["showClearSelection"];
+    clearSelectionLabel: DBCustomSelectProps["clearSelectionLabel"];
+    placeholder: DBCustomSelectProps["placeholder"];
+    messageIcon: DBCustomSelectProps["messageIcon"];
+    onDropdownToggle: EventEmitter<any>;
+    onSelect: EventEmitter<any>;
+    onAmountChange: EventEmitter<any>;
+    _ref: ElementRef | undefined;
+    selectRef: ElementRef | undefined;
+    detailsRef: ElementRef | undefined;
+    selectAllRef: ElementRef | undefined;
+    _name: DBCustomSelectState["_name"];
+    _id: DBCustomSelectState["_id"];
+    _messageId: DBCustomSelectState["_messageId"];
+    _validMessageId: DBCustomSelectState["_validMessageId"];
+    _invalidMessageId: DBCustomSelectState["_invalidMessageId"];
+    _selectId: DBCustomSelectState["_selectId"];
+    _labelId: DBCustomSelectState["_labelId"];
+    _summaryId: DBCustomSelectState["_summaryId"];
+    _placeholderId: DBCustomSelectState["_placeholderId"];
+    _infoTextId: DBCustomSelectState["_infoTextId"];
+    _validity: DBCustomSelectState["_validity"];
+    _descByIds: DBCustomSelectState["_descByIds"];
+    _selectedLabels: DBCustomSelectState["_selectedLabels"];
+    _selectedLabelsId: DBCustomSelectState["_selectedLabelsId"];
+    _voiceOverFallback: DBCustomSelectState["_voiceOverFallback"];
+    _selectedOptions: DBCustomSelectState["_selectedOptions"];
+    selectAllEnabled: DBCustomSelectState["selectAllEnabled"];
+    searchEnabled: DBCustomSelectState["searchEnabled"];
+    amountOptions: DBCustomSelectState["amountOptions"];
+    _values: DBCustomSelectState["_values"];
+    _options: DBCustomSelectState["_options"];
+    _hasNoOptions: DBCustomSelectState["_hasNoOptions"];
+    _internalChangeTimestamp: DBCustomSelectState["_internalChangeTimestamp"];
+    _externalChangeTimestamp: DBCustomSelectState["_externalChangeTimestamp"];
+    handleDropdownToggle(event: any): ReturnType<DBCustomSelectState["handleDropdownToggle"]>;
+    getNativeSelectValue(): ReturnType<DBCustomSelectState["getNativeSelectValue"]>;
+    setDescById(descId?: string): ReturnType<DBCustomSelectState["setDescById"]>;
+    getSelectAllLabel(): ReturnType<DBCustomSelectState["getSelectAllLabel"]>;
+    getOptionLabel(option: CustomSelectOptionType): ReturnType<DBCustomSelectState["getOptionLabel"]>;
+    getOptionChecked(value?: string): ReturnType<DBCustomSelectState["getOptionChecked"]>;
+    getOptionKey(option: CustomSelectOptionType): ReturnType<DBCustomSelectState["getOptionKey"]>;
+    getTagRemoveLabel(index: number): ReturnType<DBCustomSelectState["getTagRemoveLabel"]>;
+    handleTagRemove(option: CustomSelectOptionType, event: any): ReturnType<DBCustomSelectState["handleTagRemove"]>;
+    handleAutoPlacement(): ReturnType<DBCustomSelectState["handleAutoPlacement"]>;
+    handleArrowDownUp(event: any): ReturnType<DBCustomSelectState["handleArrowDownUp"]>;
+    handleKeyboardPress(event: any): ReturnType<DBCustomSelectState["handleKeyboardPress"]>;
+    handleClose(event: any): ReturnType<DBCustomSelectState["handleClose"]>;
+    handleDocumentClose(event: any): ReturnType<DBCustomSelectState["handleDocumentClose"]>;
+    handleSelect(value?: string): ReturnType<DBCustomSelectState["handleSelect"]>;
+    handleSelectAll(): ReturnType<DBCustomSelectState["handleSelectAll"]>;
+    handleFocusFirstDropdownCheckbox(activeElement?: Element): ReturnType<DBCustomSelectState["handleFocusFirstDropdownCheckbox"]>;
+    handleOpenByKeyboardFocus(onlySearch?: boolean): ReturnType<DBCustomSelectState["handleOpenByKeyboardFocus"]>;
+    handleSearch(event: any): ReturnType<DBCustomSelectState["handleSearch"]>;
+    handleClearAll(): ReturnType<DBCustomSelectState["handleClearAll"]>;
+    handleSummaryFocus(): ReturnType<DBCustomSelectState["handleSummaryFocus"]>;
+    selectAllChecked: DBCustomSelectState["selectAllChecked"];
+    selectAllIndeterminate: DBCustomSelectState["selectAllIndeterminate"];
+    trackByOption0(_: any, option: any): undefined;
+    trackByOption1(index: any, option: any): undefined;
+    trackByOption2(_: any, option: any): undefined;
+    /**
+     * 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;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngAfterContentChecked(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCustomSelect, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCustomSelect, "db-custom-select", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "message": { "alias": "message"; "required": false; }; "showMessage": { "alias": "showMessage"; "required": false; }; "showNoResults": { "alias": "showNoResults"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "values": { "alias": "values"; "required": false; }; "validation": { "alias": "validation"; "required": false; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "validMessage": { "alias": "validMessage"; "required": false; }; "options": { "alias": "options"; "required": false; }; "selectedType": { "alias": "selectedType"; "required": false; }; "amountText": { "alias": "amountText"; "required": false; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; }; "deSelectAllLabel": { "alias": "deSelectAllLabel"; "required": false; }; "removeTagsTexts": { "alias": "removeTagsTexts"; "required": false; }; "className": { "alias": "className"; "required": false; }; "width": { "alias": "width"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "label": { "alias": "label"; "required": false; }; "form": { "alias": "form"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "open": { "alias": "open"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; "searchLabel": { "alias": "searchLabel"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "showLoading": { "alias": "showLoading"; "required": false; }; "noResultsText": { "alias": "noResultsText"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "mobileCloseButtonText": { "alias": "mobileCloseButtonText"; "required": false; }; "showClearSelection": { "alias": "showClearSelection"; "required": false; }; "clearSelectionLabel": { "alias": "clearSelectionLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; }, { "onDropdownToggle": "onDropdownToggle"; "onSelect": "onSelect"; "onAmountChange": "onAmountChange"; }, 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,173 @@
+import { BaseFormProps, CloseEventState, CustomFormProps, FormMessageProps, FormState, GlobalProps, GlobalState, IconProps, PlacementVerticalType, PopoverState, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthProps } 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';
+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 DBCustomSelectDefaultProps = {
+    /**
+     * Optional: if select-type="amount" change the shown text
+     */
+    amountText?: string;
+    /**
+     * Label for the clear selection button
+     */
+    clearSelectionLabel?: string;
+    /**
+     * Deselect all checkbox label
+     */
+    deSelectAllLabel?: string;
+    /**
+     * Changes the behavior of the dropdown with.
+     * Default: fixed 328px
+     * Auto: Based on the size of the form-field
+     */
+    dropdownWidth?: CustomSelectDropdownWidthType | 'string';
+    /**
+     * Dropdown - hint if data has to be loaded
+     */
+    loadingText?: string;
+    /**
+     * Change the button text for mobile close
+     */
+    mobileCloseButtonText?: string;
+    /**
+     * Enables CustomSelect
+     */
+    multiple?: boolean;
+    /**
+     * 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
+     */
+    onSelect?: (values: string[]) => void;
+    /**
+     * 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[];
+    /**
+     * Search label
+     */
+    searchLabel?: string;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Select all checkbox label
+     */
+    selectAllLabel?: 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;
+    /**
+     * 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 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;
+    _externalChangeTimestamp?: number;
+    _internalChangeTimestamp?: number;
+    _name?: string;
+    getNativeSelectValue: () => string;
+    getOptionLabel: (option: CustomSelectOptionType) => string;
+    getOptionChecked: (value?: string) => boolean;
+    getOptionKey: (option: CustomSelectOptionType) => string;
+    getTagRemoveLabel: (index: number) => string;
+    selectAllEnabled: boolean;
+    searchEnabled: boolean;
+    amountOptions: number;
+    setDescById: (descId?: string) => void;
+    handleTagRemove: (option: CustomSelectOptionType, event?: any) => void;
+    handleSummaryFocus: () => void;
+    handleSelect: (value?: string) => void;
+    handleSelectAll: () => void;
+    handleClearAll: () => void;
+    handleDropdownToggle: (event: any) => void;
+    handleDocumentClose: (event: any) => void;
+    handleOpenByKeyboardFocus: (onlySearch?: boolean) => void;
+    handleFocusFirstDropdownCheckbox: (activeElement?: Element) => void;
+    handleKeyboardPress: (event: any) => void;
+    handleArrowDownUp: (event: any) => void;
+    handleSearch: (event: any) => void;
+    getSelectAllLabel: () => string;
+    selectAllChecked: boolean;
+    selectAllIndeterminate: boolean;
+};
+export type DBCustomSelectState = DBCustomSelectDefaultState & GlobalState & FormState & CloseEventState & PopoverState;

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

@@ -0,0 +1,19 @@
+import { ElementRef } from "@angular/core";
+import { DBCustomSelectDropdownProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelectDropdown {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: DBCustomSelectDropdownProps["id"];
+    className: DBCustomSelectDropdownProps["className"];
+    width: DBCustomSelectDropdownProps["width"];
+    _ref: ElementRef | undefined;
+    /**
+     * 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; }; "className": { "alias": "className"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, 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,18 @@
+import { ElementRef } from "@angular/core";
+import { DBCustomSelectFormFieldProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelectFormField {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: DBCustomSelectFormFieldProps["id"];
+    className: DBCustomSelectFormFieldProps["className"];
+    _ref: ElementRef | undefined;
+    /**
+     * 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; }; "className": { "alias": "className"; "required": false; }; }, {}, 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,20 @@
+import { ElementRef } from "@angular/core";
+import { DBCustomSelectListProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelectList {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    multiple: DBCustomSelectListProps["multiple"];
+    label: DBCustomSelectListProps["label"];
+    id: DBCustomSelectListProps["id"];
+    className: DBCustomSelectListProps["className"];
+    _ref: ElementRef | undefined;
+    /**
+     * 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; }; "label": { "alias": "label"; "required": false; }; "id": { "alias": "id"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, {}, 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,48 @@
+import { EventEmitter, ElementRef, SimpleChanges, Renderer2 } from "@angular/core";
+import { ControlValueAccessor } from '@angular/forms';
+import { DBCustomSelectListItemProps, DBCustomSelectListItemState } from "./model";
+import { ChangeEvent } from "../../shared/model";
+import * as i0 from "@angular/core";
+export declare class DBCustomSelectListItem implements ControlValueAccessor {
+    private renderer;
+    constructor(renderer: Renderer2);
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    getBooleanAsString: (originBool?: boolean | undefined) => any;
+    getHideProp: (show?: boolean | undefined) => any;
+    id: DBCustomSelectListItemProps["id"];
+    isGroupTitle: DBCustomSelectListItemProps["isGroupTitle"];
+    showDivider: DBCustomSelectListItemProps["showDivider"];
+    type: DBCustomSelectListItemProps["type"];
+    checked: DBCustomSelectListItemProps["checked"];
+    className: DBCustomSelectListItemProps["className"];
+    groupTitle: DBCustomSelectListItemProps["groupTitle"];
+    icon: DBCustomSelectListItemProps["icon"];
+    showIcon: DBCustomSelectListItemProps["showIcon"];
+    name: DBCustomSelectListItemProps["name"];
+    disabled: DBCustomSelectListItemProps["disabled"];
+    value: DBCustomSelectListItemProps["value"];
+    label: DBCustomSelectListItemProps["label"];
+    onChange: EventEmitter<any>;
+    change: EventEmitter<any>;
+    _ref: ElementRef | undefined;
+    _id: DBCustomSelectListItemState["_id"];
+    hasDivider: DBCustomSelectListItemState["hasDivider"];
+    handleChange(event: ChangeEvent<HTMLInputElement>): ReturnType<DBCustomSelectListItemState["handleChange"]>;
+    getIconAfter(): ReturnType<DBCustomSelectListItemState["getIconAfter"]>;
+    /**
+     * 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;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngAfterContentChecked(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCustomSelectListItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCustomSelectListItem, "db-custom-select-list-item", never, { "id": { "alias": "id"; "required": false; }; "isGroupTitle": { "alias": "isGroupTitle"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; "type": { "alias": "type"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "className": { "alias": "className"; "required": false; }; "groupTitle": { "alias": "groupTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, { "onChange": "onChange"; "change": "change"; }, never, ["*"], true, never>;
+}

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

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

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

@@ -0,0 +1,29 @@
+import { BaseFormProps, ChangeEventProps, ChangeEventState, FormCheckProps, GlobalProps, GlobalState, IconProps, ShowIconProps, ValueProps } from '../../shared/model';
+export declare const CustomSelectListItemTypeList: readonly ["checkbox", "radio"];
+export type CustomSelectListItemTypeType = (typeof CustomSelectListItemTypeList)[number];
+export type DBCustomSelectListItemExtraProps = {
+    /**
+     * If the item is a group title (only text)
+     */
+    isGroupTitle?: boolean;
+    /**
+     * Show a divider on the bottom of the list item for visual grouping (don't use it on every item)
+     */
+    showDivider?: boolean;
+} & IconProps & ShowIconProps;
+export type DBCustomSelectListItemDefaultProps = {
+    /**
+     * Set the title of a group of items - disables radio/checkbox behavior
+     */
+    groupTitle?: string;
+    /**
+     * Change the behavior of the item single(radio) or multiple(checkbox)
+     */
+    type?: CustomSelectListItemTypeType;
+};
+export type DBCustomSelectListItemProps = DBCustomSelectListItemDefaultProps & GlobalProps & BaseFormProps & ValueProps & FormCheckProps & ChangeEventProps<HTMLInputElement> & DBCustomSelectListItemExtraProps;
+export type DBCustomSelectListItemDefaultState = {
+    getIconAfter: () => string | undefined;
+    hasDivider?: boolean;
+};
+export type DBCustomSelectListItemState = DBCustomSelectListItemDefaultState & ChangeEventState<HTMLInputElement> & GlobalState;

package/components/input/input.d.ts

@@ -45,6 +45,7 @@ export declare class DBInput implements ControlValueAccessor {
     autocomplete: DBInputProps["autocomplete"];
     autofocus: DBInputProps["autofocus"];
     dataList: DBInputProps["dataList"];
+    ariaDescribedBy: DBInputProps["ariaDescribedBy"];
     messageIcon: DBInputProps["messageIcon"];
     onInput: EventEmitter<any>;
     input: EventEmitter<any>;
@@ -84,5 +85,5 @@ export declare class DBInput implements ControlValueAccessor {
     ngAfterViewInit(): void;
     ngAfterContentChecked(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DBInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DBInput, "db-input", never, { "id": { "alias": "id"; "required": false; }; "dataListId": { "alias": "dataListId"; "required": false; }; "message": { "alias": "message"; "required": false; }; "showMessage": { "alias": "showMessage"; "required": false; }; "value": { "alias": "value"; "required": false; }; "validation": { "alias": "validation"; "required": false; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "validMessage": { "alias": "validMessage"; "required": false; }; "className": { "alias": "className"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconAfter": { "alias": "iconAfter"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "step": { "alias": "step"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "form": { "alias": "form"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "dataList": { "alias": "dataList"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; }, { "onInput": "onInput"; "input": "input"; "onChange": "onChange"; "change": "change"; "onBlur": "onBlur"; "blur": "blur"; "onFocus": "onFocus"; "focus": "focus"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBInput, "db-input", never, { "id": { "alias": "id"; "required": false; }; "dataListId": { "alias": "dataListId"; "required": false; }; "message": { "alias": "message"; "required": false; }; "showMessage": { "alias": "showMessage"; "required": false; }; "value": { "alias": "value"; "required": false; }; "validation": { "alias": "validation"; "required": false; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "validMessage": { "alias": "validMessage"; "required": false; }; "className": { "alias": "className"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconAfter": { "alias": "iconAfter"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "step": { "alias": "step"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "form": { "alias": "form"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "dataList": { "alias": "dataList"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; }, { "onInput": "onInput"; "input": "input"; "onChange": "onChange"; "change": "change"; "onBlur": "onBlur"; "blur": "blur"; "onFocus": "onFocus"; "focus": "focus"; }, never, ["*"], true, never>;
 }

package/components/page/model.d.ts

@@ -20,6 +20,10 @@ export type DBPageDefaultProps = {
      * The slot can be used for React to set a header.
      */
     header?: any;
+    /**
+     * Adds `class` to `<main>` element
+     */
+    mainClass?: string;
     /**
      * The variant=fixed uses flex-box to make header and footer static
      */

package/components/page/page.d.ts

@@ -9,6 +9,7 @@ export declare class DBPage {
     variant: DBPageProps["variant"];
     id: DBPageProps["id"];
     className: DBPageProps["className"];
+    mainClass: DBPageProps["mainClass"];
     _ref: ElementRef | undefined;
     fontsLoaded: DBPageState["fontsLoaded"];
     /**
@@ -21,5 +22,5 @@ export declare class DBPage {
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DBPage, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DBPage, "db-page", never, { "fadeIn": { "alias": "fadeIn"; "required": false; }; "documentOverflow": { "alias": "documentOverflow"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "id": { "alias": "id"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, {}, never, ["[header]", "*", "[footer]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBPage, "db-page", never, { "fadeIn": { "alias": "fadeIn"; "required": false; }; "documentOverflow": { "alias": "documentOverflow"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "id": { "alias": "id"; "required": false; }; "className": { "alias": "className"; "required": false; }; "mainClass": { "alias": "mainClass"; "required": false; }; }, {}, never, ["[header]", "*", "[footer]"], true, never>;
 }

package/components/select/model.d.ts

@@ -1,9 +1,9 @@
 import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
 export type DBSelectDefaultProps = {
     /**
-     * The description attribute will add a paragraph below the select.
+     * Enable multiple select -> use DBCustomSelect/db-custom-select for a better look
      */
-    description?: string;
+    multiple?: boolean;
     /**
      * If you don't/can't use children/slots you can pass in the options as an array.
      */
@@ -35,7 +35,7 @@ export type DBSelectOptionType = {
      */
     value: string | string[] | number;
 };
-export type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps & FormSizeProps;
+export type DBSelectProps = GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & DBSelectDefaultProps & ShowIconProps & FormSizeProps;
 export type DBSelectDefaultState = {
     _placeholderId: string;
     getOptionLabel: (option: DBSelectOptionType) => string;

package/components/select/select.d.ts

@@ -30,6 +30,7 @@ export declare class DBSelect implements ControlValueAccessor {
     name: DBSelectProps["name"];
     size: DBSelectProps["size"];
     autocomplete: DBSelectProps["autocomplete"];
+    multiple: DBSelectProps["multiple"];
     options: DBSelectProps["options"];
     placeholder: DBSelectProps["placeholder"];
     messageIcon: DBSelectProps["messageIcon"];
@@ -74,5 +75,5 @@ export declare class DBSelect implements ControlValueAccessor {
     ngAfterViewInit(): void;
     ngAfterContentChecked(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DBSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DBSelect, "db-select", never, { "id": { "alias": "id"; "required": false; }; "message": { "alias": "message"; "required": false; }; "showMessage": { "alias": "showMessage"; "required": false; }; "value": { "alias": "value"; "required": false; }; "validation": { "alias": "validation"; "required": false; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "validMessage": { "alias": "validMessage"; "required": false; }; "className": { "alias": "className"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; }, { "onClick": "onClick"; "onInput": "onInput"; "input": "input"; "onChange": "onChange"; "change": "change"; "onBlur": "onBlur"; "blur": "blur"; "onFocus": "onFocus"; "focus": "focus"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBSelect, "db-select", never, { "id": { "alias": "id"; "required": false; }; "message": { "alias": "message"; "required": false; }; "showMessage": { "alias": "showMessage"; "required": false; }; "value": { "alias": "value"; "required": false; }; "validation": { "alias": "validation"; "required": false; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "validMessage": { "alias": "validMessage"; "required": false; }; "className": { "alias": "className"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; }, { "onClick": "onClick"; "onInput": "onInput"; "input": "input"; "onChange": "onChange"; "change": "change"; "onBlur": "onBlur"; "blur": "blur"; "onFocus": "onFocus"; "focus": "focus"; }, never, ["*"], true, never>;
 }