@lion/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,159 @@
+# Input Tel Dropdown >> Use Cases ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import { ref, createRef } from 'lit/directives/ref.js';
+import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
+import { PhoneUtilManager } from '@lion/ui/input-tel.js';
+import '@lion/ui/define/lion-input-tel-dropdown.js';
+import '../../../docs/fundamentals/systems/form/assets/h-output.js';
+
+// TODO: make each example load/use the dependencies by default
+// loadDefaultFeedbackMessages();
+```
+
+## Input Tel Dropdown
+
+When `.allowedRegions` is not configured, all regions/countries will be available in the dropdown
+list. Once a region is chosen, its country/dial code will be adjusted with that of the new locale.
+
+```js preview-story
+export const InputTelDropdown = () => {
+  loadDefaultFeedbackMessages();
+  return html`
+    <lion-input-tel-dropdown
+      label="Select region via dropdown"
+      help-text="Shows all regions by default"
+      name="phoneNumber"
+    ></lion-input-tel-dropdown>
+    <h-output
+      .show="${['modelValue', 'activeRegion']}"
+      .readyPromise="${PhoneUtilManager.loadComplete}"
+    ></h-output>
+  `;
+};
+```
+
+## Allowed regions
+
+When `.allowedRegions` is configured, only those regions/countries will be available in the dropdown
+list.
+
+```js preview-story
+export const allowedRegions = () => {
+  loadDefaultFeedbackMessages();
+  return html`
+    <lion-input-tel-dropdown
+      label="Select region via dropdown"
+      help-text="With region code 'NL'"
+      .modelValue=${'+31612345678'}
+      name="phoneNumber"
+      .allowedRegions=${['NL', 'DE', 'GB']}
+    ></lion-input-tel-dropdown>
+    <h-output
+      .show="${['modelValue', 'activeRegion']}"
+      .readyPromise="${PhoneUtilManager.loadComplete}"
+    ></h-output>
+  `;
+};
+```
+
+## Preferred regions
+
+When `.preferredRegions` is configured, they will show up on top of the dropdown list to enhance user experience.
+
+```js preview-story
+export const preferredRegionCodes = () => {
+  loadDefaultFeedbackMessages();
+  return html`
+    <lion-input-tel-dropdown
+      label="Select region via dropdown"
+      help-text="Preferred regions show on top"
+      .modelValue=${'+31612345678'}
+      name="phoneNumber"
+      .allowedRegions=${['BE', 'CA', 'DE', 'GB', 'NL', 'US']}
+      .preferredRegions=${['DE', 'NL']}
+    ></lion-input-tel-dropdown>
+    <h-output
+      .show="${['modelValue', 'activeRegion']}"
+      .readyPromise="${PhoneUtilManager.loadComplete}"
+    ></h-output>
+  `;
+};
+```
+
+## Format
+
+### Format strategy
+
+Determines what the formatter output should look like.
+Formatting strategies as provided by awesome-phonenumber / google-libphonenumber.
+
+Possible values:
+
+| strategy      |                                output |
+| :------------ | ------------------------------------: |
+| e164          |                        `+46707123456` |
+| international |                    `+46 70 712 34 56` |
+| national      | not applicable for input-tel-dropdown |
+| significant   | not applicable for input-tel-dropdown |
+| rfc3966       |                `tel:+46-70-712-34-56` |
+
+Also see:
+
+- [awesome-phonenumber documentation](https://www.npmjs.com/package/awesome-phonenumber)
+
+```js preview-story
+export const formatStrategy = () => {
+  loadDefaultFeedbackMessages();
+  const inputTel = createRef();
+  return html`
+    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
+      <option value="e164">e164</option>
+      <option value="international">international</option>
+      <option value="rfc3966">rfc3966</option>
+    </select>
+    <lion-input-tel-dropdown
+      ${ref(inputTel)}
+      label="Format strategy"
+      help-text="Choose a strategy above"
+      format-strategy="e164"
+      name="phoneNumber"
+    ></lion-input-tel-dropdown>
+    <h-output
+      .show="${['modelValue', 'formatStrategy']}"
+      .readyPromise="${PhoneUtilManager.loadComplete}"
+    ></h-output>
+  `;
+};
+```
+
+### Format country code style
+
+You can style the country code with parentheses.
+
+```js preview-story
+export const formatCountryCodeStyle = () => {
+  loadDefaultFeedbackMessages();
+  const inputTel = createRef();
+  return html`
+    <select @change="${({ target }) => (inputTel.value.formatStrategy = target.value)}">
+      <option value="e164">e164</option>
+      <option value="international">international</option>
+      <option value="rfc3966">rfc3966</option>
+    </select>
+    <lion-input-tel-dropdown
+      ${ref(inputTel)}
+      label="Format strategy"
+      help-text="Choose a strategy above"
+      format-country-code-style="parentheses"
+      format-strategy="e164"
+      name="phoneNumber"
+    ></lion-input-tel-dropdown>
+    <h-output
+      .show="${['modelValue', 'formatStrategy']}"
+      .readyPromise="${PhoneUtilManager.loadComplete}"
+    ></h-output>
+  `;
+};
+```

package/docs/components/listbox/index.md

@@ -0,0 +1,3 @@
+# Listbox ||20
+
+-> go to Overview

package/docs/components/listbox/overview.md

@@ -0,0 +1,42 @@
+# Listbox >> Overview ||10
+
+A widget that presents a list of options and allows a user to select one or more of them.
+A listbox that allows a single option to be chosen is a `single-select listbox`; one that allows
+multiple options to be selected is a `multi-select listbox`.
+
+> From [listbox wai-aria best practices](https://www.w3.org/TR/wai-aria-practices/#Listbox)
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-listbox name="listbox" label="Default">
+    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+    <lion-option checked .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+  </lion-listbox>
+`;
+```
+
+## Features
+
+- Single & Multiple Choice
+- Orientation
+- Rotation when using keyboard for selection
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
+```

