Dropdown component

<day-dropdown> is a form control for selecting a value from a set of options, similar to the native <select> element.

It supports single and multiple selections, custom templates for items, selection value, header and 'no-item' value, and can be used with reactive forms.

Dependencies

'/button'

'/core'

'/icon'

'/checkbox'

'/input'

'/radio'

'/popover'

'/skeleton-loader'

    <day-dropdown 
    [keyValue]="keyValue" 
    [data]="data" 
    [placeholder]="'Choose a vegetable'" 
    [keyText]="keyText" 
    [type]="'dropdown'" 
    [multiple]="true"
    [showInputs]="false"
    [autoclose]="false"
    [hasSearch]="false"
    [size]="'small'"/>

Description

The dropdown component depends on the popover component, which will appear when clicked. It will be of type 'fill' when the dropdown type is 'select' and of type 'dropdown' when the dropdown component is of type 'dropdown'.

By default, the popover will open downward, unless there is not enough space, in which case it will open upward. The animation will be of 'accordion' type for dropdowns of type 'dropdown', and of 'dissolve' type for dropdowns of type 'select'.

The overlay color depends on the type of dropdown. For the 'select' type, the overlay is rgba(0, 0, 0, 0.3);, while for the 'dropdown' type it is transparent.

Import

import { DAYDropdownComponent } from '@dayerlin-bustamante/dropdown';

Selectors

Dropdown: day-dropdown

Installation and Usage

npm install @dayerlin-bustamante/dropdown

import { DAYDropdownComponent } from '@dayerlin-bustamante/dropdown';

<day-dropdown [options]="options"/>

Inputs

Name	Description	Default
keyValue: string	Required string that defines the object key used to set the input value.
data: any[]	Options shown in the dropdown.	[]
keyText: string	Optional string that defines the object key used to display the text for each item. It will only be used as a fallback if the DAYDropdownItemTmpl template does not exist.	''
type: <'select' \| 'dropdown'>	Type of the dropdown. Select: fill type popover. Dropdown: dropdown type popover with transparent backdrop.	select
size: <'medium' \| 'small'>	Size of the dropdown.	medium
multiple: boolean	Whether multiple options can be selected.	false
showInputs: boolean	Whether to show inputs for radio-buttons or else.	true
autoclose: boolean	Whether the dropdown should close when an option is selected.	true
hasSearch: boolean	Whether the dropdown should have a search input.	true
placeholder: string	Placeholder text for the dropdown It will only be used as a fallback if there is no value.	''
isLoading: boolean	Whether the dropdown is in a loading state.	false
hasError: boolean	Whether the dropdown is in an error state.	false
isDisabledFn: (item: any) => boolean	Function to determine if an item is disabled.	() => false
groupKeyText: string	The property name for group display text.	value
groupKeyValue: string	The property name for group children.	children
groupFn: (item: any) => any	Custom function to extract group children.

Outputs

Name	Description
searchEvent: string	Event emitted when the search input value changes.
openEvent: boolean	Event emitted when the dropdown is opened.
closeEvent: boolean	Event emitted when the dropdown is closed.

Directives

Name	Description
DAYDropdownItemTmpl	Template directive to customize the dropdown item.
DAYDropdownSelectionTmpl	Template directive to customize the dropdown selection.
DAYDropdownHeaderTmpl	Template directive to customize the dropdown header.
DAYDropdownFooterTmpl	Template directive to customize the dropdown footer.
DAYDropdownNoItemsTmpl	Template directive to customize the no items message.
DAYDropdownLoaderTmpl	Template directive to customize the loading state.
DAYDropdownErrorTmpl	Template directive to customize the error state.
DAYDropdownGroupTmpl	Template directive to customize the dropdown group.

Public methods

DAYDropdownAdapter

Name	Description	Returns	Params
getClearCopy	Gets the clear button copy text.	The clear button copy text.
getSelectCopy	Gets the select button copy text.	The select button copy text.
getNoItemsCopy	Gets the message for when there are no items available.	A string with the message 'No items'.
getMultipleItemsCopy	Returns a string indicating the number of items selected.	A string indicating the number of items selected.	length: number; The number of items selected
getDefaultLoaderCopy	Gets the default loader copy text.	A string representing the default loading message.
getSearchPlaceholderCopy	Gets the placeholder text for the search input.	A string representing the search input placeholder.