@lion/ui 0.7.2 → 0.7.4

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/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/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/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/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
@@ -232,7 +232,7 @@ export const requiredValidator = () => html`
 `;
 ```
 
-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/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/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/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/docs/fundamentals/systems/form/#override-fieldname) for more information.
 
 Specific required messages for a select and file-upload are created.
 
@@ -612,7 +612,7 @@ However, the validation system also supports three non blocking validation feedb
 - **error**: blocking the field from being submitted to the server. For example:
   "Please enter an amount higher than 1000,00 euro."
 - **warning**: something looks wrong, but it is not blocking. For example an optional email input:
-  "Please enter a valid e-mail address in the format "name@example.com"."
+  "Please enter a valid e-mail address in the format `name@example.com`."
 - **info**: shows extra information. For example a message of a scheduled payment planner:
   "Ends on 15/05/2020 after 5 payments."
 - **success**: will only be triggered if there was a Message from one of the above validation types and is now correct. For example: "Ok, correct."

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

@@ -0,0 +1,65 @@
+# Systems >> Localize >> API Table ||90 
+
+## class: `LocalizeManager`
+
+### 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 |           |                                                                                                                      |             |                |
+
+### Methods
+
+| Name                                 | Privacy   | Description | Parameters                                                                                                 | Return                   | Inherited From |
+| ------------------------------------ | --------- | ----------- | ---------------------------------------------------------------------------------------------------------- | ------------------------ | -------------- |
+| `_setupTranslationToolSupport`       | protected |             |                                                                                                            |                          |                |
+| `teardown`                           | public    |             |                                                                                                            |                          |                |
+| `_setHtmlLangAttribute`              | protected |             | `locale: string`                                                                                           |                          |                |
+| `reset`                              | public    |             |                                                                                                            |                          |                |
+| `addData`                            | public    |             | `locale: string, namespace: string, data: object`                                                          |                          |                |
+| `setupNamespaceLoader`               | public    |             | `pattern: RegExp\|string, loader: function`                                                                |                          |                |
+| `loadNamespaces`                     | public    |             | `namespaces: NamespaceObject[], { locale }, options: @param {string} [options.locale]    * `               | `Promise.<Object>`       |                |
+| `loadNamespace`                      | public    |             | `namespaceObj: NamespaceObject, { locale = this.locale }, options: @param {string} [options.locale]    * ` | `Promise.<Object\|void>` |                |
+| `msg`                                | public    |             | `keys: string \| string[], vars: Object.<string,?>, opts: @param {string} [opts.locale]    * `             | `string`                 |                |
+| `_setupHtmlLangAttributeObserver`    | protected |             |                                                                                                            |                          |                |
+| `_teardownHtmlLangAttributeObserver` | protected |             |                                                                                                            |                          |                |
+| `_isNamespaceInCache`                | protected |             | `locale: string, namespace: string`                                                                        |                          |                |
+| `_getCachedNamespaceLoaderPromise`   | protected |             | `locale: string, namespace: string`                                                                        |                          |                |
+| `_loadNamespaceData`                 | protected |             | `locale: string, namespaceObj: NamespaceObject, isDynamicImport: boolean, namespace: string`               | `Promise.<Object\|void>` |                |
+| `_getNamespaceLoader`                | protected |             | `namespaceObj: NamespaceObject, isDynamicImport: boolean, namespace: string`                               |                          |                |
+| `_getNamespaceLoaderPromise`         | protected |             | `loader: function, locale: string, namespace: string, fallbackLocale: string`                              | `Promise.<any>`          |                |
+| `_cacheNamespaceLoaderPromise`       | protected |             | `locale: string, namespace: string, promise: Promise.<Object\|void>`                                       |                          |                |
+| `_lookupNamespaceLoader`             | protected |             | `namespace: string`                                                                                        | `function\|null`         |                |
+| `_getLangFromLocale`                 | protected |             | `locale: string`                                                                                           | `string`                 |                |
+| `addEventListener`                   | public    |             | `type: string, listener: EventListener, options: ...Object`                                                |                          |                |
+| `removeEventListener`                | public    |             | `type: string, listener: EventListener, options: ...Object`                                                |                          |                |
+| `dispatchEvent`                      | public    |             | `event: CustomEvent`                                                                                       |                          |                |
+| `_onLocaleChanged`                   | protected |             | `newLocale: string, oldLocale: string`                                                                     | `undefined`              |                |
+| `_loadAllMissing`                    | protected |             | `newLocale: string, oldLocale: string`                                                                     |                          |                |
+| `_getMessageForKeys`                 | protected |             | `keys: string \| string[], locale: string`                                                                 | `string \| undefined`    |                |
+| `_getMessageForKey`                  | protected |             | `key: string \| undefined, locale: string`                                                                 | `string`                 |                |
+| `setDatePostProcessorForLocale`      | public    |             | `{ locale, postProcessor }, options: {locale:string, postProcessor:DatePostProcessor}`                     |                          |                |
+| `setNumberPostProcessorForLocale`    | public    |             | `{ locale, postProcessor }, options: {locale:string, postProcessor:NumberPostProcessor}`                   |                          |                |
+
+### Events
+
+| Name               | Type          | Description | Inherited From |
+| ------------------ | ------------- | ----------- | -------------- |
+| `__localeChanging` | `CustomEvent` |             |                |
+| `localeChanged`    | `CustomEvent` |             |                |
+
+<hr/>

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/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/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/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/docs/fundamentals/systems/localize/use-cases.md).
 
 ## Content
 
 | Feature                                  | Description                                   |
 | ---------------------------------------- | --------------------------------------------- |
-| [Translate Text](https://github.com/ing-bank/lion/blob/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
-| [Format Numbers](https://github.com/ing-bank/lion/blob/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
-| [Format Dates](https://github.com/ing-bank/lion/blob/8fd9ec4df166dd45f230eb032e3b1c151fd6240d/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
+| [Translate Text](https://github.com/ing-bank/lion/blob/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/docs/fundamentals/systems/localize/text.md)    | Load and translate text in multiple languages |
+| [Format Numbers](https://github.com/ing-bank/lion/blob/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/docs/fundamentals/systems/localize/numbers.md) | Format numbers in multiple languages          |
+| [Format Dates](https://github.com/ing-bank/lion/blob/15a9d70cb690d26e6a2af8a6b5dbdda7e7b0112e/docs/fundamentals/systems/localize/dates.md)     | Format dates in multiple languages            |
 
 ## Installation
 

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

@@ -99,15 +99,6 @@ export const placementGlobal = () => {
 
 ## popperConfig
 
-/** Viewport configuration. Will be used when placementMode is 'global' \*/
-viewportConfig?: ViewportConfig;
-/** Hides other overlays when multiple are opened (currently exclusive to globalOverlayController) _/
-isBlocking?: boolean;
-/\*\* Will align contentNode with referenceNode (invokerNode by default) for local overlays. Usually needed for dropdowns. 'max' will prevent contentNode from exceeding width of referenceNode, 'min' guarantees that contentNode will be at least as wide as referenceNode. 'full' will make sure that the invoker width always is the same. _/
-inheritsReferenceWidth?: 'max' | 'full' | 'min' | 'none';
-/\*_ Change the default of 9999 _/
-zIndex?: number;
-
 | Prop                   | Description                                                                                                                                                                                                                                                                                                     | Type                               |     |     |     |
 | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --- | --- | --- |
 | placementMode          | Determines the positioning anchor (viewport vs invokerNode/referenceNode)                                                                                                                                                                                                                                       | 'global'\|'local'                  |     |     |     |

package/docs/fundamentals/systems/overlays/_edge-cases.md

@@ -33,21 +33,20 @@ See [css-tricks: popping-hidden-overflow](https://css-tricks.com/popping-hidden-
 #### Overflow: the problem
 
 ```js preview-story
