@lion/ui 0.24.0 → 0.26.0

package/docs/components/icon/overview.md

@@ -1,52 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Icon
-  - Overview
-eleventyNavigation:
-  key: 'Icon: Overview'
-  order: 10
-  parent: Icon
-  title: Overview
----
-
-# Overview
-
-A web component for displaying icons.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { icons } from '@lion/ui/icon.js';
-import '@lion/ui/define/lion-icon.js';
-
-icons.addIconResolver('lion', (iconset, name) => {
-  switch (iconset) {
-    case 'bugs':
-      return import('./assets/iconset-bugs.js').then(module => module[name]);
-    case 'space':
-      return import('./assets/iconset-space.js').then(module => module[name]);
-    case 'misc':
-      return import('./assets/iconset-misc.js').then(module => module[name]);
-    default:
-      throw new Error(`Unknown iconset ${iconset}`);
-  }
-});
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-icon icon-id="lion:space:alienSpaceship" style="width: 50px; height: 50px;"></lion-icon>
-`;
-```
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionIcon } from '@lion/ui/icon.js';
-// or
-import '@lion/ui/define/lion-icon.js';
-```

package/docs/components/icon/use-cases.md

@@ -1,92 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Icon
-  - Use Cases
-eleventyNavigation:
-  key: 'Icon: Use Cases'
-  order: 20
-  parent: Icon
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { icons } from '@lion/ui/icon.js';
-import './assets/iconset-bugs.js';
-import './assets/iconset-misc.js';
-import * as spaceSet from './assets/iconset-space.js';
-
-import '@lion/ui/define/lion-icon.js';
-```
-
-## Icon sets
-
-Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the [system documentation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/icon/overview.md) to learn more about icon sets.
-
-```js preview-story
-export const iconSets = () => html`
-  ${Object.keys(spaceSet).map(
-    name => html`
-      <style>
-        .demo-icon__container {
-          display: inline-flex;
-          position: relative;
-          flex-grow: 1;
-          flex-direction: column;
-          align-items: center;
-          width: 80px;
-          height: 80px;
-          padding: 4px;
-        }
-        .demo-icon__name {
-          font-size: 10px;
-        }
-      </style>
-      <div class="demo-icon__container">
-        <lion-icon icon-id="lion:space:${name}" aria-label="${name}"></lion-icon>
-        <span class="demo-icon__name">${name}</span>
-      </div>
-    `,
-  )}
-`;
-```
-
-If for some reason you don't want to lazy load icons, you can still import and use them
-synchronously.
-
-## Accessibility
-
-It is recommended to add an `aria-label` to provide information to visually impaired users:
-
-A `lion-icon` without an `aria-label` attribute will be automatically given an `aria-hidden` attribute.
-
-```js preview-story
-export const accessibleLabel = () => html`
-  <lion-icon icon-id="lion:misc:arrowLeft" aria-label="Pointing left"></lion-icon>
-`;
-```
-
-## Styling
-
-By default, a `lion-icon` will be `1em` × `1em` (the current line-height).
-
-`lion-icon` uses SVGs and may be styled with CSS, including using CSS properties such as `fill`:
-
-```js preview-story
-export const Styling = () => html`
-  <style>
-    .demo-icon {
-      width: 160px;
-      height: 160px;
-      fill: blue;
-    }
-  </style>
-  <lion-icon icon-id="lion:bugs:bug02" aria-label="Bug" class="demo-icon"></lion-icon>
-`;
-```
-
-See [SVG and CSS](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS) on MDN web docs for more information.

package/docs/components/index.md

