@lion/ui 0.24.0 → 0.26.0

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

@@ -1,206 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Drawer
-  - Use Cases
-eleventyNavigation:
-  key: 'Drawer: Use Cases'
-  order: 20
-  parent: Drawer
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { icons } from '@lion/ui/icon.js';
-import '@lion/ui/define/lion-drawer.js';
-import '@lion/ui/define/lion-icon.js';
-import { demoStyle } from './src/demoStyle.js';
-
-icons.addIconResolver('lion', (iconset, name) => {
-  switch (iconset) {
-    case 'misc':
-      return import('../icon/assets/iconset-misc.js').then(module => module[name]);
-    default:
-      throw new Error(`Unknown iconset ${iconset}`);
-  }
-});
-```
-
-## Positioning
-
-### Default left
-
-By default, the drawer is positioned on the left side of the viewport.
-
-With the `position` property it can be positioned at the top or on the right of the screen.
-
-### Top
-
-```js preview-story
-export const top = () => html`
-  <style>
-    ${demoStyle}
-  </style>
-  <div class="demo-container-top">
-    <lion-drawer position="top">
-      <button slot="invoker">
-        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
-      </button>
-      <p slot="headline">Headline</p>
-      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
-    </lion-drawer>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
-      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
-      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
-      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
-      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
-      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
-      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
-      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
-    </div>
-  </div>
-`;
-```
-
-### Right
-
-```js preview-story
-export const right = () => html`
-  <style>
-    ${demoStyle}
-  </style>
-  <div class="demo-container-right">
-    <lion-drawer position="right">
-      <button slot="invoker">
-        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
-      </button>
-      <p slot="headline">Headline</p>
-      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
-    </lion-drawer>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
-      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
-      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
-      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
-      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
-      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
-      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
-      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
-    </div>
-  </div>
-`;
-```
-
-## Opened
-
-Add the `opened` attribute to display the drawer opened.
-
-```js preview-story
-export const opened = () => html`
-  <style>
-    ${demoStyle}
-  </style>
-  <div class="demo-container">
-    <lion-drawer opened>
-      <p slot="headline">Headline</p>
-      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
-    </lion-drawer>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
-      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
-      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
-      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
-      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
-      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
-      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
-      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
-    </div>
-  </div>
-`;
-```
-
-## Methods
-
-There are the following methods available to control the extra content for the drawer.
-
-- `toggle()`: toggle the extra content
-- `show()`: show the extra content
-- `hide()`: hide the extra content
-
-```js preview-story
-export const methods = ({ shadowRoot }) => html`
-  <style>
-    ${demoStyle}
-  </style>
-  <section style="margin-top:16px">
-    <button @click="${() => shadowRoot.querySelector('#drawer').toggle()}">Toggle content</button>
-    <button @click="${() => shadowRoot.querySelector('#drawer').show()}">Show content</button>
-    <button @click="${() => shadowRoot.querySelector('#drawer').hide()}">Hide content</button>
-  </section>
-
-  <div class="demo-container">
-    <lion-drawer id="drawer">
-      <button slot="invoker">
-        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
-      </button>
-      <p slot="headline">Headline</p>
-      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
-    </lion-drawer>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
-      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
-      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
-      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
-      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
-      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
-      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
-      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
-    </div>
-  </div>
-`;
-```
-
-## Events
-
-`lion-drawer` fires an event on `invoker` click to notify the component's current state. It is useful for analytics purposes or to perform some actions while expanding and collapsing the component.
-
-- `@opened-changed`: triggers when drawer either gets opened or closed
-
-```js preview-story
-export const events = ({ shadowRoot }) => html`
-  <style>
-    ${demoStyle}
-  </style>
-  <div class="demo-custom-collapsible-state-container">
-    <strong id="collapsible-state"></strong>
-  </div>
-  <div class="demo-container">
-    <lion-drawer
-      @opened-changed=${ev => {
-        const collapsibleState = shadowRoot.querySelector('#collapsible-state');
-        collapsibleState.innerText = `Opened: ${ev.target.opened}`;
-      }}
-    >
-      <button slot="invoker">
-        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
-      </button>
-      <p slot="headline">Headline</p>
-      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
-    </lion-drawer>
-    <div>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
-      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
-      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
-      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
-      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
-      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
-      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
-      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
-    </div>
-  </div>
-`;
-```

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

@@ -1,24 +0,0 @@
----
-parts:
-  - API Table
-  - Fieldset
-title: 'Fieldset: API Table'
-eleventyNavigation:
-  key: API Table >> Fieldset
-  title: API Table
-  order: 90
-  parent: Fieldset
----
-# Fieldset: API Table
- 
-
-## class: `LionFieldset`, `lion-fieldset`
-
-### Fields
-
-| Name                 | Privacy   | Type                                      | Default      | Description | Inherited From |
-| -------------------- | --------- | ----------------------------------------- | ------------ | ----------- | -------------- |
-| `_isFormOrFieldset`  | protected | `boolean`                                 | `true`       |             |                |
-| `_repropagationRole` | protected | `'child' \| 'choice-group' \| 'fieldset'` | `'fieldset'` |             |                |
-
-<hr/>

package/docs/components/fieldset/index.md

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

package/docs/components/fieldset/overview.md

@@ -1,61 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Fieldset
-  - Overview
-eleventyNavigation:
-  key: 'Fieldset: Overview'
-  order: 10
-  parent: Fieldset
-  title: Overview
----
-
-# Overview
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-
-import '@lion/ui/define/lion-input.js';
-import '@lion/ui/define/lion-fieldset.js';
-```
-
-A web component that can be used to group multiple input fields or other fieldsets together.
-
-```js preview-story
-export const main = () => html`
-  <lion-fieldset name="nameGroup" label="Name">
-    <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
-    <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
-  </lion-fieldset>
-`;
-```
-
-We have three specific fieldset implementations:
-
-- [form](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/form/overview.md)
-- [checkbox-group](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/checkbox-group/overview.md)
-- [radio-group](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/components/radio-group/overview.md)
-
-A native fieldset element should always have a legend-element for a11y purposes.
-However, our fieldset element is not native and should not have a legend-element.
-Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
-
-## Features
-
-- Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md)
-- Can have [validate](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
-- Can disable input fields on fieldset level
-- Accessible out of the box
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionFieldset } from '@lion/ui/fieldset.js';
-// or
-import '@lion/ui/define/lion-fieldset.js';
-```

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

@@ -1,203 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Fieldset
-  - Use Cases
-eleventyNavigation:
-  key: 'Fieldset: Use Cases'
-  order: 20
-  parent: Fieldset
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { localize } from '@lion/ui/localize.js';
-import { MinLength, Validator, Required } from '@lion/ui/form-core.js';
-
-import '@lion/ui/define/lion-input.js';
-import '@lion/ui/define/lion-fieldset.js';
-```
-
-## With Data
-
-The fieldset's modelValue is an `Object` containing properties where the key is the `name` attribute of the field, and the value is the `modelValue` of the field.
-
-```js preview-story
-export const data = () => html`
-  <lion-fieldset name="nameGroup" label="Name">
-    <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
-    <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
-    <button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
-      Log to Action Logger
-    </button>
-  </lion-fieldset>
-`;
-```
-
-## Disabled
-
-Disabling a fieldset disables all its child fields.
-When enabling a fieldset, fields that have disabled explicitly set will stay disabled.
-
-```js preview-story
-export const disabled = () => {
-  function toggleDisabled(e) {
-    const fieldset = e.target.parentElement.querySelector('#fieldset');
-    fieldset.disabled = !fieldset.disabled;
-  }
-  return html`
-    <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
-      <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
-      <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
-      <lion-fieldset name="nameGroup2" label="Name">
-        <lion-input
-          name="FirstName2"
-          label="First Name"
-          .modelValue="${'Foo'}"
-          disabled
-        ></lion-input>
-        <lion-input name="LastName2" label="Last Name" .modelValue="${'Bar'}"></lion-input>
-      </lion-fieldset>
-    </lion-fieldset>
-    <button @click="${toggleDisabled}">Toggle disabled</button>
-  `;
-};
-```
-
-## Nesting fieldsets
-
-Fieldsets can also be nested. The level of nesting will correspond one to one with the `modelValue` object.
-
-```js preview-story
-export const nestingFieldsets = () => html`
-  <lion-fieldset>
-    <div slot="label">Personal data</div>
-    <lion-fieldset name="nameGroup" label="Name">
-      <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
-      <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
-    </lion-fieldset>
-    <lion-fieldset name="location" label="Location">
-      <lion-input name="country" label="Country" .modelValue="${'Netherlands'}"></lion-input>
-    </lion-fieldset>
-    <lion-input name="age" label="Age" .modelValue="${21}"></lion-input>
-    <button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
-      Log everything to Action Logger
-    </button>
-    <br />
-    <button
-      @click="${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}"
-    >
-      Log only Name fieldset to Action Logger
-    </button>
-  </lion-fieldset>
-`;
-```
-
-## Validation
-
-You can create validators that work on a fieldset level.
-Below, we mimic a `required` validator, but on the fieldset.
-Try it by typing something in the input, then removing it.
-
-```js preview-story
-export const validation = () => {
-  const DemoValidator = class extends Validator {
-    static get validatorName() {
-      return 'DemoValidator';
-    }
-    execute(value) {
-      if (value && value.input1) {
-        return false; // el.hasError = true
-      }
-      return true;
-    }
-    static async getMessage() {
-      return '[Fieldset Error] Demo error message';
-    }
-  };
-  return html`
-    <lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
-      <lion-input name="input1" label="Label"></lion-input>
-    </lion-fieldset>
-  `;
-};
-```
-
-### Validating multiple inputs in a fieldset
-
-You can have your fieldset validator take into consideration multiple fields.
-
-```js preview-story
-export const validatingMultipleFields = () => {
-  const IsCatsAndDogs = class extends Validator {
-    static get validatorName() {
-      return 'IsCatsAndDogs';
-    }
-    execute(value) {
-      return !(value.input1 === 'cats' && value.input2 === 'dogs');
-    }
-    static async getMessage() {
-      return '[Fieldset Error] Input 1 needs to be "cats" and Input 2 needs to be "dogs"';
-    }
-  };
-  return html`
-    <lion-fieldset .validators="${[new IsCatsAndDogs()]}">
-      <lion-input label="An all time YouTube favorite" name="input1" help-text="cats"> </lion-input>
-      <lion-input label="Another all time YouTube favorite" name="input2" help-text="dogs">
-      </lion-input>
-    </lion-fieldset>
-  `;
-};
-```
-
-Alternatively you can also let the fieldset validator be dependent on the error states of its child fields.
-
-Simply loop over the formElements inside your Validator's `execute` method:
-
-```js
-this.formElements.some(el => el.hasFeedbackFor.includes('error'));
-```
-
-### Validating multiple fieldsets
-
-You can have your fieldset validator take into accounts multiple nested fieldsets.
-
-```js preview-story
-export const validatingMultipleFieldsets = () => {
-  const IsCatsDogs = class extends Validator {
-    static get validatorName() {
-      return 'IsCatsAndDogs';
-    }
-    execute(value) {
-      if (
-        value.inner1 &&
-        value.inner1.input1 === 'cats' &&
-        value.inner2 &&
-        value.inner2.input1 === 'dogs'
-      ) {
-        return false;
-      }
-      return true;
-    }
-    static async getMessage() {
-      return 'There is a problem with one of your fieldsets';
-    }
-  };
-  return html`
-    <lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
-      <lion-fieldset name="inner1">
-        <label slot="label">Fieldset no. 1</label>
-        <lion-input label="Write 'cats' here" name="input1"> </lion-input>
-      </lion-fieldset>
-      <hr />
-      <lion-fieldset name="inner2">
-        <label slot="label">Fieldset no. 2</label>
-        <lion-input label="Write 'dogs' here" name="input1"> </lion-input>
-      </lion-fieldset>
-    </lion-fieldset>
-  `;
-};
-```

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