-export const edgeCaseOverflowProblem = () =>
-  html`
-    <div style="padding: 54px 24px 36px;">
-      <div
-        style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;"
-      >
-        <div style="display: flex; justify-content: space-evenly; position: relative;">
-          <demo-overlay-el opened use-absolute>
-            <button slot="invoker" aria-label="local, non modal"></button>
-            <div slot="content">absolute (for&nbsp;demo)</div>
-          </demo-overlay-el>
-        </div>
+export const edgeCaseOverflowProblem = () => html`
+  <div style="padding: 54px 24px 36px;">
+    <div
+      style="overflow: hidden; border: 1px black dashed; padding-top: 44px; padding-bottom: 16px;"
+    >
+      <div style="display: flex; justify-content: space-evenly; position: relative;">
+        <demo-overlay-el opened use-absolute>
+          <button slot="invoker" aria-label="local, non modal"></button>
+          <div slot="content">absolute (for&nbsp;demo)</div>
+        </demo-overlay-el>
       </div>
     </div>
-  `;
+  </div>
+`;
 ```
 
 #### Overflow: the solution
@@ -60,50 +59,46 @@ Two solutions are thinkable:
 Our overlay system makes sure that there's always a fixed layer that pops out of the hidden parent.
 
 ```js preview-story
-export const edgeCaseOverflowSolution = () =>
-  html`
-    <div style="padding: 54px 24px 36px;">
-      <div
-        style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;"
-      >
-        <div style="display: flex; justify-content: space-evenly; position: relative;">
-          <demo-overlay-el
-            opened
-            .config="${{ placementMode: 'local', trapsKeyboardFocus: false }}"
-          >
-            <button slot="invoker" aria-label="local, non modal"></button>
-            <div slot="content">no matter</div>
-          </demo-overlay-el>
-
-          <demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: true }}">
-            <button slot="invoker" aria-label="local, modal"></button>
-            <div slot="content">what configuration</div>
-          </demo-overlay-el>
-
-          <demo-overlay-el
-            opened
-            .config="${{ placementMode: 'local', popperConfig: { strategy: 'absolute' } }}"
-          >
-            <button slot="invoker" aria-label="local, absolute"></button>
-            <div slot="content">...it</div>
-          </demo-overlay-el>
-
-          <demo-overlay-el
-            opened
-            .config="${{ placementMode: 'local', popperConfig: { strategy: 'fixed' } }}"
-          >
-            <button slot="invoker" aria-label="local, fixed"></button>
-            <div slot="content">just</div>
-          </demo-overlay-el>
-
-          <demo-overlay-el opened .config="${{ placementMode: 'global' }}">
-            <button slot="invoker" aria-label="global"></button>
-            <div slot="content">works</div>
-          </demo-overlay-el>
-        </div>
+export const edgeCaseOverflowSolution = () => html`
+  <div style="padding: 54px 24px 36px;">
+    <div
+      style="overflow: hidden; border: 1px black dashed; padding-top: 36px; padding-bottom: 16px;"
+    >
+      <div style="display: flex; justify-content: space-evenly; position: relative;">
+        <demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: false }}">
+          <button slot="invoker" aria-label="local, non modal"></button>
+          <div slot="content">no matter</div>
+        </demo-overlay-el>
+
+        <demo-overlay-el opened .config="${{ placementMode: 'local', trapsKeyboardFocus: true }}">
+          <button slot="invoker" aria-label="local, modal"></button>
+          <div slot="content">what configuration</div>
+        </demo-overlay-el>
+
+        <demo-overlay-el
+          opened
+          .config="${{ placementMode: 'local', popperConfig: { strategy: 'absolute' } }}"
+        >
+          <button slot="invoker" aria-label="local, absolute"></button>
+          <div slot="content">...it</div>
+        </demo-overlay-el>
+
+        <demo-overlay-el
+          opened
+          .config="${{ placementMode: 'local', popperConfig: { strategy: 'fixed' } }}"
+        >
+          <button slot="invoker" aria-label="local, fixed"></button>
+          <div slot="content">just</div>
+        </demo-overlay-el>
+
+        <demo-overlay-el opened .config="${{ placementMode: 'global' }}">
+          <button slot="invoker" aria-label="global"></button>
+          <div slot="content">works</div>
+        </demo-overlay-el>
       </div>
     </div>
