@lion/ui 0.11.6 → 0.13.0
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 -1
- package/components/combobox/src/LionCombobox.js +26 -8
- package/components/combobox/test/lion-combobox.test.js +206 -57
- package/components/form-core/src/FocusMixin.js +1 -0
- package/components/form-core/src/FormControlMixin.js +23 -18
- package/components/form-core/src/validate/ValidateMixin.js +17 -1
- package/components/form-core/test/FormControlMixin.test.js +68 -0
- package/components/form-core/test-suites/ValidateMixin.suite.js +19 -3
- package/components/input-amount/src/parsers.js +1 -1
- package/components/input-amount/test/parsers.test.js +5 -0
- package/components/overlays/src/OverlayController.js +32 -5
- package/components/overlays/src/OverlayMixin.js +1 -0
- package/components/overlays/src/configurations/withDropdownConfig.js +0 -1
- package/components/overlays/src/configurations/withTooltipConfig.js +0 -1
- package/components/overlays/test/OverlayController.test.js +16 -4
- package/components/overlays/test-suites/OverlayMixin.suite.js +71 -0
- package/custom-elements.json +1144 -327
- package/dist-types/components/combobox/src/LionCombobox.d.ts.map +1 -1
- package/dist-types/components/core/src/ScopedElementsMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/src/FocusMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/src/FormControlMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/src/validate/ValidateMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/test-suites/ValidateMixin.suite.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/overlays/src/configurations/withDropdownConfig.d.ts.map +1 -1
- package/dist-types/components/overlays/src/configurations/withTooltipConfig.d.ts.map +1 -1
- package/dist-types/components/overlays/test/OverlayController.test.d.ts.map +1 -1
- package/dist-types/components/overlays/test-suites/OverlayMixin.suite.d.ts.map +1 -1
- package/dist-types/tsconfig.tsbuildinfo +1 -1
- package/docs/components/checkbox-group/api-table.md +6 -6
- package/docs/components/checkbox-group/overview.md +2 -2
- package/docs/components/collapsible/overview.md +1 -1
- package/docs/components/combobox/api-table.md +2 -2
- package/docs/components/combobox/overview.md +1 -1
- package/docs/components/combobox/use-cases.md +90 -1
- package/docs/components/dialog/overview.md +1 -1
- package/docs/components/fieldset/api-table.md +2 -2
- package/docs/components/fieldset/overview.md +5 -5
- package/docs/components/form/overview.md +3 -3
- package/docs/components/form/use-cases.md +2 -2
- package/docs/components/icon/use-cases.md +1 -1
- package/docs/components/input/api-table.md +2 -2
- package/docs/components/input/overview.md +1 -1
- package/docs/components/input-amount/api-table.md +2 -2
- package/docs/components/input-amount/overview.md +3 -3
- package/docs/components/input-date/api-table.md +2 -2
- package/docs/components/input-date/overview.md +3 -3
- package/docs/components/input-datepicker/api-table.md +2 -2
- package/docs/components/input-datepicker/overview.md +5 -5
- package/docs/components/input-email/api-table.md +2 -2
- package/docs/components/input-email/overview.md +2 -2
- package/docs/components/input-file/api-table.md +2 -2
- package/docs/components/input-file/overview.md +1 -1
- package/docs/components/input-iban/api-table.md +2 -2
- package/docs/components/input-iban/overview.md +2 -2
- package/docs/components/input-range/api-table.md +2 -2
- package/docs/components/input-range/overview.md +2 -2
- package/docs/components/input-stepper/api-table.md +2 -2
- package/docs/components/input-stepper/overview.md +1 -1
- package/docs/components/input-tel/api-table.md +2 -2
- package/docs/components/input-tel/overview.md +1 -1
- package/docs/components/input-tel/use-cases.md +6 -6
- package/docs/components/input-tel-dropdown/api-table.md +2 -2
- package/docs/components/input-tel-dropdown/overview.md +1 -1
- package/docs/components/listbox/api-table.md +2 -2
- package/docs/components/listbox/use-cases.md +1 -1
- package/docs/components/radio-group/api-table.md +4 -4
- package/docs/components/radio-group/overview.md +3 -3
- package/docs/components/select/api-table.md +2 -2
- package/docs/components/select/use-cases.md +1 -1
- package/docs/components/select-rich/api-table.md +2 -2
- package/docs/components/select-rich/use-cases.md +1 -1
- package/docs/components/switch/api-table.md +2 -2
- package/docs/components/tabs/examples.md +1 -1
- package/docs/components/textarea/api-table.md +2 -2
- package/docs/fundamentals/index.md +4 -4
- 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/api-table.md +2 -2
- package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
- package/docs/fundamentals/systems/form/model-value.md +1 -1
- package/docs/fundamentals/systems/form/overview.md +28 -28
- package/docs/fundamentals/systems/form/styling.md +3 -20
- package/docs/fundamentals/systems/form/validate.md +2 -2
- package/docs/fundamentals/systems/localize/overview.md +4 -4
- package/docs/fundamentals/systems/overlays/configuration.md +2 -2
- package/docs/fundamentals/systems/overlays/overview.md +5 -5
- package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
- package/docs/fundamentals/tools/helpers/overview.md +1 -1
- package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
- package/docs/guides/how-to/create-a-custom-field.md +5 -5
- 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/styling.md +1 -1
- package/package.json +3 -3
|
@@ -32,9 +32,9 @@ eleventyNavigation:
|
|
|
32
32
|
| `formatOptions` | public | | `({ mode: 'auto' })` | Configuration object that will be available inside the formatter function | LionField |
|
|
33
33
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
34
34
|
| `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. | LionField |
|
|
35
|
-
| `helpText` | public | `string` |
|
|
35
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
36
36
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
37
|
-
| `label` | public | `string` |
|
|
37
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
38
38
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
39
39
|
| `modelValue` | public | | | | LionField |
|
|
40
40
|
| `name` | public | `string` | `''` | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects | LionField |
|
|
@@ -27,8 +27,8 @@ export const main = () => {
|
|
|
27
27
|
|
|
28
28
|
## Features
|
|
29
29
|
|
|
30
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
31
|
-
- Makes use of email [validators](https://github.com/ing-bank/lion/blob/
|
|
30
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input/overview.md)
|
|
31
|
+
- Makes use of email [validators](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
|
|
32
32
|
- IsEmail (default)
|
|
33
33
|
|
|
34
34
|
## Installation
|
|
@@ -55,10 +55,10 @@ eleventyNavigation:
|
|
|
55
55
|
| `formatOptions` | public | | `({ mode: 'auto' })` | Configuration object that will be available inside the formatter function | LionField |
|
|
56
56
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
57
57
|
| `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. | LionField |
|
|
58
|
-
| `helpText` | public | `string` |
|
|
58
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
59
59
|
| `isDragging` | public | `boolean` | | | |
|
|
60
60
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
61
|
-
| `label` | public | `string` |
|
|
61
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
62
62
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
63
63
|
| `maxFileSize` | public | `number` | `MAX_FILE_SIZE` | | |
|
|
64
64
|
| `modelValue` | public | `InputFile[]` | `[]` | | LionField |
|
|
@@ -27,7 +27,7 @@ export const main = () => {
|
|
|
27
27
|
|
|
28
28
|
## Features
|
|
29
29
|
|
|
30
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
30
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input/overview.md)
|
|
31
31
|
- Default labels and validation messages in different languages
|
|
32
32
|
- Options for multi file upload and drop-zone.
|
|
33
33
|
|
|
@@ -33,9 +33,9 @@ eleventyNavigation:
|
|
|
33
33
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
34
34
|
| `formatter` | public | | `formatIBAN` | Converts modelValue to formattedValue (formattedValue will be synced with
\`.\_inputNode.value\`)
For instance, a Date object to a localized date. | LionField |
|
|
35
35
|
| `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. | LionField |
|
|
36
|
-
| `helpText` | public | `string` |
|
|
36
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
37
37
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
38
|
-
| `label` | public | `string` |
|
|
38
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
39
39
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
40
40
|
| `modelValue` | public | | | | LionField |
|
|
41
41
|
| `name` | public | `string` | `''` | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects | LionField |
|
|
@@ -28,9 +28,9 @@ export const main = () => {
|
|
|
28
28
|
|
|
29
29
|
## Features
|
|
30
30
|
|
|
31
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
31
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input/overview.md)
|
|
32
32
|
- Default label in different languages
|
|
33
|
-
- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/
|
|
33
|
+
- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
|
|
34
34
|
- IsIBAN (default)
|
|
35
35
|
- IsCountryIBAN
|
|
36
36
|
- Parses IBANs automatically
|
|
@@ -32,9 +32,9 @@ eleventyNavigation:
|
|
|
32
32
|
| `formatOptions` | public | | `({ mode: 'auto' })` | Configuration object that will be available inside the formatter function | LionField |
|
|
33
33
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
34
34
|
| `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. | LionField |
|
|
35
|
-
| `helpText` | public | `string` |
|
|
35
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
36
36
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
37
|
-
| `label` | public | `string` |
|
|
37
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
38
38
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
39
39
|
| `max` | public | `number` | `Infinity` | | |
|
|
40
40
|
| `min` | public | `number` | `Infinity` | | |
|
|
@@ -25,11 +25,11 @@ import '@lion/ui/define/lion-input-range.js';
|
|
|
25
25
|
|
|
26
26
|
## Features
|
|
27
27
|
|
|
28
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
28
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input/overview.md).
|
|
29
29
|
- Shows `modelValue` and `unit` above the range input.
|
|
30
30
|
- Shows `min` and `max` value after the range input.
|
|
31
31
|
- Can hide the `min` and `max` value via `no-min-max-labels`.
|
|
32
|
-
- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/
|
|
32
|
+
- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
|
|
33
33
|
|
|
34
34
|
## Installation
|
|
35
35
|
|
|
@@ -34,9 +34,9 @@ eleventyNavigation:
|
|
|
34
34
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
35
35
|
| `formatter` | public | | `formatNumber` | Converts modelValue to formattedValue (formattedValue will be synced with
\`.\_inputNode.value\`)
For instance, a Date object to a localized date. | LionField |
|
|
36
36
|
| `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. | LionField |
|
|
37
|
-
| `helpText` | public | `string` |
|
|
37
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
38
38
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
39
|
-
| `label` | public | `string` |
|
|
39
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
40
40
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
41
41
|
| `max` | public | `number` | `Infinity` | | |
|
|
42
42
|
| `min` | public | `number` | `Infinity` | | |
|
|
@@ -30,7 +30,7 @@ loadDefaultFeedbackMessages();
|
|
|
30
30
|
|
|
31
31
|
## Features
|
|
32
32
|
|
|
33
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
33
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input/overview.md).
|
|
34
34
|
- Set `min` and `max` value to define the range.
|
|
35
35
|
- Set `step` value in integer or decimal to increase and decrease the value.
|
|
36
36
|
- Use `ArrowUp` or `ArrowDown` to update the value.
|
|
@@ -37,9 +37,9 @@ eleventyNavigation:
|
|
|
37
37
|
| `formatStrategy` | public | `PhoneNumberFormat` | `'international'` | Determines what the formatter output should look like.
Formatting strategies as provided by google-libphonenumber
See: https\://www\.npmjs.com/package/google-libphonenumber | |
|
|
38
38
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
39
39
|
| `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. | LionField |
|
|
40
|
-
| `helpText` | public | `string` |
|
|
40
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
41
41
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
42
|
-
| `label` | public | `string` |
|
|
42
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
43
43
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
44
44
|
| `modelValue` | public | | | | LionField |
|
|
45
45
|
| `name` | public | `string` | `''` | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects | LionField |
|
|
@@ -51,7 +51,7 @@ export const main = () => {
|
|
|
51
51
|
|
|
52
52
|
## Features
|
|
53
53
|
|
|
54
|
-
- Extends our [input](https://github.com/ing-bank/lion/blob/
|
|
54
|
+
- Extends our [input](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input/overview.md)
|
|
55
55
|
- Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
|
|
56
56
|
- Can be configured with a list of allowed region codes
|
|
57
57
|
- Will be preconfigured with region derived from locale
|
|
@@ -34,7 +34,7 @@ Say we have the following telephone number from Madrid, Spain: `+34919930432`.
|
|
|
34
34
|
It contains a [country code](https://en.wikipedia.org/wiki/Country_code) (34), an [area code](https://en.wikipedia.org/wiki/Telephone_numbering_plan#Area_code) (91) and a [dial code](https://en.wikipedia.org/wiki/Mobile_dial_code) (+34 91).
|
|
35
35
|
Input Tel interprets phone numbers based on their [region code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2): a two character long region representation('ES' in the telephone number above).
|
|
36
36
|
|
|
37
|
-
The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/
|
|
37
|
+
The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input-tel/#allowed-regions) are not configured,
|
|
38
38
|
all of them will be supported as values of Input Tel.
|
|
39
39
|
|
|
40
40
|
```js story
|
|
@@ -49,11 +49,11 @@ export const regionCodesTable = () => {
|
|
|
49
49
|
The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
|
|
50
50
|
should be applied. It is dependent on the following factors:
|
|
51
51
|
|
|
52
|
-
- [allowed regions](https://github.com/ing-bank/lion/blob/
|
|
53
|
-
[.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/
|
|
52
|
+
- [allowed regions](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
|
|
53
|
+
[.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
|
|
54
54
|
- the modelValue or viewValue: once it contains sufficient info to derive its region code (and
|
|
55
|
-
the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/
|
|
56
|
-
- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/
|
|
55
|
+
the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input-tel/#allowed-regions) if configured)
|
|
56
|
+
- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input-tel/#allowed-regions) if configured)
|
|
57
57
|
|
|
58
58
|
What follows from the list above is that .activeRegion can change dynamically, after a value
|
|
59
59
|
change in the text box by the user (or when locales or allowed regions would be changed by the
|
|
@@ -142,7 +142,7 @@ export const heuristic = () => {
|
|
|
142
142
|
Once it is configured, validation and formatting will be restricted to those
|
|
143
143
|
values that are present in this list.
|
|
144
144
|
|
|
145
|
-
> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/
|
|
145
|
+
> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input-tel-dropdown/index.md), only allowed regions will
|
|
146
146
|
> be shown in the dropdown list.
|
|
147
147
|
|
|
148
148
|
```js preview-story
|
|
@@ -37,9 +37,9 @@ eleventyNavigation:
|
|
|
37
37
|
| `formatStrategy` | public | `PhoneNumberFormat` | `'international'` | Determines what the formatter output should look like.
Formatting strategies as provided by google-libphonenumber
See: https\://www\.npmjs.com/package/google-libphonenumber | LionInputTel |
|
|
38
38
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
39
39
|
| `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. | LionField |
|
|
40
|
-
| `helpText` | public | `string` |
|
|
40
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
41
41
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
42
|
-
| `label` | public | `string` |
|
|
42
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
43
43
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
44
44
|
| `modelValue` | public | | | | LionField |
|
|
45
45
|
| `name` | public | `string` | `''` | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects | LionField |
|
|
@@ -31,7 +31,7 @@ export const main = () => {
|
|
|
31
31
|
|
|
32
32
|
## Features
|
|
33
33
|
|
|
34
|
-
- Extends our [input-tel](https://github.com/ing-bank/lion/blob/
|
|
34
|
+
- Extends our [input-tel](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/input-tel/overview.md)
|
|
35
35
|
- Shows dropdown list with all possible regions
|
|
36
36
|
- Shows only allowed regions in dropdown list when .allowedRegions is configured
|
|
37
37
|
- Highlights regions on top of dropdown list when .preferredRegions is configured
|
|
@@ -33,10 +33,10 @@ eleventyNavigation:
|
|
|
33
33
|
| `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 |
|
|
34
34
|
| `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 |
|
|
35
35
|
| `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 |
|
|
36
|
-
| `helpText` | public | `string` |
|
|
36
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | FormControlMixin |
|
|
37
37
|
| `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 |
|
|
38
38
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | ValidateMixin |
|
|
39
|
-
| `label` | public | `string` |
|
|
39
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | FormControlMixin |
|
|
40
40
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | FormControlMixin |
|
|
41
41
|
| `modelValue` | public | | | | FormControlMixin |
|
|
42
42
|
| `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 |
|
|
@@ -151,4 +151,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
|
|
|
151
151
|
|
|
152
152
|
## Validation
|
|
153
153
|
|
|
154
|
-
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/
|
|
154
|
+
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/a12baddc37daf8f820c5c97723761768f4408b45/docs/fundamentals/systems/form/validate.md).
|
|
@@ -34,9 +34,9 @@ eleventyNavigation:
|
|
|
34
34
|
| `formatOptions` | public | | `({ mode: 'auto' })` | Configuration object that will be available inside the formatter function | LionField |
|
|
35
35
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
36
36
|
| `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. | LionField |
|
|
37
|
-
| `helpText` | public | `string` |
|
|
37
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
38
38
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
39
|
-
| `label` | public | `string` |
|
|
39
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
40
40
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
41
41
|
| `modelValue` | public | `{value:string\|any,checked:boolean}` | `{ value: '', checked: false }` | Whereas 'normal' \`.modelValue\`s usually store a complex/typed version
of a view value, choice inputs have a slightly different approach.
In order to remain their Single Source of Truth characteristic, choice inputs
store both the value and 'checkedness', in the format { value: 'x', checked: true }
Different from the platform, this also allows to serialize the 'non checkedness',
allowing to restore form state easily and inform the server about unchecked options. | LionField |
|
|
42
42
|
| `name` | public | `string` | `''` | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects | LionField |
|
|
@@ -216,10 +216,10 @@ eleventyNavigation:
|
|
|
216
216
|
| `formattedValue` | public | | | Object keyed by formElements names, containing formElements' formattedValues | FormGroupMixin |
|
|
217
217
|
| `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 |
|
|
218
218
|
| `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 |
|
|
219
|
-
| `helpText` | public | `string` |
|
|
219
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | FormControlMixin |
|
|
220
220
|
| `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 |
|
|
221
221
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | ValidateMixin |
|
|
222
|
-
| `label` | public | `string` |
|
|
222
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | FormControlMixin |
|
|
223
223
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | FormControlMixin |
|
|
224
224
|
| `modelValue` | public | | | Object keyed by formElements names, containing formElements' modelValues | FormControlMixin |
|
|
225
225
|
| `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 |
|
|
@@ -32,12 +32,12 @@ export const main = () => html`
|
|
|
32
32
|
`;
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/
|
|
36
|
-
- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/
|
|
35
|
+
- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/form/overview.md)'s serialization result.
|
|
36
|
+
- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/select/overview.md) instead.
|
|
37
37
|
|
|
38
38
|
## Features
|
|
39
39
|
|
|
40
|
-
Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/
|
|
40
|
+
Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/fieldset/overview.md), it has all the features a fieldset has.
|
|
41
41
|
|
|
42
42
|
- Get or set the checked value of the group:
|
|
43
43
|
- modelValue (default) - `checkedValue()`
|
|
@@ -32,9 +32,9 @@ eleventyNavigation:
|
|
|
32
32
|
| `formatOptions` | public | | `({ mode: 'auto' })` | Configuration object that will be available inside the formatter function | LionField |
|
|
33
33
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
34
34
|
| `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. | LionField |
|
|
35
|
-
| `helpText` | public | `string` |
|
|
35
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
36
36
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
37
|
-
| `label` | public | `string` |
|
|
37
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
38
38
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
39
39
|
| `modelValue` | public | | | | LionField |
|
|
40
40
|
| `name` | public | `string` | `''` | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects | LionField |
|
|
@@ -65,7 +65,7 @@ Or by setting the `disabled` attribute on the entire `lion-select` field.
|
|
|
65
65
|
|
|
66
66
|
## Validation
|
|
67
67
|
|
|
68
|
-
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/
|
|
68
|
+
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/a12baddc37daf8f820c5c97723761768f4408b45/docs/fundamentals/systems/form/validate.md).
|
|
69
69
|
|
|
70
70
|
## Rendering and updating select options
|
|
71
71
|
|
|
@@ -80,11 +80,11 @@ eleventyNavigation:
|
|
|
80
80
|
| `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 |
|
|
81
81
|
| `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 |
|
|
82
82
|
| `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 |
|
|
83
|
-
| `helpText` | public | `string` |
|
|
83
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionListbox |
|
|
84
84
|
| `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 |
|
|
85
85
|
| `interactionMode` | public | `'windows/linux'\|'mac'\|'auto'` | `'auto'` | Aligns behavior for 'selectionFollowFocus' and 'navigateWithinInvoker' with
platform. When 'auto' (default), platform is automatically detected | |
|
|
86
86
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionListbox |
|
|
87
|
-
| `label` | public | `string` |
|
|
87
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionListbox |
|
|
88
88
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionListbox |
|
|
89
89
|
| `modelValue` | public | | | | LionListbox |
|
|
90
90
|
| `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 |
|
|
@@ -314,7 +314,7 @@ LionSelectRich will give it acces to:
|
|
|
314
314
|
- LionSelectRich itself, via `.hostElement`
|
|
315
315
|
|
|
316
316
|
Code of an advanced custom invoker is shown below (this is the code for the
|
|
317
|
-
invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/
|
|
317
|
+
invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/a12baddc37daf8f820c5c97723761768f4408b45/docs/components/select-rich/examples.md)).
|
|
318
318
|
The invoker is usually added in the invoker slot of the LionSelectRich subclass.
|
|
319
319
|
However, it would also be possible for an application developer to provide the invoker
|
|
320
320
|
by putting it in light dom:
|
|
@@ -33,9 +33,9 @@ eleventyNavigation:
|
|
|
33
33
|
| `formatOptions` | public | | `({ mode: 'auto' })` | Configuration object that will be available inside the formatter function | LionField |
|
|
34
34
|
| `formattedValue` | public | `string\|undefined` | `undefined` | The view value is the result of the formatter function (when available).
The result will be stored in the native \_inputNode (usually an input\[type=text]).

Examples:
- For a date input, this would be '20/01/1999' (dependent on locale).
- For a number input, this could be '1,234.56' (a String representation of modelValue
1234.56) | LionField |
|
|
35
35
|
| `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. | LionField |
|
|
36
|
-
| `helpText` | public | `string` |
|
|
36
|
+
| `helpText` | public | `string` | | The helpt text for the input node.
When no light dom defined via \[slot=help-text], this value will be used | LionField |
|
|
37
37
|
| `isPending` | public | `boolean` | `false` | Flag indicating whether async validation is pending.
Creates attribute \[is-pending] as a styling hook | LionField |
|
|
38
|
-
| `label` | public | `string` |
|
|
38
|
+
| `label` | public | `string` | | The label text for the input node.
When no light dom defined via \[slot=label], this value will be used. | LionField |
|
|
39
39
|
| `labelSrOnly` | public | `boolean` | `false` | The label will only be visible for srceen readers when true | LionField |
|
|
40
40
|
| `modelValue` | public | `{value:string\|any,checked:boolean}` | `{ value: '', checked: false }` | Whereas 'normal' \`.modelValue\`s usually store a complex/typed version
of a view value, choice inputs have a slightly different approach.
In order to remain their Single Source of Truth characteristic, choice inputs
store both the value and 'checkedness', in the format { value: 'x', checked: true }
Different from the platform, this also allows to serialize the 'non checkedness',
allowing to restore form state easily and inform the server about unchecked options. | LionField |
|
|
41
41
|
| `name` | public | `string` | `''` | The name the element will be registered with to the .formElements collection
of the parent. Also, it serves as the key of key/value pairs in
 modelValue/serializedValue objects | LionField |
|