package/docs/components/listbox/src/listboxData.js

@@ -0,0 +1,65 @@
+export const listboxData = [
+  'Apple',
+  'Artichoke',
+  'Asparagus',
+  'Banana',
+  'Beets',
+  'Bell pepper',
+  'Broccoli',
+  'Brussels sprout',
+  'Cabbage',
+  'Carrot',
+  'Cauliflower',
+  'Celery',
+  'Chard',
+  'Chicory',
+  'Corn',
+  'Cucumber',
+  'Daikon',
+  'Date',
+  'Edamame',
+  'Eggplant',
+  'Elderberry',
+  'Fennel',
+  'Fig',
+  'Garlic',
+  'Grape',
+  'Honeydew melon',
+  'Iceberg lettuce',
+  'Jerusalem artichoke',
+  'Kale',
+  'Kiwi',
+  'Leek',
+  'Lemon',
+  'Mango',
+  'Mangosteen',
+  'Melon',
+  'Mushroom',
+  'Nectarine',
+  'Okra',
+  'Olive',
+  'Onion',
+  'Orange',
+  'Parship',
+  'Pea',
+  'Pear',
+  'Pineapple',
+  'Potato',
+  'Pumpkin',
+  'Quince',
+  'Radish',
+  'Rhubarb',
+  'Shallot',
+  'Spinach',
+  'Squash',
+  'Strawberry',
+  'Sweet potato',
+  'Tomato',
+  'Turnip',
+  'Ugli fruit',
+  'Victoria plum',
+  'Watercress',
+  'Watermelon',
+  'Yam',
+  'Zucchini',
+];

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

