@lion/ui 0.25.0 → 0.26.0

package/docs/components/combobox/overview.md

@@ -1,74 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Combobox
-  - Overview
-eleventyNavigation:
-  key: 'Combobox: Overview'
-  order: 10
-  parent: Combobox
-  title: Overview
----
-
-# Overview
-
-A combobox is a widget made up of the combination of two distinct elements:
-
-- a single-line textbox
-- an associated listbox overlay
-
-Based on the combobox configuration and entered textbox value, options in the listbox will be
-filtered, checked, focused and the textbox value may be autocompleted.
-Optionally, the combobox contains a graphical button adjacent to the textbox, indicating the
-availability of the pop-up.
-
-> Fore more information, consult [Combobox wai-aria design pattern](https://www.w3.org/TR/wai-aria-practices/#combobox)
-
-```js script
-import { html } from '@mdjs/mdjs-preview';
-import { listboxData } from '../listbox/src/listboxData.js';
-import '@lion/ui/define/lion-combobox.js';
-import '@lion/ui/define/lion-option.js';
-import { lazyRender } from './src/lazyRender.js';
-```
-
-```js preview-story
-export const main = () => html`
-  <lion-combobox name="combo" label="Default">
-    ${lazyRender(
-      listboxData.map(
-        (entry, i) => html`
-          <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option>
-        `,
-      ),
-    )}
-  </lion-combobox>
-`;
-```
-
-[...show more](https://github.com/ing-bank/lion/blob/9575386e5fb419f7dbd3b893be4c4ce7925bcb2e/docs/components/combobox/extensions.md)
-
-## Features
-
-The combobox has many configurable properties to fine-tune its behaviour:
-
-- **Multiple choice** - Allows multiselection of options.
-- **requireOptionMatch**
-  - **true** (default) - The listbox is leading, the textbox is a helping aid to quickly select an option/options. Unmatching input values become Unparseable, with the `MatchesOption` set as a default validator.
-  - **false** - The textbox is leading, with the listbox as an aid to supply suggestions, e.g. a search input.
-- **Autocomplete** - When the autocompletion will happen: `none`, `list`, `inline` and `both`.
-- **Matchmode** - Which part of the value should match: `begin` and `all`.
-- **Show all on empty** - Shows the options list on empty.
-- **Selection follows focus** - When false the active/focused and checked/selected values will be kept track of independently.
-- **Rotate keyboard Navigation** - When false it won't rotate the navigation.
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import '@lion/ui/define/lion-combobox.js';
-import '@lion/ui/define/lion-option.js';
-```

package/docs/components/combobox/src/LinkMixin.js

@@ -1,60 +0,0 @@
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-
-/**
- * @typedef {import('lit-element').PropertyValues } changedProperties
- */
-
-/**
- * Designed for webcomponents that need to behave like a link.
- * For instance, comboboxes that have search result options opening a webpage on click.
- * Using an <a> is not a viable alternative, because:
- * - no shadow dom (and thus no style encapsulation possibilities)
- * - we need to extend from LionOption (and we cannot put the anchor inside
- * the focusable element (LionOption which has [role=option]))
- */
-const LinkMixinImplementation = superclass =>
-  class extends superclass {
-    static get properties() {
-      return {
-        href: String,
-        target: String,
-      };
-    }
-
-    constructor() {
-      super();
-      this._nativeAnchor = document.createElement('a');
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      if (!this.hasAttribute('role')) {
-        this.setAttribute('role', 'link');
-      }
-    }
-
-    firstUpdated(changedProperties) {
-      super.firstUpdated(changedProperties);
-      this.addEventListener('click', this.__navigate);
-      this.addEventListener('keydown', ({ key }) => {
-        if (key === ' ' || key === 'Enter') {
-          this.__navigate();
-        }
-      });
-    }
-
-    updated(changedProperties) {
-      super.updated(changedProperties);
-      if (changedProperties.has('href')) {
-        this._nativeAnchor.href = this.href;
-      }
-      if (changedProperties.has('target')) {
-        this._nativeAnchor.target = this.target;
-      }
-    }
-
-    __navigate() {
-      this._nativeAnchor.click();
-    }
-  };
-export const LinkMixin = dedupeMixin(LinkMixinImplementation);

package/docs/components/combobox/src/demo-selection-display.js

@@ -1,164 +0,0 @@
-// eslint-disable-next-line max-classes-per-file
-import { LitElement, html, css, nothing } from 'lit';
-
-/**
- * Disclaimer: this is just an example component demoing the selection display of LionCombobox
- * It needs an 'a11y plan' and tests before it could be released
- */
-
-/**
- * @typedef {import('../src/LionCombobox.js').LionCombobox} LionCombobox
- */
-
-/**
- * Renders the wrapper containing the textbox that triggers the listbox with filtered options.
- * Optionally, shows 'chips' that indicate the selection.
- * Should be considered an internal/protected web component to be used in conjunction with
- * LionCombobox
- *
- */
-export class DemoSelectionDisplay extends LitElement {
-  static get properties() {
-    return {
-      comboboxElement: Object,
-      /**
-       * Can be used to visually indicate the next
-       */
-      removeChipOnNextBackspace: Boolean,
-      selectedChoices: Array,
-    };
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-      }
-
-      .combobox__selection {
-        flex: none;
-      }
-
-      .combobox__input {
-        display: block;
-      }
-
-      .selection-chip {
-        border-radius: 4px;
-        background-color: #eee;
-        padding: 4px;
-        font-size: 10px;
-      }
-
-      .selection-chip--highlighted {
-        background-color: #ccc;
-      }
-
-      * > ::slotted([slot='_textbox']) {
-        outline: none;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: none;
-        border-bottom: 1px solid;
-      }
-    `;
-  }
-
-  /**
-   * @configure FocusMixin
-   */
-  get _inputNode() {
-    return this.comboboxElement._inputNode;
-  }
-
-  get multipleChoice() {
-    return this.comboboxElement?.multipleChoice;
-  }
-
-  constructor() {
-    super();
-
-    this.selectedChoices = [];
-
-    /** @type {EventListener} */
-    this.__textboxOnKeyup = this.__textboxOnKeyup.bind(this);
-    /** @type {EventListener} */
-    this.__restoreBackspace = this.__restoreBackspace.bind(this);
-  }
-
-  /**
-   * @param {import('lit-element').PropertyValues } changedProperties
-   */
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    if (this.multipleChoice) {
-      this._inputNode.addEventListener('keyup', this.__textboxOnKeyup);
-      this._inputNode.addEventListener('focusout', this.__restoreBackspace);
-    }
-  }
-
-  /**
-   * @param {import('lit-element').PropertyValues } changedProperties
-   */
-  onComboboxElementUpdated(changedProperties) {
-    if (changedProperties.has('modelValue')) {
-      this.selectedChoices = this.comboboxElement.modelValue;
-    }
-  }
-
-  /**
-   * @param {import("@lion/listbox").LionOption} option
-   * @param {boolean} highlight
-   */
-  // eslint-disable-next-line class-methods-use-this
-  _selectedElementTemplate(option, highlight) {
-    return html`
-      <span class="selection-chip ${highlight ? 'selection-chip--highlighted' : ''}">
-        ${option}
-      </span>
-    `;
-  }
-
-  _selectedElementsTemplate() {
-    if (!this.multipleChoice) {
-      return nothing;
-    }
-    return html`
-      <div class="combobox__selection">
-        ${this.selectedChoices.map((option, i) => {
-          const highlight = Boolean(
-            this.removeChipOnNextBackspace && i === this.selectedChoices.length - 1,
-          );
-          return this._selectedElementTemplate(option, highlight);
-        })}
-      </div>
-    `;
-  }
-
-  render() {
-    return html` ${this._selectedElementsTemplate()} `;
-  }
-
-  /**
-   * @param {{ key: string; }} ev
-   */
-  __textboxOnKeyup(ev) {
-    if (ev.key === 'Backspace') {
-      if (!this._inputNode.value) {
-        if (this.removeChipOnNextBackspace && this.selectedChoices.length) {
-          this.comboboxElement.modelValue = this.selectedChoices.slice(0, -1);
-        }
-        this.removeChipOnNextBackspace = true;
-      }
-    } else {
-      this.removeChipOnNextBackspace = false;
-    }
-  }
-
-  __restoreBackspace() {
-    this.removeChipOnNextBackspace = false;
-  }
-}
-customElements.define('demo-selection-display', DemoSelectionDisplay);

