@lion/ui 0.24.0 → 0.26.0

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

@@ -1,71 +0,0 @@
----
-parts:
-  - API Table
-  - Input Range
-title: 'Input Range: API Table'
-eleventyNavigation:
-  key: API Table >> Input Range
-  title: API Table
-  order: 90
-  parent: Input Range
----
-# Input Range: API Table
- 
-
-## class: `LionInputRange`, `` `lion-input-range` ``
-
-### Fields
-
-| Name                     | Privacy   | Type                     | Default                            | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| ------------------------ | --------- | ------------------------ | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `max`                    | public    | `number`                 | `Infinity`                         |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `maxLabel`               | public    | `string`                 | `''`                               |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `min`                    | public    | `number`                 | `Infinity`                         |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `minLabel`               | public    | `string`                 | `''`                               |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `noMinMaxLabels`         | public    | `boolean`                | `false`                            |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `parser`                 | public    |                          |                                    |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `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      |
-| `scopedStylesController` | public    | `ScopedStylesController` | `new ScopedStylesController(this)` |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `slots`                  | public    |                          |                                    |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `step`                   | public    | `number`                 | `1`                                |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `type`                   | public    | `string`                 | `'range'`                          |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `unit`                   | public    | `string`                 | `''`                               |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_feedbackConditionMeta` | protected |                          |                                    |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`         | protected |                          |                                    |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_inputNode`             | protected | `HTMLInputElement`       |                                    |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_valueDisplay`          | protected |                          |                                    | Get the display info for the current value                                                                                                                                                                                                                                                                                                                                                                        |                |
-
-### 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      |
-| `_inputGroupInputTemplate` | protected |                                                                                                |              |        |                |
-| `_inputGroupTemplate`      | protected |                                                                                                |              |        |                |
-| `_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 |
-| ------------------- | -------------- | -------------- |
-| `min`               | min            |                |
-| `max`               | max            |                |
-| `unit`              | unit           |                |
-| `step`              | step           |                |
-| `no-min-max-labels` | noMinMaxLabels |                |
-| `min-label`         | minLabel       |                |
-| `max-label`         | maxLabel       |                |
-| `readonly`          | readOnly       | LionInput      |
-| `type`              | type           | LionInput      |
-| `placeholder`       | placeholder    | LionInput      |
-
-<hr/>

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

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

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

@@ -1,44 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input Range
-  - Overview
-eleventyNavigation:
-  key: 'Input Range: Overview'
-  order: 10
-  parent: Input Range
-  title: Overview
----
-
-# Overview
-
-A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input-range.js';
-```
-
-```html preview-story
-<lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
-```
-
-## Features
-
-- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/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/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/numbers.md) for formatting and parsing.
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionInputRange } from '@lion/ui/input-range.js';
-// or
-import '@lion/ui/define/lion-input-range.js';
-```

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

