@lion/ui 0.24.0 → 0.26.0

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

@@ -1,181 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Steps
-  - Use Cases
-eleventyNavigation:
-  key: 'Steps: Use Cases'
-  order: 20
-  parent: Steps
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-steps.js';
-import '@lion/ui/define/lion-step.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-steps>
-    <lion-step initial-step>
-      <p>Welcome</p>
-      <button disabled>previous</button> &nbsp;
-      <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">
-        Next
-      </button>
-    </lion-step>
-    <lion-step>
-      <p>Are you single?</p>
-      <button
-        type="button"
-        @click=${ev => {
-          ev.target.parentElement.controller.data.isSingle = true;
-          ev.target.parentElement.controller.next();
-        }}
-      >
-        Yes
-      </button>
-      &nbsp;
-      <button
-        type="button"
-        @click=${ev => {
-          ev.target.parentElement.controller.data.isSingle = false;
-          ev.target.parentElement.controller.next();
-        }}
-      >
-        No
-      </button>
-      <br /><br />
-      <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
-        Previous
-      </button>
-    </lion-step>
-    <lion-step id="is-single" .condition="${data => data.isSingle}">
-      <p>You are single</p>
-      <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
-        Previous
-      </button>
-      &nbsp;
-      <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">
-        Next
-      </button>
-    </lion-step>
-    <lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition>
-      <p>You are NOT single.</p>
-      <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
-        Previous
-      </button>
-      &nbsp;
-      <button type="button" @click="${ev => ev.target.parentElement.controller.next()}">
-        Next
-      </button>
-    </lion-step>
-    <lion-step>
-      <p>Finish</p>
-      <button type="button" @click="${ev => ev.target.parentElement.controller.previous()}">
-        Previous
-      </button>
-    </lion-step>
-  </lion-steps>
-`;
-```
-
-## Define steps
-
-We provide two components: `lion-steps` and `lion-step`. Steps need to be direct children of `lion-steps`.
-
-```html
-<lion-steps>
-  <lion-step initial-step>Step 1</lion-step>
-  <lion-step>Step 2</lion-step>
-  <lion-step>......</lion-step>
-  <lion-step>Step N</lion-step>
-</lion-steps>
-```
-
-The first step needs to be explicitly set via `initial-step` so that it get status `entered`, while others are `untouched` by default. You can navigate between steps using `next()` and `previous()` methods, so that next step gets `entered` status, while previous one becomes `left`:
-
-```js
-next() {
-  return this.shadowRoot.getElementById('steps').next();
-}
-
-previous() {
-  return this.shadowRoot.getElementById('steps').previous();
-}
-```
-
-## Conditions
-
-You can provide a condition to a step (with or without `invert-condition` emulating if-else flow):
-
-```html
-<lion-steps data="[[data]]">
-  <lion-step>...</lion-step>
-  <lion-step>step where `data.smth` is set</lion-step>
-  <lion-step condition="myConditionFunc">if</lion-step>
-  <lion-step condition="myConditionFunc" invert-condition>else</lion-step>
-  <lion-step>...</lion-step>
-</lion-steps>
-
-<script>
-  // you have `data` property defined in the scope
-  ...
-  myConditionFunc(data) {
-    return data.smth === "what-you-need";
-  }
-  ...
-</script>
-```
-
-If a condition was not met a step gets a status `skipped`.
-
-## Forward only steps
-
-If you have an intermediate step loading data via AJAX request and then automatically calling `next()`, you can flag it as `forward-only`. This will ensure that navigation to the previous step is possible and does not lead to another AJAX request which leads to next step again, breaking the flow for a user.
-
-```html
-<lion-steps>
-  <lion-step>preliminary step</lion-step>
-  <lion-step forward-only>data is loaded and next() is called automatically afterwards</lion-step>
-  <!-- user decides to go to previous step here -->
-  <lion-step>do smth with data</lion-step>
-</lion-steps>
-```
-
-## Events
-
-If you need to be notified when transition between steps occurs use the `transition` event by providing steps data:
-
-```html
-<lion-steps @transition="${onTransition}">
-  <lion-step>Step 1</lion-step>
-  <lion-step>Step 2</lion-step>
-  <lion-step>Step 3</lion-step>
-</lion-steps>
-
-<script>
-  ...
-  onTransition(event) {
-    console.log(event.detail.fromStep.number); // Number
-    console.log(event.detail.fromStep.element); // <lion-step>
-    console.log(event.detail.toStep.number); // Number
-    console.log(event.detail.toStep.element); // <lion-step>
-  }
-  ...
-</script>
-```
-
-For notifications about specific step status change you can use individual events like this:
-
-```html
-<lion-steps>
-  <lion-step @leave="${onLeave}">Step 1</lion-step>
-  <lion-step @skip="${onSkip}">Step 2</lion-step>
-  <lion-step @enter="${onEnter}">Step 3</lion-step>
-</lion-steps>
-```

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