-  `;
+  </div>
+`;
 ```
 
 ### Stacking context
@@ -114,32 +109,31 @@ The example below shows the difference between a modal and non-modal overlay pla
 #### Stacking context: the problem
 
 ```js preview-story
-export const edgeCaseStackProblem = () =>
-  html`
-    <div style="width: 300px; height: 300px; position: relative;">
-      <div
-        id="stacking-context-a"
-        style="position: absolute; z-index: 2; top: 0; width: 100px; height: 200px;"
-      >
-        I am on top and I don't care about your 9999
-      </div>
+export const edgeCaseStackProblem = () => html`
+  <div style="width: 300px; height: 300px; position: relative;">
+    <div
+      id="stacking-context-a"
+      style="position: absolute; z-index: 2; top: 0; width: 100px; height: 200px;"
+    >
+      I am on top and I don't care about your 9999
+    </div>
 
-      <div
-        id="stacking-context-b"
-        style="position: absolute; z-index: 1; top: 0; width: 200px; height: 200px;"
-      >
-        <demo-overlay-el no-dialog-el style="overflow:hidden; position: relative;">
-          <button slot="invoker">invoke</button>
-          <div slot="content">
-            The overlay can never be in front, since the parent stacking context has a lower
-            priority than its sibling.
-            <div id="stacking-context-b-inner" style="position: absolute; z-index: 9999;">
-              So, even if we add a new stacking context in our overlay with z-index 9999, it will
-              never be painted on top.
-            </div>
+    <div
+      id="stacking-context-b"
+      style="position: absolute; z-index: 1; top: 0; width: 200px; height: 200px;"
+    >
+      <demo-overlay-el no-dialog-el style="overflow:hidden; position: relative;">
+        <button slot="invoker">invoke</button>
+        <div slot="content">
+          The overlay can never be in front, since the parent stacking context has a lower priority
+          than its sibling.
+          <div id="stacking-context-b-inner" style="position: absolute; z-index: 9999;">
+            So, even if we add a new stacking context in our overlay with z-index 9999, it will
+            never be painted on top.
           </div>
-        </demo-overlay-el>
-      </div>
+        </div>
+      </demo-overlay-el>
     </div>
-  `;
+  </div>
+`;
 ```