@@ -1,126 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Range
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Range: Use Cases'
-  order: 20
-  parent: Input Range
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input-range.js';
-```
-
-## Units
-
-```html preview-story
-<style>
-  lion-input-range {
-    max-width: 400px;
-  }
-</style>
-<lion-input-range
-  min="0"
-  max="100"
-  .modelValue="${50}"
-  unit="%"
-  label="Percentage"
-></lion-input-range>
-```
-
-## Steps
-
-```html preview-story
-<lion-input-range
-  style="max-width: 400px;"
-  min="200"
-  max="500"
-  step="50"
-  .modelValue="${300}"
-  label="Input range"
-  help-text="This slider uses increments of 50"
-></lion-input-range>
-```
-
-## Without Min Max Labels
-
-```html preview-story
-<lion-input-range
-  style="max-width: 400px;"
-  no-min-max-labels
-  min="0"
-  max="100"
-  label="Input range"
-></lion-input-range>
-```
-
-## Custom Min Max Labels
-
-```html preview-story
-<lion-input-range
-  min="0"
-  max="11"
-  min-label="less than 1 item"
-  max-label="more than 10 items"
-  .modelValue="${4}"
-  unit="Items"
-  label="Items"
-></lion-input-range>
-```
-
-## Disabled
-
-```html preview-story
-<lion-input-range
-  style="max-width: 400px;"
-  disabled
-  min="200"
-  max="500"
-  .modelValue="${300}"
-  label="Input range"
-></lion-input-range>
-```
-
-## Range Styles
-
-Often, you will style your own range input by changing the pseudo-elements for the slider track and thumb.
-
-These pseudo-elements do not play nice with `::slotted`.
-
-As per [specification](https://drafts.csswg.org/css-scoping/#slotted-pseudo):
-
-> The ::slotted() pseudo-element can be followed by a tree-abiding pseudo-element,
-> like ::slotted()::before, representing the appropriate pseudo-element of the elements
-> represented by the ::slotted() pseudo-element.
-
-The pseudo-elements associated with the slider track/thumb are not tree-abiding, so you can't do:
-
-```css
-::slotted(.form-control)::-webkit-slider-runnable-track
-```
-
-This means you will need to style the slotted native input from the LightDOM,
-and for this we added added our ScopedStylesController as a controller to `LionInputRange`.
-This controller inserts a `<style>` element
-that emulates scoping by generating a uniquely generated class on the LionInputRange component.
-This prevents the styling from conflicting with other elements on the page.
-
-To use it when extending, override `static scopedStyles(scope)`:
-
-```js
-class MyInputRange extends LionInputRange {
-  static scopedStyles(scope) {
-    return css`
-      .${scope} .form-control::-webkit-slider-runnable-track {
-        background-color: lightgreen;
-      }
-    `;
-  }
-}
-```

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

@@ -1,74 +0,0 @@
----
-parts:
-  - API Table
-  - Input Stepper
-title: 'Input Stepper: API Table'
-eleventyNavigation:
-  key: API Table >> Input Stepper
-  title: API Table
-  order: 90
-  parent: Input Stepper
----
-# Input Stepper: API Table
- 
-
-## class: `LionInputStepper`, `lion-input-stepper`
-
-### Fields
-
-| Name                     | Privacy   | Type                                         | Default                                              | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| ------------------------ | --------- | -------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `currentValue`           | public    |                                              |                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `formatter`              | public    |                                              | `formatNumber`                                       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `max`                    | public    | `number`                                     | `Infinity`                                           |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `min`                    | public    | `number`                                     | `Infinity`                                           |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `parser`                 | public    |                                              | `parseNumber`                                        |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `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      |
-| `step`                   | public    | `number`                                     | `1`                                                  |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `timer`                  | public    | `ReturnType<typeof setTimeout> \| undefined` | `undefined`                                          | Id of the timeout that clears the visually hidden value text again.&#xA;Declared as \`ReturnType\<typeof setTimeout>\` rather than left to inference: with \`@types/node\` in&#xA;the type build, inference puts \`NodeJS.Timeout\` in the declarations, which consumers that do not&#xA;load node types cannot resolve.                                                                                          |                |
-| `type`                   | public    | `string`                                     | `'text'`                                             |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `values`                 | public    | `object`                                     | `{ max: this.max, min: this.min, step: this.step, }` |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `valueTextMapping`       | public    | `{[key: number]: string}`                    | `{}`                                                 | The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow.                                                                                                                                                                                                                                                                                                                        |                |
-| `_feedbackConditionMeta` | protected |                                              |                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`         | protected |                                              |                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_inputNode`             | protected | `HTMLInputElement`                           |                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-
-### Methods
-
-| Name                       | Privacy   | Description                                                                                    | Parameters   | Return                   | Inherited From |
-| -------------------------- | --------- | ---------------------------------------------------------------------------------------------- | ------------ | ------------------------ | -------------- |
-| `clear`                    | public    | Clears modelValue.&#xA;Interaction states are not cleared (use resetInteractionState for this) |              |                          | LionField      |
-| `reset`                    | public    | Resets modelValue to initial value.&#xA;Interaction states are cleared                         |              |                          | LionField      |
-| `resetInteractionState`    | public    |                                                                                                |              |                          | LionField      |
-| `_decrement`               | protected | Decrement the value based on given step or default step value is 1                             | `ev: Event`  |                          |                |
-| `_decrementorSignTemplate` | protected | Get the decrementor button sign template                                                       |              | `String\|TemplateResult` |                |
-| `_decrementorTemplate`     | protected | Get the increment button template                                                              |              | `TemplateResult`         |                |
-| `_destroyOutputContent`    | protected |                                                                                                |              |                          |                |
-| `_increment`               | protected | Increment the value based on given step or default step value is 1                             | `ev: Event`  |                          |                |
-| `_incrementorSignTemplate` | protected | Get the incrementor button sign template                                                       |              | `String\|TemplateResult` |                |
-| `_incrementorTemplate`     | protected | Get the decrement button template                                                              |              | `TemplateResult`         |                |
-| `_inputGroupTemplate`      | protected |                                                                                                |              |                          |                |
-| `_onChange`                | protected | Toggle +/- buttons on change                                                                   | `ev: Event=` |                          | LionField      |
-| `_updateAriaAttributes`    | protected |                                                                                                |              |                          |                |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-### Attributes
-
-| Name               | Field            | Inherited From |
-| ------------------ | ---------------- | -------------- |
-| `min`              | min              |                |
-| `max`              | max              |                |
-| `valueTextMapping` | valueTextMapping |                |
-| `step`             | step             |                |
-| `readonly`         | readOnly         | LionInput      |
-| `type`             | type             | LionInput      |
-| `placeholder`      | placeholder      | LionInput      |
-
-<hr/>

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

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

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