@@ -1,82 +0,0 @@
----
-parts:
-  - API Table
-  - Switch
-title: 'Switch: API Table'
-eleventyNavigation:
-  key: API Table >> Switch
-  title: API Table
-  order: 90
-  parent: Switch
----
-# Switch: API Table
- 
-
-## class: `LionSwitch`, `lion-switch`
-
-### Fields
-
-| Name                     | Privacy   | Type               | Default | Description                                                                                                                                                                                                                | Inherited From |
-| ------------------------ | --------- | ------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `checked`                | public    | `boolean`          | `false` |                                                                                                                                                                                                                            |                |
-| `slots`                  | public    |                    |         |                                                                                                                                                                                                                            |                |
-| `_feedbackConditionMeta` | protected |                    |         |                                                                                                                                                                                                                            | LionField      |
-| `_focusableNode`         | protected |                    |         |                                                                                                                                                                                                                            | LionField      |
-| `_inputNode`             | protected | `LionSwitchButton` |         | Input node here is the lion-switch-button, which is not compatible with LionField \_inputNode --> HTMLInputElement
Therefore we do a full override and typecast to an intersection type that includes LionSwitchButton |                |
-
-### 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      |
-| `_groupOneTemplate`     | protected |                                                                                                |              |        |                |
-| `_groupTwoTemplate`     | protected |                                                                                                |              |        |                |
-| `_isEmpty`              | protected | Override this function from ChoiceInputMixin.                                                  |              |        |                |
-| `_onChange`             | protected | Dispatches custom bubble event                                                                 | `ev: Event=` |        | LionField      |
-| `_onLabelClick`         | protected |                                                                                                |              |        |                |
-| `_syncButtonSwitch`     | protected |                                                                                                |              |        |                |
-| `_toggleChecked`        | protected | Override this function from ChoiceInputMixin.                                                  | `ev: Event`  |        |                |
-
-### Events
-
-| Name                 | Type    | Description | Inherited From |
-| -------------------- | ------- | ----------- | -------------- |
-| `user-input-changed` | `Event` |             | LionField      |
-
-<hr/>
- 
-
-## class: `LionSwitchButton`, `lion-switch-button`
-
-### Fields
-
-| Name       | Privacy | Type      | Default | Description | Inherited From |
-| ---------- | ------- | --------- | ------- | ----------- | -------------- |
-| `checked`  | public  | `boolean` | `false` |             |                |
-| `readOnly` | public  | `boolean` | `false` |             |                |
-| `value`    | public  | `string`  | `''`    |             |                |
-
-### Methods
-
-| Name             | Privacy   | Description | Parameters          | Return | Inherited From |
-| ---------------- | --------- | ----------- | ------------------- | ------ | -------------- |
-| `_handleKeydown` | protected |             | `ev: KeyboardEvent` |        |                |
-| `_handleKeyup`   | protected |             | `ev: KeyboardEvent` |        |                |
-| `_toggleChecked` | protected |             |                     |        |                |
-
-### Events
-
-| Name              | Type    | Description | Inherited From |
-| ----------------- | ------- | ----------- | -------------- |
-| `checked-changed` | `Event` |             |                |
-
-### Attributes
-
-| Name       | Field    | Inherited From |
-| ---------- | -------- | -------------- |
-| `checked`  | checked  |                |
-| `readonly` | readOnly |                |
-
-<hr/>

package/docs/components/switch/index.md

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

package/docs/components/switch/overview.md

@@ -1,87 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Switch
-  - Overview
-eleventyNavigation:
-  key: 'Switch: Overview'
-  order: 10
-  parent: Switch
-  title: Overview
----
-
-# Overview
-
-<p class="lion-paragraph--emphasis">The Switch is used to toggle a property or feature on or off.</p>
-
-```js script
-import { html as previewHtml } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-switch.js';
-```
-
-```js preview-story
-import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
-import { LionSwitch } from '@lion/ui/switch.js';
-
-class MyComponent extends ScopedElementsMixin(LitElement) {
-  static get scopedElements() {
-    return { 'lion-switch': LionSwitch };
-  }
-  render() {
-    return html`<lion-switch label="Label" help-text="Help text"></lion-switch>`;
-  }
-}
-customElements.define('my-component', MyComponent);
-
-export const main = () => previewHtml`<my-component></my-component>`;
-```
-
-## When to use
-
-- Toggling the component on or off has an immediate action (no confirmation by the user required).
-- The Switch is typically used in setting applications.
-- The Switch is not a Checkbox in disguise and can not be used as part of a form.
-
-## Features
-
-- Get or set the checked state (boolean) - `checked` boolean attribute
-- Pre-select an option by setting the `checked` boolean attribute
-- Get or set the value of the choice - `choiceValue()`
-
-## How to use
-
-### Code
-
-1. Install
-
-```bash
-npm i --save @lion/ui
-```
-
-2. Use scoped registry
-
-```js
-import { html, LitElement } from 'lit';
-import { ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
-import { LionSwitch } from '@lion/ui/switch.js';
-
-class MyComponent extends ScopedElementsMixin(LitElement) {
-  static get scopedElements() {
-    return { 'lion-switch': LionSwitch };
-  }
-  render() {
-    return html`<lion-switch></lion-switch>`;
-  }
-}
-```
-
-3. Use html
-
-```html
-<script type="module">
-  import '@lion/ui/define/lion-switch.js';
-</script>
-
-<lion-switch></lion-switch>
-```

