@lion/ui 0.7.6 → 0.7.7

package/docs/components/input-date/use-cases.md

@@ -12,7 +12,7 @@ import '@lion/ui/define/lion-input-date.js';
 
 ```js preview-story
 export const isADate = () => html`
-  <lion-input-date label="IsDate" .modelValue=${new Date('foo')}> </lion-input-date>
+  <lion-input-date label="IsDate" .modelValue="${new Date('foo')}"> </lion-input-date>
 `;
 ```
 
@@ -25,8 +25,8 @@ export const withMinimumDate = () => {
     <lion-input-date
       label="MinDate"
       help-text="Enter a date greater than or equal to today."
-      .modelValue=${new Date('2018/05/30')}
-      .validators=${[new MinDate(new Date())]}
+      .modelValue="${new Date('2018/05/30')}"
+      .validators="${[new MinDate(new Date())]}"
     >
     </lion-input-date>
   `;
@@ -42,8 +42,8 @@ export const withMaximumDate = () => {
     <lion-input-date
       label="MaxDate"
       help-text="Enter a date smaller than or equal to today."
-      .modelValue=${new Date('2100/05/30')}
-      .validators=${[new MaxDate(new Date())]}
+      .modelValue="${new Date('2100/05/30')}"
+      .validators="${[new MaxDate(new Date())]}"
     ></lion-input-date>
   `;
 };
