@lion/ui

--- parts: - API Table - Select Rich title: 'Select Rich: API Table' eleventyNavigation: key: API Table >> Select Rich title: API Table order: 90 parent: Select Rich --- # Select Rich: API Table ## class: `LionSelectInvoker`, `lion-select-invoker` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------------------ | --------- | ------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------- | -------------- | | `active` | public | `boolean` | `false` | | LionButton | | `disabled` | public | `boolean` | `false` | | LionButton | | `hostElement` | public | `LionSelectRich \| null` | `null` | The LionSelectRich element this invoker is part of. Will be set on connectedCallback of
LionSelectRich | | | `readOnly` | public | `boolean` | `false` | When the connected LionSelectRich instance is readOnly,
this should be reflected in the invoker as well | | | `selectedElement` | public | `LionOption \| null` | `null` | The option element that is currently selected | | | `singleOption` | public | `boolean` | `false` | When the connected LionSelectRich instance has only one option,
this should be reflected in the invoker as well | | | `tabIndex` | public | `number` | | | LionButton | | `type` | public | `string` | `'button'` | | LionButton | | `_contentWrapperNode` | protected | | | | | | `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionButton | ### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ---------------------------- | --------- | ------------------------------------------------------------------------------------------------ | ---------- | -------------------------------------- | -------------- | | `click` | public | | | | LionButton | | `makeRequestToBeDisabled` | public | | | | LionButton | | `retractRequestToBeDisabled` | public | | | | LionButton | | `_afterTemplate` | protected | | | | | | `_beforeTemplate` | protected | | | | | | `_contentTemplate` | protected | | | `TemplateResult\|Node[]\|string\|null` | | | `_noSelectionTemplate` | protected | To be overriden for a placeholder, used when \`hasNoDefaultSelected\` is true on the select rich | | `TemplateResult` | | ### Attributes | Name | Field | Inherited From | | ----------------- | --------------- | -------------- | | `selectedElement` | selectedElement | | | `hostElement` | hostElement | | | `readonly` | readOnly | | | `single-option` | singleOption | | | `tabindex` | tabIndex | LionButton | | `disabled` | disabled | LionButton | | `active` | active | LionButton | | `type` | type | LionButton | <hr/> ## class: `LionSelectRich`, `lion-select-rich` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | ------------------------------ | --------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `activeIndex` | public | | | | LionListbox | | `autofocus` | public | `boolean` | `false` | | LionListbox | | `checkedIndex` | public | `number \| number[]` | | | LionListbox | | `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin | | `defaultValidators` | public | `Validator[]` | `[]` | Used by Subclassers to add default Validators to a particular FormControl.
A date input for instance, always needs the isDate validator. | LionListbox | | `dirty` | public | `boolean` | `false` | True when user has changed the value of the field. | LionListbox | | `disabled` | public | `boolean` | `false` | | LionListbox | | `done` | public | `boolean` | `false` | | LionListbox | | `fieldName` | public | `string` | | Will be used in validation messages to refer to the current field | LionListbox | | `filled` | public | `boolean` | `false` | True when the modelValue is non-empty (see \_isEmpty in FormControlMixin) | LionListbox | | `focused` | public | `boolean` | `false` | Whether the focusable element within (\`.\_focusableNode\`) is focused.
Reflects to attribute '\[focused]' as a styling hook | LionListbox | | `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 | LionListbox | | `formattedValue` | public | | | | LionListbox | | `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). | LionListbox | | `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. | LionListbox | | `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 | LionListbox | | `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionListbox | | `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 | LionListbox | | `interactionMode` | public | `'windows/linux'\|'mac'\|'auto'` | `'auto'` | Aligns behavior for 'selectionFollowFocus' and 'navigateWithinInvoker' with
platform. When 'auto' (default), platform is automatically detected | | | `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionListbox | | `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionListbox | | `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionListbox | | `modelValue` | public | | | | LionListbox | | `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. | LionListbox | | `navigateWithinInvoker` | public | `Boolean` | `false` | When invoker has focus, up and down arrow keys changes active state of listbox,
without opening overlay. | | | `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') | LionListbox | | `orientation` | public | `string` | `'vertical'` | Informs screen reader and affects keyboard navigation.
By default 'vertical' | LionListbox | | `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. | LionListbox | | `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) | LionListbox | | `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 | LionListbox | | `rotateKeyboardNavigation` | public | `boolean` | `false` | Will give first option active state when navigated to the next option from
last option. | LionListbox | | `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 | LionListbox | | `serializedValue` | public | | | | LionListbox | | `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"]\` | LionListbox | | `singleOption` | public | `boolean` | `false` | | | | `slots` | public | `SlotsMap` | | Adds ".\_feedbackNode" as described below | LionListbox | | `submitted` | public | | | | LionListbox | | `touched` | public | `boolean` | `false` | True when user has focused and left(blurred) the field. | LionListbox | | `validationStates` | public | `ValidationStates` | `{}` | The outcome of a validation 'round'. Keyed by ValidationType and Validator name | LionListbox | | `validators` | public | `Validator[]` | `[]` | Used by Application Developers to add Validators to a FormControl. | LionListbox | | `_activeDescendantOwnerNode` | protected | `HTMLElement` | | | LionListbox | | `_allValidators` | protected | `(Validator \| MetaValidator)[]` | | Combination of validators provided by Application Developer and the default validators | LionListbox | | `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-describedby of \`.\_inputNode\` | LionListbox | | `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\` | LionListbox | | `_arrowWidth` | protected | `number` | `28` | | | | `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionListbox | | `_feedbackNode` | protected | | | Element where validation feedback will be rendered to | LionListbox | | `_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 | LionListbox | | `_inputId` | protected | `string` | | Unique id that can be used in all light dom | LionListbox | | `_inputNode` | protected | | | The interactive (form) element. Can be a native element like input/textarea/select or
an element with tabindex > -1 | LionListbox | | `_invokerNode` | protected | `LionSelectInvoker` | | | | | `_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) | LionListbox | | `_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. | LionListbox | | `_labelNode` | protected | | | Element where label will be rendered to