@lion/ui

Version:

A package of extendable web components

82 lines (78 loc) • 195 kB

Markdown

--- parts: - API Table - Listbox title: 'Listbox: API Table' eleventyNavigation: key: API Table >> Listbox title: API Table order: 90 parent: Listbox --- # Listbox: API Table ## class: `LionListbox`, `lion-listbox` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------------------------ | --------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | | `activeIndex` | public | | | | ListboxMixin | | `autofocus` | public | `boolean` | `false` | | FocusMixin | | `checkedIndex` | public | `number \| number[]` | | | ListboxMixin | | `defaultValidators` | public | `Validator[]` | `[]` | Used by Subclassers to add default Validators to a particular FormControl.
A date input for instance, always needs the isDate validator. | ValidateMixin | | `dirty` | public | `boolean` | `false` | True when user has changed the value of the field. | InteractionStateMixin | | `disabled` | public | `boolean` | `false` | | DisabledMixin | | `done` | public | `boolean` | `false` | | FormRegistrarMixin | | `fieldName` | public | `string` | | Will be used in validation messages to refer to the current field | FormControlMixin | | `filled` | public | `boolean` | `false` | True when the modelValue is non-empty (see \_isEmpty in FormControlMixin) | InteractionStateMixin | | `focused` | public | `boolean` | `false` | Whether the focusable element within (\`.\_focusableNode\`) is focused.
Reflects to attribute '\[focused]' as a styling hook | FocusMixin | | `focusedVisible` | public | `boolean` | `false` | Whether the focusable element within (\`.\_focusableNode\`) matches ':focus-visible'
Reflects to attribute '\[focused-visible]' as a styling hook
See: https\://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible | FocusMixin | | `formattedValue` | public | | | | ChoiceGroupMixin | | `formElements` | public | `FormControlsCollection` | `new FormControlsCollection()` | Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
both like an array and an object (based on control/element names). | FormRegistrarMixin | | `hasFeedbackFor` | public | `ValidationType[]` | `[]` | As soon as validation happens (after modelValue/validators/validator param change), this
array is updated with the active ValidationTypes ('error'\|'warning'\|'success'\|'info' etc.).
Notice the difference with \`.showsFeedbackFor\`, which filters \`.hasFeedbackFor\` based on
\`.feedbackCondition()\`.

For styling purposes, will be reflected to \[has-feedback-for="error warning"]. This can
be useful for subtle visual feedback on keyup, like a red/green border around an input. | ValidateMixin | | `hasNoDefaultSelected` | public | `boolean` | `false` | When setting this to true, on initial render, no option will be selected.
It is advisable to override \`\_noSelectionTemplate\` method in the select-invoker
to render some kind of placeholder initially | ListboxMixin | | `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | FormControlMixin | | `initComplete` | public | `Promise<any>` | `new Promise((resolve, reject) => { this.__resolveInitComplete = resolve; this.__rejectInitComplete = reject; })` | initComplete resolves after all pending initialization logic
(for instance \`\<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>\`)
is executed | FormRegistrarMixin | | `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | ValidateMixin | | `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | FormControlMixin | | `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | FormControlMixin | | `modelValue` | public | | | | FormControlMixin | | `multipleChoice` | public | `boolean` | `false` | When false (default), modelValue and serializedValue will reflect the
currently selected choice (usually a string). When true, modelValue will and
serializedValue will be an array of strings. | ChoiceGroupMixin | | `operationMode` | public | `OperationMode` | | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload') | ValidateMixin | | `orientation` | public | `string` | `'vertical'` | Informs screen reader and affects keyboard navigation.
By default 'vertical' | ListboxMixin | | `prefilled` | public | `boolean` | `false` | True when user has left non-empty field or input is prefilled.
The name must be seen from the point of view of the input field:
once the user enters the input field, the value is non-empty. | InteractionStateMixin | | `readOnly` | public | `boolean` | `false` | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.
(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | FormControlMixin | | `registrationComplete` | public | `Promise<any> & {done?:boolean}` | `new Promise((resolve, reject) => { this.__resolveRegistrationComplete = resolve; this.__rejectRegistrationComplete = reject; })` | registrationComplete waits for all children formElements to have registered | FormRegistrarMixin | | `rotateKeyboardNavigation` | public | `boolean` | `false` | Will give first option active state when navigated to the next option from
last option. | ListboxMixin | | `selectionFollowsFocus` | public | `boolean` | `false` | When true, will synchronize activedescendant and selected element on
arrow key navigation.
This behavior can usually be seen on \<select> on the Windows platform.
Note that this behavior cannot be used when multiple-choice is true.
See: https\://www\.w3.org/TR/wai-aria-practices/#kbd\_selection\_follows\_focus | ListboxMixin | | `serializedValue` | public | | | | ChoiceGroupMixin | | `showsFeedbackFor` | public | `ValidationType[]` | `[]` | Based on outcome of feedbackCondition, this array decides what ValidationTypes should be
shown in validationFeedback, based on meta data like interaction states.

For styling purposes, it reflects it \`\[shows-feedback-for="error warning"]\` | ValidateMixin | | `submitted` | public | | | | InteractionStateMixin | | `touched` | public | `boolean` | `false` | True when user has focused and left(blurred) the field. | InteractionStateMixin | | `validationStates` | public | `ValidationStates` | `{}` | The outcome of a validation 'round'. Keyed by ValidationType and Validator name | ValidateMixin | | `validators` | public | `Validator[]` | `[]` | Used by Application Developers to add Validators to a FormControl. | ValidateMixin | | `_activeDescendantOwnerNode` | protected | `HTMLElement` | | | ListboxMixin | | `_allValidators` | protected | `(Validator \| MetaValidator)[]` | | Combination of validators provided by Application Developer and the default validators | ValidateMixin | | `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-describedby of \`.\_inputNode\` | FormControlMixin | | `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\` | FormControlMixin | | `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | ValidateMixin | | `_feedbackNode` | protected | | | Element where validation feedback will be rendered to | FormControlMixin | | `_focusableNode` | protected | `HTMLElement` | | The focusable element:
could be an input, textarea, select, button or any other element with tabindex > -1 | FocusMixin | | `_helpTextNode` | protected | | | Element where help text will be rendered to | FormControlMixin | | `_inputId` | protected | `string` | | Unique id that can be used in all light dom | FormControlMixin | | `_inputNode` | protected | | | The interactive (form) element. Can be a native element like input/textarea/select or
an element with tabindex > -1 | FormControlMixin | | `_isFormOrFieldset` | protected | `boolean` | `false` | Flag that determines how ".formElements" should behave.
For a regular fieldset (see LionFieldset) we expect ".formElements"
to be accessible as an object.
In case of a radio-group, a checkbox-group or a select/listbox,
it should act like an array (see ChoiceGroupMixin).
Usually, when false, we deal with a choice-group (radio-group, checkbox-group,
(multi)select) | FormRegistrarMixin | | `_isRepropagationEndpoint` | public | `boolean` | `false` | By default, a field with \_repropagationRole 'choice-group' will act as an
'endpoint'. This means it will be considered as an individual field: for
a select, individual options will not be part of the formPath. They
will.
Similarly, components that (a11y wise) need to be fieldsets, but 'interaction wise'
(from Application Developer perspective) need to be more like fields
(think of an amount-input with a currency select box next to it), can set this
to true to hide private internals in the formPath. | FormControlMixin | | `_labelNode` | protected | | | Element where label will be rendered to | FormControlMixin | | `_leaveEvent` | protected | `string` | `'blur'` | The event that triggers the touched state | InteractionStateMixin | | `_listboxActiveDescendant` | protected | `number \| null` | `null` | | ListboxMixin | | `_listboxActiveDescendantNode` | protected | `HTMLElement` | | | ListboxMixin | | `_listboxNode` | protected | | | | ListboxMixin | | `_listboxReceivesNoFocus` | protected | `boolean` | `false` | When listbox is coupled to a textbox (in case we are dealing with a combobox),
spaces should not select an element (they need to be put in the textbox) | ListboxMixin | | `_listboxSlot` | protected | `HTMLElement` | | | ListboxMixin | | `_noTypeAhead` | public | `boolean` | `false` | When false, a user can type on which the focus will jump to the matching option | ListboxMixin | | `_oldModelValue` | protected | `string \| string[] \| undefined` | `undefined` | | ListboxMixin | | `_repropagationRole` | public | `'child'\|'choice-group'\|'fieldset'` | `'choice-group'` | Based on the role, details of handling model-value-changed repropagation differ. | FormControlMixin | | `_requestedToBeDisabled` | protected | `boolean` | `false` | | DisabledMixin | | `_scrollTargetNode` | protected | `HTMLElement` | | | ListboxMixin | | `_typeAheadTimeout` | protected | `number` | `1000` | The pending char sequence that will set active list item | ListboxMixin | | `_valueChangedEvent` | protected | `string` | `'model-value-changed'` | The event that triggers the dirty state | InteractionStateMixin | | `_visibleMessagesAmount` | protected | `number` | `1` | The amount of feedback messages that will visible in LionValidationFeedback