@@ -57,8 +57,8 @@ export const withMinimumAndMaximumDate = () => {
   return html`
     <lion-input-date
       label="MinMaxDate"
-      .modelValue=${new Date('2018/05/30')}
-      .validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}
+      .modelValue="${new Date('2018/05/30')}"
+      .validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
     >
       <div slot="help-text">
         Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
@@ -77,7 +77,7 @@ export const faultyPrefilled = () => html`
   <lion-input-date
     label="Date"
     help-text="Faulty prefilled input will be cleared"
-    .modelValue=${'foo'}
+    .modelValue="${'foo'}"
   ></lion-input-date>
 `;
 ```

package/docs/components/input-datepicker/api-table.md

@@ -188,7 +188,7 @@
 
 | Name                           | Type          | Description                                              | Inherited From |
 | ------------------------------ | ------------- | -------------------------------------------------------- | -------------- |
-| `opened-changed`               | `Event`       |                                                          | OverlayMixin   |
+| `opened-changed`               | `CustomEvent` |                                                          | OverlayMixin   |
 | `model-value-changed`          | `CustomEvent` |                                                          | LionField      |
 | `user-input-changed`           | `Event`       |                                                          | LionField      |
 | `focus`                        | `Event`       |                                                          | LionField      |

package/docs/components/input-datepicker/overview.md

@@ -2,7 +2,7 @@
 
 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.
 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.
-We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/input-date/overview.md) for this.
+We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/input-date/overview.md) for this.
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';
@@ -18,11 +18,11 @@ export const main = () => {
 ## Features
 
 - Input field with a datepicker to help to choose a date
-- Based on our [input-date](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
+- Based on our [input-date](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/input-date/overview.md)
+- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/calendar/overview.md) inside the datepicker
+- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

package/docs/components/input-datepicker/use-cases.md

@@ -17,8 +17,8 @@ Below are examples of different validators for dates.
 export const minimumAndMaximumDate = () => html`
   <lion-input-datepicker
     label="MinMaxDate"
-    .modelValue=${new Date('2018/05/30')}
-    .validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}
+    .modelValue="${new Date('2018/05/30')}"
+    .validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
   >
     <div slot="help-text">
       Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
@@ -36,8 +36,8 @@ export const disableSpecificDates = () => html`
   <lion-input-datepicker
     label="IsDateDisabled"
     help-text="You're not allowed to choose any 15th."
-    .modelValue=${new Date('2023/06/15')}
-    .validators=${[new IsDateDisabled(d => d.getDate() === 15)]}
+    .modelValue="${new Date('2023/06/15')}"
+    .validators="${[new IsDateDisabled(d => d.getDate() === 15)]}"
   ></lion-input-datepicker>
 `;
 ```
@@ -53,7 +53,7 @@ export const calendarHeading = () => html`
   <lion-input-datepicker
     label="Date"
     .calendarHeading="${'Custom heading'}"
-    .modelValue=${new Date()}
+    .modelValue="${new Date()}"
   ></lion-input-datepicker>
 `;
 ```

package/docs/components/input-email/overview.md

@@ -15,8 +15,8 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Based on our [input](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/input/overview.md)
+- Makes use of email [validators](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## Installation

package/docs/components/input-email/use-cases.md

@@ -14,7 +14,7 @@ Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed
 
 ```js preview-story
 export const faultyPrefilled = () => html`
-  <lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email>
+  <lion-input-email .modelValue="${'foo'}" label="Email"></lion-input-email>
 `;
 ```
 
@@ -39,8 +39,8 @@ export const customValidator = () => {
   }
   return html`
     <lion-input-email
-      .modelValue=${'foo@bar.com'}
-      .validators=${[new GmailOnly()]}
+      .modelValue="${'foo@bar.com'}"
+      .validators="${[new GmailOnly()]}"
       label="Email"
     ></lion-input-email>
   `;

package/docs/components/input-file/overview.md

@@ -15,7 +15,7 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/input/overview.md)
 - Default labels and validation messages in different languages
 - Options for multi file upload and drop-zone.
 

package/docs/components/input-iban/overview.md

@@ -16,9 +16,9 @@ export const main = () => {
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/input/overview.md)
+- Based on our [input](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/input/overview.md)
 - Default label in different languages
-- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically

package/docs/components/input-iban/use-cases.md

@@ -11,7 +11,7 @@ import '@lion/ui/define/lion-input-iban.js';
 
 ```js preview-story
 export const prefilled = () => html`
-  <lion-input-iban .modelValue=${'NL20INGB0001234567'} name="iban" label="IBAN"></lion-input-iban>
+  <lion-input-iban .modelValue="${'NL20INGB0001234567'}" name="iban" label="IBAN"></lion-input-iban>
 `;
 ```
 
@@ -20,7 +20,7 @@ export const prefilled = () => html`
 ```js preview-story
 export const faultyPrefilled = () => html`
   <lion-input-iban
-    .modelValue=${'NL20INGB0001234567XXXX'}
+    .modelValue="${'NL20INGB0001234567XXXX'}"
     name="iban"
     label="IBAN"
   ></lion-input-iban>
@@ -39,8 +39,8 @@ export const countryRestrictions = () => {
   loadDefaultFeedbackMessages();
   return html`
     <lion-input-iban
-      .modelValue=${'DE89370400440532013000'}
-      .validators=${[new IsCountryIBAN('NL')]}
+      .modelValue="${'DE89370400440532013000'}"
+      .validators="${[new IsCountryIBAN('NL')]}"
       name="iban"
       label="IBAN"
     ></lion-input-iban>
@@ -58,8 +58,8 @@ export const countryRestrictionsMultiple = () => {
   loadDefaultFeedbackMessages();
   return html`
     <lion-input-iban
-      .modelValue=${'DE89370400440532013000'}
-      .validators=${[new IsCountryIBAN(['BE', 'NL', 'LU'])]}
+      .modelValue="${'DE89370400440532013000'}"
+      .validators="${[new IsCountryIBAN(['BE', 'NL', 'LU'])]}"
       name="iban"
       label="IBAN"
     ></lion-input-iban>
@@ -88,8 +88,8 @@ export const blacklistedCountry = () => {
   loadDefaultFeedbackMessages();
   return html`
     <lion-input-iban
-      .modelValue=${'DE89370400440532013000'}
-      .validators=${[new IsNotCountryIBAN(['RO', 'NL'])]}
+      .modelValue="${'DE89370400440532013000'}"
+      .validators="${[new IsNotCountryIBAN(['RO', 'NL'])]}"
       name="iban"
       label="IBAN"
     ></lion-input-iban>

package/docs/components/input-range/overview.md

@@ -13,11 +13,11 @@ import '@lion/ui/define/lion-input-range.js';
 
 ## Features
 
-- Based on our [input](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/components/input/overview.md).
+- Based on our [input](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/components/input/overview.md).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
+- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
 
 ## Installation