@lion/ui 0.7.6 → 0.7.7

package/docs/fundamentals/systems/form/validate.md

@@ -57,7 +57,7 @@ Validation happens on every change of `modelValue`. A change in modelValue can b
 
 ## When validation feedback will be shown
 
-Although validation happens realtime under the hood, displaying validity feedback in realtime may not always lead to the desired User Experience. Together with [interaction states](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/interaction-states.md),
+Although validation happens realtime under the hood, displaying validity feedback in realtime may not always lead to the desired User Experience. Together with [interaction states](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/form/interaction-states.md),
 validity states can determine whether a validation message should be shown along the input field.
 
 ## Assessing field validation state programmatically
@@ -211,11 +211,11 @@ export const defaultValidationMessages = () => {
       .validators="${[new Required(), new MinLength(4)]}"
       .modelValue="${'foo'}"
     ></lion-input>
-    <button @click=${() => (localize.locale = 'de-DE')}>DE</button>
-    <button @click=${() => (localize.locale = 'en-GB')}>EN</button>
-    <button @click=${() => (localize.locale = 'fr-FR')}>FR</button>
-    <button @click=${() => (localize.locale = 'nl-NL')}>NL</button>
-    <button @click=${() => (localize.locale = 'zh-CN')}>CN</button>
+    <button @click="${() => (localize.locale = 'de-DE')}">DE</button>
+    <button @click="${() => (localize.locale = 'en-GB')}">EN</button>
+    <button @click="${() => (localize.locale = 'fr-FR')}">FR</button>
+    <button @click="${() => (localize.locale = 'nl-NL')}">NL</button>
+    <button @click="${() => (localize.locale = 'zh-CN')}">CN</button>
   `;
 };
 ```
@@ -228,11 +228,11 @@ The required validator can be put onto every form field element and will make su
 
 ```js preview-story
 export const requiredValidator = () => html`
-  <lion-input .validators=${[new Required()]} label="Required" .fieldName="value"></lion-input>
+  <lion-input .validators="${[new Required()]}" label="Required" .fieldName="value"></lion-input>
 `;
 ```
 
-The default `Required` validation message is "Please, enter a(n) {fieldName}". In which the "fieldName" can be provided separately via the `fieldName` attribute, with a fallback to the label. See [override fieldname](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/form/#override-fieldname) for more information.
+The default `Required` validation message is "Please, enter a(n) {fieldName}". In which the "fieldName" can be provided separately via the `fieldName` attribute, with a fallback to the label. See [override fieldname](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/form/#override-fieldname) for more information.
 
 Specific required messages for a select and file-upload are created.
 
@@ -243,28 +243,28 @@ Useful on input elements it allows to define how many characters can be entered.
 ```js preview-story
 export const stringValidators = () => html`
   <lion-input
-    .validators=${[new EqualsLength(7)]}
-    .modelValue=${'not exactly'}
+    .validators="${[new EqualsLength(7)]}"
+    .modelValue="${'not exactly'}"
     label="EqualsLength"
   ></lion-input>
   <lion-input
-    .validators=${[new MinLength(10)]}
-    .modelValue=${'too short'}
+    .validators="${[new MinLength(10)]}"
+    .modelValue="${'too short'}"
     label="MinLength"
   ></lion-input>
   <lion-input
-    .validators=${[new MaxLength(7)]}
-    .modelValue=${'too long'}
+    .validators="${[new MaxLength(7)]}"
+    .modelValue="${'too long'}"
     label="MaxLength"
   ></lion-input>
   <lion-input
-    .validators=${[new MinMaxLength({ min: 10, max: 20 })]}
-    .modelValue=${'that should be enough'}
+    .validators="${[new MinMaxLength({ min: 10, max: 20 })]}"
+    .modelValue="${'that should be enough'}"
     label="MinMaxLength"
   ></lion-input>
   <lion-input
-    .validators=${[new Pattern(/#LionRocks/)]}
-    .modelValue=${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}
+    .validators="${[new Pattern(/#LionRocks/)]}"
+    .modelValue="${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}"
     label="Pattern"
   ></lion-input>
 `;
@@ -314,23 +314,23 @@ export const dateValidators = () => {
   const tomorrow = new Date(year, month, day + 1);
   return html`
     <lion-input-date
-      .validators=${[new IsDate()]}
-      .modelValue=${'foo'}
+      .validators="${[new IsDate()]}"
+      .modelValue="${'foo'}"
       label="IsDate"
     ></lion-input-date>
     <lion-input-date
-      .validators=${[new MinDate(today)]}
-      .modelValue=${new Date(yesterday)}
+      .validators="${[new MinDate(today)]}"
+      .modelValue="${new Date(yesterday)}"
       label="MinDate"
     ></lion-input-date>
     <lion-input-date
-      .validators=${[new MaxDate(today)]}
-      .modelValue=${new Date(tomorrow)}
+      .validators="${[new MaxDate(today)]}"
+      .modelValue="${new Date(tomorrow)}"
       label="MaxDate"
     ></lion-input-date>
     <lion-input-date
-      .validators=${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]}
-      .modelValue=${new Date(today)}
+      .validators="${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]}"
+      .modelValue="${new Date(today)}"
       label="MinMaxDate"
     ></lion-input-date>
   `;
@@ -476,11 +476,11 @@ export const checkboxValidation = () => {
       id="scientists"
       name="scientists[]"
       label="Favorite scientists"
-      .validators=${[new Required()]}
+      .validators="${[new Required()]}"
     >
-      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+      <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+      <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
+      <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
     </lion-checkbox-group>
     <button @click="${e => validate(e)}">Validate</button>
   `;
@@ -512,11 +512,11 @@ export const checkboxValidationAdvanced = () => {
       name="scientists2[]"
       label="Favorite scientists"
       help-text="You should have at least 2 of those"
-      .validators=${[new Required(), new HasMinTwoChecked()]}
+      .validators="${[new Required(), new HasMinTwoChecked()]}"
     >
-      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+      <lion-checkbox label="Archimedes" .choiceValue="${'Archimedes'}"></lion-checkbox>
+      <lion-checkbox label="Francis Bacon" .choiceValue="${'Francis Bacon'}"></lion-checkbox>
+      <lion-checkbox label="Marie Curie" .choiceValue="${'Marie Curie'}"></lion-checkbox>
     </lion-checkbox-group>
     <button @click="${e => validate(e)}">Validate</button>
   `;
@@ -536,10 +536,10 @@ export const radioValidation = () => {
       id="dinos1"
       name="dinos1"
       label="Favourite dinosaur"
-      .validators=${[new Required()]}
+      .validators="${[new Required()]}"
     >
-      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
+      <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
+      <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
       <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
     </lion-radio-group>
     <button @click="${e => validate(e)}">Validate</button>
@@ -575,11 +575,11 @@ export const radioValidationAdvanced = () => {
       id="dinos2"
       name="dinos2"
       label="Favourite dinosaur"
-      .validators=${[new Required(), new IsBrontosaurus()]}
+      .validators="${[new Required(), new IsBrontosaurus()]}"
     >
-      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-      <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
+      <lion-radio label="allosaurus" .choiceValue="${'allosaurus'}"></lion-radio>
+      <lion-radio label="brontosaurus" .choiceValue="${'brontosaurus'}"></lion-radio>
+      <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
     </lion-radio-group>
     <button @click="${e => validate(e)}">Validate</button>
   `;
@@ -593,12 +593,12 @@ Validation can be used as normal, below is an example of a combobox with a `Requ
 ```js preview-story
 export const validationCombobox = () => html`
   <lion-combobox .validators="${[new Required()]}" name="favoriteMovie" label="Favorite movie">
-    <lion-option checked .choiceValue=${'Rocky'}>Rocky</lion-option>
-    <lion-option .choiceValue=${'Rocky II'}>Rocky II</lion-option>
-    <lion-option .choiceValue=${'Rocky III'}>Rocky III</lion-option>
-    <lion-option .choiceValue=${'Rocky IV'}>Rocky IV</lion-option>
-    <lion-option .choiceValue=${'Rocky V'}>Rocky V</lion-option>
-    <lion-option .choiceValue=${'Rocky Balboa'}>Rocky Balboa</lion-option>
+    <lion-option checked .choiceValue="${'Rocky'}">Rocky</lion-option>
+    <lion-option .choiceValue="${'Rocky II'}">Rocky II</lion-option>
+    <lion-option .choiceValue="${'Rocky III'}">Rocky III</lion-option>
+    <lion-option .choiceValue="${'Rocky IV'}">Rocky IV</lion-option>
+    <lion-option .choiceValue="${'Rocky V'}">Rocky V</lion-option>
+    <lion-option .choiceValue="${'Rocky Balboa'}">Rocky Balboa</lion-option>
   </lion-combobox>
 `;
 ```
@@ -762,8 +762,8 @@ According to the W3C specs, Disabled fields should not be validated. Therefore i
 export const disabledInputsValidation = () => html`
   <lion-input
     disabled
-    .validators=${[new EqualsLength(7)]}
-    .modelValue=${'not exactly'}
+    .validators="${[new EqualsLength(7)]}"
+    .modelValue="${'not exactly'}"
     label="EqualsLength"
   ></lion-input>
 `;
@@ -840,7 +840,7 @@ export const backendValidation = () => {
         opacity: 0.5;
       }
     </style>
-    <lion-form @submit=${submitHandler}>
+    <lion-form @submit="${submitHandler}">
       <form>
         <lion-input
           label="username"

package/docs/fundamentals/systems/localize/api-table.md

@@ -4,23 +4,16 @@
 
 ### Fields
 
-| Name                               | Privacy   | Type      | Default                                                                                                              | Description | Inherited From |
-| ---------------------------------- | --------- | --------- | -------------------------------------------------------------------------------------------------------------------- | ----------- | -------------- |
-| `locale`                           | public    |           |                                                                                                                      |             |                |
-| `loadingComplete`                  | public    |           |                                                                                                                      |             |                |
-| `_autoLoadOnLocaleChange`          | protected | `boolean` | `!!autoLoadOnLocaleChange`                                                                                           |             |                |
-| `_fallbackLocale`                  | protected |           | `fallbackLocale`                                                                                                     |             |                |
-| `_showKeyAsFallback`               | protected |           | `showKeyAsFallback`                                                                                                  |             |                |
-| `formatNumberOptions`              | public    | `object`  | `{
-      returnIfNaN: '',
-      /** @type {Map<string,DatePostProcessor>} */
-      postProcessors: new Map(),
-    }` |             |                |
-| `formatDateOptions`                | public    | `object`  | `{
-      /** @type {Map<string,DatePostProcessor>} */
-      postProcessors: new Map(),
-    }`                        |             |                |
-| `_supportExternalTranslationTools` | protected |           |                                                                                                                      |             |                |
+| Name                               | Privacy   | Type      | Default                                                                                        | Description | Inherited From |
+| ---------------------------------- | --------- | --------- | ---------------------------------------------------------------------------------------------- | ----------- | -------------- |
+| `locale`                           | public    |           |                                                                                                |             |                |
+| `loadingComplete`                  | public    |           |                                                                                                |             |                |
+| `_autoLoadOnLocaleChange`          | protected | `boolean` | `!!autoLoadOnLocaleChange`                                                                     |             |                |
+| `_fallbackLocale`                  | protected |           | `fallbackLocale`                                                                               |             |                |
+| `_showKeyAsFallback`               | protected |           | `showKeyAsFallback`                                                                            |             |                |
+| `formatNumberOptions`              | public    | `object`  | `{ returnIfNaN: '', /** @type {Map<string,DatePostProcessor>} */ postProcessors: new Map(), }` |             |                |
+| `formatDateOptions`                | public    | `object`  | `{ /** @type {Map<string,DatePostProcessor>} */ postProcessors: new Map(), }`                  |             |                |
+| `_supportExternalTranslationTools` | protected |           |                                                                                                |             |                |
 
 ### Methods
 

package/docs/fundamentals/systems/localize/overview.md

@@ -9,15 +9,15 @@ In it's simplest form it is a function that returns the translated text for a na
 - Formatting of numbers, amounts
 - Formatting of dates
 
-Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/localize/use-cases.md).
+Further examples and a more in depth description can be found at the [Use Cases Page](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/localize/use-cases.md).
 
 ## Content
 
 | Feature                                  | Description                                   |
 | ---------------------------------------- | --------------------------------------------- |
-| [Translate Text](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
-| [Format Numbers](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
-| [Format Dates](https://github.com/ing-bank/lion/blob/e6f2e59134860fafcd9716ada9dcba6f33b76aa0/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
+| [Translate Text](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
+| [Format Numbers](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
+| [Format Dates](https://github.com/ing-bank/lion/blob/a59d362cc1228fc855b426440f4bed3bd21d594b/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
 
 ## Installation
 

package/docs/fundamentals/systems/localize/use-cases.md

@@ -118,7 +118,7 @@ If you want to fetch it from some API this is also possible.
 localize.loadNamespace({
   'my-hello-component': async locale => {
     const response = await fetch(
-      `https://api.example.com/?namespace=my-hello-component&locale=${locale}`,
+      `https://api.example.com/?namespace=my-hello-component&locale="${locale}"`,
     );
     return response.json(); // resolves to the JSON object `{ greeting: 'Hallo {name}!' }`
   },
@@ -133,7 +133,7 @@ And this is there the second option comes in handy.
 ```js
 // using the regexp to match all component names staring with 'my-'
 localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => {
-  const response = await fetch(`https://api.example.com/?namespace=${namespace}&locale=${locale}`);
+  const response = await fetch(`https://api.example.com/?namespace="${namespace}&locale=${locale}"`);
   return response.json();
 });
 
@@ -302,14 +302,14 @@ This is sort of a router for the data and is typically needed to fetch it from a
 // for one specific component
 localize.setupNamespaceLoader('my-hello-component', async locale => {
   const response = await fetch(
-    `https://api.example.com/?namespace=my-hello-component&locale=${locale}`,
+    `https://api.example.com/?namespace=my-hello-component&locale="${locale}"`,
   );
   return response.json();
 });
 
 // for all components which have a prefix in their names
 localize.setupNamespaceLoader(/my-.+/, async (locale, namespace) => {
-  const response = await fetch(`https://api.example.com/?namespace=${namespace}&locale=${locale}`);
+  const response = await fetch(`https://api.example.com/?namespace="${namespace}&locale=${locale}"`);
   return response.json();
 });
 ```

package/docs/fundamentals/systems/overlays/_configuration-positioning.md

@@ -59,13 +59,13 @@ The `placementMode` property determines the positioning of the `contentNode`:
 export const placementLocal = () => {
   const placementModeLocalConfig = { placementMode: 'local' };
   return html`
-    <demo-el-using-overlaymixin .config=${placementModeLocalConfig}>
+    <demo-el-using-overlaymixin .config="${placementModeLocalConfig}">
       <button slot="invoker">Click me to open the local overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>
@@ -81,13 +81,13 @@ export const placementLocal = () => {
 export const placementGlobal = () => {
   const placementModeGlobalConfig = { placementMode: 'global' };
   return html`
-    <demo-el-using-overlaymixin .config=${placementModeGlobalConfig}>
+    <demo-el-using-overlaymixin .config="${placementModeGlobalConfig}">
       <button slot="invoker">Click me to open the global overlay!</button>
       <div slot="content" class="demo-overlay">
         Hello! You can close this notification here:
         <button
           class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+          @click="${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}"
         >
           ⨯
         </button>