@@ -1,48 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input Stepper
-  - Overview
-eleventyNavigation:
-  key: 'Input Stepper: Overview'
-  order: 10
-  parent: Input Stepper
-  title: Overview
----
-
-# Overview
-
-A web component that enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import '@lion/ui/define/lion-input-stepper.js';
-loadDefaultFeedbackMessages();
-```
-
-```html preview-story
-<lion-input-stepper max="5" min="0" name="count">
-  <label slot="label">RSVP</label>
-  <div slot="help-text">Max. 5 guests</div>
-</lion-input-stepper>
-```
-
-## Features
-
-- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md).
-- Set `min` and `max` value to define the range.
-- Set `step` value in integer or decimal to increase and decrease the value.
-- Use `ArrowUp` or `ArrowDown` to update the value.
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionInputStepper } from '@lion/ui/input-stepper.js';
-// or
-import '@lion/ui/define/lion-input-stepper.js';
-```

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

@@ -1,155 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Stepper
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Stepper: Use Cases'
-  order: 20
-  parent: Input Stepper
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import '@lion/ui/define/lion-input-stepper.js';
-loadDefaultFeedbackMessages();
-```
-
-## Default
-
-When no range or step is defined, it can go infinite with default step value as `1`. You can also specify prefix content using `after` slot.
-
-```html preview-story
-<lion-input-stepper name="year">
-  <label slot="label">How old is the existence?</label>
-  <div slot="after" data-description>In Billion Years</div>
-</lion-input-stepper>
-```
-
-## Attributes & Properties
-
-### Step and Value
-
-Use `step` attribute to specify the incrementor or decrementor difference and `value` to set the default value.
-
-```html preview-story
-<lion-input-stepper
-  label="Amount of oranges"
-  min="100"
-  step="100"
-  name="value"
-  value="200"
-></lion-input-stepper>
-```
-
-### Range
-
-Use `min` and `max` attribute to specify a range.
-
-```html preview-story
-<lion-input-stepper
-  label="Amount of oranges"
-  min="200"
-  max="500"
-  name="value"
-  step="100"
-  value="200"
-></lion-input-stepper>
-```
-
-### Value text
-
-Use the `.valueTextMapping` property to override the value with a text.
-
-```js preview-story
-export const valueTextMapping = () => {
-  const values = {
-    1: 'first',
-    2: 'second',
-    3: 'third',
-    4: 'fourth',
-    5: 'fifth',
-    6: 'sixth',
-    7: 'seventh',
-    8: 'eighth',
-    9: 'ninth',
-    10: 'tenth',
-  };
-  return html`
-    <lion-input-stepper
-      label="Order"
-      min="1"
-      max="10"
-      name="value"
-      .valueTextMapping="${values}"
-    ></lion-input-stepper>
-  `;
-};
-```
-
-### Formatting
-
-Just like with the `input-amount` you can add the `formatOptions` to format the numbers to your preferences, to a different locale or adjust the amount of fractions.
-
-```js preview-story
-export const formatting = () => {
-  const format = { locale: 'nl-NL' };
-  return html`
-    <lion-input-stepper
-      label="Amount of oranges"
-      min="0"
-      max="5000"
-      step="100"
-      name="value"
-      .formatOptions="${format}"
-      .modelValue="${1200}"
-    ></lion-input-stepper>
-  `;
-};
-```
-
-### Aligning to step
-
-The value is always aligned with the defined step size when using the increase or decrease buttons. The input value will be adjusted to the nearest valid step multiple. For example, with a step of `10` starting from `1`, if the user enters `55` and clicks the increase button, the value will align to `61` instead of `65` (1 > 11 > 21 > ... > 51 > 61).
-
-```html preview-story
-<lion-input-stepper
-  label="Amount of oranges"
-  min="1"
-  max="100"
-  step="10"
-  name="value"
-  alignToStep
-  value="55"
-></lion-input-stepper>
-```
-
-### 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`.
-
-```html preview-story
-<lion-input-stepper name="year" disabled value="10">
-  <label slot="label">How old is the existence?</label>
-  <div slot="after" data-description>In Billion Years</div>
-</lion-input-stepper>
-```
-
-### ReadOnly
-
-`readonly` attribute will be delegated to the native `<input>` to make it read-only, and will prevent buttons to increase or decrease value.
-
-This field **will still be included** in the parent fieldset or form's `serializedValue`.
-
-```html preview-story
-<lion-input-stepper name="year" readonly value="10">
-  <label slot="label">How old is the existence?</label>
-  <div slot="after" data-description>In Billion Years</div>
-</lion-input-stepper>
-```