@lion/ui 0.7.6 → 0.7.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/components/button/test-suites/LionButton.suite.js +3 -1
- package/components/calendar/src/LionCalendar.js +9 -5
- package/components/calendar/test/lion-calendar.test.js +33 -6
- package/components/combobox/src/LionCombobox.js +33 -9
- package/components/combobox/test/lion-combobox.test.js +134 -7
- package/components/dialog/test/lion-dialog.test.js +59 -1
- package/components/input-datepicker/src/LionInputDatepicker.js +1 -21
- package/components/input-datepicker/test/lion-input-datepicker.test.js +30 -3
- package/components/input-file/src/FileHandle.js +1 -1
- package/components/input-file/src/LionInputFile.js +1 -3
- package/components/input-file/test/lion-input-file.test.js +11 -14
- package/components/overlays/src/OverlayController.js +13 -7
- package/components/overlays/src/OverlayMixin.js +5 -1
- package/components/overlays/test/OverlayController.test.js +46 -0
- package/components/select-rich/src/LionSelectRich.js +12 -0
- package/components/select-rich/test/lion-select-rich.test.js +26 -0
- package/custom-elements.json +60 -73
- package/dist-types/components/button/test-suites/LionButton.suite.d.ts.map +1 -1
- package/dist-types/components/calendar/src/LionCalendar.d.ts +1 -0
- package/dist-types/components/calendar/src/LionCalendar.d.ts.map +1 -1
- package/dist-types/components/combobox/src/LionCombobox.d.ts +9 -0
- package/dist-types/components/combobox/src/LionCombobox.d.ts.map +1 -1
- package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts +0 -5
- package/dist-types/components/input-datepicker/src/LionInputDatepicker.d.ts.map +1 -1
- package/dist-types/components/input-file/src/LionInputFile.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayController.d.ts.map +1 -1
- package/dist-types/components/overlays/src/OverlayMixin.d.ts.map +1 -1
- package/dist-types/components/select-rich/src/LionSelectRich.d.ts.map +1 -1
- package/dist-types/tsconfig.tsbuildinfo +1 -1
- package/docs/components/button/use-cases.md +2 -2
- package/docs/components/calendar/use-cases.md +4 -4
- package/docs/components/checkbox-group/api-table.md +49 -55
- package/docs/components/checkbox-group/overview.md +5 -5
- package/docs/components/checkbox-group/use-cases.md +33 -33
- package/docs/components/collapsible/overview.md +1 -1
- package/docs/components/collapsible/use-cases.md +3 -3
- package/docs/components/combobox/api-table.md +84 -89
- package/docs/components/combobox/extensions.md +20 -20
- package/docs/components/combobox/overview.md +1 -1
- package/docs/components/combobox/use-cases.md +6 -6
- package/docs/components/dialog/api-table.md +3 -3
- package/docs/components/dialog/overview.md +2 -2
- package/docs/components/dialog/src/external-dialog.js +32 -0
- package/docs/components/dialog/src/slots-dialog-content.js +1 -1
- package/docs/components/dialog/src/styled-dialog-content.js +1 -1
- package/docs/components/dialog/use-cases.md +49 -3
- package/docs/components/drawer/use-cases.md +3 -3
- package/docs/components/fieldset/api-table.md +45 -51
- package/docs/components/fieldset/overview.md +7 -7
- package/docs/components/fieldset/use-cases.md +15 -15
- package/docs/components/form/overview.md +7 -7
- package/docs/components/form/use-cases.md +4 -4
- package/docs/components/icon/use-cases.md +1 -1
- package/docs/components/input/overview.md +1 -1
- package/docs/components/input/use-cases.md +3 -3
- package/docs/components/input-amount/overview.md +3 -3
- package/docs/components/input-amount/use-cases.md +8 -8
- package/docs/components/input-date/overview.md +3 -3
- package/docs/components/input-date/use-cases.md +8 -8
- package/docs/components/input-datepicker/api-table.md +1 -3
- package/docs/components/input-datepicker/overview.md +5 -5
- package/docs/components/input-datepicker/use-cases.md +5 -5
- package/docs/components/input-email/overview.md +2 -2
- package/docs/components/input-email/use-cases.md +3 -3
- package/docs/components/input-file/overview.md +1 -1
- package/docs/components/input-iban/overview.md +2 -2
- package/docs/components/input-iban/use-cases.md +8 -8
- package/docs/components/input-range/overview.md +2 -2
- package/docs/components/input-stepper/api-table.md +65 -69
- package/docs/components/input-stepper/overview.md +1 -1
- package/docs/components/input-tel/overview.md +1 -1
- package/docs/components/input-tel/use-cases.md +9 -9
- package/docs/components/input-tel-dropdown/api-table.md +70 -73
- package/docs/components/input-tel-dropdown/extensions.md +1 -1
- package/docs/components/input-tel-dropdown/overview.md +1 -1
- package/docs/components/input-tel-dropdown/use-cases.md +5 -5
- package/docs/components/listbox/api-table.md +64 -70
- package/docs/components/listbox/overview.md +5 -5
- package/docs/components/listbox/use-cases.md +61 -61
- package/docs/components/pagination/use-cases.md +5 -5
- package/docs/components/radio-group/api-table.md +49 -55
- package/docs/components/radio-group/overview.md +6 -6
- package/docs/components/radio-group/use-cases.md +18 -18
- package/docs/components/select/use-cases.md +2 -2
- package/docs/components/select-rich/api-table.md +79 -85
- package/docs/components/select-rich/overview.md +3 -3
- package/docs/components/select-rich/use-cases.md +33 -33
- package/docs/components/steps/overview.md +4 -4
- package/docs/components/steps/use-cases.md +7 -7
- package/docs/components/tabs/examples.md +1 -1
- package/docs/components/tabs/use-cases.md +1 -1
- package/docs/components/textarea/use-cases.md +3 -3
- package/docs/components/tooltip/api-table.md +3 -3
- package/docs/components/tooltip/use-cases.md +6 -6
- package/docs/fundamentals/index.md +4 -4
- package/docs/fundamentals/node-tools/providence-analytics/LocalConfiguration.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/QueryResult.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/analyzer.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/dashboard.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/overview.md +3 -3
- package/docs/fundamentals/node-tools/publish-docs/overview.md +3 -3
- package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +2 -2
- package/docs/fundamentals/rationales/accessibility.md +1 -1
- package/docs/fundamentals/systems/core/SlotMixin.md +1 -1
- package/docs/fundamentals/systems/core/overview.md +1 -1
- package/docs/fundamentals/systems/form/formatting-and-parsing.md +8 -8
- package/docs/fundamentals/systems/form/model-value.md +1 -1
- package/docs/fundamentals/systems/form/overview.md +28 -28
- package/docs/fundamentals/systems/form/use-cases.md +19 -19
- package/docs/fundamentals/systems/form/validate.md +50 -50
- package/docs/fundamentals/systems/localize/api-table.md +10 -17
- package/docs/fundamentals/systems/localize/overview.md +4 -4
- package/docs/fundamentals/systems/localize/use-cases.md +4 -4
- package/docs/fundamentals/systems/overlays/_configuration-positioning.md +4 -4
- package/docs/fundamentals/systems/overlays/api-table.md +34 -90
- package/docs/fundamentals/systems/overlays/assets/umbrella-form.js +9 -9
- package/docs/fundamentals/systems/overlays/configuration.md +30 -30
- package/docs/fundamentals/systems/overlays/overview.md +6 -6
- package/docs/fundamentals/systems/overlays/use-cases.md +30 -30
- package/docs/fundamentals/tools/ajax/use-cases.md +20 -20
- package/docs/fundamentals/tools/helpers/action-logger.md +3 -3
- package/docs/fundamentals/tools/helpers/overview.md +1 -1
- package/docs/fundamentals/tools/singleton-manager/example-complex/demo-app.js +2 -2
- package/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js +2 -2
- package/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js +2 -2
- package/docs/fundamentals/tools/singleton-manager/overview.md +4 -4
- package/docs/guides/how-to/create-a-custom-field.md +7 -7
- package/docs/guides/how-to/create-a-form.md +4 -4
- package/docs/guides/how-to/extend-a-native-input.md +2 -2
- package/docs/guides/index.md +8 -8
- package/docs/guides/principles/index.md +5 -5
- package/docs/guides/principles/scoped-elements.md +1 -1
- package/docs/guides/principles/styling.md +1 -1
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ import '@lion/ui/define/lion-input-date.js';
|
|
|
12
12
|
|
|
13
13
|
```js preview-story
|
|
14
14
|
export const isADate = () => html`
|
|
15
|
-
<lion-input-date label="IsDate" .modelValue
|
|
15
|
+
<lion-input-date label="IsDate" .modelValue="${new Date('foo')}"> </lion-input-date>
|
|
16
16
|
`;
|
|
17
17
|
```
|
|
18
18
|
|
|
@@ -25,8 +25,8 @@ export const withMinimumDate = () => {
|
|
|
25
25
|
<lion-input-date
|
|
26
26
|
label="MinDate"
|
|
27
27
|
help-text="Enter a date greater than or equal to today."
|
|
28
|
-
.modelValue
|
|
29
|
-
.validators
|
|
28
|
+
.modelValue="${new Date('2018/05/30')}"
|
|
29
|
+
.validators="${[new MinDate(new Date())]}"
|
|
30
30
|
>
|
|
31
31
|
</lion-input-date>
|
|
32
32
|
`;
|
|
@@ -42,8 +42,8 @@ export const withMaximumDate = () => {
|
|
|
42
42
|
<lion-input-date
|
|
43
43
|
label="MaxDate"
|
|
44
44
|
help-text="Enter a date smaller than or equal to today."
|
|
45
|
-
.modelValue
|
|
46
|
-
.validators
|
|
45
|
+
.modelValue="${new Date('2100/05/30')}"
|
|
46
|
+
.validators="${[new MaxDate(new Date())]}"
|
|
47
47
|
></lion-input-date>
|
|
48
48
|
`;
|
|
49
49
|
};
|
|
@@ -57,8 +57,8 @@ export const withMinimumAndMaximumDate = () => {
|
|
|
57
57
|
return html`
|
|
58
58
|
<lion-input-date
|
|
59
59
|
label="MinMaxDate"
|
|
60
|
-
.modelValue
|
|
61
|
-
.validators
|
|
60
|
+
.modelValue="${new Date('2018/05/30')}"
|
|
61
|
+
.validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
|
|
62
62
|
>
|
|
63
63
|
<div slot="help-text">
|
|
64
64
|
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
|
|
@@ -77,7 +77,7 @@ export const faultyPrefilled = () => html`
|
|
|
77
77
|
<lion-input-date
|
|
78
78
|
label="Date"
|
|
79
79
|
help-text="Faulty prefilled input will be cleared"
|
|
80
|
-
.modelValue
|
|
80
|
+
.modelValue="${'foo'}"
|
|
81
81
|
></lion-input-date>
|
|
82
82
|
`;
|
|
83
83
|
```
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
|
|
7
7
|
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
8
8
|
| --------------------------------- | --------- | ----------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
|
|
9
|
-
| `_inputFormatter` | protected | | | | |
|
|
10
9
|
| `slots` | public | | | Adds ".\_feedbackNode" as described below | LionField |
|
|
11
10
|
| `_invokerNode` | protected | | | | |
|
|
12
11
|
| `_calendarNode` | protected | `LionCalendar` | | | |
|
|
@@ -86,7 +85,6 @@
|
|
|
86
85
|
|
|
87
86
|
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
88
87
|
| ---------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------------------- |
|
|
89
|
-
| `_formatDate` | protected | | `date: Date` | | |
|
|
90
88
|
| `_overlayTemplate` | protected | Defining this overlay as a templates from OverlayMixin
this is our source to give as .contentNode to OverlayController.
Important: do not change the name of this method. | | | |
|
|
91
89
|
| `_overlayFrameTemplate` | protected | | | | |
|
|
92
90
|
| `_calendarTemplate` | protected | Subclassers can replace this with their custom extension of
LionCalendar, like \`\<my-calendar id="calendar">\</my-calendar>\` | | | |
|
|
@@ -188,7 +186,7 @@
|
|
|
188
186
|
|
|
189
187
|
| Name | Type | Description | Inherited From |
|
|
190
188
|
| ------------------------------ | ------------- | -------------------------------------------------------- | -------------- |
|
|
191
|
-
| `opened-changed` | `
|
|
189
|
+
| `opened-changed` | `CustomEvent` | | OverlayMixin |
|
|
192
190
|
| `model-value-changed` | `CustomEvent` | | LionField |
|
|
193
191
|
| `user-input-changed` | `Event` | | LionField |
|
|
194
192
|
| `focus` | `Event` | | LionField |
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
|
|
4
4
|
For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
|
|
5
|
-
We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/
|
|
5
|
+
We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input-date/overview.md) for this.
|
|
6
6
|
|
|
7
7
|
```js script
|
|
8
8
|
import { html } from '@mdjs/mdjs-preview';
|
|
@@ -18,11 +18,11 @@ export const main = () => {
|
|
|
18
18
|
## Features
|
|
19
19
|
|
|
20
20
|
- Input field with a datepicker to help to choose a date
|
|
21
|
-
- Based on our [input-date](https://github.com/ing-bank/lion/blob/
|
|
22
|
-
- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/
|
|
23
|
-
- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/
|
|
21
|
+
- Based on our [input-date](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input-date/overview.md)
|
|
22
|
+
- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/calendar/overview.md) inside the datepicker
|
|
23
|
+
- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
|
|
24
24
|
- Option to overwrite locale to change the formatting and parsing
|
|
25
|
-
- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/
|
|
25
|
+
- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
|
|
26
26
|
- IsDate (default)
|
|
27
27
|
- MinDate
|
|
28
28
|
- MaxDate
|
|
@@ -17,8 +17,8 @@ Below are examples of different validators for dates.
|
|
|
17
17
|
export const minimumAndMaximumDate = () => html`
|
|
18
18
|
<lion-input-datepicker
|
|
19
19
|
label="MinMaxDate"
|
|
20
|
-
.modelValue
|
|
21
|
-
.validators
|
|
20
|
+
.modelValue="${new Date('2018/05/30')}"
|
|
21
|
+
.validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
|
|
22
22
|
>
|
|
23
23
|
<div slot="help-text">
|
|
24
24
|
Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
|
|
@@ -36,8 +36,8 @@ export const disableSpecificDates = () => html`
|
|
|
36
36
|
<lion-input-datepicker
|
|
37
37
|
label="IsDateDisabled"
|
|
38
38
|
help-text="You're not allowed to choose any 15th."
|
|
39
|
-
.modelValue
|
|
40
|
-
.validators
|
|
39
|
+
.modelValue="${new Date('2023/06/15')}"
|
|
40
|
+
.validators="${[new IsDateDisabled(d => d.getDate() === 15)]}"
|
|
41
41
|
></lion-input-datepicker>
|
|
42
42
|
`;
|
|
43
43
|
```
|
|
@@ -53,7 +53,7 @@ export const calendarHeading = () => html`
|
|
|
53
53
|
<lion-input-datepicker
|
|
54
54
|
label="Date"
|
|
55
55
|
.calendarHeading="${'Custom heading'}"
|
|
56
|
-
.modelValue
|
|
56
|
+
.modelValue="${new Date()}"
|
|
57
57
|
></lion-input-datepicker>
|
|
58
58
|
`;
|
|
59
59
|
```
|
|
@@ -15,8 +15,8 @@ export const main = () => {
|
|
|
15
15
|
|
|
16
16
|
## Features
|
|
17
17
|
|
|
18
|
-
- Based on our [input](https://github.com/ing-bank/lion/blob/
|
|
19
|
-
- Makes use of email [validators](https://github.com/ing-bank/lion/blob/
|
|
18
|
+
- Based on our [input](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/components/input/overview.md)
|
|
19
|
+
- Makes use of email [validators](https://github.com/ing-bank/lion/blob/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
|
|
20
20
|
- IsEmail (default)
|
|
21
21
|
|
|
22
22
|
## Installation
|
|
@@ -14,7 +14,7 @@ Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed
|
|
|
14
14
|
|
|
15
15
|
```js preview-story
|
|
16
16
|
export const faultyPrefilled = () => html`
|
|
17
|
-
<lion-input-email .modelValue
|
|
17
|
+
<lion-input-email .modelValue="${'foo'}" label="Email"></lion-input-email>
|
|
18
18
|
`;
|
|
19
19
|
```
|
|
20
20
|
|
|
@@ -39,8 +39,8 @@ export const customValidator = () => {
|
|
|
39
39
|
}
|
|
40
40
|
return html`
|
|
41
41
|
<lion-input-email
|
|
42
|
-
.modelValue
|
|
43
|
-
.validators
|
|
42
|
+
.modelValue="${'foo@bar.com'}"
|
|
43
|
+
.validators="${[new GmailOnly()]}"
|
|
44
44
|
label="Email"
|
|
45
45
|
></lion-input-email>
|
|
46
46
|
`;
|
|
@@ -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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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
|
|
|
@@ -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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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
|
|
@@ -11,7 +11,7 @@ import '@lion/ui/define/lion-input-iban.js';
|
|
|
11
11
|
|
|
12
12
|
```js preview-story
|
|
13
13
|
export const prefilled = () => html`
|
|
14
|
-
<lion-input-iban .modelValue
|
|
14
|
+
<lion-input-iban .modelValue="${'NL20INGB0001234567'}" name="iban" label="IBAN"></lion-input-iban>
|
|
15
15
|
`;
|
|
16
16
|
```
|
|
17
17
|
|
|
@@ -20,7 +20,7 @@ export const prefilled = () => html`
|
|
|
20
20
|
```js preview-story
|
|
21
21
|
export const faultyPrefilled = () => html`
|
|
22
22
|
<lion-input-iban
|
|
23
|
-
.modelValue
|
|
23
|
+
.modelValue="${'NL20INGB0001234567XXXX'}"
|
|
24
24
|
name="iban"
|
|
25
25
|
label="IBAN"
|
|
26
26
|
></lion-input-iban>
|
|
@@ -39,8 +39,8 @@ export const countryRestrictions = () => {
|
|
|
39
39
|
loadDefaultFeedbackMessages();
|
|
40
40
|
return html`
|
|
41
41
|
<lion-input-iban
|
|
42
|
-
.modelValue
|
|
43
|
-
.validators
|
|
42
|
+
.modelValue="${'DE89370400440532013000'}"
|
|
43
|
+
.validators="${[new IsCountryIBAN('NL')]}"
|
|
44
44
|
name="iban"
|
|
45
45
|
label="IBAN"
|
|
46
46
|
></lion-input-iban>
|
|
@@ -58,8 +58,8 @@ export const countryRestrictionsMultiple = () => {
|
|
|
58
58
|
loadDefaultFeedbackMessages();
|
|
59
59
|
return html`
|
|
60
60
|
<lion-input-iban
|
|
61
|
-
.modelValue
|
|
62
|
-
.validators
|
|
61
|
+
.modelValue="${'DE89370400440532013000'}"
|
|
62
|
+
.validators="${[new IsCountryIBAN(['BE', 'NL', 'LU'])]}"
|
|
63
63
|
name="iban"
|
|
64
64
|
label="IBAN"
|
|
65
65
|
></lion-input-iban>
|
|
@@ -88,8 +88,8 @@ export const blacklistedCountry = () => {
|
|
|
88
88
|
loadDefaultFeedbackMessages();
|
|
89
89
|
return html`
|
|
90
90
|
<lion-input-iban
|
|
91
|
-
.modelValue
|
|
92
|
-
.validators
|
|
91
|
+
.modelValue="${'DE89370400440532013000'}"
|
|
92
|
+
.validators="${[new IsNotCountryIBAN(['RO', 'NL'])]}"
|
|
93
93
|
name="iban"
|
|
94
94
|
label="IBAN"
|
|
95
95
|
></lion-input-iban>
|
|
@@ -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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/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/b25478e4cc0cb51c4fda1eccadf5e630b679f53c/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
|
|
21
21
|
|
|
22
22
|
## Installation
|
|
23
23
|
|