@lion/ui 0.0.2 → 0.0.3

package/docs/components/combobox/src/google-combobox/google-combobox.js

@@ -0,0 +1,460 @@
+import { css, html } from 'lit';
+import { LionOption } from '@lion/ui/listbox.js';
+import { renderLitAsNode } from '@lion/ui/helpers.js';
+import { LionCombobox } from '@lion/ui/combobox.js';
+import { LinkMixin } from '../LinkMixin.js';
+import googleSearchIcon from './assets/google-search-icon.js';
+import googleVoiceSearchIcon from './assets/google-voice-search-icon.js';
+import googleClearIcon from './assets/google-clear-icon.js';
+
+const googleSearchLogoUrl = new URL('./assets/googlelogo_color_272x92dp.png', import.meta.url).href;
+
+export class GoogleOption extends LinkMixin(LionOption) {
+  static get properties() {
+    return {
+      imageUrl: {
+        type: String,
+      },
+    };
+  }
+
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        :host {
+          position: relative;
+          padding: 8px 16px;
+          display: flex;
+          align-items: center;
+          background: none;
+        }
+
+        :host:hover,
+        :host([active]) {
+          background: #eee !important;
+        }
+
+        :host([checked]) {
+          background: none;
+        }
+
+        /* :host([active]) {
+          color: #1867c0 !important;
+          caret-color: #1867c0 !important;
+        } */
+
+        :host {
+          font-weight: bold;
+        }
+
+        :host ::slotted(.google-option__highlight) {
+          font-weight: normal;
+        }
+
+        .google-option__icon {
+          height: 20px;
+          width: 20px;
+          margin-right: 12px;
+          fill: var(--icon-color);
+        }
+      `,
+    ];
+  }
+
+  /**
+   * @configure
+   * @param {string} currentValue
+   */
+  onFilterMatch(currentValue) {
+    const { innerHTML } = this;
+    // eslint-disable-next-line no-param-reassign
+    this.__originalInnerHTML = innerHTML;
+    const newInnerHTML = innerHTML.replace(
+      new RegExp(`(${currentValue})`, 'i'),
+      `<span class="google-option__highlight">$1</span>`,
+    );
+    // For Safari, we need to add a label to the element
+    this.setAttribute('aria-label', this.textContent);
+    this.innerHTML = newInnerHTML;
+    // Alternatively, an extension can add an animation here
+    this.style.display = '';
+  }
+
+  /**
+   * @configure LionCombobox
+   */
+  onFilterUnmatch() {
+    this.removeAttribute('aria-label');
+    if (this.__originalInnerHTML) {
+      this.innerHTML = this.__originalInnerHTML;
+    }
+    this.style.display = 'none';
+  }
+
+  render() {
+    return html`
+      ${!this.imageUrl
+        ? html` <div class="google-option__icon">${googleSearchIcon}</div>`
+        : html` <img class="google-option__icon" src="${this.imageUrl}" alt="" />`}
+      ${super.render()}
+    `;
+  }
+}
+customElements.define('google-option', GoogleOption);
+
+export class GoogleCombobox extends LionCombobox {
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        /** @configure FormControlMixin */
+
+        /* =======================
+            block | .form-field
+            ======================= */
+
+        :host {
+          font-family: arial, sans-serif;
+        }
+
+        .form-field__label {
+          margin-top: 36px;
+          margin-bottom: 24px;
+          display: flex;
+          justify-content: center;
+        }
+
+        /* ==============================
+            element | .input-group
+            ============================== */
+
+        .input-group {
+          margin-bottom: 16px;
+          max-width: 582px;
+          margin: auto;
+        }
+
+        .input-group__container {
+          position: relative;
+          background: #fff;
+          display: flex;
+          border: 1px solid #dfe1e5;
+          box-shadow: none;
+          border-radius: 24px;
+          height: 44px;
+        }
+
+        .input-group__container:hover,
+        :host([opened]) .input-group__container {
+          border-color: rgba(223, 225, 229, 0);
+          box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
+        }
+
+        :host([opened]) .input-group__container {
+          border-bottom-right-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+
+        :host([opened]) .input-group__container::before {
+          content: '';
+          position: absolute;
+          background: white;
+          left: 0;
+          right: 0;
+          height: 10px;
+          bottom: -10px;
+        }
+
+        :host([opened]) .input-group__container::after {
+          content: '';
+          position: absolute;
+          background: #eee;
+          left: 16px;
+          right: 16px;
+          height: 1px;
+          bottom: 0;
+          z-index: 3;
+        }
+
+        .input-group__prefix,
+        .input-group__suffix {
+          display: block;
+          fill: var(--icon-color);
+          display: flex;
+          place-items: center;
+        }
+
+        .input-group__input {
+          flex: 1;
+        }
+
+        .input-group__input ::slotted([slot='input']) {
+          border: transparent;
+          width: 100%;
+        }
+
+        /** @configure LionCombobox */
+
+        /* =======================
+            block | .form-field
+            ======================= */
+
+        #overlay-content-node-wrapper {
+          box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28);
+          border-radius: 0 0 24px 24px;
+          margin-top: -2px;
+          padding-top: 6px;
+          background: white;
+        }
+
+        * > ::slotted([slot='listbox']) {
+          margin-bottom: 8px;
+          background: none;
+        }
+
+        :host {
+          --icon-color: #9aa0a6;
+        }
+
+        /** @enhance LionCombobox */
+
+        /* ===================================
+            block | .google-search-clear-btn
+          =================================== */
+
+        .google-search-clear-btn {
+          position: relative;
+          height: 100%;
+          align-items: center;
+          display: none;
+        }
+
+        .google-search-clear-btn::after {
+          border-left: 1px solid #dfe1e5;
+          height: 65%;
+          right: 0;
+          content: '';
+          margin-right: 10px;
+          margin-left: 8px;
+        }
+
+        :host([filled]) .google-search-clear-btn {
+          display: flex;
+        }
+
+        * > ::slotted([slot='suffix']),
+        * > ::slotted([slot='clear-btn']) {
+          font: inherit;
+          margin: 0;
+          border: 0;
+          outline: 0;
+          padding: 0;
+          color: inherit;
+          background-color: transparent;
+          text-align: left;
+          white-space: normal;
+          overflow: visible;
+
+          user-select: none;
+          -moz-user-select: none;
+          -webkit-user-select: none;
+          -ms-user-select: none;
+          -webkit-tap-highlight-color: transparent;
+
+          width: 25px;
+          height: 25px;
+          cursor: pointer;
+        }
+
+        * > ::slotted([slot='suffix']) {
+          margin-right: 20px;
+        }
+
+        * > ::slotted([slot='prefix']) {
+          height: 20px;
+          width: 20px;
+          margin-left: 12px;
+          margin-right: 16px;
+        }
+
+        /* =============================
+            block | .google-search-btns
+            ============================ */
+
+        .google-search-btns {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .google-search-btns__input-button {
+          background-image: -webkit-linear-gradient(top, #f8f9fa, #f8f9fa);
+          background-color: #f8f9fa;
+          border: 1px solid #f8f9fa;
+          border-radius: 4px;
+          color: #3c4043;
+          font-family: arial, sans-serif;
+          font-size: 14px;
+          margin: 11px 4px;
+          padding: 0 16px;
+          line-height: 27px;
+          height: 36px;
+          min-width: 54px;
+          text-align: center;
+          cursor: pointer;
+          user-select: none;
+        }
+
+        .google-search-btns__input-button:hover {
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+          background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
+          background-color: #f8f8f8;
+          border: 1px solid #c6c6c6;
+          color: #222;
+        }
+
+        .google-search-btns__input-button:focus {
+          border: 1px solid #4d90fe;
+          outline: none;
+        }
+
+        /* ===============================
+            block | .google-search-report
+            ============================== */
+
+        .google-search-report {
+          display: flex;
+          align-content: right;
+          color: #70757a;
+          font-style: italic;
+          font-size: 8pt;
+          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+          margin-bottom: 8px;
+          justify-content: flex-end;
+          margin-right: 20px;
+        }
+
+        .google-search-report a {
+          color: inherit;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * @enhance LionCombobox - add google search buttons
+   */
+  _overlayListboxTemplate() {
+    return html`
+      <div id="overlay-content-node-wrapper" role="dialog">
+        <slot name="listbox"></slot>
+        ${this._googleSearchBtnsTemplate()}
+        <div class="google-search-report"><a href="#">Report inappropriate predictions</a></div>
+      </div>
+      <slot id="options-outlet"></slot>
+    `;
+  }
+
+  /**
+   * @enhance FormControlMixin add clear-btn
+   */
+  _inputGroupSuffixTemplate() {
+    return html`
+      <div class="input-group__suffix">
+        <div class="google-search-clear-btn">
+          <slot name="clear-btn"></slot>
+        </div>
+        <slot name="suffix"></slot>
+      </div>
+    `;
+  }
+
+  _googleSearchBtnsTemplate() {
+    return html` <div class="google-search-btns">
+      <input
+        type="submit"
+        class="google-search-btns__input-button"
+        value="Google Search"
+        aria-label="Google Search"
+      />
+      <input
+        type="submit"
+        class="google-search-btns__input-button"
+        value="I'm Feeling Lucky"
+        aria-label="I'm Feeling Lucky"
+      />
+    </div>`;
+  }
+
+  /**
+   * @enhance FormControlMixin - add google search buttons
+   */
+  _groupTwoTemplate() {
+    return html`${super._groupTwoTemplate()} ${!this.opened ? this._googleSearchBtnsTemplate() : ''} `;
+  }
+
+  get slots() {
+    return {
+      ...super.slots,
+      label: () => renderLitAsNode(html` <img alt="Google Search" src="${googleSearchLogoUrl}" />`),
+      prefix: () => renderLitAsNode(html` <span>${googleSearchIcon}</span> `),
+      suffix: () =>
+        renderLitAsNode(
+          html` <button aria-label="Search by voice">${googleVoiceSearchIcon}</button> `,
+        ),
+      'clear-btn': () =>
+        renderLitAsNode(
+          html`
+            <button @click="${this.__clearText}" aria-label="Clear text">${googleClearIcon}</button>
+          `,
+        ),
+    };
+  }
+
+  /**
+   * @configure OverlayMixin
+   */
+  get _overlayReferenceNode() {
+    return /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('.input-group');
+  }
+
+  constructor() {
+    super();
+    /** @configure LionCombobox */
+    this.autocomplete = 'list';
+    /** @configure LionCombobox */
+    this.showAllOnEmpty = true;
+
+    this.__resetFocus = this.__resetFocus.bind(this);
+    this.__clearText = this.__clearText.bind(this);
+  }
+
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    this._overlayContentNode.addEventListener('mouseenter', this.__resetFocus);
+  }
+
+  /**
+   * @override LionCombobox - always sync textbox when selected value changes
+   */
+  // eslint-disable-next-line no-unused-vars
+  _syncToTextboxCondition() {
+    return true;
+  }
+
+  _showOverlayCondition(options) {
+    return this.focused || super._showOverlayCondition(options);
+  }
+
+  __resetFocus() {
+    this.activeIndex = -1;
+    this.checkedIndex = -1;
+  }
+
+  __clearText() {
+    this._inputNode.value = '';
+  }
+}
+customElements.define('google-combobox', GoogleCombobox);

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

@@ -0,0 +1,29 @@
+import { directive } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+
+/**
+ * In order to speed up the first meaningful paint, use this directive
+ * on content that is:
+ * - (visually) hidden
+ * - out of the page flow (having position: 'absolute|fixed')
+ *
+ * A good practice would be to use it in overlays,
+ * For hidden tab panels, collapsible content etc. it's also useful
+ * @example
+ *  <lion-combobox name="combo" label="Combo">
+ *   ${lazyRender(
+ *     largeListOfData.map(entry => html` <expensive-option>${entry}</expensive-option> `),
+ *   )}
+ * </lion-combobox>
+ */
+export const lazyRender = directive(
+  class extends AsyncDirective {
+    render(tplResult) {
+      setTimeout(() => {
+        this.setValue(tplResult);
+      });
+    }
+  },
+);
+
+// export const lazyRender = () => {};

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

@@ -0,0 +1,95 @@
+/* eslint-disable */
+// https://github.com/gustf/js-levenshtein/blob/master/index.js
+
+function _min(d0, d1, d2, bx, ay) {
+  return d0 < d1 || d2 < d1 ? (d0 > d2 ? d2 + 1 : d0 + 1) : bx === ay ? d1 : d1 + 1;
+}
+
+export default function (a, b) {
+  if (a === b) {
+    return 0;
+  }
+
+  if (a.length > b.length) {
+    var tmp = a;
+    a = b;
+    b = tmp;
+  }
+
+  var la = a.length;
+  var lb = b.length;
+
+  while (la > 0 && a.charCodeAt(la - 1) === b.charCodeAt(lb - 1)) {
+    la--;
+    lb--;
+  }
+
+  var offset = 0;
+
+  while (offset < la && a.charCodeAt(offset) === b.charCodeAt(offset)) {
+    offset++;
+  }
+
+  la -= offset;
+  lb -= offset;
+
+  if (la === 0 || lb < 3) {
+    return lb;
+  }
+
+  var x = 0;
+  var y;
+  var d0;
+  var d1;
+  var d2;
+  var d3;
+  var dd;
+  var dy;
+  var ay;
+  var bx0;
+  var bx1;
+  var bx2;
+  var bx3;
+
+  var vector = [];
+
+  for (y = 0; y < la; y++) {
+    vector.push(y + 1);
+    vector.push(a.charCodeAt(offset + y));
+  }
+
+  var len = vector.length - 1;
+
+  for (; x < lb - 3; ) {
+    bx0 = b.charCodeAt(offset + (d0 = x));
+    bx1 = b.charCodeAt(offset + (d1 = x + 1));
+    bx2 = b.charCodeAt(offset + (d2 = x + 2));
+    bx3 = b.charCodeAt(offset + (d3 = x + 3));
+    dd = x += 4;
+    for (y = 0; y < len; y += 2) {
+      dy = vector[y];
+      ay = vector[y + 1];
+      d0 = _min(dy, d0, d1, bx0, ay);
+      d1 = _min(d0, d1, d2, bx1, ay);
+      d2 = _min(d1, d2, d3, bx2, ay);
+      dd = _min(d2, d3, dd, bx3, ay);
+      vector[y] = dd;
+      d3 = d2;
+      d2 = d1;
+      d1 = d0;
+      d0 = dy;
+    }
+  }
+
+  for (; x < lb; ) {
+    bx0 = b.charCodeAt(offset + (d0 = x));
+    dd = ++x;
+    for (y = 0; y < len; y += 2) {
+      dy = vector[y];
+      vector[y] = dd = _min(dy, d0, dd, bx0, vector[y + 1]);
+      d0 = dy;
+    }
+  }
+
+  return dd;
+}