@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.
Files changed (136) hide show
  1. package/README.md +7 -7
  2. package/components/calendar/src/LionCalendar.js +6 -0
  3. package/components/core/src/DisabledWithTabIndexMixin.js +7 -0
  4. package/components/core/src/ScopedElementsMixin.js +58 -37
  5. package/components/core/test/ScopedElementsMixin.test.js +131 -0
  6. package/components/core/test/ssr-definitions/ScopedElementsHost.define.js +1 -0
  7. package/components/form/src/LionForm.js +3 -12
  8. package/components/form/test/lion-form.test.js +88 -1
  9. package/components/form-core/src/FormControlMixin.js +6 -0
  10. package/components/form-core/src/registration/FormRegisteringMixin.js +1 -1
  11. package/components/form-core/src/utils/SyncUpdatableMixin.js +7 -0
  12. package/components/form-core/src/validate/LionValidationFeedback.js +4 -2
  13. package/components/form-core/test/validate/lion-validation-feedback.test.js +12 -0
  14. package/components/form-core/types/registration/FormRegisteringMixinTypes.ts +1 -1
  15. package/components/icon/src/LionIcon.js +6 -0
  16. package/components/listbox/test-suites/ListboxMixin.suite.js +2 -2
  17. package/components/localize/src/LocalizeManager.js +259 -204
  18. package/components/overlays/src/OverlayController.js +1 -1
  19. package/components/overlays/src/OverlayMixin.js +7 -0
  20. package/components/progress-indicator/src/LionProgressIndicator.js +6 -0
  21. package/components/steps/src/LionStep.js +6 -0
  22. package/components/steps/src/LionSteps.js +6 -0
  23. package/components/tabs/src/LionTabs.js +6 -0
  24. package/components/tooltip/src/LionTooltip.js +6 -0
  25. package/custom-elements.json +792 -330
  26. package/dist-types/components/calendar/src/LionCalendar.d.ts +5 -0
  27. package/dist-types/components/calendar/src/LionCalendar.d.ts.map +1 -1
  28. package/dist-types/components/core/src/DisabledWithTabIndexMixin.d.ts.map +1 -1
  29. package/dist-types/components/core/src/ScopedElementsMixin.d.ts +43 -6
  30. package/dist-types/components/core/src/ScopedElementsMixin.d.ts.map +1 -1
  31. package/dist-types/components/core/test/ScopedElementsMixin.test.d.ts +2 -0
  32. package/dist-types/components/core/test/ScopedElementsMixin.test.d.ts.map +1 -0
  33. package/dist-types/components/core/test/ssr-definitions/ScopedElementsHost.define.d.ts +2 -0
  34. package/dist-types/components/core/test/ssr-definitions/ScopedElementsHost.define.d.ts.map +1 -0
  35. package/dist-types/components/form/src/LionForm.d.ts.map +1 -1
  36. package/dist-types/components/form/test/lion-form.test.d.ts.map +1 -1
  37. package/dist-types/components/form-core/src/FormControlMixin.d.ts.map +1 -1
  38. package/dist-types/components/form-core/src/utils/SyncUpdatableMixin.d.ts.map +1 -1
  39. package/dist-types/components/form-core/src/validate/LionValidationFeedback.d.ts.map +1 -1
  40. package/dist-types/components/form-core/types/registration/FormRegisteringMixinTypes.d.ts +1 -1
  41. package/dist-types/components/form-integrations/test/helpers/helpers.d.ts +3 -3
  42. package/dist-types/components/form-integrations/test/helpers/helpers.d.ts.map +1 -1
  43. package/dist-types/components/icon/src/LionIcon.d.ts +5 -0
  44. package/dist-types/components/icon/src/LionIcon.d.ts.map +1 -1
  45. package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts +1 -1
  46. package/dist-types/components/input-file/src/LionInputFile.d.ts +1 -1
  47. package/dist-types/components/input-file/src/LionSelectedFileList.d.ts +1 -1
  48. package/dist-types/components/localize/src/LocalizeManager.d.ts +109 -112
  49. package/dist-types/components/localize/src/LocalizeManager.d.ts.map +1 -1
  50. package/dist-types/components/overlays/src/OverlayMixin.d.ts.map +1 -1
  51. package/dist-types/components/progress-indicator/src/LionProgressIndicator.d.ts +5 -0
  52. package/dist-types/components/progress-indicator/src/LionProgressIndicator.d.ts.map +1 -1
  53. package/dist-types/components/select-rich/src/LionSelectRich.d.ts +1 -1
  54. package/dist-types/components/steps/src/LionStep.d.ts +5 -0
  55. package/dist-types/components/steps/src/LionStep.d.ts.map +1 -1
  56. package/dist-types/components/steps/src/LionSteps.d.ts +5 -0
  57. package/dist-types/components/steps/src/LionSteps.d.ts.map +1 -1
  58. package/dist-types/components/switch/src/LionSwitch.d.ts +1 -1
  59. package/dist-types/components/tabs/src/LionTabs.d.ts +5 -0
  60. package/dist-types/components/tabs/src/LionTabs.d.ts.map +1 -1
  61. package/dist-types/components/tooltip/src/LionTooltip.d.ts +5 -0
  62. package/dist-types/components/tooltip/src/LionTooltip.d.ts.map +1 -1
  63. package/dist-types/tsconfig.tsbuildinfo +1 -1
  64. package/docs/components/checkbox-group/api-table.md +2 -2
  65. package/docs/components/checkbox-group/overview.md +2 -2
  66. package/docs/components/collapsible/overview.md +1 -1
  67. package/docs/components/combobox/overview.md +1 -1
  68. package/docs/components/combobox/use-cases.md +1 -1
  69. package/docs/components/dialog/overview.md +1 -1
  70. package/docs/components/fieldset/overview.md +5 -5
  71. package/docs/components/form/overview.md +3 -3
  72. package/docs/components/icon/use-cases.md +1 -1
  73. package/docs/components/input/api-table.md +2 -2
  74. package/docs/components/input/overview.md +1 -1
  75. package/docs/components/input-amount/api-table.md +2 -2
  76. package/docs/components/input-amount/overview.md +3 -3
  77. package/docs/components/input-date/api-table.md +2 -2
  78. package/docs/components/input-date/overview.md +3 -3
  79. package/docs/components/input-datepicker/api-table.md +2 -2
  80. package/docs/components/input-datepicker/overview.md +5 -5
  81. package/docs/components/input-email/api-table.md +2 -2
  82. package/docs/components/input-email/overview.md +2 -2
  83. package/docs/components/input-file/api-table.md +2 -2
  84. package/docs/components/input-file/overview.md +1 -1
  85. package/docs/components/input-iban/api-table.md +2 -2
  86. package/docs/components/input-iban/overview.md +2 -2
  87. package/docs/components/input-range/api-table.md +2 -2
  88. package/docs/components/input-range/overview.md +2 -2
  89. package/docs/components/input-stepper/api-table.md +2 -2
  90. package/docs/components/input-stepper/overview.md +1 -1
  91. package/docs/components/input-tel/api-table.md +2 -2
  92. package/docs/components/input-tel/overview.md +1 -1
  93. package/docs/components/input-tel/use-cases.md +6 -6
  94. package/docs/components/input-tel-dropdown/api-table.md +2 -2
  95. package/docs/components/input-tel-dropdown/overview.md +1 -1
  96. package/docs/components/listbox/api-table.md +1 -1
  97. package/docs/components/listbox/use-cases.md +1 -1
  98. package/docs/components/radio-group/api-table.md +2 -2
  99. package/docs/components/radio-group/overview.md +3 -3
  100. package/docs/components/select/api-table.md +2 -2
  101. package/docs/components/select/use-cases.md +1 -1
  102. package/docs/components/select-rich/api-table.md +1 -1
  103. package/docs/components/select-rich/use-cases.md +1 -1
  104. package/docs/components/switch/api-table.md +2 -2
  105. package/docs/components/tabs/examples.md +1 -1
  106. package/docs/components/textarea/api-table.md +2 -2
  107. package/docs/fundamentals/index.md +4 -4
  108. package/docs/fundamentals/node-tools/providence-analytics/LocalConfiguration.md +1 -1
  109. package/docs/fundamentals/node-tools/providence-analytics/QueryResult.md +1 -1
  110. package/docs/fundamentals/node-tools/providence-analytics/analyzer.md +1 -1
  111. package/docs/fundamentals/node-tools/providence-analytics/dashboard.md +1 -1
  112. package/docs/fundamentals/node-tools/providence-analytics/overview.md +3 -3
  113. package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
  114. package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
  115. package/docs/fundamentals/rationales/accessibility.md +1 -1
  116. package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
  117. package/docs/fundamentals/systems/core/overview.md +1 -1
  118. package/docs/fundamentals/systems/form/api-table.md +1 -1
  119. package/docs/fundamentals/systems/form/formatting-and-parsing.md +4 -4
  120. package/docs/fundamentals/systems/form/model-value.md +1 -1
  121. package/docs/fundamentals/systems/form/overview.md +28 -28
  122. package/docs/fundamentals/systems/form/validate.md +2 -2
  123. package/docs/fundamentals/systems/localize/api-table.md +38 -40
  124. package/docs/fundamentals/systems/localize/overview.md +4 -4
  125. package/docs/fundamentals/systems/overlays/configuration.md +2 -2
  126. package/docs/fundamentals/systems/overlays/overview.md +5 -5
  127. package/docs/fundamentals/systems/overlays/use-cases.md +2 -2
  128. package/docs/fundamentals/tools/helpers/overview.md +1 -1
  129. package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
  130. package/docs/guides/how-to/create-a-custom-field.md +5 -5
  131. package/docs/guides/how-to/create-a-form.md +4 -4
  132. package/docs/guides/how-to/extend-a-native-input.md +2 -2
  133. package/docs/guides/index.md +8 -8
  134. package/docs/guides/principles/index.md +5 -5
  135. package/docs/guides/principles/styling.md +1 -1
  136. 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-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | 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.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, klass: typeof HTMLElement` | | LionField |
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md)
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-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | 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.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, klass: typeof HTMLElement` | | LionField |
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md)
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
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-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | 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.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, klass: typeof HTMLElement` | | LionField |
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md).
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
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-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | 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.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, klass: typeof HTMLElement` | | LionField |
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md).
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-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | 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.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, klass: typeof HTMLElement` | | LionField |
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input/overview.md)
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input-tel/#allowed-regions) are not configured,
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/370b357bd3ab5667616801c496f59c79d71585ba/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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input-tel/#restrict-to-one-region), .activeRegion will always be this value.
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/370b357bd3ab5667616801c496f59c79d71585ba/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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input-tel/#allowed-regions) if configured)
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input-tel-dropdown/index.md), only allowed regions will
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&#xA;of the parent. Also, it serves as the key of key/value pairs in&#xA; modelValue/serializedValue objects | LionField |
55
55
  | `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or&#xA;ChoiceGroup | LionField |