package/docs/components/switch/reference.md

@@ -1,51 +0,0 @@
----
-title: 'Reference'
-parts:
-  - Switch
-  - Reference
-eleventyNavigation:
-  key: 'Switch: Reference'
-  order: 30
-  parent: Switch
-  title: Reference
----
-
-# Reference
-
-<p class="lion-paragraph--emphasis">Everything you need to re-use the switch.</p>
-
-## Requirements
-
-This component fulfils the following requirements:
-
-1. The component clearly communicates what is it for.
-2. The component supports helper text.
-3. The component supports smart defaults.
-4. The component supports the following states: on, off, hover (Web only), focused, disabled, pressed and processing
-5. The transformation between ON and OFF states are enhanced by an animation.
-6. Toggling the switch (on <-> off) will execute the underlying action immediately.
-
-## Keyboard interactions
-
-| <kbd>Key</kbd>      | Action                                                                                            |
-| :------------------ | :------------------------------------------------------------------------------------------------ |
-| <kbd>Enter</kbd>    | On keyboard focus, pressing <kbd>Enter</kbd> changes the state of the switch to “On” or “Off”.    |
-| <kbd>Spacebar</kbd> | On keyboard focus, pressing <kbd>Spacebar</kbd> changes the state of the switch to “On” or “Off”. |
-
-## WAI-ARIA roles
-
-### Landmarks
-
-1. element: "button"<br>
-   role: "switch"
-
-### Screen reader
-
-1. name: “Label”<br>
-   role: switch<br>
-   state: aria-checked=“true”<br>
-   SR: “Label, on, switch"
-2. name: “Label”<br>
-   role: switch<br>
-   state: aria-checked=“false”<br>
-   SR: “Label, off, switch”

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

