@lion/ui 0.7.6 → 0.7.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/components/button/test-suites/LionButton.suite.js +3 -1
- package/components/combobox/src/LionCombobox.js +33 -9
- package/components/combobox/test/lion-combobox.test.js +134 -7
- package/components/dialog/test/lion-dialog.test.js +59 -1
- package/components/input-datepicker/test/lion-input-datepicker.test.js +3 -3
- package/components/input-file/src/FileHandle.js +1 -1
- package/components/input-file/src/LionInputFile.js +1 -3
- package/components/input-file/test/lion-input-file.test.js +11 -14
- package/components/overlays/src/OverlayController.js +13 -7
- package/components/overlays/src/OverlayMixin.js +5 -1
- package/components/overlays/test/OverlayController.test.js +46 -0
- package/components/select-rich/src/LionSelectRich.js +12 -0
- package/components/select-rich/test/lion-select-rich.test.js +26 -0
- package/custom-elements.json +60 -55
- package/dist-types/components/button/test-suites/LionButton.suite.d.ts.map +1 -1
- package/dist-types/components/combobox/src/LionCombobox.d.ts +9 -0
- package/dist-types/components/combobox/src/LionCombobox.d.ts.map +1 -1
- package/dist-types/components/input-file/src/LionInputFile.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayMixin.d.ts.map +1 -1
- package/dist-types/components/select-rich/src/LionSelectRich.d.ts.map +1 -1
- package/dist-types/tsconfig.tsbuildinfo +1 -1
- package/docs/components/button/use-cases.md +2 -2
- package/docs/components/calendar/use-cases.md +4 -4
- package/docs/components/checkbox-group/api-table.md +49 -55
- package/docs/components/checkbox-group/overview.md +5 -5
- package/docs/components/checkbox-group/use-cases.md +33 -33
- package/docs/components/collapsible/overview.md +1 -1
- package/docs/components/collapsible/use-cases.md +3 -3
- package/docs/components/combobox/api-table.md +84 -89
- package/docs/components/combobox/extensions.md +20 -20
- package/docs/components/combobox/overview.md +1 -1
- package/docs/components/combobox/use-cases.md +6 -6
- package/docs/components/dialog/api-table.md +3 -3
- package/docs/components/dialog/overview.md +2 -2
- package/docs/components/dialog/src/external-dialog.js +32 -0
- package/docs/components/dialog/src/slots-dialog-content.js +1 -1
- package/docs/components/dialog/src/styled-dialog-content.js +1 -1
- package/docs/components/dialog/use-cases.md +49 -3
- package/docs/components/drawer/use-cases.md +3 -3
- package/docs/components/fieldset/api-table.md +45 -51
- package/docs/components/fieldset/overview.md +7 -7
- package/docs/components/fieldset/use-cases.md +15 -15
- package/docs/components/form/overview.md +7 -7
- package/docs/components/form/use-cases.md +4 -4
- package/docs/components/icon/use-cases.md +1 -1
- package/docs/components/input/overview.md +1 -1
- package/docs/components/input/use-cases.md +3 -3
- package/docs/components/input-amount/overview.md +3 -3
- package/docs/components/input-amount/use-cases.md +8 -8
- package/docs/components/input-date/overview.md +3 -3
- package/docs/components/input-date/use-cases.md +8 -8
- package/docs/components/input-datepicker/api-table.md +1 -1
- package/docs/components/input-datepicker/overview.md +5 -5
- package/docs/components/input-datepicker/use-cases.md +5 -5
- package/docs/components/input-email/overview.md +2 -2
- package/docs/components/input-email/use-cases.md +3 -3
- package/docs/components/input-file/overview.md +1 -1
- package/docs/components/input-iban/overview.md +2 -2
- package/docs/components/input-iban/use-cases.md +8 -8
- package/docs/components/input-range/overview.md +2 -2
- package/docs/components/input-stepper/api-table.md +65 -69
- package/docs/components/input-stepper/overview.md +1 -1
- package/docs/components/input-tel/overview.md +1 -1
- package/docs/components/input-tel/use-cases.md +9 -9
- package/docs/components/input-tel-dropdown/api-table.md +70 -73
- package/docs/components/input-tel-dropdown/extensions.md +1 -1
- package/docs/components/input-tel-dropdown/overview.md +1 -1
- package/docs/components/input-tel-dropdown/use-cases.md +5 -5
- package/docs/components/listbox/api-table.md +64 -70
- package/docs/components/listbox/overview.md +5 -5
- package/docs/components/listbox/use-cases.md +61 -61
- package/docs/components/pagination/use-cases.md +5 -5
- package/docs/components/radio-group/api-table.md +49 -55
- package/docs/components/radio-group/overview.md +6 -6
- package/docs/components/radio-group/use-cases.md +18 -18
- package/docs/components/select/use-cases.md +2 -2
- package/docs/components/select-rich/api-table.md +79 -85
- package/docs/components/select-rich/overview.md +3 -3
- package/docs/components/select-rich/use-cases.md +33 -33
- package/docs/components/steps/overview.md +4 -4
- package/docs/components/steps/use-cases.md +7 -7
- package/docs/components/tabs/examples.md +1 -1
- package/docs/components/tabs/use-cases.md +1 -1
- package/docs/components/textarea/use-cases.md +3 -3
- package/docs/components/tooltip/api-table.md +3 -3
- package/docs/components/tooltip/use-cases.md +6 -6
- package/docs/fundamentals/index.md +4 -4
- package/docs/fundamentals/node-tools/providence-analytics/LocalConfiguration.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/QueryResult.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/analyzer.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/dashboard.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/overview.md +3 -3
- package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
- package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
- package/docs/fundamentals/rationales/accessibility.md +1 -1
- package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
- package/docs/fundamentals/systems/core/overview.md +1 -1
- package/docs/fundamentals/systems/form/formatting-and-parsing.md +8 -8
- package/docs/fundamentals/systems/form/model-value.md +1 -1
- package/docs/fundamentals/systems/form/overview.md +28 -28
- package/docs/fundamentals/systems/form/use-cases.md +19 -19
- package/docs/fundamentals/systems/form/validate.md +50 -50
- package/docs/fundamentals/systems/localize/api-table.md +10 -17
- package/docs/fundamentals/systems/localize/overview.md +4 -4
- package/docs/fundamentals/systems/localize/use-cases.md +4 -4
- package/docs/fundamentals/systems/overlays/_configuration-positioning.md +4 -4
- package/docs/fundamentals/systems/overlays/api-table.md +34 -90
- package/docs/fundamentals/systems/overlays/assets/umbrella-form.js +9 -9
- package/docs/fundamentals/systems/overlays/configuration.md +30 -30
- package/docs/fundamentals/systems/overlays/overview.md +6 -6
- package/docs/fundamentals/systems/overlays/use-cases.md +30 -30
- package/docs/fundamentals/tools/ajax/use-cases.md +20 -20
- package/docs/fundamentals/tools/helpers/action-logger.md +3 -3
- package/docs/fundamentals/tools/helpers/overview.md +1 -1
- package/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js +2 -2
- package/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js +2 -2
- package/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js +2 -2
- package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
- package/docs/guides/how-to/create-a-custom-field.md +7 -7
- package/docs/guides/how-to/create-a-form.md +4 -4
- package/docs/guides/how-to/extend-a-native-input.md +2 -2
- package/docs/guides/index.md +8 -8
- package/docs/guides/principles/index.md +5 -5
- package/docs/guides/principles/scoped-elements.md +1 -1
- package/docs/guides/principles/styling.md +1 -1
- package/package.json +1 -1
|
@@ -4,76 +4,70 @@
|
|
|
4
4
|
|
|
5
5
|
### Fields
|
|
6
6
|
|
|
7
|
-
| Name | Privacy | Type | Default
|
|
8
|
-
| ------------------------------ | --------- | ------------------------------------- |
|
|
9
|
-
| `_feedbackConditionMeta` | protected | |
|
|
10
|
-
| `_focusableNode` | protected | `HTMLElement` |
|
|
11
|
-
| `_inputNode` | protected | |
|
|
12
|
-
| `_listboxNode` | protected | |
|
|
13
|
-
| `_listboxActiveDescendantNode` | protected | `HTMLElement` |
|
|
14
|
-
| `_listboxSlot` | protected | `HTMLElement` |
|
|
15
|
-
| `_scrollTargetNode` | protected | `HTMLElement` |
|
|
16
|
-
| `_activeDescendantOwnerNode` | protected | `HTMLElement` |
|
|
17
|
-
| `activeIndex` | public | |
|
|
18
|
-
| `checkedIndex` | public | `number \| number[]` |
|
|
19
|
-
| `hasNoDefaultSelected` | public | `boolean` | `false`
|
|
20
|
-
| `orientation` | public | `string` | `'vertical'`
|
|
21
|
-
| `rotateKeyboardNavigation` | public | `boolean` | `false`
|
|
22
|
-
| `selectionFollowsFocus` | public | `boolean` | `false`
|
|
23
|
-
| `_noTypeAhead` | public | `boolean` | `false`
|
|
24
|
-
| `_typeAheadTimeout` | protected | `number` | `1000`
|
|
25
|
-
| `_listboxActiveDescendant` | protected | `number \| null` | `null`
|
|
26
|
-
| `_repropagationRole` | public | `'child'\|'choice-group'\|'fieldset'` | `'choice-group'`
|
|
27
|
-
| `_listboxReceivesNoFocus` | protected | `boolean` | `false`
|
|
28
|
-
| `_oldModelValue` | protected | `string \| string[] \| undefined` | `undefined`
|
|
29
|
-
| `label` | public | `string` | `''`
|
|
30
|
-
| `helpText` | public | `string` | `''`
|
|
31
|
-
| `fieldName` | public | `string` |
|
|
32
|
-
| `_labelNode` | protected | |
|
|
33
|
-
| `_helpTextNode` | protected | |
|
|
34
|
-
| `_feedbackNode` | protected | |
|
|
35
|
-
| `readOnly` | public | `boolean` | `false`
|
|
36
|
-
| `labelSrOnly` | public | `boolean` | `false`
|
|
37
|
-
| `_inputId` | protected | `string` |
|
|
38
|
-
| `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]`
|
|
39
|
-
| `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]`
|
|
40
|
-
| `_isRepropagationEndpoint` | public | `boolean` | `false`
|
|
41
|
-
| `modelValue` | public | |
|
|
42
|
-
| `serializedValue` | public | |
|
|
43
|
-
| `formattedValue` | public | |
|
|
44
|
-
| `operationMode` | public | `OperationMode` |
|
|
45
|
-
| `multipleChoice` | public | `boolean` | `false`
|
|
46
|
-
| `formElements` | public | `FormControlsCollection` | `new FormControlsCollection()`
|
|
47
|
-
| `_isFormOrFieldset` | protected | `boolean` | `false`
|
|
48
|
-
| `initComplete` | public | `Promise<any>` | `new Promise((resolve, reject) => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| `
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | ValidateMixin |
|
|
72
|
-
| `validators` | public | `Validator[]` | `[]` | Used by Application Developers to add Validators to a FormControl. | ValidateMixin |
|
|
73
|
-
| `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 |
|
|
74
|
-
| `_visibleMessagesAmount` | protected | `number` | `1` | The amount of feedback messages that will visible in LionValidationFeedback | ValidateMixin |
|
|
75
|
-
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | DisabledMixin |
|
|
76
|
-
| `disabled` | public | `boolean` | `false` | | DisabledMixin |
|
|
7
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
8
|
+
| ------------------------------ | --------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
|
|
9
|
+
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | ValidateMixin |
|
|
10
|
+
| `_focusableNode` | protected | `HTMLElement` | | The focusable element:
could be an input, textarea, select, button or any other element with tabindex > -1 | FocusMixin |
|
|
11
|
+
| `_inputNode` | protected | | | The interactive (form) element. Can be a native element like input/textarea/select or
an element with tabindex > -1 | FormControlMixin |
|
|
12
|
+
| `_listboxNode` | protected | | | | ListboxMixin |
|
|
13
|
+
| `_listboxActiveDescendantNode` | protected | `HTMLElement` | | | ListboxMixin |
|
|
14
|
+
| `_listboxSlot` | protected | `HTMLElement` | | | ListboxMixin |
|
|
15
|
+
| `_scrollTargetNode` | protected | `HTMLElement` | | | ListboxMixin |
|
|
16
|
+
| `_activeDescendantOwnerNode` | protected | `HTMLElement` | | | ListboxMixin |
|
|
17
|
+
| `activeIndex` | public | | | | ListboxMixin |
|
|
18
|
+
| `checkedIndex` | public | `number \| number[]` | | | ListboxMixin |
|
|
19
|
+
| `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 |
|
|
20
|
+
| `orientation` | public | `string` | `'vertical'` | Informs screen reader and affects keyboard navigation.
By default 'vertical' | ListboxMixin |
|
|
21
|
+
| `rotateKeyboardNavigation` | public | `boolean` | `false` | Will give first option active state when navigated to the next option from
last option. | ListboxMixin |
|
|
22
|
+
| `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 |
|
|
23
|
+
| `_noTypeAhead` | public | `boolean` | `false` | When false, a user can type on which the focus will jump to the matching option | ListboxMixin |
|
|
24
|
+
| `_typeAheadTimeout` | protected | `number` | `1000` | The pending char sequence that will set active list item | ListboxMixin |
|
|
25
|
+
| `_listboxActiveDescendant` | protected | `number \| null` | `null` | | ListboxMixin |
|
|
26
|
+
| `_repropagationRole` | public | `'child'\|'choice-group'\|'fieldset'` | `'choice-group'` | Based on the role, details of handling model-value-changed repropagation differ. | FormControlMixin |
|
|
27
|
+
| `_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 |
|
|
28
|
+
| `_oldModelValue` | protected | `string \| string[] \| undefined` | `undefined` | | ListboxMixin |
|
|
29
|
+
| `label` | public | `string` | `''` | The label text for the input node.
When no value is defined, textContent of \[slot=label] will be used | FormControlMixin |
|
|
30
|
+
| `helpText` | public | `string` | `''` | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used | FormControlMixin |
|
|
31
|
+
| `fieldName` | public | `string` | | Will be used in validation messages to refer to the current field | FormControlMixin |
|
|
32
|
+
| `_labelNode` | protected | | | Element where label will be rendered to | FormControlMixin |
|
|
33
|
+
| `_helpTextNode` | protected | | | Element where help text will be rendered to | FormControlMixin |
|
|
34
|
+
| `_feedbackNode` | protected | | | Element where validation feedback will be rendered to | FormControlMixin |
|
|
35
|
+
| `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 |
|
|
36
|
+
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | FormControlMixin |
|
|
37
|
+
| `_inputId` | protected | `string` | | Unique id that can be used in all light dom | FormControlMixin |
|
|
38
|
+
| `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\` | FormControlMixin |
|
|
39
|
+
| `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-describedby of \`.\_inputNode\` | FormControlMixin |
|
|
40
|
+
| `_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 |
|
|
41
|
+
| `modelValue` | public | | | | FormControlMixin |
|
|
42
|
+
| `serializedValue` | public | | | | ChoiceGroupMixin |
|
|
43
|
+
| `formattedValue` | public | | | | ChoiceGroupMixin |
|
|
44
|
+
| `operationMode` | public | `OperationMode` | | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload') | ValidateMixin |
|
|
45
|
+
| `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 |
|
|
46
|
+
| `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 |
|
|
47
|
+
| `_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 |
|
|
48
|
+
| `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 |
|
|
49
|
+
| `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 |
|
|
50
|
+
| `done` | public | `boolean` | `false` | | FormRegistrarMixin |
|
|
51
|
+
| `focused` | public | `boolean` | `false` | Whether the focusable element within (\`.\_focusableNode\`) is focused.
Reflects to attribute '\[focused]' as a styling hook | FocusMixin |
|
|
52
|
+
| `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 |
|
|
53
|
+
| `autofocus` | public | `boolean` | `false` | | FocusMixin |
|
|
54
|
+
| `touched` | public | `boolean` | `false` | True when user has focused and left(blurred) the field. | InteractionStateMixin |
|
|
55
|
+
| `dirty` | public | `boolean` | `false` | True when user has changed the value of the field. | InteractionStateMixin |
|
|
56
|
+
| `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 |
|
|
57
|
+
| `filled` | public | `boolean` | `false` | True when the modelValue is non-empty (see \_isEmpty in FormControlMixin) | InteractionStateMixin |
|
|
58
|
+
| `_leaveEvent` | protected | `string` | `'blur'` | The event that triggers the touched state | InteractionStateMixin |
|
|
59
|
+
| `_valueChangedEvent` | protected | `string` | `'model-value-changed'` | The event that triggers the dirty state | InteractionStateMixin |
|
|
60
|
+
| `submitted` | public | | | | InteractionStateMixin |
|
|
61
|
+
| `_allValidators` | protected | `Validator[]` | | Combination of validators provided by Application Developer and the default validators | ValidateMixin |
|
|
62
|
+
| `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 |
|
|
63
|
+
| `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 |
|
|
64
|
+
| `validationStates` | public | `ValidationStates` | `{}` | The outcome of a validation 'round'. Keyed by ValidationType and Validator name | ValidateMixin |
|
|
65
|
+
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | ValidateMixin |
|
|
66
|
+
| `validators` | public | `Validator[]` | `[]` | Used by Application Developers to add Validators to a FormControl. | ValidateMixin |
|
|
67
|
+
| `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 |
|
|
68
|
+
| `_visibleMessagesAmount` | protected | `number` | `1` | The amount of feedback messages that will visible in LionValidationFeedback | ValidateMixin |
|
|
69
|
+
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | DisabledMixin |
|
|
70
|
+
| `disabled` | public | `boolean` | `false` | | DisabledMixin |
|
|
77
71
|
|
|
78
72
|
### Methods
|
|
79
73
|
|
|
@@ -15,11 +15,11 @@ import '@lion/ui/define/lion-option.js';
|
|
|
15
15
|
```js preview-story
|
|
16
16
|
export const main = () => html`
|
|
17
17
|
<lion-listbox name="listbox" label="Default">
|
|
18
|
-
<lion-option .choiceValue
|
|
19
|
-
<lion-option checked .choiceValue
|
|
20
|
-
<lion-option .choiceValue
|
|
21
|
-
<lion-option .choiceValue
|
|
22
|
-
<lion-option .choiceValue
|
|
18
|
+
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
|
|
19
|
+
<lion-option checked .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
|
20
|
+
<lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
|
|
21
|
+
<lion-option .choiceValue="${'Banana'}">Banana</lion-option>
|
|
22
|
+
<lion-option .choiceValue="${'Beets'}">Beets</lion-option>
|
|
23
23
|
</lion-listbox>
|
|
24
24
|
`;
|
|
25
25
|
```
|
|
@@ -21,16 +21,16 @@ This will:
|
|
|
21
21
|
|
|
22
22
|
```html preview-story
|
|
23
23
|
<lion-listbox name="combo" label="Multiple" multiple-choice>
|
|
24
|
-
<lion-option .choiceValue
|
|
25
|
-
<lion-option .choiceValue
|
|
26
|
-
<lion-option .choiceValue
|
|
27
|
-
<lion-option .choiceValue
|
|
28
|
-
<lion-option .choiceValue
|
|
29
|
-
<lion-option .choiceValue
|
|
30
|
-
<lion-option .choiceValue
|
|
31
|
-
<lion-option .choiceValue
|
|
32
|
-
<lion-option .choiceValue
|
|
33
|
-
<lion-option .choiceValue
|
|
24
|
+
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
|
|
25
|
+
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
|
26
|
+
<lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
|
|
27
|
+
<lion-option .choiceValue="${'Banana'}">Banana</lion-option>
|
|
28
|
+
<lion-option .choiceValue="${'Beets'}">Beets</lion-option>
|
|
29
|
+
<lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
|
|
30
|
+
<lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
|
|
31
|
+
<lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
|
|
32
|
+
<lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
|
|
33
|
+
<lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
|
|
34
34
|
</lion-listbox>
|
|
35
35
|
```
|
|
36
36
|
|
|
@@ -42,16 +42,16 @@ By default, `orientation="vertical"` is set, which enables up and down arrow key
|
|
|
42
42
|
|
|
43
43
|
```html preview-story
|
|
44
44
|
<lion-listbox name="combo" label="Orientation horizontal" orientation="horizontal">
|
|
45
|
-
<lion-option .choiceValue
|
|
46
|
-
<lion-option .choiceValue
|
|
47
|
-
<lion-option .choiceValue
|
|
48
|
-
<lion-option .choiceValue
|
|
49
|
-
<lion-option .choiceValue
|
|
50
|
-
<lion-option .choiceValue
|
|
51
|
-
<lion-option .choiceValue
|
|
52
|
-
<lion-option .choiceValue
|
|
53
|
-
<lion-option .choiceValue
|
|
54
|
-
<lion-option .choiceValue
|
|
45
|
+
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
|
|
46
|
+
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
|
47
|
+
<lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
|
|
48
|
+
<lion-option .choiceValue="${'Banana'}">Banana</lion-option>
|
|
49
|
+
<lion-option .choiceValue="${'Beets'}">Beets</lion-option>
|
|
50
|
+
<lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
|
|
51
|
+
<lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
|
|
52
|
+
<lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
|
|
53
|
+
<lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
|
|
54
|
+
<lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
|
|
55
55
|
</lion-listbox>
|
|
56
56
|
```
|
|
57
57
|
|
|
@@ -64,16 +64,16 @@ With `multiple-choice` flag configured, multiple options can be checked.
|
|
|
64
64
|
orientation="horizontal"
|
|
65
65
|
multiple-choice
|
|
66
66
|
>
|
|
67
|
-
<lion-option .choiceValue
|
|
68
|
-
<lion-option .choiceValue
|
|
69
|
-
<lion-option .choiceValue
|
|
70
|
-
<lion-option .choiceValue
|
|
71
|
-
<lion-option .choiceValue
|
|
72
|
-
<lion-option .choiceValue
|
|
73
|
-
<lion-option .choiceValue
|
|
74
|
-
<lion-option .choiceValue
|
|
75
|
-
<lion-option .choiceValue
|
|
76
|
-
<lion-option .choiceValue
|
|
67
|
+
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
|
|
68
|
+
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
|
69
|
+
<lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
|
|
70
|
+
<lion-option .choiceValue="${'Banana'}">Banana</lion-option>
|
|
71
|
+
<lion-option .choiceValue="${'Beets'}">Beets</lion-option>
|
|
72
|
+
<lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
|
|
73
|
+
<lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
|
|
74
|
+
<lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
|
|
75
|
+
<lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
|
|
76
|
+
<lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
|
|
77
77
|
</lion-listbox>
|
|
78
78
|
```
|
|
79
79
|
|
|
@@ -86,16 +86,16 @@ See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_foll
|
|
|
86
86
|
|
|
87
87
|
```html preview-story
|
|
88
88
|
<lion-listbox name="combo" label="Selection follows focus" selection-follows-focus>
|
|
89
|
-
<lion-option .choiceValue
|
|
90
|
-
<lion-option .choiceValue
|
|
91
|
-
<lion-option .choiceValue
|
|
92
|
-
<lion-option .choiceValue
|
|
93
|
-
<lion-option .choiceValue
|
|
94
|
-
<lion-option .choiceValue
|
|
95
|
-
<lion-option .choiceValue
|
|
96
|
-
<lion-option .choiceValue
|
|
97
|
-
<lion-option .choiceValue
|
|
98
|
-
<lion-option .choiceValue
|
|
89
|
+
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
|
|
90
|
+
<lion-option .choiceValue="${'Artichoke'}" disabled>Artichoke</lion-option>
|
|
91
|
+
<lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
|
|
92
|
+
<lion-option .choiceValue="${'Banana'}">Banana</lion-option>
|
|
93
|
+
<lion-option .choiceValue="${'Beets'}">Beets</lion-option>
|
|
94
|
+
<lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
|
|
95
|
+
<lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
|
|
96
|
+
<lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
|
|
97
|
+
<lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
|
|
98
|
+
<lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
|
|
99
99
|
</lion-listbox>
|
|
100
100
|
```
|
|
101
101
|
|
|
@@ -105,16 +105,16 @@ See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_foll
|
|
|
105
105
|
|
|
106
106
|
```html preview-story
|
|
107
107
|
<lion-listbox name="combo" label="Rotate keyboard navigation" rotate-keyboard-navigation>
|
|
108
|
-
<lion-option .choiceValue
|
|
109
|
-
<lion-option .choiceValue
|
|
110
|
-
<lion-option .choiceValue
|
|
111
|
-
<lion-option .choiceValue
|
|
112
|
-
<lion-option .choiceValue
|
|
113
|
-
<lion-option .choiceValue
|
|
114
|
-
<lion-option .choiceValue
|
|
115
|
-
<lion-option .choiceValue
|
|
116
|
-
<lion-option .choiceValue
|
|
117
|
-
<lion-option .choiceValue
|
|
108
|
+
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
|
|
109
|
+
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
|
|
110
|
+
<lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
|
|
111
|
+
<lion-option .choiceValue="${'Banana'}">Banana</lion-option>
|
|
112
|
+
<lion-option .choiceValue="${'Beets'}">Beets</lion-option>
|
|
113
|
+
<lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
|
|
114
|
+
<lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
|
|
115
|
+
<lion-option .choiceValue="${'Brussels sprout'}">Brussels sprout</lion-option>
|
|
116
|
+
<lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
|
|
117
|
+
<lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
|
|
118
118
|
</lion-listbox>
|
|
119
119
|
```
|
|
120
120
|
|
|
@@ -124,19 +124,19 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
|
|
|
124
124
|
|
|
125
125
|
```html preview-story
|
|
126
126
|
<lion-listbox name="combo" label="Rotate with disabled options" rotate-keyboard-navigation>
|
|
127
|
-
<lion-option .choiceValue
|
|
128
|
-
<lion-option .choiceValue
|
|
129
|
-
<lion-option .choiceValue
|
|
130
|
-
<lion-option .choiceValue
|
|
131
|
-
<lion-option .choiceValue
|
|
132
|
-
<lion-option .choiceValue
|
|
133
|
-
<lion-option .choiceValue
|
|
134
|
-
<lion-option .choiceValue
|
|
135
|
-
<lion-option .choiceValue
|
|
136
|
-
<lion-option .choiceValue
|
|
127
|
+
<lion-option .choiceValue="${'Apple'}">Apple</lion-option>
|
|
128
|
+
<lion-option .choiceValue="${'Artichoke'}" disabled>Artichoke</lion-option>
|
|
129
|
+
<lion-option .choiceValue="${'Asparagus'}">Asparagus</lion-option>
|
|
130
|
+
<lion-option .choiceValue="${'Banana'}">Banana</lion-option>
|
|
131
|
+
<lion-option .choiceValue="${'Beets'}">Beets</lion-option>
|
|
132
|
+
<lion-option .choiceValue="${'Bell pepper'}">Bell pepper</lion-option>
|
|
133
|
+
<lion-option .choiceValue="${'Broccoli'}">Broccoli</lion-option>
|
|
134
|
+
<lion-option .choiceValue="${'Brussels sprout'}" disabled>Brussels sprout</lion-option>
|
|
135
|
+
<lion-option .choiceValue="${'Cabbage'}">Cabbage</lion-option>
|
|
136
|
+
<lion-option .choiceValue="${'Carrot'}">Carrot</lion-option>
|
|
137
137
|
</lion-listbox>
|
|
138
138
|
```
|
|
139
139
|
|
|
140
140
|
## Validation
|
|
141
141
|
|
|
142
|
-
A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/
|
|
142
|
+
A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/form/validate.md).
|
|
@@ -52,17 +52,17 @@ export const methods = ({ shadowRoot }) => {
|
|
|
52
52
|
}}
|
|
53
53
|
></lion-pagination>
|
|
54
54
|
<section style="margin-top:16px">
|
|
55
|
-
<button @click
|
|
55
|
+
<button @click="${() => shadowRoot.getElementById('pagination-method').previous()}">
|
|
56
56
|
Previous
|
|
57
57
|
</button>
|
|
58
|
-
<button @click
|
|
58
|
+
<button @click="${() => shadowRoot.getElementById('pagination-method').next()}">Next</button>
|
|
59
59
|
<br />
|
|
60
60
|
<br />
|
|
61
|
-
<button @click
|
|
62
|
-
<button @click
|
|
61
|
+
<button @click="${() => shadowRoot.getElementById('pagination-method').first()}">First</button>
|
|
62
|
+
<button @click="${() => shadowRoot.getElementById('pagination-method').last()}">Last</button>
|
|
63
63
|
<br />
|
|
64
64
|
<br />
|
|
65
|
-
<button @click
|
|
65
|
+
<button @click="${() => shadowRoot.getElementById('pagination-method').goto(55)}">
|
|
66
66
|
Go to 55
|
|
67
67
|
</button>
|
|
68
68
|
</section>
|