Select

• Item

• config?: PropsConfig<SelectProps<Item>>

config of the modal, either as a store or as an object containing values or stores.

SelectWidget<Item>

a new select widget instance

SelectProps<any>

the default Select config

• T

id: string

Unique id to identify the item

item: T

Original item given in the parameters

selected: boolean

Specify if the item is checked

• Item

• props: Partial<SelectProps<Item>>

Element

• Item

onBadgeKeydown: (event, item) => void

Method to be plugged to on an keydown event of a badge container, in order to manage main actions on badges.

• event: KeyboardEvent

keyboard event

• item: Item

corresponding item

void

onInput: (e) => void

Method to be plugged to on the 'input' event. The input text will be used as the filter text.

• e

• e.target: any

void

onInputKeydown: (event) => void

Method to be plugged to on an keydown event of the main input, in order to control the keyboard interactions with the highlighted item. It manages arrow keys to move the highlighted item, or enter to toggle the item.

• event: KeyboardEvent

void

onRemoveBadgeClick: (event, item) => void

Method to be attached to the node element to close a badge on click.

• event: MouseEvent

• item: Item

void

• Item

clear(): void

Clear all the selected items

void

clearText(): void

Clear the filter text

void

close(): void

close the select

void

highlight(item): void

Highlight the given item, if there is a corresponding match among the visible list

• item: Item

void

highlightFirst(): void

Highlight the first item among the visible list

void

highlightLast(): void

Highlight the last item among the visible list

void

highlightNext(): void

Highlight the next item among the visible list. Loop to the first item if needed

void

highlightPrevious(): void

Highlight the previous item among the visible list Loop to the last item if needed

void

open(): void

open the select

void

select(item): void

Select the provided item. The selected list is used to

• item: Item

the item to select

void

toggle(isOpen?): void

Toggle the dropdown menu

• isOpen?: boolean

If specified, set the menu in the defined state.

void

toggleItem(item, selected?): void

Toggle the selection of an item

• item: Item

the item to toggle

• selected?: boolean

an optional boolean to enforce the selected/unselected state instead of toggling

void

unselect(item): void

Unselect the provided item.

• item: Item

the item to unselect

void

• Item

• Item

badgeAttributesDirective: Directive<ItemContext<Item>>

A directive that applies all the necessary attributes to the container badges

floatingDirective: Directive<void, SSRHTMLElement>

Directive that enables dynamic positioning of menu element

hasFocusDirective: Directive

Directive to be used in the input group and the menu containers

inputContainerDirective: Directive

A directive to be applied to the element that contains the badges and the input

itemAttributesDirective: Directive<ItemContext<Item>>

A directive that applies all the necessary attributes to the dropdown item

menuAttributesDirective: Directive

A directive that applies all the necessary attributes to the dropdown menu

referenceDirective: Directive<void, SSRHTMLElement>

A directive to be applied to the input group element serves as the base for menu positioning

itemContext: ItemContext<Item>

Contextual data related to an item

• Item

• Item

allowedPlacements: Placement[]

List of allowed placements for the dropdown. This refers to the allowedPlacements from floating UI, given the different Placement possibilities.

['bottom-start', 'top-start', 'bottom-end', 'top-end']

ariaLabel: undefined | string

aria-label used for the input inside the select

'Select'

badgeClassName: string

Class to be added on selected items (displayed in the input zone)

''

badgeLabel: SlotContent<SelectItemContext<Item>>

The template to override the way each badge on the left of the input is displayed. This define the content of the badge inside the badge container.

({itemContext}: SelectItemContext<any>) => itemContext.item

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

true if the select is disabled

false

filterText: string

Filtered text to be display in the filter input

''

id: undefined | string

id used for the input inside the select

itemLabel: SlotContent<SelectItemContext<Item>>

The template to override the way each item is displayed in the list. This define the content of the badge inside the badge container.

({itemContext}: SelectItemContext<any>) => itemContext.item

items: Item[]

List of available items for the dropdown

[]

loading: boolean

true if a loading process is being done

false

menuClassName: string

Class to be added on the dropdown menu container

''

menuItemClassName: string

Class to be added on menu items

''

open: boolean

true if the select is open

false

selected: Item[]

List of selected item ids

[]

itemIdFn(item): string

Custom function to get the id of an item By default, the item is returned

• item: Item

string

(item: any) => '' + item

navSelector(node): NodeListOf<HTMLInputElement | HTMLSpanElement>

Retrieves navigable elements within an HTML element containing badges and the input.

• node: HTMLElement

HTMLElement that contains the badges and the input

NodeListOf<HTMLInputElement | HTMLSpanElement>

(node: HTMLElement) => node.querySelectorAll('.au-select-badge,input')

onFilterTextChange(text): void

Callback called when the text filter change

• text: string

Filtered text

void

() => {}

onOpenChange(isOpen): void

Callback called dropdown open state change

• isOpen: boolean

updated open state

void

() => {}

onSelectedChange(selected): void

Callback called when the selection change

• selected: Item[]

void

() => {}

• Item

ariaLabel: undefined | string

aria-label used for the input inside the select

'Select'

badgeClassName: string

Class to be added on selected items (displayed in the input zone)

''

badgeLabel: SlotContent<SelectItemContext<Item>>

The template to override the way each badge on the left of the input is displayed. This define the content of the badge inside the badge container.

({itemContext}: SelectItemContext<any>) => itemContext.item

className: string

CSS classes to be applied on the widget main container

''

disabled: boolean

true if the select is disabled

false

filterText: string

Filtered text to be display in the filter input

''

highlighted: undefined | ItemContext<Item>

Highlighted item context. It is designed to define the highlighted item in the dropdown menu

id: undefined | string

id used for the input inside the select

itemLabel: SlotContent<SelectItemContext<Item>>

The template to override the way each item is displayed in the list. This define the content of the badge inside the badge container.

({itemContext}: SelectItemContext<any>) => itemContext.item

loading: boolean

true if a loading process is being done

false

menuClassName: string

Class to be added on the dropdown menu container

''

menuItemClassName: string

Class to be added on menu items

''

open: boolean

true if the select is open

false

placement: undefined | Placement

Current placement of the dropdown

selected: Item[]

List of selected item ids

[]

selectedContexts: ItemContext<Item>[]

List of selected items to be display

visibleItems: ItemContext<Item>[]

List of item contexts, to be displayed in the menu

• Item