@lion/ui 0.7.5 → 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/input-stepper/src/LionInputStepper.js +6 -5
- package/components/input-stepper/test/lion-input-stepper-integrations.test.js +20 -0
- package/components/input-stepper/test/lion-input-stepper.test.js +48 -3
- package/components/overlays/src/OverlayController.js +29 -7
- package/components/overlays/src/OverlayMixin.js +5 -1
- package/components/overlays/src/utils/deep-contains.js +134 -3
- package/components/overlays/test/OverlayController.test.js +57 -0
- package/components/overlays/test/utils-tests/deep-contains.test.js +98 -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 +140 -115
- 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/input-stepper/src/LionInputStepper.d.ts +4 -1
- package/dist-types/components/input-stepper/src/LionInputStepper.d.ts.map +1 -1
- package/dist-types/components/input-stepper/test/lion-input-stepper-integrations.test.d.ts +2 -0
- package/dist-types/components/input-stepper/test/lion-input-stepper-integrations.test.d.ts.map +1 -0
- package/dist-types/components/input-stepper/test/lion-input-stepper.test.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayController.d.ts +7 -0
- 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/overlays/src/utils/deep-contains.d.ts +15 -1
- package/dist-types/components/overlays/src/utils/deep-contains.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-stepper/use-cases.md +21 -0
- 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 +55 -29
- 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
|
@@ -201,61 +201,55 @@
|
|
|
201
201
|
|
|
202
202
|
### Fields
|
|
203
203
|
|
|
204
|
-
| Name | Privacy | Type | Default
|
|
205
|
-
| ------------------------------------ | --------- | ------------------------------------------------------------------------- |
|
|
206
|
-
| `modelValue` | public | |
|
|
207
|
-
| `serializedValue` | public | |
|
|
208
|
-
| `formattedValue` | public | |
|
|
209
|
-
| `operationMode` | public | `OperationMode` |
|
|
210
|
-
| `multipleChoice` | public | `boolean` | `false`
|
|
211
|
-
| `_repropagationRole` | public | `'child'\|'choice-group'\|'fieldset'` | `'choice-group'`
|
|
212
|
-
| `formElements` | public | `FormControlsCollection` | `new FormControlsCollection()`
|
|
213
|
-
| `_isFormOrFieldset` | protected | `boolean` | `false`
|
|
214
|
-
| `initComplete` | public | `Promise<any>` | `new Promise((resolve, reject) => {
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
| `
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
| `
|
|
223
|
-
| `
|
|
224
|
-
| `
|
|
225
|
-
| `
|
|
226
|
-
| `
|
|
227
|
-
| `
|
|
228
|
-
| `
|
|
229
|
-
| `
|
|
230
|
-
| `
|
|
231
|
-
| `
|
|
232
|
-
| `
|
|
233
|
-
| `
|
|
234
|
-
| `
|
|
235
|
-
| `
|
|
236
|
-
| `
|
|
237
|
-
| `
|
|
238
|
-
| `
|
|
239
|
-
| `
|
|
240
|
-
| `
|
|
241
|
-
| `
|
|
242
|
-
| `
|
|
243
|
-
| `
|
|
244
|
-
| `
|
|
245
|
-
| `
|
|
246
|
-
| `
|
|
247
|
-
| `
|
|
248
|
-
| `
|
|
249
|
-
| `
|
|
250
|
-
| `
|
|
251
|
-
| `
|
|
252
|
-
| `
|
|
253
|
-
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | FormControlMixin |
|
|
254
|
-
| `_inputId` | protected | `string` | | Unique id that can be used in all light dom | FormControlMixin |
|
|
255
|
-
| `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\` | FormControlMixin |
|
|
256
|
-
| `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-describedby of \`.\_inputNode\` | FormControlMixin |
|
|
257
|
-
| `_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 |
|
|
258
|
-
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | DisabledMixin |
|
|
204
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
205
|
+
| ------------------------------------ | --------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
|
|
206
|
+
| `modelValue` | public | | | Object keyed by formElements names, containing formElements' modelValues | FormControlMixin |
|
|
207
|
+
| `serializedValue` | public | | | Object keyed by formElements names, containing formElements' serializedValues | FormGroupMixin |
|
|
208
|
+
| `formattedValue` | public | | | Object keyed by formElements names, containing formElements' formattedValues | FormGroupMixin |
|
|
209
|
+
| `operationMode` | public | `OperationMode` | | Types of input interaction of the FormControl (for instance 'enter'\|'select'\|'upload') | ValidateMixin |
|
|
210
|
+
| `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 |
|
|
211
|
+
| `_repropagationRole` | public | `'child'\|'choice-group'\|'fieldset'` | `'choice-group'` | Based on the role, details of handling model-value-changed repropagation differ. | FormControlMixin |
|
|
212
|
+
| `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 |
|
|
213
|
+
| `_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 |
|
|
214
|
+
| `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 |
|
|
215
|
+
| `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 |
|
|
216
|
+
| `done` | public | `boolean` | `false` | | FormRegistrarMixin |
|
|
217
|
+
| `_allValidators` | protected | `Validator[]` | | Combination of validators provided by Application Developer and the default validators | ValidateMixin |
|
|
218
|
+
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | ValidateMixin |
|
|
219
|
+
| `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 |
|
|
220
|
+
| `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 |
|
|
221
|
+
| `validationStates` | public | `ValidationStates` | `{}` | The outcome of a validation 'round'. Keyed by ValidationType and Validator name | ValidateMixin |
|
|
222
|
+
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | ValidateMixin |
|
|
223
|
+
| `validators` | public | `Validator[]` | `[]` | Used by Application Developers to add Validators to a FormControl. | ValidateMixin |
|
|
224
|
+
| `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 |
|
|
225
|
+
| `_visibleMessagesAmount` | protected | `number` | `1` | The amount of feedback messages that will visible in LionValidationFeedback | ValidateMixin |
|
|
226
|
+
| `touched` | public | `boolean` | `false` | True when user has focused and left(blurred) the field. | FormGroupMixin |
|
|
227
|
+
| `dirty` | public | `boolean` | `false` | True when user has changed the value of the field. | FormGroupMixin |
|
|
228
|
+
| `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. | FormGroupMixin |
|
|
229
|
+
| `filled` | public | `boolean` | `false` | True when the modelValue is non-empty (see \_isEmpty in FormControlMixin) | InteractionStateMixin |
|
|
230
|
+
| `_leaveEvent` | protected | `string` | `'blur'` | The event that triggers the touched state | InteractionStateMixin |
|
|
231
|
+
| `_valueChangedEvent` | protected | `string` | `'model-value-changed'` | The event that triggers the dirty state | InteractionStateMixin |
|
|
232
|
+
| `submitted` | public | `boolean` | `false` | True when parent form is submitted | FormGroupMixin |
|
|
233
|
+
| `_inputNode` | protected | | | The host element with role group (or radio-group or form) containing necessary aria attributes | FormControlMixin |
|
|
234
|
+
| `_initialModelValue` | protected | | | Gathers initial model values of all children. Used when resetGroup() is called. | FormGroupMixin |
|
|
235
|
+
| `value` | public | `string` | `''` | | FormGroupMixin |
|
|
236
|
+
| `disabled` | public | `boolean` | `false` | Disables all formElements in group | DisabledMixin |
|
|
237
|
+
| `focused` | public | `boolean` | `false` | True when any of the children is focused. | FormGroupMixin |
|
|
238
|
+
| `__descriptionElementsInParentChain` | protected | | `new Set()` | | FormGroupMixin |
|
|
239
|
+
| `__pendingValues` | protected | `{modelValue?:{[key:string]: any}, serializedValue?:{[key:string]: any}}` | `{ modelValue: {}, serializedValue: {} }` | | FormGroupMixin |
|
|
240
|
+
| `label` | public | `string` | `''` | The label text for the input node.
When no value is defined, textContent of \[slot=label] will be used | FormControlMixin |
|
|
241
|
+
| `helpText` | public | `string` | `''` | The helpt text for the input node.
When no value is defined, textContent of \[slot=help-text] will be used | FormControlMixin |
|
|
242
|
+
| `fieldName` | public | `string` | | Will be used in validation messages to refer to the current field | FormControlMixin |
|
|
243
|
+
| `_labelNode` | protected | | | Element where label will be rendered to | FormControlMixin |
|
|
244
|
+
| `_helpTextNode` | protected | | | Element where help text will be rendered to | FormControlMixin |
|
|
245
|
+
| `_feedbackNode` | protected | | | Element where validation feedback will be rendered to | FormControlMixin |
|
|
246
|
+
| `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 |
|
|
247
|
+
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | FormControlMixin |
|
|
248
|
+
| `_inputId` | protected | `string` | | Unique id that can be used in all light dom | FormControlMixin |
|
|
249
|
+
| `_ariaLabelledNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-labelledby of \`.\_inputNode\` | FormControlMixin |
|
|
250
|
+
| `_ariaDescribedNodes` | public | `HTMLElement[]` | `[]` | Contains all elements that should end up in aria-describedby of \`.\_inputNode\` | FormControlMixin |
|
|
251
|
+
| `_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 |
|
|
252
|
+
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | DisabledMixin |
|
|
259
253
|
|
|
260
254
|
### Methods
|
|
261
255
|
|
|
@@ -13,19 +13,19 @@ import '@lion/ui/define/lion-radio.js';
|
|
|
13
13
|
```js preview-story
|
|
14
14
|
export const main = () => html`
|
|
15
15
|
<lion-radio-group name="dinos" label="What are your favourite dinosaurs?">
|
|
16
|
-
<lion-radio label="allosaurus" .choiceValue
|
|
17
|
-
<lion-radio label="brontosaurus" .choiceValue
|
|
18
|
-
<lion-radio label="diplodocus" .choiceValue
|
|
16
|
+
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
|
|
17
|
+
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
|
|
18
|
+
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
|
|
19
19
|
</lion-radio-group>
|
|
20
20
|
`;
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/
|
|
24
|
-
- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/
|
|
23
|
+
- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/form/overview.md)'s serialization result.
|
|
24
|
+
- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/select/overview.md) instead.
|
|
25
25
|
|
|
26
26
|
## Features
|
|
27
27
|
|
|
28
|
-
Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/
|
|
28
|
+
Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/fieldset/overview.md), it has all the features a fieldset has.
|
|
29
29
|
|
|
30
30
|
- Get or set the checked value of the group:
|
|
31
31
|
- modelValue (default) - `checkedValue()`
|
|
@@ -33,9 +33,9 @@ You can pre-select an option by adding the checked attribute to the selected `li
|
|
|
33
33
|
```js preview-story
|
|
34
34
|
export const preSelect = () => html`
|
|
35
35
|
<lion-radio-group name="dinos_2" label="What are your favourite dinosaurs?">
|
|
36
|
-
<lion-radio label="allosaurus" .choiceValue
|
|
37
|
-
<lion-radio label="brontosaurus" .choiceValue
|
|
38
|
-
<lion-radio label="diplodocus" .choiceValue
|
|
36
|
+
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
|
|
37
|
+
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}" checked></lion-radio>
|
|
38
|
+
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
|
|
39
39
|
</lion-radio-group>
|
|
40
40
|
`;
|
|
41
41
|
```
|
|
@@ -47,9 +47,9 @@ You can disable a specific `lion-radio` option by adding the `disabled` attribut
|
|
|
47
47
|
```js preview-story
|
|
48
48
|
export const disabledRadio = () => html`
|
|
49
49
|
<lion-radio-group name="dinos_4" label="What are your favourite dinosaurs?">
|
|
50
|
-
<lion-radio label="allosaurus" .choiceValue
|
|
51
|
-
<lion-radio label="brontosaurus" .choiceValue
|
|
52
|
-
<lion-radio label="diplodocus" .choiceValue
|
|
50
|
+
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
|
|
51
|
+
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}" disabled></lion-radio>
|
|
52
|
+
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
|
|
53
53
|
</lion-radio-group>
|
|
54
54
|
`;
|
|
55
55
|
```
|
|
@@ -59,9 +59,9 @@ You can do the same thing for the entire group by setting the `disabled` attribu
|
|
|
59
59
|
```js preview-story
|
|
60
60
|
export const disabledGroup = () => html`
|
|
61
61
|
<lion-radio-group name="dinos_6" label="What are your favourite dinosaurs?" disabled>
|
|
62
|
-
<lion-radio label="allosaurus" .choiceValue
|
|
63
|
-
<lion-radio label="brontosaurus" .choiceValue
|
|
64
|
-
<lion-radio label="diplodocus" .choiceValue
|
|
62
|
+
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
|
|
63
|
+
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
|
|
64
|
+
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
|
|
65
65
|
</lion-radio-group>
|
|
66
66
|
`;
|
|
67
67
|
```
|
|
@@ -73,17 +73,17 @@ You can use `slot="label"` instead of the `label` attribute for defining more co
|
|
|
73
73
|
```js preview-story
|
|
74
74
|
export const label = () => html`
|
|
75
75
|
<lion-radio-group name="dinos_7" label="Favourite dinosaur">
|
|
76
|
-
<lion-radio .choiceValue
|
|
76
|
+
<lion-radio .choiceValue="${'allosaurus'}">
|
|
77
77
|
<label slot="label"
|
|
78
78
|
><a href="https://wikipedia.org/wiki/allosaurus" target="_blank">allosaurus</a></label
|
|
79
79
|
>
|
|
80
80
|
</lion-radio>
|
|
81
|
-
<lion-radio .choiceValue
|
|
81
|
+
<lion-radio .choiceValue="${'brontosaurus'}">
|
|
82
82
|
<label slot="label"
|
|
83
83
|
><a href="https://wikipedia.org/wiki/brontosaurus" target="_blank">brontosaurus</a></label
|
|
84
84
|
>
|
|
85
85
|
</lion-radio>
|
|
86
|
-
<lion-radio .choiceValue
|
|
86
|
+
<lion-radio .choiceValue="${'diplodocus'}">
|
|
87
87
|
<label slot="label"
|
|
88
88
|
><a href="https://wikipedia.org/wiki/diplodocus" target="_blank">diplodocus</a></label
|
|
89
89
|
>
|
|
@@ -101,17 +101,17 @@ export const helpText = () => html`
|
|
|
101
101
|
<lion-radio-group name="dinosTwo" label="Favourite dinosaur">
|
|
102
102
|
<lion-radio
|
|
103
103
|
label="allosaurus"
|
|
104
|
-
.choiceValue
|
|
104
|
+
.choiceValue="${'allosaurus'}"
|
|
105
105
|
help-text="Allosaurus is a genus of carnivorous theropod dinosaur that lived 155 to 145 million years ago during the late Jurassic period"
|
|
106
106
|
></lion-radio>
|
|
107
107
|
<lion-radio
|
|
108
108
|
label="brontosaurus"
|
|
109
|
-
.choiceValue
|
|
109
|
+
.choiceValue="${'brontosaurus'}"
|
|
110
110
|
help-text="Brontosaurus is a genus of gigantic quadruped sauropod dinosaurs"
|
|
111
111
|
></lion-radio>
|
|
112
112
|
<lion-radio
|
|
113
113
|
label="diplodocus"
|
|
114
|
-
.choiceValue
|
|
114
|
+
.choiceValue="${'diplodocus'}"
|
|
115
115
|
help-text="Diplodocus is a genus of diplodocid sauropod dinosaurs whose fossils were first discovered in 1877 by S. W. Williston"
|
|
116
116
|
></lion-radio>
|
|
117
117
|
</lion-radio-group>
|
|
@@ -130,9 +130,9 @@ export const event = ({ shadowRoot }) => html`
|
|
|
130
130
|
@model-value-changed=${ev =>
|
|
131
131
|
(ev.target.parentElement.querySelector('#selectedDinosaur').innerText = ev.target.modelValue)}
|
|
132
132
|
>
|
|
133
|
-
<lion-radio label="allosaurus" .choiceValue
|
|
134
|
-
<lion-radio label="brontosaurus" .choiceValue
|
|
135
|
-
<lion-radio label="diplodocus" .choiceValue
|
|
133
|
+
<lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
|
|
134
|
+
<lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
|
|
135
|
+
<lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
|
|
136
136
|
</lion-radio-group>
|
|
137
137
|
<br />
|
|
138
138
|
<span>Selected dinosaur: <strong id="selectedDinosaur">N/A</strong></span>
|
|
@@ -13,7 +13,7 @@ loadDefaultFeedbackMessages();
|
|
|
13
13
|
You can preselect an option by setting the property modelValue.
|
|
14
14
|
|
|
15
15
|
```html preview-story
|
|
16
|
-
<lion-select name="favoriteColor" label="Favorite color" .modelValue
|
|
16
|
+
<lion-select name="favoriteColor" label="Favorite color" .modelValue="${'hotpink'}">
|
|
17
17
|
<select slot="input">
|
|
18
18
|
<option selected hidden value>Please select</option>
|
|
19
19
|
<option value="red">Red</option>
|
|
@@ -53,4 +53,4 @@ Or by setting the `disabled` attribute on the entire `lion-select` field.
|
|
|
53
53
|
|
|
54
54
|
## Validation
|
|
55
55
|
|
|
56
|
-
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/
|
|
56
|
+
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).
|