@lion/ui 0.24.0 → 0.26.0

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

@@ -1,99 +0,0 @@
----
-parts:
-  - API Table
-  - Input Datepicker
-title: 'Input Datepicker: API Table'
-eleventyNavigation:
-  key: API Table >> Input Datepicker
-  title: API Table
-  order: 90
-  parent: Input Datepicker
----
-# Input Datepicker: API Table
- 
-
-## class: `LionInputDatepicker`, `lion-input-datepicker`
-
-### Fields
-
-| Name                              | Privacy   | Type                     | Default      | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| --------------------------------- | --------- | ------------------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `calendarHeading`                 | public    | `string`                 |              | The heading to be added on top of the calendar overlay.
Naming chosen from an Application Developer perspective.
For a Subclasser 'calendarOverlayHeading' would be more appropriate.                                                                                                                                                                                                                     |                |
-| `config`                          | public    | `Partial<OverlayConfig>` | `{}`         | Configure the many options of the \`OverlayController\`                                                                                                                                                                                                                                                                                                                                                           | OverlayMixin   |
-| `formatter`                       | public    |                          | `formatDate` |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
-| `modelValue`                      | public    |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
-| `opened`                          | public    | `boolean`                | `false`      | If you add the opened attribute a dialog will be opened on page load. The invoker can be left out&#xA;in case the user does not need to be able to reopen the dialog.                                                                                                                                                                                                                                             | OverlayMixin   |
-| `parser`                          | public    |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInputDate  |
-| `placeholder`                     | public    | `string`                 | `''`         |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `readOnly`                        | public    | `boolean`                | `false`      | A Boolean attribute which, if present, indicates that the user should not be able to edit&#xA;the value of the input. The difference between disabled and readonly is that read-only&#xA;controls can still function, whereas disabled controls generally do not function as&#xA;controls until they are enabled.&#xA;&#xA;(From: https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) | LionInput      |
-| `slots`                           | public    |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `type`                            | public    | `string`                 | `'text'`     |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_calendarInvokerSlot`            | protected | `string`                 | `'suffix'`   | The slot to put the invoker button in. Can be 'prefix', 'suffix', 'before' and 'after'.&#xA;Default will be 'suffix'.                                                                                                                                                                                                                                                                                             |                |
-| `_calendarNode`                   | protected | `LionCalendar`           |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_feedbackConditionMeta`          | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusableNode`                  | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionField      |
-| `_focusCentralDateOnCalendarOpen` | protected | `boolean`                | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_hideOnUserSelect`               | protected | `boolean`                | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_inputNode`                      | protected | `HTMLInputElement`       |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | LionInput      |
-| `_invokerNode`                    | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_isEditingTextField`             | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_isHandlingCalendarUserInput`    | protected | `boolean`                | `false`      |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `_overlayBackdropNode`            | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
-| `_overlayContentNode`             | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
-| `_overlayContentWrapperNode`      | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
-| `_overlayInvokerNode`             | protected |                          |              | The node that opens/closes this overlay.&#xA;&#xA;Resolved in a stable, declarative way (independent of the exact DOM order)&#xA;by looking, in order, for:&#xA;1\. a child with \`\[slot="invoker"]\`&#xA;2\. any element in the same root that opts in via \`\[data-invoker]\` and&#xA;   references this host by id (\`for="\<id>"\`)&#xA;3\. a preceding sibling that opts in via \`\[data-invoker]\`         | OverlayMixin   |
-| `_overlayReferenceNode`           | protected |                          |              |                                                                                                                                                                                                                                                                                                                                                                                                                   | OverlayMixin   |
-| `_syncOnUserSelect`               | protected | `boolean`                | `true`       |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-
-### Methods
-
-| Name                               | Privacy   | Description                                                                                                                                                                                                                                                                                                                | Parameters                                                                                                   | Return              | Inherited From |
-| ---------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------- | -------------- |
-| `clear`                            | public    | Clears modelValue.&#xA;Interaction states are not cleared (use resetInteractionState for this)                                                                                                                                                                                                                             |                                                                                                              |                     | LionField      |
-| `close`                            | public    | Hides the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
-| `deserializer`                     | public    |                                                                                                                                                                                                                                                                                                                            | `serializedValue: string`                                                                                    |                     | LionInputDate  |
-| `open`                             | public    | Shows the overlay                                                                                                                                                                                                                                                                                                          |                                                                                                              |                     | OverlayMixin   |
-| `repositionOverlay`                | public    | Sometimes it's needed to recompute Popper position of an overlay, for instance when we have&#xA;an opened combobox and the surrounding context changes (the space consumed by the textbox&#xA;increases vertically)                                                                                                        |                                                                                                              |                     | OverlayMixin   |
-| `reset`                            | public    | Resets modelValue to initial value.&#xA;Interaction states are cleared                                                                                                                                                                                                                                                     |                                                                                                              |                     | LionField      |
-| `resetInteractionState`            | public    |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | LionField      |
-| `serializer`                       | public    |                                                                                                                                                                                                                                                                                                                            | `modelValue: Date`                                                                                           |                     | LionInputDate  |
-| `toggle`                           | public    | Toggles the overlay                                                                                                                                                                                                                                                                                                        |                                                                                                              |                     | OverlayMixin   |
-| `_calendarTemplate`                | protected | Subclassers can replace this with their custom extension of&#xA;LionCalendar, like \`\<my-calendar id="calendar">\</my-calendar>\`                                                                                                                                                                                         |                                                                                                              |                     |                |
-| `_defineOverlay`                   | protected |                                                                                                                                                                                                                                                                                                                            | `{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig` | `OverlayController` | OverlayMixin   |
-| `_defineOverlayConfig`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Object`            | OverlayMixin   |
-| `_getInvokerNode`                  | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              | `Element\|null`     | OverlayMixin   |
-| `_invokerIconTemplate`             | protected | Subclassers can replace this with their custom extension invoker icon                                                                                                                                                                                                                                                      |                                                                                                              |                     |                |
-| `_invokerTemplate`                 | protected | Subclassers can replace this with their custom extension invoker,&#xA;like \`\<my-button>\<calendar-icon>\</calendar-icon>\</my-button>\`                                                                                                                                                                                  |                                                                                                              |                     |                |
-| `_isPermanentlyDisconnected`       | protected | When we're moving around in dom, disconnectedCallback gets called.&#xA;Before we decide to teardown, let's wait to see if we were not just moving nodes around.                                                                                                                                                            |                                                                                                              | `Promise<boolean>`  | OverlayMixin   |
-| `_onCalendarOverlayOpened`         | protected | Lifecycle callback for subclassers                                                                                                                                                                                                                                                                                         |                                                                                                              |                     |                |
-| `_onCalendarUserSelectedChanged`   | protected | Triggered when a user selects a date from the calendar overlay                                                                                                                                                                                                                                                             | `{ target: { selectedDate } }, opts: { target: { selectedDate: Date }}`                                      |                     |                |
-| `_onChange`                        | protected | Dispatches custom bubble event                                                                                                                                                                                                                                                                                             | `ev: Event=`                                                                                                 |                     | LionField      |
-| `_onValidatorUpdated`              | protected | Responsible for listening param change event and&#xA;sync the calendar dates with the updated validator params                                                                                                                                                                                                             | `e: Event\|CustomEvent, metaData: {validator: Validator}`                                                    |                     |                |
-| `_overlayFrameTemplate`            | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
-| `_overlayTemplate`                 | protected | Defining this overlay as a templates from OverlayMixin&#xA;this is our source to give as .contentNode to OverlayController.&#xA;Important: do not change the name of this method.                                                                                                                                          |                                                                                                              |                     |                |
-| `_reflectBackOn`                   | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     |                |
-| `_setOpenedWithoutPropertyEffects` | protected | When the opened state is changed by an Application Developer,cthe OverlayController is&#xA;requested to show/hide. It might happen that this request is not honoured&#xA;(intercepted in before-hide for instance), so that we need to sync the controller state&#xA;to this webcomponent again, preventing eternal loops. | `newOpened: boolean`                                                                                         |                     | OverlayMixin   |
-| `_setupOpenCloseListeners`         | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_setupOverlayCtrl`                | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_teardownOpenCloseListeners`      | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-| `_teardownOverlayCtrl`             | protected |                                                                                                                                                                                                                                                                                                                            |                                                                                                              |                     | OverlayMixin   |
-
-### Events
-
-| Name                 | Type          | Description | Inherited From |
-| -------------------- | ------------- | ----------- | -------------- |
-| `opened-changed`     | `CustomEvent` |             | OverlayMixin   |
-| `user-input-changed` | `Event`       |             | LionField      |
-
-### Attributes
-
-| Name               | Field           | Inherited From |
-| ------------------ | --------------- | -------------- |
-| `calendar-heading` | calendarHeading |                |
-| `opened`           | opened          | OverlayMixin   |
-| `modelValue`       | modelValue      | LionInputDate  |
-| `readonly`         | readOnly        | LionInput      |
-| `type`             | type            | LionInput      |
-| `placeholder`      | placeholder     | LionInput      |
-
-<hr/>

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

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

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

@@ -1,54 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input Datepicker
-  - Overview
-eleventyNavigation:
-  key: 'Input Datepicker: Overview'
-  order: 10
-  parent: Input Datepicker
-  title: Overview
----
-
-# Overview
-
-A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
-For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
-We encourage using our standard [input-date](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-date/overview.md) for this.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input-datepicker.js';
-```
-
-```js preview-story
-export const main = () => {
-  return html` <lion-input-datepicker label="Date" name="date"></lion-input-datepicker> `;
-};
-```
-
-## Features
-
-- Input field with a datepicker to help to choose a date
-- Based on our [input-date](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input-date/overview.md)
-- Makes use of our [calendar](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/calendar/overview.md) inside the datepicker
-- Makes use of [formatDate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/localize/dates.md) for formatting and parsing.
-- Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
-  - IsDate (default)
-  - MinDate
-  - MaxDate
-  - MinMaxDate
-  - IsDateDisabled
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionInputDatepicker } from '@lion/ui/input-datepicker.js';
-// or
-import '@lion/ui/define/lion-input-datepicker.js';
-```

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

@@ -1,117 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Datepicker
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Datepicker: Use Cases'
-  order: 20
-  parent: Input Datepicker
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { MinMaxDate, IsDateDisabled } from '@lion/ui/form-core.js';
-import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
-import { formatDate } from '@lion/ui/localize.js';
-import '@lion/ui/define/lion-input-datepicker.js';
-loadDefaultFeedbackMessages();
-```
-
-## Minimum and maximum date
-
-Below are examples of different validators for dates.
-
-```js preview-story
-export const minimumAndMaximumDate = () => html`
-  <lion-input-datepicker
-    label="MinMaxDate"
-    .modelValue="${new Date('2018/05/30')}"
-    .validators="${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}"
-  >
-    <div slot="help-text">
-      Enter a date between ${formatDate(new Date('2018/05/24'))} and
-      ${formatDate(new Date('2018/06/24'))}.
-    </div>
-  </lion-input-datepicker>
-`;
-```
-
-## Disable specific dates
-
-```js preview-story
-export const disableSpecificDates = () => html`
-  <lion-input-datepicker
-    label="IsDateDisabled"
-    help-text="You're not allowed to choose any 15th."
-    .modelValue="${new Date('2023/06/15')}"
-    .validators="${[new IsDateDisabled(d => d.getDate() === 15)]}"
-  ></lion-input-datepicker>
-`;
-```
-
-## Calendar heading
-
-You can modify the heading of the calendar with the `.calendarHeading` property or `calendar-heading` attribute for simple values.
-
-By default, it will take the label value.
-
-```js preview-story
-export const calendarHeading = () => html`
-  <lion-input-datepicker
-    label="Date"
-    .calendarHeading="${'Custom heading'}"
-    .modelValue="${new Date()}"
-  ></lion-input-datepicker>
-`;
-```
-
-## Disabled
-
-You can disable datepicker inputs.
-
-```js preview-story
-export const disabled = () => html`
-  <lion-input-datepicker label="Disabled" disabled></lion-input-datepicker>
-`;
-```
-
-## Read only
-
-You can set datepicker inputs to `readonly`, which will prevent the user from opening the calendar popup.
-
-```js preview-story
-export const readOnly = () => html`
-  <lion-input-datepicker label="Readonly" readonly .modelValue="${new Date()}">
-  </lion-input-datepicker>
-`;
-```
-
-## Faulty prefilled
-
-Faulty prefilled input will be cleared
-
-```js preview-story
-export const faultyPrefilled = () => html`
-  <lion-input-datepicker label="Faulty prefilled" .modelValue="${new Date('30/01/2022')}">
-  </lion-input-datepicker>
-`;
-```
-
-## Accessibility
-
-To ensure an accessible experience for all users, including those using screen readers, provide a descriptive label for your datepicker. An aria-label will be build based on it: "Open {label} picker". In case your label doesn't fit, you can replace it with the `fieldName` property.
-
-### Using fieldName property
-
-If your label is too long for the aria-label text "Open {label} picker", provide a shorter `fieldName` to keep the picker button's aria-label concise:
-
-```js preview-story
-export const ariaLabelFieldName = () => html`
-  <lion-input-datepicker label="Event start date and time" .fieldName="${'StartDate'}">
-  </lion-input-datepicker>
-`;
-```

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