56
- | `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events&#xA;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.&#xA;Use this option if you know what you're doing. It will then be possible to nest FormControls&#xA;inside shadow dom. See https\://lion-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
56
+ | `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events&#xA;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.&#xA;Use this option if you know what you're doing. It will then be possible to nest FormControls&#xA;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.&#xA;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, klass: typeof HTMLElement` | | LionField |
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.&#xA;Interaction states are cleared | | | LionField |
159
159
  | `clear` | public | Clears modelValue.&#xA;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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/input-tel/overview.md)
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'&#xA;event). Will be added as meta info to the \`model-value-changed\` event. Depending on&#xA;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&#xA;of the parent. Also, it serves as the key of key/value pairs in&#xA; modelValue/serializedValue objects | FormRegisteringMixin |
217
217
  | `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or&#xA;ChoiceGroup | FormRegisteringMixin |
218
- | `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events&#xA;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.&#xA;Use this option if you know what you're doing. It will then be possible to nest FormControls&#xA;inside shadow dom. See https\://lion-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | FormRegisteringMixin |
218
+ | `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events&#xA;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.&#xA;Use this option if you know what you're doing. It will then be possible to nest FormControls&#xA;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/370b357bd3ab5667616801c496f59c79d71585ba/docs/fundamentals/systems/form/validate.md).
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&#xA;of the parent. Also, it serves as the key of key/value pairs in&#xA; modelValue/serializedValue objects | LionField |
45
45
  | `_parentFormGroup` | protected | `FormRegistrarHost \| undefined` | `undefined` | The registrar this FormControl registers to, Usually a descendant of FormGroup or&#xA;ChoiceGroup | LionField |
46
- | `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events&#xA;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.&#xA;Use this option if you know what you're doing. It will then be possible to nest FormControls&#xA;inside shadow dom. See https\://lion-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility | LionField |
46
+ | `allowCrossRootRegistration` | public | `boolean` | `false` | To encourage accessibility best practices, \`form-element-register\` events&#xA;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.&#xA;Use this option if you know what you're doing. It will then be possible to nest FormControls&#xA;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.&#xA;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, klass: typeof HTMLElement` | | LionField |
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.&#xA;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/370b357bd3ab5667616801c496f59c79d71585ba/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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/select/overview.md) instead.
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/370b357bd3ab5667616801c496f59c79d71585ba/docs/components/fieldset/overview.md), it has all the features a fieldset has.
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()`