@@ -1,88 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Switch
-  - Use Cases
-eleventyNavigation:
-  key: 'Switch: Use Cases'
-  order: 20
-  parent: Switch
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { Validator } from '@lion/ui/form-core.js';
-import { LionSwitch } from '@lion/ui/switch.js';
-import '@lion/ui/define/lion-switch.js';
-import '@lion/ui/define-helpers/sb-action-logger.js';
-```
-
-## Disabled
-
-You can disable switches.
-
-```html preview-story
-<lion-switch label="Label" disabled></lion-switch>
-```
-
-## Validation
-
-An example that illustrates how an info validation feedback can be always displayed.
-
-```js preview-story
-class IsTrue extends Validator {
-  static get validatorName() {
-    return 'IsTrue';
-  }
-  execute(value) {
-    return !value.checked;
-  }
-  static async getMessage() {
-    return "You won't get the latest news!";
-  }
-}
-
-class CustomSwitch extends LionSwitch {
-  static get validationTypes() {
-    return [...super.validationTypes, 'info'];
-  }
-
-  _showFeedbackConditionFor(type, meta) {
-    if (type === 'info') {
-      return true;
-    }
-    return super._showFeedbackConditionFor(type, meta);
-  }
-}
-customElements.define('custom-switch', CustomSwitch);
-
-export const validation = () => html`
-  <custom-switch
-    name="newsletterCheck"
-    label="Subscribe to newsletter"
-    .validators="${[new IsTrue(null, { type: 'info' })]}"
-  ></custom-switch>
-`;
-```
-
-## With model-value-changed handler
-
-You can listen for a `model-value-changed` event that is fired when the switch is toggled.
-
-```js preview-story
-export const handler = ({ shadowRoot }) => {
-  return html`
-    <lion-switch
-      label="Label"
-      @model-value-changed="${ev => {
-        shadowRoot.querySelector('sb-action-logger').log(`Current value: ${ev.target.checked}`);
-      }}"
-    >
-    </lion-switch>
-    <sb-action-logger></sb-action-logger>
-  `;
-};
-```

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

@@ -1,51 +0,0 @@
----
-parts:
-  - API Table
-  - Tabs
-title: 'Tabs: API Table'
-eleventyNavigation:
-  key: API Table >> Tabs
-  title: API Table
-  order: 90
-  parent: Tabs
----
-# Tabs: API Table
- 
-
-## class: `LionTabs`, `lion-tabs`
-
-### Fields
-
-| Name            | Privacy   | Type     | Default | Description                         | Inherited From |
-| --------------- | --------- | -------- | ------- | ----------------------------------- | -------------- |
-| `panels`        | public    |          |         |                                     |                |
-| `selectedIndex` | public    | `number` | `0`     | An index number of the selected tab |                |
-| `tabs`          | public    |          |         |                                     |                |
-| `_pairCount`    | protected |          |         |                                     |                |
-
-### Methods
-
-| Name                         | Privacy   | Description | Parameters      | Return | Inherited From |
-| ---------------------------- | --------- | ----------- | --------------- | ------ | -------------- |
-| `_setSelectedIndexWithFocus` | protected |             | `value: number` |        |                |
-
-### Events
-
-| Name               | Type    | Description | Inherited From |
-| ------------------ | ------- | ----------- | -------------- |
-| `selected-changed` | `Event` |             |                |
-
-### Attributes
-
-| Name             | Field         | Inherited From |
-| ---------------- | ------------- | -------------- |
-| `selected-index` | selectedIndex |                |
-
-### Slots
-
-| Name    | Description                     |
-| ------- | ------------------------------- |
-| `tab`   | The tab elements for the tabs   |
-| `panel` | The panel elements for the tabs |
-
-<hr/>

package/docs/components/tabs/examples.md

@@ -1,35 +0,0 @@
----
-title: 'Examples'
-parts:
-  - Tabs
-  - Examples
-eleventyNavigation:
-  key: 'Tabs: Examples'
-  order: 30
-  parent: Tabs
-  title: Examples
----
-
-# Examples
-
-```js script
-import { LitElement, html } from '@mdjs/mdjs-preview';
-import './src/lea-tabs.js';
-import './src/lea-tab.js';
-import './src/lea-tab-panel.js';
-```
-
-## Lea Tabs
-
-Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/blog/ing-open-sources-lion.md).
-
-```js preview-story
-export const main = () => html`
-  <lea-tabs>
-    <lea-tab slot="tab">Info</lea-tab>
-    <lea-tab-panel slot="panel"> Info page with lots of information about us. </lea-tab-panel>
-    <lea-tab slot="tab">Work</lea-tab>
-    <lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel>
-  </lea-tabs>
-`;
-```

package/docs/components/tabs/index.md

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

package/docs/components/tabs/overview.md

@@ -1,60 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Tabs
-  - Overview
-eleventyNavigation:
-  key: 'Tabs: Overview'
-  order: 10
-  parent: Tabs
-  title: Overview
----
-
-# Overview
-
-A web component that allows users to quickly move between a small number of equally important views.
-
-```js script
-import { LitElement, html } from '@mdjs/mdjs-preview';
-import '@lion/ui/define/lion-tabs.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-tabs>
-    <button slot="tab">Info</button>
-    <p slot="panel">Info page with lots of information about us.</p>
-    <button slot="tab">Work</button>
-    <p slot="panel">Work page that showcases our work.</p>
-  </lion-tabs>
-`;
-```
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionTabs } from '@lion/ui/tabs.js';
-// or
-import '@lion/ui/define/lion-tabs.js';
-```
-
-## Rationale
-
-### No separate active/focus state when using keyboard
-
-We will immediately switch content as all our content comes from light dom (e.g. no latency)
-
-See Note at <https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19>
-
-> It is recommended that tabs activate automatically when they receive focus as long as their
-> associated tab panels are displayed without noticeable latency. This typically requires tab
-> panel content to be preloaded.
-
-### Panels are not focusable
-
-Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactivity.
-If there is a button or a form inside the tab panel then these elements get focused directly.

package/docs/components/tabs/src/lea-tab-panel.js

@@ -1,26 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-export class LeaTabPanel extends LitElement {
-  static get styles() {
-    return css`
-      :host {
-        background-color: #fff;
-        background-image: linear-gradient(top, #fff, #ddd);
-        border-radius: 0 2px 2px 2px;
-        box-shadow:
-          0 2px 2px #000,
-          0 -1px 0 #fff inset;
-        padding: 30px;
-      }
-    `;
-  }
-
-  render() {
-    return html`
-      <!-- dom as needed -->
-      <slot></slot>
-    `;
-  }
-}
-
-customElements.define('lea-tab-panel', LeaTabPanel);