@@ -1,53 +0,0 @@
----
-parts:
-  - API Table
-  - Input Email
-title: 'Input Email: API Table'
-eleventyNavigation:
-  key: API Table >> Input Email
-  title: API Table
-  order: 90
-  parent: Input Email
----
-# Input Email: API Table
- 
-
-## class: `LionInputEmail`, `lion-input-email`
-
-### Fields
-
-| Name                     | Privacy   | Type               | Default   | Description                                                                                                                                                                                                                                                                                                                                                                                                       | Inherited From |
-| ------------------------ | --------- | ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `autocomplete`           | public    | `string`           | `'email'` |                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `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      |
-| `_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      |
-| `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    | LionInput      |
-| `type`        | type        | LionInput      |
-| `placeholder` | placeholder | LionInput      |
-
-<hr/>

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

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

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

@@ -1,44 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Input Email
-  - Overview
-eleventyNavigation:
-  key: 'Input Email: Overview'
-  order: 10
-  parent: Input Email
-  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 email.
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-input-email.js';
-```
-
-```js preview-story
-export const main = () => {
-  return html` <lion-input-email label="Email" name="email"></lion-input-email> `;
-};
-```
-
-## Features
-
-- Based on our [input](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/input/overview.md)
-- Makes use of email [validators](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) with corresponding error messages in different languages
-  - IsEmail (default)
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionInputEmail } from '@lion/ui/input-email.js';
-// or
-import '@lion/ui/define/lion-input-email.js';
-```

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

@@ -1,60 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Input Email
-  - Use Cases
-eleventyNavigation:
-  key: 'Input Email: Use Cases'
-  order: 20
-  parent: Input Email
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { Validator } from '@lion/ui/form-core.js';
-import '@lion/ui/define/lion-input-email.js';
-```
-
-## Faulty Prefilled
-
-When prefilling with a faulty input, an error feedback message will show.
-
-Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed on it.
-
-```js preview-story
-export const faultyPrefilled = () => html`
-  <lion-input-email .modelValue="${'foo'}" label="Email"></lion-input-email>
-`;
-```
-
-## Custom Validator
-
-```js preview-story
-export const customValidator = () => {
-  class GmailOnly extends Validator {
-    static get validatorName() {
-      return 'GmailOnly';
-    }
-    execute(value) {
-      let hasError = false;
-      if (!(value.indexOf('gmail.com') !== -1)) {
-        hasError = true;
-      }
-      return hasError;
-    }
-    static async getMessage() {
-      return 'You can only use gmail.com email addresses.';
-    }
-  }
-  return html`
-    <lion-input-email
-      .modelValue="${'foo@bar.com'}"
-      .validators="${[new GmailOnly()]}"
-      label="Email"
-    ></lion-input-email>
-  `;
-};
-```