@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
|
@@ -49,90 +49,84 @@
|
|
|
49
49
|
|
|
50
50
|
### Fields
|
|
51
51
|
|
|
52
|
-
| Name | Privacy | Type | Default
|
|
53
|
-
| ------------------------------ | --------- | ------------------------------------- |
|
|
54
|
-
| `slots` | public | `SlotsMap` |
|
|
55
|
-
| `_invokerNode` | protected | `LionSelectInvoker` |
|
|
56
|
-
| `_focusableNode` | protected | `HTMLElement` |
|
|
57
|
-
| `_scrollTargetNode` | protected | `HTMLElement` |
|
|
58
|
-
| `_overlayInvokerNode` | protected | |
|
|
59
|
-
| `_overlayContentNode` | protected | |
|
|
60
|
-
| `navigateWithinInvoker` | public | `Boolean` | `false`
|
|
61
|
-
| `interactionMode` | public | `'windows/linux'\|'mac'\|'auto'` | `'auto'`
|
|
62
|
-
| `singleOption` | public | `boolean` | `false`
|
|
63
|
-
| `_arrowWidth` | protected | `number` | `28`
|
|
64
|
-
| `config` | public | `Partial<OverlayConfig>` | `{}`
|
|
65
|
-
| `_overlayReferenceNode` | protected | |
|
|
66
|
-
| `_overlayBackdropNode` | protected | |
|
|
67
|
-
| `_overlayContentWrapperNode` | protected | |
|
|
68
|
-
| `opened` | public | `boolean` | `false`
|
|
69
|
-
| `_inputNode` | protected | |
|
|
70
|
-
| `_listboxNode` | protected | |
|
|
71
|
-
| `_listboxActiveDescendantNode` | protected | `HTMLElement` |
|
|
72
|
-
| `_listboxSlot` | protected | `HTMLElement` |
|
|
73
|
-
| `_activeDescendantOwnerNode` | protected | `HTMLElement` |
|
|
74
|
-
| `activeIndex` | public | |
|
|
75
|
-
| `checkedIndex` | public | `number \| number[]` |
|
|
76
|
-
| `hasNoDefaultSelected` | public | `boolean` | `false`
|
|
77
|
-
| `orientation` | public | `string` | `'vertical'`
|
|
78
|
-
| `rotateKeyboardNavigation` | public | `boolean` | `false`
|
|
79
|
-
| `selectionFollowsFocus` | public | `boolean` | `false`
|
|
80
|
-
| `_noTypeAhead` | public | `boolean` | `false`
|
|
81
|
-
| `_typeAheadTimeout` | protected | `number` | `1000`
|
|
82
|
-
| `_listboxActiveDescendant` | protected | `number \| null` | `null`
|
|
83
|
-
| `_repropagationRole` | public | `'child'\|'choice-group'\|'fieldset'` | `'choice-group'`
|
|
84
|
-
| `_listboxReceivesNoFocus` | protected | `boolean` | `false`
|
|
85
|
-
| `_oldModelValue` | protected | `string \| string[] \| undefined` | `undefined`
|
|
86
|
-
| `label` | public | `string` | `''`
|
|
87
|
-
| `helpText` | public | `string` | `''`
|
|
88
|
-
| `fieldName` | public | `string` |
|
|
89
|
-
| `_labelNode` | protected | |
|
|
90
|
-
| `_helpTextNode` | protected | |
|
|
91
|
-
| `_feedbackNode` | protected | |
|
|
92
|
-
| `readOnly` | public | `boolean` | `false`
|
|
93
|
-
| `labelSrOnly` | public | `boolean` | `false`
|
|
94
|
-
| `_inputId` | protected | `string` |
|
|
95
|
-
| `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]`
|
|
96
|
-
| `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]`
|
|
97
|
-
| `_isRepropagationEndpoint` | public | `boolean` | `false`
|
|
98
|
-
| `modelValue` | public | |
|
|
99
|
-
| `serializedValue` | public | |
|
|
100
|
-
| `formattedValue` | public | |
|
|
101
|
-
| `operationMode` | public | `OperationMode` |
|
|
102
|
-
| `multipleChoice` | public | `boolean` | `false`
|
|
103
|
-
| `formElements` | public | `FormControlsCollection` | `new FormControlsCollection()`
|
|
104
|
-
| `_isFormOrFieldset` | protected | `boolean` | `false`
|
|
105
|
-
| `initComplete` | public | `Promise<any>` | `new Promise((resolve, reject) => {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
| `
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
| `
|
|
114
|
-
| `
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
124
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
| `validators` | public | `Validator[]` | `[]` | Used by Application Developers to add Validators to a FormControl. | LionListbox |
|
|
131
|
-
| `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 |
|
|
132
|
-
| `_visibleMessagesAmount` | protected | `number` | `1` | The amount of feedback messages that will visible in LionValidationFeedback | LionListbox |
|
|
133
|
-
| `__SyncUpdatableNamespace` | protected | `SyncUpdatableNamespace` | `{}` | Namespace for this mixin that guarantees naming clashes will not occur... | LionListbox |
|
|
134
|
-
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionListbox |
|
|
135
|
-
| `disabled` | public | `boolean` | `false` | | LionListbox |
|
|
52
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
53
|
+
| ------------------------------ | --------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
54
|
+
| `slots` | public | `SlotsMap` | | Adds ".\_feedbackNode" as described below | LionListbox |
|
|
55
|
+
| `_invokerNode` | protected | `LionSelectInvoker` | | | |
|
|
56
|
+
| `_focusableNode` | protected | `HTMLElement` | | The focusable element:
could be an input, textarea, select, button or any other element with tabindex > -1 | LionListbox |
|
|
57
|
+
| `_scrollTargetNode` | protected | `HTMLElement` | | | LionListbox |
|
|
58
|
+
| `_overlayInvokerNode` | protected | | | | OverlayMixin |
|
|
59
|
+
| `_overlayContentNode` | protected | | | | OverlayMixin |
|
|
60
|
+
| `navigateWithinInvoker` | public | `Boolean` | `false` | When invoker has focus, up and down arrow keys changes active state of listbox,
without opening overlay. | |
|
|
61
|
+
| `interactionMode` | public | `'windows/linux'\|'mac'\|'auto'` | `'auto'` | Aligns behavior for 'selectionFollowFocus' and 'navigateWithinInvoker' with
platform. When 'auto' (default), platform is automatically detected | |
|
|
62
|
+
| `singleOption` | public | `boolean` | `false` | | |
|
|
63
|
+
| `_arrowWidth` | protected | `number` | `28` | | |
|
|
64
|
+
| `config` | public | `Partial<OverlayConfig>` | `{}` | Configure the many options of the \`OverlayController\` | OverlayMixin |
|
|
65
|
+
| `_overlayReferenceNode` | protected | | | | OverlayMixin |
|
|
66
|
+
| `_overlayBackdropNode` | protected | | | | OverlayMixin |
|
|
67
|
+
| `_overlayContentWrapperNode` | protected | | | | OverlayMixin |
|
|
68
|
+
| `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 |
|
|
69
|
+
| `_inputNode` | protected | | | The interactive (form) element. Can be a native element like input/textarea/select or
an element with tabindex > -1 | LionListbox |
|
|
70
|
+
| `_listboxNode` | protected | | | | LionListbox |
|
|
71
|
+
| `_listboxActiveDescendantNode` | protected | `HTMLElement` | | | LionListbox |
|
|
72
|
+
| `_listboxSlot` | protected | `HTMLElement` | | | LionListbox |
|
|
73
|
+
| `_activeDescendantOwnerNode` | protected | `HTMLElement` | | | LionListbox |
|
|
74
|
+
| `activeIndex` | public | | | | LionListbox |
|
|
75
|
+
| `checkedIndex` | public | `number \| number[]` | | | LionListbox |
|
|
76
|
+
| `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 |
|
|
77
|
+
| `orientation` | public | `string` | `'vertical'` | Informs screen reader and affects keyboard navigation.
By default 'vertical' | LionListbox |
|
|
78
|
+
| `rotateKeyboardNavigation` | public | `boolean` | `false` | Will give first option active state when navigated to the next option from
last option. | LionListbox |
|
|
79
|
+
| `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 |
|
|
80
|
+
| `_noTypeAhead` | public | `boolean` | `false` | When false, a user can type on which the focus will jump to the matching option | LionListbox |
|
|
81
|
+
| `_typeAheadTimeout` | protected | `number` | `1000` | The pending char sequence that will set active list item | LionListbox |
|
|
82
|
+
| `_listboxActiveDescendant` | protected | `number \| null` | `null` | | LionListbox |
|
|
83
|
+
| `_repropagationRole` | public | `'child'\|'choice-group'\|'fieldset'` | `'choice-group'` | Based on the role, details of handling model-value-changed repropagation differ. | LionListbox |
|
|
84
|
+
| `_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) | LionListbox |
|
|
85
|
+
| `_oldModelValue` | protected | `string \| string[] \| undefined` | `undefined` | | LionListbox |
|
|
86
|
+
| `label` | public | `string` | `''` | The label text for the input node.
When no value is defined, textContent of \[slot=label] will be used | LionListbox |
|
|
87
|
+
| `helpText` | public | `string` | `''` | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used | LionListbox |
|
|
88
|
+
| `fieldName` | public | `string` | | Will be used in validation messages to refer to the current field | LionListbox |
|
|
89
|
+
| `_labelNode` | protected | | | Element where label will be rendered to | LionListbox |
|
|
90
|
+
| `_helpTextNode` | protected | | | Element where help text will be rendered to | LionListbox |
|
|
91
|
+
| `_feedbackNode` | protected | | | Element where validation feedback will be rendered to | LionListbox |
|
|
92
|
+
| `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 |
|
|
93
|
+
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionListbox |
|
|
94
|
+
| `_inputId` | protected | `string` | | Unique id that can be used in all light dom | LionListbox |
|
|
95
|
+
| `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\` | LionListbox |
|
|
96
|
+
| `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-describedby of \`.\_inputNode\` | LionListbox |
|
|
97
|
+
| `_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 |
|
|
98
|
+
| `modelValue` | public | | | | LionListbox |
|
|
99
|
+
| `serializedValue` | public | | | | LionListbox |
|
|
100
|
+
| `formattedValue` | public | | | | LionListbox |
|
|
101
|
+
| `operationMode` | public | `OperationMode` | | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload') | LionListbox |
|
|
102
|
+
| `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 |
|
|
103
|
+
| `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 |
|
|
104
|
+
| `_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 |
|
|
105
|
+
| `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 |
|
|
106
|
+
| `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 |
|
|
107
|
+
| `done` | public | `boolean` | `false` | | LionListbox |
|
|
108
|
+
| `focused` | public | `boolean` | `false` | Whether the focusable element within (\`.\_focusableNode\`) is focused.
Reflects to attribute '\[focused]' as a styling hook | LionListbox |
|
|
109
|
+
| `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 |
|
|
110
|
+
| `autofocus` | public | `boolean` | `false` | | LionListbox |
|
|
111
|
+
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionListbox |
|
|
112
|
+
| `touched` | public | `boolean` | `false` | True when user has focused and left(blurred) the field. | LionListbox |
|
|
113
|
+
| `dirty` | public | `boolean` | `false` | True when user has changed the value of the field. | LionListbox |
|
|
114
|
+
| `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 |
|
|
115
|
+
| `filled` | public | `boolean` | `false` | True when the modelValue is non-empty (see \_isEmpty in FormControlMixin) | LionListbox |
|
|
116
|
+
| `_leaveEvent` | protected | `string` | `'blur'` | The event that triggers the touched state | LionListbox |
|
|
117
|
+
| `_valueChangedEvent` | protected | `string` | `'model-value-changed'` | The event that triggers the dirty state | LionListbox |
|
|
118
|
+
| `submitted` | public | | | | LionListbox |
|
|
119
|
+
| `_allValidators` | protected | `Validator[]` | | Combination of validators provided by Application Developer and the default validators | LionListbox |
|
|
120
|
+
| `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 |
|
|
121
|
+
| `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 |
|
|
122
|
+
| `validationStates` | public | `ValidationStates` | `{}` | The outcome of a validation 'round'. Keyed by ValidationType and Validator name | LionListbox |
|
|
123
|
+
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionListbox |
|
|
124
|
+
| `validators` | public | `Validator[]` | `[]` | Used by Application Developers to add Validators to a FormControl. | LionListbox |
|
|
125
|
+
| `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 |
|
|
126
|
+
| `_visibleMessagesAmount` | protected | `number` | `1` | The amount of feedback messages that will visible in LionValidationFeedback | LionListbox |
|
|
127
|
+
| `__SyncUpdatableNamespace` | protected | `SyncUpdatableNamespace` | `{}` | Namespace for this mixin that guarantees naming clashes will not occur... | LionListbox |
|
|
128
|
+
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionListbox |
|
|
129
|
+
| `disabled` | public | `boolean` | `false` | | LionListbox |
|
|
136
130
|
|
|
137
131
|
### Methods
|
|
138
132
|
|
|
@@ -243,7 +237,7 @@
|
|
|
243
237
|
| Name | Type | Description | Inherited From |
|
|
244
238
|
| ------------------------------ | ------------- | -------------------------------------------------------- | -------------- |
|
|
245
239
|
| `blur` | `Event` | | LionListbox |
|
|
246
|
-
| `opened-changed` | `
|
|
240
|
+
| `opened-changed` | `CustomEvent` | | OverlayMixin |
|
|
247
241
|
| `model-value-changed` | `CustomEvent` | | LionListbox |
|
|
248
242
|
| `form-element-name-changed` | `CustomEvent` | | LionListbox |
|
|
249
243
|
| `focus` | `Event` | | LionListbox |
|
|
@@ -14,9 +14,9 @@ import '@lion/ui/define/lion-option.js';
|
|
|
14
14
|
|
|
15
15
|
```html preview-story
|
|
16
16
|
<lion-select-rich name="favoriteColor" label="Favorite color">
|
|
17
|
-
<lion-option .choiceValue
|
|
18
|
-
<lion-option .choiceValue
|
|
19
|
-
<lion-option .choiceValue
|
|
17
|
+
<lion-option .choiceValue="${'red'}">Red</lion-option>
|
|
18
|
+
<lion-option .choiceValue="${'hotpink'}">Hotpink</lion-option>
|
|
19
|
+
<lion-option .choiceValue="${'blue'}">Blue</lion-option>
|
|
20
20
|
</lion-select-rich>
|
|
21
21
|
```
|
|
22
22
|
|
|
@@ -67,7 +67,7 @@ export const manyOptionsWithScrolling = () => {
|
|
|
67
67
|
<lion-option .modelValue="${modelValues[3]}">
|
|
68
68
|
<p style="color: green;">I am green</p>
|
|
69
69
|
</lion-option>
|
|
70
|
-
<lion-option .modelValue"
|
|
70
|
+
<lion-option .modelValue"="${modelValues[4]}"">
|
|
71
71
|
<p style="color: blue;">I am blue</p>
|
|
72
72
|
</lion-option>
|
|
73
73
|
</lion-select-rich>
|
|
@@ -84,9 +84,9 @@ The readonly attribute is delegated to the invoker for disabling opening the ove
|
|
|
84
84
|
|
|
85
85
|
```html preview-story
|
|
86
86
|
<lion-select-rich label="Read-only select" readonly name="color">
|
|
87
|
-
<lion-option .choiceValue
|
|
88
|
-
<lion-option .choiceValue
|
|
89
|
-
<lion-option .choiceValue
|
|
87
|
+
<lion-option .choiceValue="${'red'}">Red</lion-option>
|
|
88
|
+
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
|
|
89
|
+
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
|
|
90
90
|
</lion-select-rich>
|
|
91
91
|
```
|
|
92
92
|
|
|
@@ -98,19 +98,19 @@ If you disable the entire select, the disabled attribute is also delegated to th
|
|
|
98
98
|
|
|
99
99
|
```html preview-story
|
|
100
100
|
<lion-select-rich label="Disabled select" disabled name="color">
|
|
101
|
-
<lion-option .choiceValue
|
|
102
|
-
<lion-option .choiceValue
|
|
103
|
-
<lion-option .choiceValue
|
|
101
|
+
<lion-option .choiceValue="${'red'}">Red</lion-option>
|
|
102
|
+
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
|
|
103
|
+
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
|
|
104
104
|
</lion-select-rich>
|
|
105
105
|
```
|
|
106
106
|
|
|
107
107
|
```html preview-story
|
|
108
108
|
<lion-select-rich label="Disabled options" name="color">
|
|
109
|
-
<lion-option .choiceValue
|
|
110
|
-
<lion-option .choiceValue
|
|
111
|
-
<lion-option .choiceValue
|
|
112
|
-
<lion-option .choiceValue
|
|
113
|
-
<lion-option .choiceValue
|
|
109
|
+
<lion-option .choiceValue="${'red'}" disabled>Red</lion-option>
|
|
110
|
+
<lion-option .choiceValue="${'blue'}">Blue</lion-option>
|
|
111
|
+
<lion-option .choiceValue="${'hotpink'}" disabled>Hotpink</lion-option>
|
|
112
|
+
<lion-option .choiceValue="${'green'}">Green</lion-option>
|
|
113
|
+
<lion-option .choiceValue="${'teal'}" disabled>Teal</lion-option>
|
|
114
114
|
</lion-select-rich>
|
|
115
115
|
```
|
|
116
116
|
|
|
@@ -134,8 +134,8 @@ export const renderOptions = ({ shadowRoot }) => {
|
|
|
134
134
|
);
|
|
135
135
|
}
|
|
136
136
|
return html`
|
|
137
|
-
<lion-select-rich label="Credit Card" name="color" @model-value-changed
|
|
138
|
-
${objs.map(obj => html` <lion-option .choiceValue
|
|
137
|
+
<lion-select-rich label="Credit Card" name="color" @model-value-changed="${showOutput}">
|
|
138
|
+
${objs.map(obj => html` <lion-option .choiceValue="${obj}">${obj.label}</lion-option> `)}
|
|
139
139
|
</lion-select-rich>
|
|
140
140
|
<p>Full value:</p>
|
|
141
141
|
<pre id="demoRenderOutput"></pre>
|
|
@@ -152,14 +152,14 @@ This changes the keyboard interaction.
|
|
|
152
152
|
|
|
153
153
|
```html preview-story
|
|
154
154
|
<lion-select-rich label="Mac mode" name="color" interaction-mode="mac">
|
|
155
|
-
<lion-option .choiceValue
|
|
156
|
-
<lion-option .choiceValue
|
|
157
|
-
<lion-option .choiceValue
|
|
155
|
+
<lion-option .choiceValue="${'red'}">Red</lion-option>
|
|
156
|
+
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
|
|
157
|
+
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
|
|
158
158
|
</lion-select-rich>
|
|
159
159
|
<lion-select-rich label="Windows/Linux mode" name="color" interaction-mode="windows/linux">
|
|
160
|
-
<lion-option .choiceValue
|
|
161
|
-
<lion-option .choiceValue
|
|
162
|
-
<lion-option .choiceValue
|
|
160
|
+
<lion-option .choiceValue="${'red'}">Red</lion-option>
|
|
161
|
+
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
|
|
162
|
+
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
|
|
163
163
|
</lion-select-rich>
|
|
164
164
|
```
|
|
165
165
|
|
|
@@ -199,9 +199,9 @@ export const checkedIndexAndValue = ({ shadowRoot }) => html`
|
|
|
199
199
|
Console log checked index and value
|
|
200
200
|
</button>
|
|
201
201
|
<lion-select-rich id="checkedRichSelect" name="favoriteColor" label="Favorite color">
|
|
202
|
-
<lion-option .choiceValue
|
|
203
|
-
<lion-option .choiceValue
|
|
204
|
-
<lion-option .choiceValue
|
|
202
|
+
<lion-option .choiceValue="${'red'}">Red</lion-option>
|
|
203
|
+
<lion-option .choiceValue="${'hotpink'}" checked>Hotpink</lion-option>
|
|
204
|
+
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
|
|
205
205
|
</lion-select-rich>
|
|
206
206
|
`;
|
|
207
207
|
```
|
|
@@ -222,11 +222,11 @@ Often, you may want a placeholder that appears initially, but cannot be selected
|
|
|
222
222
|
For this you can use `has-no-default-selected` attribute.
|
|
223
223
|
|
|
224
224
|
```html preview-story
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
225
|
+
<lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
|
|
226
|
+
<lion-option .choiceValue="${'red'}">Red</lion-option>
|
|
227
|
+
<lion-option .choiceValue="${'hotpink'}">Hotpink</lion-option>
|
|
228
|
+
<lion-option .choiceValue="${'teal'}">Teal</lion-option>
|
|
229
|
+
</lion-select-rich>
|
|
230
230
|
```
|
|
231
231
|
|
|
232
232
|
> By default, the placeholder is completely empty in the `LionSelectInvoker`,
|
|
@@ -238,7 +238,7 @@ If there is a single option rendered, then `singleOption` property is set to `tr
|
|
|
238
238
|
|
|
239
239
|
```html preview-story
|
|
240
240
|
<lion-select-rich label="Single Option" name="color">
|
|
241
|
-
<lion-option .choiceValue
|
|
241
|
+
<lion-option .choiceValue="${'red'}">Red</lion-option>
|
|
242
242
|
</lion-select-rich>
|
|
243
243
|
```
|
|
244
244
|
|
|
@@ -259,12 +259,12 @@ class SingleOptionRemoveAdd extends LitElement {
|
|
|
259
259
|
|
|
260
260
|
render() {
|
|
261
261
|
return html`
|
|
262
|
-
<button @click
|
|
263
|
-
<button @click
|
|
262
|
+
<button @click="${this.addOption}">Add an option</button>
|
|
263
|
+
<button @click="${this.removeOption}">Remove last option</button>
|
|
264
264
|
<lion-select-rich name="favoriteColor" label="Favorite color">
|
|
265
265
|
<lion-options slot="input">
|
|
266
266
|
${this.options.map(
|
|
267
|
-
option => html` <lion-option .choiceValue
|
|
267
|
+
option => html` <lion-option .choiceValue="${option}">${option}</lion-option> `,
|
|
268
268
|
)}
|
|
269
269
|
</lion-options>
|
|
270
270
|
</lion-select-rich>
|
|
@@ -302,7 +302,7 @@ LionSelectRich will give it acces to:
|
|
|
302
302
|
- LionSelectRich itself, via `.hostElement`
|
|
303
303
|
|
|
304
304
|
Code of an advanced custom invoker is shown below (this is the code for the
|
|
305
|
-
invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/
|
|
305
|
+
invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/select-rich/examples.md)).
|
|
306
306
|
The invoker is usually added in the invoker slot of the LionSelectRich subclass.
|
|
307
307
|
However, it would also be possible for an application developer to provide the invoker
|
|
308
308
|
by putting it in light dom:
|