@lion/ui 0.8.0 → 0.8.2
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 +7 -7
- package/components/calendar/src/LionCalendar.js +6 -0
- package/components/core/src/DisabledWithTabIndexMixin.js +7 -0
- package/components/core/src/ScopedElementsMixin.js +58 -37
- package/components/core/test/ScopedElementsMixin.test.js +131 -0
- package/components/core/test/ssr-definitions/ScopedElementsHost.define.js +1 -0
- package/components/form/src/LionForm.js +3 -12
- package/components/form/test/lion-form.test.js +88 -1
- package/components/form-core/src/FormControlMixin.js +6 -0
- package/components/form-core/src/registration/FormRegisteringMixin.js +1 -1
- package/components/form-core/src/utils/SyncUpdatableMixin.js +7 -0
- package/components/form-core/src/validate/LionValidationFeedback.js +4 -2
- package/components/form-core/test/validate/lion-validation-feedback.test.js +12 -0
- package/components/form-core/types/registration/FormRegisteringMixinTypes.ts +1 -1
- package/components/icon/src/LionIcon.js +6 -0
- package/components/listbox/test-suites/ListboxMixin.suite.js +2 -2
- package/components/localize/src/LocalizeManager.js +259 -204
- package/components/overlays/src/OverlayController.js +1 -1
- package/components/overlays/src/OverlayMixin.js +7 -0
- package/components/progress-indicator/src/LionProgressIndicator.js +6 -0
- package/components/steps/src/LionStep.js +6 -0
- package/components/steps/src/LionSteps.js +6 -0
- package/components/tabs/src/LionTabs.js +6 -0
- package/components/tooltip/src/LionTooltip.js +6 -0
- package/custom-elements.json +792 -330
- package/dist-types/components/calendar/src/LionCalendar.d.ts +5 -0
- package/dist-types/components/calendar/src/LionCalendar.d.ts.map +1 -1
- package/dist-types/components/core/src/DisabledWithTabIndexMixin.d.ts.map +1 -1
- package/dist-types/components/core/src/ScopedElementsMixin.d.ts +43 -6
- package/dist-types/components/core/src/ScopedElementsMixin.d.ts.map +1 -1
- package/dist-types/components/core/test/ScopedElementsMixin.test.d.ts +2 -0
- package/dist-types/components/core/test/ScopedElementsMixin.test.d.ts.map +1 -0
- package/dist-types/components/core/test/ssr-definitions/ScopedElementsHost.define.d.ts +2 -0
- package/dist-types/components/core/test/ssr-definitions/ScopedElementsHost.define.d.ts.map +1 -0
- package/dist-types/components/form/src/LionForm.d.ts.map +1 -1
- package/dist-types/components/form/test/lion-form.test.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/utils/SyncUpdatableMixin.d.ts.map +1 -1
- package/dist-types/components/form-core/src/validate/LionValidationFeedback.d.ts.map +1 -1
- package/dist-types/components/form-core/types/registration/FormRegisteringMixinTypes.d.ts +1 -1
- package/dist-types/components/form-integrations/test/helpers/helpers.d.ts +3 -3
- package/dist-types/components/form-integrations/test/helpers/helpers.d.ts.map +1 -1
- package/dist-types/components/icon/src/LionIcon.d.ts +5 -0
- package/dist-types/components/icon/src/LionIcon.d.ts.map +1 -1
- package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts +1 -1
- package/dist-types/components/input-file/src/LionInputFile.d.ts +1 -1
- package/dist-types/components/input-file/src/LionSelectedFileList.d.ts +1 -1
- package/dist-types/components/localize/src/LocalizeManager.d.ts +109 -112
- package/dist-types/components/localize/src/LocalizeManager.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayMixin.d.ts.map +1 -1
- package/dist-types/components/progress-indicator/src/LionProgressIndicator.d.ts +5 -0
- package/dist-types/components/progress-indicator/src/LionProgressIndicator.d.ts.map +1 -1
- package/dist-types/components/select-rich/src/LionSelectRich.d.ts +1 -1
- package/dist-types/components/steps/src/LionStep.d.ts +5 -0
- package/dist-types/components/steps/src/LionStep.d.ts.map +1 -1
- package/dist-types/components/steps/src/LionSteps.d.ts +5 -0
- package/dist-types/components/steps/src/LionSteps.d.ts.map +1 -1
- package/dist-types/components/switch/src/LionSwitch.d.ts +1 -1
- package/dist-types/components/tabs/src/LionTabs.d.ts +5 -0
- package/dist-types/components/tabs/src/LionTabs.d.ts.map +1 -1
- package/dist-types/components/tooltip/src/LionTooltip.d.ts +5 -0
- package/dist-types/components/tooltip/src/LionTooltip.d.ts.map +1 -1
- package/dist-types/tsconfig.tsbuildinfo +1 -1
- package/docs/components/checkbox-group/api-table.md +2 -2
- package/docs/components/checkbox-group/overview.md +2 -2
- package/docs/components/collapsible/overview.md +1 -1
- package/docs/components/combobox/overview.md +1 -1
- package/docs/components/combobox/use-cases.md +1 -1
- package/docs/components/dialog/overview.md +1 -1
- package/docs/components/fieldset/overview.md +5 -5
- package/docs/components/form/overview.md +3 -3
- 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 +1 -1
- package/docs/components/listbox/use-cases.md +1 -1
- package/docs/components/radio-group/api-table.md +2 -2
- 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 +1 -1
- 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/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/api-table.md +1 -1
- 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/validate.md +2 -2
- package/docs/fundamentals/systems/localize/api-table.md +38 -40
- 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 +1 -1
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
| `_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. | LionField |
|
|
62
62
|
| `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 |
|
|
63
63
|
| `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or
ChoiceGroup | LionField |
|
|
64
|
-
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion
|
|
64
|
+
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
|
|
65
65
|
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionField |
|
|
66
66
|
| `disabled` | public | `boolean` | `false` | | LionField |
|
|
67
67
|
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionField |
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
| `_inputGroupInputTemplate` | protected | | | `TemplateResult` | LionField |
|
|
119
119
|
| `__openDialogOnBtnClick` | protected | | `ev: MouseEvent` | | |
|
|
120
120
|
| `createScopedElement` | public | | `tagName` | | LionField |
|
|
121
|
-
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string,
|
|
121
|
+
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string, classToBeRegistered: typeof HTMLElement` | | LionField |
|
|
122
122
|
| `attachShadow` | public | | `options: ShadowRootInit` | `ShadowRoot` | LionField |
|
|
123
123
|
| `_triggerInitialModelValueChangedEvent` | protected | | | | LionField |
|
|
124
124
|
| `_enhanceLightDomClasses` | protected | | | | LionField |
|
|
@@ -15,7 +15,7 @@ export const main = () => {
|
|
|
15
15
|
|
|
16
16
|
## Features
|
|
17
17
|
|
|
18
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
18
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input/overview.md)
|
|
19
19
|
- Default labels and validation messages in different languages
|
|
20
20
|
- Options for multi file upload and drop-zone.
|
|
21
21
|
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
| `placeholder` | public | `string` | `''` | | LionInput |
|
|
43
43
|
| `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 |
|
|
44
44
|
| `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or
ChoiceGroup | LionField |
|
|
45
|
-
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion
|
|
45
|
+
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
|
|
46
46
|
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionField |
|
|
47
47
|
| `disabled` | public | `boolean` | `false` | | LionField |
|
|
48
48
|
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionField |
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
| `_updateShouldShowFeedbackFor` | protected | | | | LionField |
|
|
137
137
|
| `_prioritizeAndFilterFeedback` | protected | Orders all active validators in this.\_\_validationResult.
Can also filter out occurrences (based on interaction states) | `{ validationResult }, opts: { validationResult: Validator[] }` | `Validator[]` | LionField |
|
|
138
138
|
| `createScopedElement` | public | | `tagName` | | LionField |
|
|
139
|
-
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string,
|
|
139
|
+
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string, classToBeRegistered: typeof HTMLElement` | | LionField |
|
|
140
140
|
| `attachShadow` | public | | `options: ShadowRootInit` | `ShadowRoot` | LionField |
|
|
141
141
|
| `reset` | public | Resets modelValue to initial value.
Interaction states are cleared | | | LionField |
|
|
142
142
|
| `clear` | public | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) | | | LionField |
|
|
@@ -16,9 +16,9 @@ export const main = () => {
|
|
|
16
16
|
|
|
17
17
|
## Features
|
|
18
18
|
|
|
19
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
19
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input/overview.md)
|
|
20
20
|
- Default label in different languages
|
|
21
|
-
- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/
|
|
21
|
+
- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
|
|
22
22
|
- IsIBAN (default)
|
|
23
23
|
- IsCountryIBAN
|
|
24
24
|
- Parses IBANs automatically
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
| `placeholder` | public | `string` | `''` | | LionInput |
|
|
48
48
|
| `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 |
|
|
49
49
|
| `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or
ChoiceGroup | LionField |
|
|
50
|
-
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion
|
|
50
|
+
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
|
|
51
51
|
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionField |
|
|
52
52
|
| `disabled` | public | `boolean` | `false` | | LionField |
|
|
53
53
|
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionField |
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
| `_updateShouldShowFeedbackFor` | protected | | | | LionField |
|
|
143
143
|
| `_prioritizeAndFilterFeedback` | protected | Orders all active validators in this.\_\_validationResult.
Can also filter out occurrences (based on interaction states) | `{ validationResult }, opts: { validationResult: Validator[] }` | `Validator[]` | LionField |
|
|
144
144
|
| `createScopedElement` | public | | `tagName` | | LionField |
|
|
145
|
-
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string,
|
|
145
|
+
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string, classToBeRegistered: typeof HTMLElement` | | LionField |
|
|
146
146
|
| `attachShadow` | public | | `options: ShadowRootInit` | `ShadowRoot` | LionField |
|
|
147
147
|
| `reset` | public | Resets modelValue to initial value.
Interaction states are cleared | | | LionField |
|
|
148
148
|
| `clear` | public | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) | | | LionField |
|
|
@@ -13,11 +13,11 @@ import '@lion/ui/define/lion-input-range.js';
|
|
|
13
13
|
|
|
14
14
|
## Features
|
|
15
15
|
|
|
16
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
16
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input/overview.md).
|
|
17
17
|
- Shows `modelValue` and `unit` above the range input.
|
|
18
18
|
- Shows `min` and `max` value after the range input.
|
|
19
19
|
- Can hide the `min` and `max` value via `no-min-max-labels`.
|
|
20
|
-
- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/
|
|
20
|
+
- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
|
|
21
21
|
|
|
22
22
|
## Installation
|
|
23
23
|
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
| `placeholder` | public | `string` | `''` | | LionInput |
|
|
49
49
|
| `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 |
|
|
50
50
|
| `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or
ChoiceGroup | LionField |
|
|
51
|
-
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion
|
|
51
|
+
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
|
|
52
52
|
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionField |
|
|
53
53
|
| `disabled` | public | `boolean` | `false` | | LionField |
|
|
54
54
|
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionField |
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
| `_updateShouldShowFeedbackFor` | protected | | | | LionField |
|
|
149
149
|
| `_prioritizeAndFilterFeedback` | protected | Orders all active validators in this.\_\_validationResult.
Can also filter out occurrences (based on interaction states) | `{ validationResult }, opts: { validationResult: Validator[] }` | `Validator[]` | LionField |
|
|
150
150
|
| `createScopedElement` | public | | `tagName` | | LionField |
|
|
151
|
-
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string,
|
|
151
|
+
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string, classToBeRegistered: typeof HTMLElement` | | LionField |
|
|
152
152
|
| `attachShadow` | public | | `options: ShadowRootInit` | `ShadowRoot` | LionField |
|
|
153
153
|
| `reset` | public | Resets modelValue to initial value.
Interaction states are cleared | | | LionField |
|
|
154
154
|
| `clear` | public | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) | | | LionField |
|
|
@@ -18,7 +18,7 @@ loadDefaultFeedbackMessages();
|
|
|
18
18
|
|
|
19
19
|
## Features
|
|
20
20
|
|
|
21
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
21
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input/overview.md).
|
|
22
22
|
- Set `min` and `max` value to define the range.
|
|
23
23
|
- Set `step` value in integer or decimal to increase and decrease the value.
|
|
24
24
|
- Use `ArrowUp` or `ArrowDown` to update the value.
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
| `placeholder` | public | `string` | `''` | | LionInput |
|
|
49
49
|
| `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 |
|
|
50
50
|
| `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or
ChoiceGroup | LionField |
|
|
51
|
-
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion
|
|
51
|
+
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
|
|
52
52
|
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionField |
|
|
53
53
|
| `disabled` | public | `boolean` | `false` | | LionField |
|
|
54
54
|
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionField |
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
| `_updateShouldShowFeedbackFor` | protected | | | | LionField |
|
|
147
147
|
| `_prioritizeAndFilterFeedback` | protected | Orders all active validators in this.\_\_validationResult.
Can also filter out occurrences (based on interaction states) | `{ validationResult }, opts: { validationResult: Validator[] }` | `Validator[]` | LionField |
|
|
148
148
|
| `createScopedElement` | public | | `tagName` | | LionField |
|
|
149
|
-
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string,
|
|
149
|
+
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string, classToBeRegistered: typeof HTMLElement` | | LionField |
|
|
150
150
|
| `attachShadow` | public | | `options: ShadowRootInit` | `ShadowRoot` | LionField |
|
|
151
151
|
| `reset` | public | Resets modelValue to initial value.
Interaction states are cleared | | | LionField |
|
|
152
152
|
| `clear` | public | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) | | | LionField |
|
|
@@ -39,7 +39,7 @@ export const main = () => {
|
|
|
39
39
|
|
|
40
40
|
## Features
|
|
41
41
|
|
|
42
|
-
- Extends our [input](https://github.com/ing-bank/lion/blob/
|
|
42
|
+
- Extends our [input](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input/overview.md)
|
|
43
43
|
- Shows a mobile telephone keypad on mobile (by having a native `<input inputmode="tel">` inside)
|
|
44
44
|
- Can be configured with a list of allowed region codes
|
|
45
45
|
- Will be preconfigured with region derived from locale
|
|
@@ -22,7 +22,7 @@ Say we have the following telephone number from Madrid, Spain: `+34919930432`.
|
|
|
22
22
|
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).
|
|
23
23
|
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).
|
|
24
24
|
|
|
25
|
-
The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/
|
|
25
|
+
The table below lists all possible regions worldwide. When [allowed regions](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input-tel/#allowed-regions) are not configured,
|
|
26
26
|
all of them will be supported as values of Input Tel.
|
|
27
27
|
|
|
28
28
|
```js story
|
|
@@ -37,11 +37,11 @@ export const regionCodesTable = () => {
|
|
|
37
37
|
The active region (accessible via readonly accessor `.activeRegion`) determines how validation and formatting
|
|
38
38
|
should be applied. It is dependent on the following factors:
|
|
39
39
|
|
|
40
|
-
- [allowed regions](https://github.com/ing-bank/lion/blob/
|
|
41
|
-
[.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/
|
|
40
|
+
- [allowed regions](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input-tel/#allowed-regions): a list that determines what is allowed to become .activeRegion. If
|
|
41
|
+
[.allowedRegions has only one entry](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
|
|
42
42
|
- the modelValue or viewValue: once it contains sufficient info to derive its region code (and
|
|
43
|
-
the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/
|
|
44
|
-
- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/
|
|
43
|
+
the derived code is inside [allowed regions](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input-tel/#allowed-regions) if configured)
|
|
44
|
+
- active locale (and the derived locale is inside [allowed regions](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input-tel/#allowed-regions) if configured)
|
|
45
45
|
|
|
46
46
|
What follows from the list above is that .activeRegion can change dynamically, after a value
|
|
47
47
|
change in the text box by the user (or when locales or allowed regions would be changed by the
|
|
@@ -130,7 +130,7 @@ export const heuristic = () => {
|
|
|
130
130
|
Once it is configured, validation and formatting will be restricted to those
|
|
131
131
|
values that are present in this list.
|
|
132
132
|
|
|
133
|
-
> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/
|
|
133
|
+
> Note that for [InputTelDropdown](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input-tel-dropdown/index.md), only allowed regions will
|
|
134
134
|
> be shown in the dropdown list.
|
|
135
135
|
|
|
136
136
|
```js preview-story
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
| `placeholder` | public | `string` | `''` | | LionInput |
|
|
54
54
|
| `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 |
|
|
55
55
|
| `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or
ChoiceGroup | LionField |
|
|
56
|
-
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion
|
|
56
|
+
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
|
|
57
57
|
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionField |
|
|
58
58
|
| `disabled` | public | `boolean` | `false` | | LionField |
|
|
59
59
|
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionField |
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
| `_updateShouldShowFeedbackFor` | protected | | | | LionField |
|
|
154
154
|
| `_prioritizeAndFilterFeedback` | protected | Orders all active validators in this.\_\_validationResult.
Can also filter out occurrences (based on interaction states) | `{ validationResult }, opts: { validationResult: Validator[] }` | `Validator[]` | LionField |
|
|
155
155
|
| `createScopedElement` | public | | `tagName` | | LionField |
|
|
156
|
-
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string,
|
|
156
|
+
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string, classToBeRegistered: typeof HTMLElement` | | LionField |
|
|
157
157
|
| `attachShadow` | public | | `options: ShadowRootInit` | `ShadowRoot` | LionField |
|
|
158
158
|
| `reset` | public | Resets modelValue to initial value.
Interaction states are cleared | | | LionField |
|
|
159
159
|
| `clear` | public | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) | | | LionField |
|
|
@@ -19,7 +19,7 @@ export const main = () => {
|
|
|
19
19
|
|
|
20
20
|
## Features
|
|
21
21
|
|
|
22
|
-
- Extends our [input-tel](https://github.com/ing-bank/lion/blob/
|
|
22
|
+
- Extends our [input-tel](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/components/input-tel/overview.md)
|
|
23
23
|
- Shows dropdown list with all possible regions
|
|
24
24
|
- Shows only allowed regions in dropdown list when .allowedRegions is configured
|
|
25
25
|
- Highlights regions on top of dropdown list when .preferredRegions is configured
|
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
| `_isHandlingUserInput` | protected | `boolean` | `false` | Flag that will be set when user interaction takes place (for instance after an 'input'
event). Will be added as meta info to the \`model-value-changed\` event. Depending on
whether a user is interacting, formatting logic will be handled differently. | FormatMixin |
|
|
216
216
|
| `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 | FormRegisteringMixin |
|
|
217
217
|
| `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or
ChoiceGroup | FormRegisteringMixin |
|
|
218
|
-
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion
|
|
218
|
+
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | FormRegisteringMixin |
|
|
219
219
|
|
|
220
220
|
### Methods
|
|
221
221
|
|
|
@@ -139,4 +139,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
|
|
|
139
139
|
|
|
140
140
|
## Validation
|
|
141
141
|
|
|
142
|
-
A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/
|
|
142
|
+
A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/docs/fundamentals/systems/form/validate.md).
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
| `placeholder` | public | `string` | `''` | | LionInput |
|
|
44
44
|
| `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 |
|
|
45
45
|
| `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or
ChoiceGroup | LionField |
|
|
46
|
-
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion
|
|
46
|
+
| `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events
do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https\://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
|
|
47
47
|
| `_requestedToBeDisabled` | protected | `boolean` | `false` | | LionField |
|
|
48
48
|
| `_feedbackConditionMeta` | protected | | | Allows Subclassers to add meta info for feedbackCondition | LionField |
|
|
49
49
|
| `touched` | public | `boolean` | `false` | True when user has focused and left(blurred) the field. | LionField |
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
| `_updateShouldShowFeedbackFor` | protected | | | | LionField |
|
|
145
145
|
| `_prioritizeAndFilterFeedback` | protected | Orders all active validators in this.\_\_validationResult.
Can also filter out occurrences (based on interaction states) | `{ validationResult }, opts: { validationResult: Validator[] }` | `Validator[]` | LionField |
|
|
146
146
|
| `createScopedElement` | public | | `tagName` | | LionField |
|
|
147
|
-
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string,
|
|
147
|
+
| `defineScopedElement` | public | Defines a scoped element. | `tagName: string, classToBeRegistered: typeof HTMLElement` | | LionField |
|
|
148
148
|
| `attachShadow` | public | | `options: ShadowRootInit` | `ShadowRoot` | LionField |
|
|
149
149
|
| `reset` | public | Resets modelValue to initial value.
Interaction states are cleared | | | LionField |
|
|
150
150
|
| `_onChange` | protected | Dispatches custom bubble event | `ev: Event=` | | LionField |
|
|
@@ -20,12 +20,12 @@ export const main = () => html`
|
|
|
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/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/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/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/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/a5b2c2d977e3eea000cbdae3c27510c1924bbcac/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()`
|