@@ -0,0 +1,147 @@
+# Listbox >> Use Cases ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import { listboxData } from './src/listboxData.js';
+import '@lion/ui/define/lion-listbox.js';
+import '@lion/ui/define/lion-option.js';
+```
+
+## Multiple choice
+
+Add `multiple-choice` flag to allow multiple values to be selected.
+This will:
+
+- keep the listbox overlay open on click of an option
+- display a list of selected option representations next to the text box
+- make the value of type `Array` instead of `String`
+
+```js preview-story
+export const multiple = () => html`
+  <lion-listbox name="combo" label="Multiple" multiple-choice>
+    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+    <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+  </lion-listbox>
+`;
+```
+
+## Orientation
+
+When `orientation="horizontal"`, left and right arrow keys will be enabled, plus the screenreader
+will be informed about the direction of the options.
+By default, `orientation="vertical"` is set, which enables up and down arrow keys.
+
+```js preview-story
+export const orientationHorizontal = () => html`
+  <lion-listbox name="combo" label="Orientation horizontal" orientation="horizontal">
+    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+    <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+  </lion-listbox>
+`;
+```
+
+With `multiple-choice` flag configured, multiple options can be checked.
+
+```js preview-story
+export const orientationHorizontalMultiple = () => html`
+  <lion-listbox
+    name="combo"
+    label="Orientation horizontal multiple"
+    orientation="horizontal"
+    multiple-choice
+  >
+    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+    <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+  </lion-listbox>
+`;
+```
+
+## Selection-follows-focus
+
+When true, will synchronize activedescendant and selected element on arrow key navigation.
+This behavior can usually be seen in `<select>` on the Windows platform.
+Note that this behavior cannot be used when multiple-choice is true.
+See [wai aria spec](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus)
+
+```js preview-story
+export const selectionFollowsFocus = () => html`
+  <lion-listbox name="combo" label="Selection follows focus" selection-follows-focus>
+    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+    <lion-option .choiceValue=${'Artichoke'} disabled>Artichoke</lion-option>
+    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+  </lion-listbox>
+`;
+```
+
+## Rotate keyboard navigation
+
+`rotate-keyboard-navigation` attribute on the listbox will give the first option active state when navigated to the next option from last option.
+
+```js preview-story
+export const rotateKeyboardNavigation = () => html`
+  <lion-listbox name="combo" label="Rotate keyboard navigation" rotate-keyboard-navigation>
+    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+    <lion-option .choiceValue=${'Artichoke'}>Artichoke</lion-option>
+    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+    <lion-option .choiceValue=${'Brussels sprout'}>Brussels sprout</lion-option>
+    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+  </lion-listbox>
+`;
+```
+
+## Disabled options
+
+Navigation will skip over disabled options. Let's disable Artichoke and Brussel sprout, because they're gross.
+
+```js preview-story
+export const disabledRotateNavigation = () => html`
+  <lion-listbox name="combo" label="Rotate with disabled options" rotate-keyboard-navigation>
+    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
+    <lion-option .choiceValue=${'Artichoke'} disabled>Artichoke</lion-option>
+    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
+    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
+    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
+    <lion-option .choiceValue=${'Bell pepper'}>Bell pepper</lion-option>
+    <lion-option .choiceValue=${'Broccoli'}>Broccoli</lion-option>
+    <lion-option .choiceValue=${'Brussels sprout'} disabled>Brussels sprout</lion-option>
+    <lion-option .choiceValue=${'Cabbage'}>Cabbage</lion-option>
+    <lion-option .choiceValue=${'Carrot'}>Carrot</lion-option>
+  </lion-listbox>
+`;
+```

package/docs/components/pagination/index.md

@@ -0,0 +1,3 @@
+# Pagination ||30
+
+-> go to Overview

package/docs/components/pagination/overview.md

@@ -0,0 +1,29 @@
+# Pagination >> Overview ||10
+
+A web component that handles pagination.
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-pagination.js';
+```
+
+```js preview-story
+export const main = () => html` <lion-pagination count="20" current="10"></lion-pagination> `;
+```
+
+## Features
+
+- You can pass the total number of pages in the `count` parameter, and the current page in the `current` parameter. If `current` is not defined it will default to the value 1.
+- On a click or parameter change of `current` it will fire an event back called `current-changed`.
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import { LionPagination } from '@lion/ui/pagination.js';
+// or
+import '@lion/ui/define/lion-pagination.js';
+```

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

@@ -0,0 +1,99 @@
+# Pagination >> Use Cases ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-pagination.js';
+```
+
+## Without current defined
+
+```js preview-story
+export const withoutCurrentPage = () => {
+  return html` <lion-pagination count="20"></lion-pagination> `;
+};
+```
+
+## Ensure a count value
+
+Be sure to set a count value or you will get an "empty" pagination.
+
+```js preview-story
+export const ensureCount = () => {
+  return html` <lion-pagination></lion-pagination> `;
+};
+```
+
+### Methods
+
+There are the following methods available to control the pagination.
+
+- `next()`: move forward in pagination
+- `previous()`: goes back to pagination
+- `first()`: to the first page
+- `last()`: to the last page
+- `goto(pageNumber)`: to the specific page
+
+```js preview-story
+export const methods = ({ shadowRoot }) => {
+  setTimeout(() => {
+    shadowRoot.getElementById('pagination-method-demo').innerText =
+      shadowRoot.getElementById('pagination-method').current;
+  });
+
+  return html`
+    <p>The current page is: <span id="pagination-method-demo"></span></p>
+    <lion-pagination
+      id="pagination-method"
+      count="100"
+      current="75"
+      @current-changed=${e => {
+        const paginationState = shadowRoot.getElementById('pagination-method-demo');
+        paginationState.innerText = e.target.current;
+      }}
+    ></lion-pagination>
+    <section style="margin-top:16px">
+      <button @click=${() => shadowRoot.getElementById('pagination-method').previous()}>
+        Previous
+      </button>
+      <button @click=${() => shadowRoot.getElementById('pagination-method').next()}>Next</button>
+      <br />
+      <br />
+      <button @click=${() => shadowRoot.getElementById('pagination-method').first()}>First</button>
+      <button @click=${() => shadowRoot.getElementById('pagination-method').last()}>Last</button>
+      <br />
+      <br />
+      <button @click=${() => shadowRoot.getElementById('pagination-method').goto(55)}>
+        Go to 55
+      </button>
+    </section>
+  `;
+};
+```
+
+### Event
+
+`lion-pagination` fires an event on button click to notify the component's current state. It is useful for analytics purposes or to perform some actions on page change.
+
+- `@current-changed`: triggers when the current page is changed
+
+```js preview-story
+export const event = ({ shadowRoot }) => {
+  setTimeout(() => {
+    shadowRoot.getElementById('pagination-event-demo-text').innerText =
+      shadowRoot.getElementById('pagination-event-demo').current;
+  });
+
+  return html`
+    <p>The current page is: <span id="pagination-event-demo-text"></span></p>
+    <lion-pagination
+      id="pagination-event-demo"
+      count="10"
+      current="5"
+      @current-changed=${e => {
+        const paginationState = shadowRoot.getElementById('pagination-event-demo-text');
+        paginationState.innerText = e.target.current;
+      }}
+    ></lion-pagination>
+  `;
+};
+```