@@ -1,17 +0,0 @@
----
-title: Components - Lion UI
-parts:
-  - Components
-eleventyNavigation:
-  key: Components
-  order: 40
-  title: Components
----
-
-# Components
-
-Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.
-
-## Got feedback?
-
-We are always looking for ways on how to improve the our guidelines. If you have any specific need, idea or just want to tell us what you think - [please get in touch here](https://github.com/ing-bank/lion/blob/master/CONTRIBUTING.md).

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

@@ -1,52 +0,0 @@
----
-parts:
-  - API Table
-  - Input
-title: 'Input: API Table'
-eleventyNavigation:
-  key: API Table >> Input
-  title: API Table
-  order: 90
-  parent: Input
----
-# Input: API Table
- 
-
-## class: `LionInput`, `lion-input`
-
-### Fields
-
-| Name                     | Privacy   | Type               | Default  | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| ------------------------ | --------- | ------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `placeholder`            | public    | `string`           | `''`     |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `readOnly`               | public    | `boolean`          | `false`  | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.

(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) |                |
-| `slots`                  | public    |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `type`                   | public    | `string`           | `'text'` |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_feedbackConditionMeta` | protected |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`         | protected |                    |          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_inputNode`             | protected | `HTMLInputElement` |          |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-
-### Methods
-
-| Name                    | Privacy   | Description                                                                                    | Parameters   | Return | Inherited From |
-| ----------------------- | --------- | ---------------------------------------------------------------------------------------------- | ------------ | ------ | -------------- |
-| `clear`                 | public    | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this) |              |        | LionField      |
-| `reset`                 | public    | Resets modelValue to initial value.
Interaction states are cleared                         |              |        | LionField      |
-| `resetInteractionState` | public    |                                                                                                |              |        | LionField      |
-| `_onChange`             | protected | Dispatches custom bubble event                                                                 | `ev: Event=` |        | LionField      |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name          | Field       | Inherited From |
-| ------------- | ----------- | -------------- |
-| `readonly`    | readOnly    |                |
-| `type`        | type        |                |
-| `placeholder` | placeholder |                |
-
-<hr/>

package/docs/components/input/index.md

@@ -1,13 +0,0 @@
----
-title: Input
-parts:
-  - Input
-eleventyNavigation:
-  key: Input
-  order: 20
-  title: Input
----
-
-# Input
-
--> go to Overview

package/docs/components/input/overview.md

@@ -1,48 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input
-  - Overview
-eleventyNavigation:
-  key: 'Input: Overview'
-  order: 10
-  parent: Input
-  title: Overview
----
-
-# Overview
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input.js';
-```
-
-A web component that enhances the functionality of the native `<input>` element.
-
-```js preview-story
-export const main = () => html`<lion-input label="First Name"></lion-input>`;
-```
-
-## Features
-
-- Extra visual elements can be added via `slots`:
-  - **label**: can also be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
-    For example add an `u-sr-only` class to the label to make it visually hidden.
-    A label is always needed for accessibility reasons.
-  - **help-text**: a helper text shown below the label to give extra clarification.
-  - **prefix**: does not have an active use case yet, but the option is in place.
-  - **suffix**: can be used for addons to the input like a calculator, datepicker or addressbook. In these cases a button with an icon is used.
-  - **before**: does not have an active use case yet, but the option is in place.
-  - **after**: can be used to show a currency or percentage.
-- Delegates attributes like `type`, `disabled`, `placeholder` and `readonly` to the native input.
-- Can make use of [validation](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md).
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import '@lion/ui/define/lion-input.js';
-```

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

@@ -1,90 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input
-  - Use Cases
-eleventyNavigation:
-  key: 'Input: Use Cases'
-  order: 20
-  parent: Input
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input.js';
-```
-
-## Label
-
-Can be provided via the `label` attribute or via the `slot="label"`.
-
-```js preview-story
-export const label = () => html` <lion-input label="Input" name="input"></lion-input> `;
-```
-
-## Label sr-only (a11y)
-
-Can be provided via the `label-sr-only` boolean attribute.
-
-The label will be hidden, but still readable by screen readers.
-
-```js preview-story
-export const labelSrOnly = () => html`
-  <lion-input label-sr-only label="Input" name="input"></lion-input>
-`;
-```
-
-> Note: Once we support the ElementInternals API, the equivalent will be `<lion-input aria-label="Input" name="input"></lion-input>`
-
-## Help-text
-
-A helper text shown below the label to give extra clarification.
-
-Just like the `label`, a `help-text` can be provided via the `help-text` attribute, a slot can be used to change the `html` and `CSS` of the help-text.
-For example add an anchor with further explanation.
-
-```js preview-story
-export const helpText = () => html`
-  <lion-input>
-    <label slot="label">Label</label>
-    <div slot="help-text">
-      Help text using <a href="https://example.com/" target="_blank">html</a>
-    </div>
-  </lion-input>
-`;
-```
-
-## Prefilled
-
-```js preview-story
-export const prefilled = () => html`
-  <lion-input .modelValue="${'Prefilled value'}" label="Prefilled"></lion-input>
-`;
-```
-
-## Read only
-
-`readonly` attribute will be delegated to the native `<input>` to make it read-only.
-
-This field **will still be included** in the parent fieldset or form's `serializedValue`.
-
-```js preview-story
-export const readOnly = () => html`
-  <lion-input readonly .modelValue="${'This is read only'}" label="Read only"></lion-input>
-`;
-```
-
-## Disabled
-
-`disabled` attribute will be delegated to the native `<input>` to make it disabled.
-
-This field **will not be included** in the parent fieldset or form's `serializedValue`.
-
-```js preview-story
-export const disabled = () => html`
-  <lion-input disabled .modelValue="${'This is disabled'}" label="Disabled"></lion-input>
-`;
-```

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

@@ -1,66 +0,0 @@
----
-parts:
-  - API Table
-  - Input Amount
-title: 'Input Amount: API Table'
-eleventyNavigation:
-  key: API Table >> Input Amount
-  title: API Table
-  order: 90
-  parent: Input Amount
----
-# Input Amount: API Table
- 
-
-## class: `LionInputAmount`, `lion-input-amount`
-
-### Fields
-
-| Name                       | Privacy   | Type                  | Default        | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| -------------------------- | --------- | --------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `currency`                 | public    | `string \| undefined` | `undefined`    |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `currencyLabel`            | public    | `string`              | `''`           |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `formatter`                | public    |                       | `formatAmount` |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `locale`                   | public    | `string \| undefined` | `undefined`    |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `modelValue`               | public    |                       |                |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `parser`                   | public    |                       | `parseAmount`  |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `placeholder`              | public    | `string`              | `''`           |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `readOnly`                 | public    | `boolean`             | `false`        | A Boolean attribute which, if present, indicates that the user should not be able to edit
the value of the input. The difference between disabled and readonly is that read-only
controls can still function, whereas disabled controls generally do not function as
controls until they are enabled.

(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | LionInput      |
-| `slots`                    | public    |                       |                |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `type`                     | public    | `string`              | `'text'`       |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_currencyDisplayNodeSlot` | protected | `string`              | `'after'`      | The slot to put the currency display node in. Can be 'prefix', 'suffix', 'before' and 'after'.
Default will be 'after'.                                                                                                                                                                                                                                                                                       |                |
-| `_feedbackConditionMeta`   | protected |                       |                |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`           | protected |                       |                |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_inputNode`               | protected | `HTMLInputElement`    |                |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-
-### Methods
-
-| Name                    | Privacy   | Description                                                                                                                                                                                                                                           | Parameters                                                 | Return | Inherited From |
-| ----------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ------ | -------------- |
-| `clear`                 | public    | Clears modelValue.
Interaction states are not cleared (use resetInteractionState for this)                                                                                                                                                        |                                                            |        | LionField      |
-| `onLocaleChanged`       | public    |                                                                                                                                                                                                                                                       | `newLocale: string, oldLocale: string`                     |        |                |
-| `reset`                 | public    | Resets modelValue to initial value.
Interaction states are cleared                                                                                                                                                                                |                                                            |        | LionField      |
-| `resetInteractionState` | public    |                                                                                                                                                                                                                                                       |                                                            |        | LionField      |
-| `_connectSlotMixin`     | protected | Upon connecting slot mixin, we should check if
the required slot was created by the slot mixin,
and if so, we should execute the currency changed flow
which evaluates whether the slot node should be
removed for invalid currencies |                                                            |        |                |
-| `_onChange`             | protected | Dispatches custom bubble event                                                                                                                                                                                                                        | `ev: Event=`                                               |        | LionField      |
-| `_onCurrencyChanged`    | protected |                                                                                                                                                                                                                                                       | `{ currency }, opts: @param {string?} opts.currency    * ` |        |                |
-| `_reflectBackOn`        | protected |                                                                                                                                                                                                                                                       |                                                            |        |                |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name             | Field         | Inherited From |
-| ---------------- | ------------- | -------------- |
-| `currency`       | currency      |                |
-| `currency-label` | currencyLabel |                |
-| `modelValue`     | modelValue    |                |
-| `readonly`       | readOnly      | LionInput      |
-| `type`           | type          | LionInput      |
-| `placeholder`    | placeholder   | LionInput      |
-
-<hr/>

package/docs/components/input-amount/index.md

@@ -1,13 +0,0 @@
----
-title: Input Amount
-parts:
-  - Input Amount
-eleventyNavigation:
-  key: Input Amount
-  order: 20
-  title: Input Amount
----
-
-# Input Amount
-
--> go to Overview

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

@@ -1,61 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input Amount
-  - Overview
-eleventyNavigation:
-  key: 'Input Amount: Overview'
-  order: 10
-  parent: Input Amount
-  title: Overview
----
-
-# Overview
-
-A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
-
-For formatting, we use [Intl NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) with some overrides.
-
-For parsing user input, we provide our own parser that takes into account locale, a number of heuristics and allows for pasting amount strings like 'EUR 100,00'.
-Valid characters are digits and separators. Formatting happens on-blur.
-
-If there are no valid characters in the input whatsoever, it will provide an error feedback.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input-amount.js';
-```
-
-```js preview-story
-export const main = () => {
-  return html`
-    <lion-input-amount label="Amount" name="amount" currency="USD"></lion-input-amount>
-  `;
-};
-```
-
-## Features
-
-- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
-- Makes use of [formatNumber](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
-- Option to show currency as a suffix
-- Option to override locale to change the formatting and parsing
-- Option to provide additional format options overrides
-- Default label in different languages
-- Can make use of number specific [validators](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
-  - IsNumber (default)
-  - MinNumber
-  - MaxNumber
-  - MinMaxNumber
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionInputAmount } from '@lion/ui/input-amount.js';
-// or
-import '@lion/ui/define/lion-input-amount.js';
-```

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

@@ -1,147 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Amount
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Amount: Use Cases'
-  order: 20
-  parent: Input Amount
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { MaxLength } from '@lion/ui/form-core.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-
-import { localize } from '@lion/ui/localize.js';
-
-import '@lion/ui/define/lion-input-amount.js';
-```
-
-## Negative Number
-
-It will accept negative numbers with a minus symbol.
-
-```js preview-story
-export const negativeNumber = () => html`
-  <lion-input-amount label="Amount" .modelValue="${-123456.78}"></lion-input-amount>
-`;
-```
-
-## Set currency
-
-You can optionally set a currency with the `currency` attribute, which is visible in the after slot by default.
-
-```html preview-story
-<lion-input-amount label="Price" currency="USD" .modelValue="${123456.78}"></lion-input-amount>
-```
-
-### Set currency label
-
-```js preview-story
-export const currencySymbol = () => html`
-  <lion-input-amount
-    label="Price"
-    currency="USD"
-    currency-label="$"
-    .modelValue="${123456.78}"
-  ></lion-input-amount>
-`;
-```
-
-> The slot of the currency label can be overwritten by changing the `_currencyDisplayNodeSlot` protected property, it can be prefix, suffix, before and after.
-
-## Force locale
-
-Locale can be forced for a specific `lion-input-amount`. It will format the amount according to this locale.
-
-```js preview-story
-export const forceLocale = () => {
-  return html`
-    <lion-input-amount
-      label="Price"
-      currency="JOD"
-      .locale="nl-NL"
-      .modelValue="${123456.78}"
-    ></lion-input-amount>
-  `;
-};
-```
-
-> The separators are now flipped due to Dutch locale. On top of that, due to JOD currency, the minimum amount of decimals is 3 by default for this currency.
-
-## Force digits as input
-
-You can use the `preprocessAmount` preprocessor to disable users from inputting anything other than digits or separator characters.
-This is not added by default, but you can add it yourself.
-
-Separator characters include:
-
-- ' ' (space)
-- . (dot)
-- , (comma)
-
-```js preview-story
-import { preprocessAmount } from '@lion/ui/input-amount.js';
-
-export const forceDigits = () => html`
-  <lion-input-amount label="Amount" .preprocessor="${preprocessAmount}"></lion-input-amount>
-`;
-```
-
-## Faulty prefilled
-
-This example will show the error message by prefilling it with a faulty `modelValue`.
-
-> If there is 1 or more digit in the input, it will ignore invalid characters instead of showing an error feedback message.
-
-```js preview-story
-export const faultyPrefilled = () => html`
-  <lion-input-amount
-    label="Amount"
-    help-text="Faulty prefilled input will cause error feedback"
-    .modelValue="${'foo'}"
-  ></lion-input-amount>
-`;
-```
-
-## Modifying the amount of decimals
-
-You can override certain formatting options similar to how you would do this when using [Intl NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat).
-This example shows formatting to whole numbers.
-
-```js preview-story
-export const noDecimals = () => html`
-  <lion-input-amount
-    label="Amount"
-    help-text="Prefilled and formatted"
-    .formatOptions="${{
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }}"
-    .modelValue="${20}"
-  >
-  </lion-input-amount>
-`;
-```
-
-## Paste behavior
-
-For copy pasting numbers into the input-amount, there is slightly different parsing behavior.
-
-Normally, when it receives an input with only 1 separator character, we check the locale to determine whether this character is a group (thousand) separator, or a decimal separator.
-When a user pastes the input from a different source, we find this approach (locale-based) quite unreliable, because it may have been copied from a 'mathematical context' (like an Excel sheet) or a context with a different locale.
-Therefore, we use the heuristics based method to parse the input when it is pasted by the user.
-
-### What this means
-
-If the user in an English locale types `400,0` it will become `4,000.00`
-because the locale determines that the comma is a group separator, not a decimal separator.
-
-If the user in an English locale pastes `400,0` instead, it will become `400.00` because we cannot rely on locale.
-Therefore, instead, we determine that the comma cannot be a group separator because it is not followed by 3 digits after.
-It is more likely to be a decimal separator.