package/docs/components/combobox/src/gh-combobox/gh-button.js

@@ -1,71 +0,0 @@
-import { css, html } from 'lit';
-import { LionButton } from '@lion/ui/button.js';
-
-export class GhButton extends LionButton {
-  static get properties() {
-    return {
-      value: String,
-    };
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        outline: none;
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        padding: 5px 16px;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 20px;
-        white-space: nowrap;
-        vertical-align: middle;
-        cursor: pointer;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-        border: 1px solid;
-        border-radius: 6px;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-
-        color: #24292e;
-        background-color: #fafbfc;
-        border-color: rgba(27, 31, 35, 0.15);
-        box-shadow:
-          0 1px 0 rgba(27, 31, 35, 0.04),
-          inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
-        transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-      }
-
-      :host(:hover) {
-        background-color: #f3f4f6;
-        transition-duration: 0.1s;
-      }
-
-      :host ::slotted([slot='before']) {
-        margin-right: 4px;
-      }
-
-      /**
-       * TODO: this doesn't have to be light dom anymore in LionButton,
-       * just spawning a hidden native button on submit would be enough
-       */
-      :host ::slotted(button) {
-        position: absolute;
-        opacity: 0;
-      }
-    `;
-  }
-
-  render() {
-    return html` <slot name="before"></slot>
-      ${this.value}
-      <slot name="after"></slot>
-      <slot name="_button"></slot>`;
-  }
-}
-customElements.define('gh-button', GhButton);