package/docs/components/progress-indicator/assets/my-determinate-progress-bar.js

@@ -0,0 +1,30 @@
+import { css, html } from 'lit';
+import { LionProgressIndicator } from '@lion/ui/progress-indicator.js';
+
+export class MyDeterminateProgressBar extends LionProgressIndicator {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          position: relative;
+          width: 100%;
+          height: 6px;
+          overflow: hidden;
+          background-color: #eee;
+        }
+
+        .progress__filled {
+          height: inherit;
+          background-color: green;
+        }
+      `,
+    ];
+  }
+
+  _graphicTemplate() {
+    return html` <div class="progress__filled" style="width: ${this._progressPercentage}%"></div> `;
+  }
+}
+
+customElements.define('my-determinate-progress-bar', MyDeterminateProgressBar);

package/docs/components/progress-indicator/assets/my-indeterminate-progress-spinner.js

@@ -0,0 +1,55 @@
+import { html, css } from 'lit';
+import { LionProgressIndicator } from '@lion/ui/progress-indicator.js';
+
+export class MyIndeterminateProgressSpinner extends LionProgressIndicator {
+  static get styles() {
+    return [
+      css`
+        .progress__icon {
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          animation: spinner-rotate 2s linear infinite;
+        }
+
+        .progress__filled {
+          animation: spinner-dash 1.35s ease-in-out infinite;
+          fill: none;
+          stroke-width: 6px;
+          stroke: var(--primary-color);
+        }
+
+        @keyframes spinner-rotate {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+        @keyframes spinner-dash {
+          0% {
+            stroke-dasharray: 6, 122;
+            stroke-dashoffset: 0;
+          }
+          50% {
+            stroke-dasharray: 100, 28;
+            stroke-dashoffset: -16;
+          }
+          100% {
+            stroke-dasharray: 6, 122;
+            stroke-dashoffset: -127;
+          }
+        }
+      `,
+    ];
+  }
+
+  _graphicTemplate() {
+    return html`
+      <svg class="progress__icon" viewBox="20 20 47 47">
+        <circle class="progress__filled" cx="44" cy="44" r="20.2" />
+      </svg>
+    `;
+  }
+}
+
+customElements.define('my-indeterminate-progress-spinner', MyIndeterminateProgressSpinner);