@lion/ui

Version:

A package of extendable web components

82 lines (78 loc) • 220 kB

Markdown

--- parts: - API Table - Combobox title: 'Combobox: API Table' eleventyNavigation: key: API Table >> Combobox title: API Table order: 90 parent: Combobox --- # Combobox: API Table ## class: `LionCombobox`, `lion-combobox` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------------------------ | --------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | | `activeIndex` | public | | | | ListboxMixin | | `allowCustomChoice` | public | `boolean` | `false` | | CustomChoiceGroupMixin | | `autocomplete` | public | `'none'\|'list'\|'inline'\|'both'` | `'both'` | When "list", will filter listbox suggestions based on textbox value.
When "both", an inline completion string will be added to the textbox as well. | | | `autofocus` | public | `boolean` | `false` | | FocusMixin | | `checkedIndex` | public | `number \| number[]` | | | ListboxMixin | | `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin | | `customChoices` | public | | | Custom elements are all missing elements that have no corresponding element, independent if enabled or not. | CustomChoiceGroupMixin | | `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 | | `matchMode` | public | `'begin'\|'all'` | `'all'` | When typing in the textbox, will by default be set on 'begin',
only matching the beginning part in suggestion list.
=> 'a' will match 'apple' from \['apple', 'pear', 'citrus'].
When set to 'all', will match middle of the word as well
=> 'a' will match 'apple' and 'pear' | | | `modelValue` | public | `object` | | | 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 | | `opened` | public | `boolean` | `false` | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out
in case the user does not need to be able to reopen the dialog. | OverlayMixin | | `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 | | `requireOptionMatch` | public | `boolean` | `true` | If set to false, the value is allowed to not match any of the options.
We set the default to true for backwards compatibility | | | `rotateKeyboardNavigation` | public | `boolean` | `true` | Will give first option active state when navigated to the next option from
last option. | ListboxMixin | | `selectionFollowsFocus` | public | `boolean` | `true` | 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 | | `showAllOnEmpty` | public | `boolean` | `false` | When true, the listbox is open and textbox goes from a value to empty, all options are shown.
By default, the listbox closes on empty, similar to wai-aria example and \<datalist> | | | `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 | | `value` | public | | | We define the value getter/setter below as also defined in LionField (via FormatMixin).
Since FormatMixin is meant for Formgroups/ChoiceGroup it's not applied on Combobox;
Combobox is somewhat of a hybrid between a ChoiceGroup and LionField, therefore we copy over
some of the LionField members to align with its interface.

The view value. Will be delegated to \`.\_inputNode.value\` | | | `_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 | | `_ariaVersion` | protected | `'1.1'\|'1.0'` | | For optimal support, we allow aria v1.1 on newer browsers | | | `_comboboxNode` | protected | `HTMLElement` | | Wrapper with combobox role for the text input that the end user controls the listbox with. | | | `_customChoices` | protected | `Set<unknown>` | `new Set()` | | CustomChoiceGroupMixin | | `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionListbox | | `_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 | LionListbox | | `_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` |