@@ -1,12 +0,0 @@
----
-parts:
-  - API Table
-  - Form
-title: 'Form: API Table'
-eleventyNavigation:
-  key: API Table >> Form
-  title: API Table
-  order: 90
-  parent: Form
----
-# Form: API Table

package/docs/components/form/index.md

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

package/docs/components/form/overview.md

@@ -1,66 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Form
-  - Overview
-eleventyNavigation:
-  key: 'Form: Overview'
-  order: 10
-  parent: Form
-  title: Overview
----
-
-# Overview
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-
-import '@lion/ui/define/lion-input.js';
-import '@lion/ui/define/lion-form.js';
-```
-
-A web component that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/overview.md).
-
-```js preview-story
-export const main = () => {
-  const submitHandler = ev => {
-    const formData = ev.target.serializedValue;
-    console.log('formData', formData);
-    fetch('/api/foo/', {
-      method: 'POST',
-      body: JSON.stringify(formData),
-    });
-  };
-  return html`
-    <lion-form @submit="${submitHandler}">
-      <form @submit="${ev => ev.preventDefault()}">
-        <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
-        <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
-        <button>Submit</button>
-      </form>
-    </lion-form>
-  `;
-};
-```
-
-## Features
-
-- Data synchronization with models
-- Easy retrieval of form data based on field names
-- Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/interaction-states.md)
-- Registration mechanism for form controls
-- Accessible out of the box
-
-For more information about fields that are designed for our `form`, please read [form system](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/form/overview.md).
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import '@lion/ui/define/lion-form.js';
-```