@lion/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,69 @@
+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);

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

@@ -0,0 +1,508 @@
+import { css, html } from 'lit';
+import { LionOption } from '@lion/ui/listbox.js';
+import { renderLitAsNode } from '@lion/ui/helpers.js';
+// import { withModalDialogConfig } from '@lion/ui/overlays.js';
+import { LionCombobox } from '@lion/ui/combobox.js';
+import './gh-button.js';
+
+export class GhOption extends LionOption {
+  static get properties() {
+    return {
+      category: String,
+      default: { type: Boolean, reflect: true },
+    };
+  }
+
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        :host {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          padding: 16px;
+          overflow: hidden;
+          color: #24292e;
+          text-align: left;
+          cursor: pointer;
+          background-color: #fff;
+          border: 0;
+          border-bottom: 1px solid #eaecef;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+        }
+
+        @media (min-width: 544px) {
+          :host {
+            padding-top: 7px;
+            padding-bottom: 7px;
+          }
+        }
+
+        :host([checked]) {
+          background-color: white;
+        }
+
+        :host(:hover),
+        :host([active]),
+        :host([focused]) {
+          background-color: #f6f8fa;
+        }
+
+        .gh-check-icon {
+          visibility: hidden;
+          margin-right: 4px;
+        }
+
+        :host([checked]) .gh-check-icon {
+          visibility: visible;
+        }
+
+        .gh-default-badge {
+          visibility: hidden;
+
+          display: inline-block;
+          padding: 0 7px;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 18px;
+          border-radius: 2em;
+          background-color: initial !important;
+          border: 1px solid #e1e4e8;
+          color: #586069;
+          border-color: #e1e4e8;
+        }
+
+        :host([default]) .gh-default-badge {
+          visibility: visible;
+        }
+
+        .gh-content {
+          flex: 1;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <svg
+        class="gh-check-icon"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        height="16"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+        ></path>
+      </svg>
+      <span class="gh-content"><slot></slot></span>
+      <span class="gh-default-badge">default</span>
+    `;
+  }
+}
+customElements.define('gh-option', GhOption);
+
+export class GhCombobox extends LionCombobox {
+  static get properties() {
+    return {
+      category: { type: String },
+      isDesktop: { type: Boolean, reflect: true, attribute: 'is-desktop' },
+    };
+  }
+
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        /** @configure LionCombobox */
+
+        :host {
+          font-family: apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+            Apple Color Emoji, Segoe UI Emoji;
+          font-size: 14px;
+        }
+
+        .input-group__container {
+          display: flex;
+          border-bottom: none;
+        }
+
+        * > ::slotted([role='listbox']) {
+          max-height: none;
+        }
+
+        * > ::slotted([slot='input']) {
+          padding: 5px 12px;
+          font-size: 14px;
+          line-height: 20px;
+          color: #24292e;
+          vertical-align: middle;
+          background-color: #fff;
+          background-repeat: no-repeat;
+          background-position: right 8px center;
+          border: 1px solid #e1e4e8;
+          border-radius: 6px;
+          outline: none;
+          box-shadow: inset 0 1px 0 rgba(225, 228, 232, 0.2);
+        }
+
+        :host([is-desktop]) {
+          font-size: 12px;
+        }
+
+        :host([is-desktop]) ::slotted([slot='input']) {
+          font-size: 14px;
+        }
+
+        :host([focused]) ::slotted([slot='input']) {
+          border-color: #0366d6;
+          outline: none;
+          box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
+        }
+
+        .gh-combobox {
+          height: auto;
+          max-height: 480px;
+          margin-top: 8px;
+
+          position: relative;
+          z-index: 99;
+          display: flex;
+          max-height: 66%;
+          margin: auto 0;
+          overflow: hidden;
+          pointer-events: auto;
+          flex-direction: column;
+          background-color: #fff;
+          border-radius: 12px;
+          box-shadow: 0 0 18px rgba(27, 31, 35, 0.4);
+          /* animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards; */
+        }
+
+        :host([is-desktop]) .gh-combobox {
+          width: 300px;
+          height: auto;
+          max-height: 480px;
+          margin: 8px 0 16px;
+          font-size: 12px;
+          border: 1px solid #e1e4e8;
+          border-radius: 6px;
+          box-shadow: 0 8px 24px rgba(149, 157, 165, 0.2);
+          /* animation-name: SelectMenu-modal-animation--sm; */
+        }
+
+        .form-field__label {
+          font-weight: bold;
+        }
+
+        /** @enhance LionCombobox */
+
+        .gh-categories {
+          display: flex;
+          flex-shrink: 0;
+          overflow-x: auto;
+          overflow-y: hidden;
+          box-shadow: inset 0 -1px 0 #eaecef;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        :host([is-desktop]) .gh-categories {
+          padding: 8px 8px 0;
+        }
+
+        .gh-categories__btn {
+          flex: 1;
+          padding: 8px 16px;
+          font-size: 12px;
+          font-weight: 500;
+          color: #6a737d;
+          text-align: center;
+          background-color: initial;
+          border: 0;
+          box-shadow: inset 0 -1px 0 #eaecef;
+
+          border-radius: 0;
+          font-family: inherit;
+          font-size: inherit;
+          line-height: inherit;
+          outline: none;
+
+          cursor: pointer;
+        }
+
+        .gh-categories__btn:focus {
+          background-color: #dbedff;
+        }
+
+        :host([is-desktop]) .gh-categories__btn {
+          flex: none;
+          padding: 4px 16px;
+          border: solid transparent;
+          border-width: 1px 1px 0;
+          border-top-left-radius: 6px;
+          border-top-right-radius: 6px;
+        }
+
+        .gh-categories__btn[aria-pressed='true'] {
+          z-index: 1;
+          color: #24292e;
+          cursor: default;
+          box-shadow: 0 0 0 1px #eaecef;
+          cursor: default;
+        }
+
+        :host([is-desktop]) .gh-categories__btn {
+          flex: none;
+        }
+        :host([is-desktop]) .gh-categories__btn[aria-pressed='true'] {
+          border-color: #eaecef;
+          box-shadow: none;
+        }
+
+        .gh-section-wrapper {
+          padding: 16px;
+          margin: 0;
+          border-bottom: 1px solid #eaecef;
+        }
+
+        :host([is-desktop]) .gh-section-wrapper {
+          padding: 8px;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * @override LionCombobox put all content in an overlay
+   */
+  // eslint-disable-next-line class-methods-use-this
+  render() {
+    return html`
+      <slot name="selection-display"></slot>
+      <div id="overlay-content-node-wrapper" role="dialog">
+        <div class="gh-combobox">
+          <div class="form-field__group-one">
+            <div class="gh-section-wrapper">${this._groupOneTemplate()}</div>
+          </div>
+          <div class="form-field__group-two">
+            <div class="gh-section-wrapper">${this._groupTwoTemplate()}</div>
+            <div
+              class="gh-categories"
+              @click="${this.__handleCategory}"
+              @keydown="${this.__handleCategory}"
+            >
+              <button type="button" data-category="branches" class="gh-categories__btn">
+                Branches
+              </button>
+              <button type="button" data-category="tags" class="gh-categories__btn">Tags</button>
+            </div>
+            <slot name="listbox"></slot>
+          </div>
+        </div>
+      </div>
+      <slot id="options-outlet"></slot>
+    `;
+  }
+
+  /**
+   * Wrapper with combobox role for the text input that the end user controls the listbox with.
+   * @type {HTMLElement}
+   */
+  get _comboboxNode() {
+    if (this.__comboboxNode) {
+      return this.__comboboxNode;
+    }
+    const slot = this.querySelector('[slot="input"]');
+    if (slot) {
+      this.__comboboxNode = slot;
+      return slot;
+    }
+    const slot2 = this._overlayCtrl?.contentWrapperNode.querySelector('[slot="input"]');
+    if (slot2) {
+      this.__comboboxNode = slot2;
+      return slot2;
+    }
+    return null;
+  }
+
+  /**
+   * @override LionCombobox: remove selection-display (place it higher up)
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _inputGroupInputTemplate() {
+    return html`
+      <div class="input-group__input">
+        <slot name="input"></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * @override LionCombobox: restore to values FormControlMixin
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _groupTwoTemplate() {
+    return html` ${this._inputGroupTemplate()} ${this._feedbackTemplate()} `;
+  }
+
+  get slots() {
+    return {
+      ...super.slots,
+      'selection-display': () =>
+        renderLitAsNode(html`
+          <gh-button>
+            <svg
+              slot="before"
+              text="gray"
+              height="16"
+              class="octicon octicon-git-branch text-gray"
+              viewBox="0 0 16 16"
+              version="1.1"
+              width="16"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"
+              ></path>
+            </svg>
+
+            <span slot="after"> </span>
+          </gh-button>
+        `),
+    };
+  }
+
+  get _overlayInvokerNode() {
+    return this.querySelector('[slot="selection-display"]');
+  }
+
+  get _overlayReferenceNode() {
+    return this._overlayInvokerNode;
+  }
+
+  get _categoryButtons() {
+    return Array.from(this.shadowRoot.querySelectorAll('.gh-categories__btn[data-category]'));
+  }
+
+  constructor() {
+    super();
+
+    this.showAllOnEmpty = true;
+
+    /** @type {'branches'|'tags'} */
+    this.category = 'branches';
+
+    this.selectionFollowsFocus = false;
+
+    // Capture mobile OverlayConfig
+    this.__mobileDropdownComboConfig = this.config;
+  }
+
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+
+    const mql = window.matchMedia('(min-width: 544px)');
+    this.isDesktop = mql.matches;
+    mql.addListener(({ matches }) => {
+      this.isDesktop = matches;
+    });
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('category')) {
+      const cat = this.category;
+      this._categoryButtons.forEach(btn => {
+        btn.setAttribute(
+          'aria-pressed',
+          btn.getAttribute('data-category') === cat ? 'true' : 'false',
+        );
+      });
+
+      this._inputNode.placeholder =
+        cat === 'branches' ? 'Find or create a branch...' : 'Find a tag';
+
+      this._handleAutocompletion();
+    }
+
+    if (changedProperties.has('opened')) {
+      // eslint-disable-next-line no-shadow
+      this._selectionDisplayNode.value = this.modelValue || 'Choose a value...';
+
+      if (this.opened) {
+        setTimeout(() => {
+          this._inputNode.focus();
+        });
+      } else {
+        setTimeout(() => {
+          this._selectionDisplayNode.focus();
+        }, 100);
+      }
+    }
+
+    if (changedProperties.has('isDesktop')) {
+      // this.config = this.isDesktop ? this.__mobileDropdownComboConfig : withModalDialogConfig();
+    }
+  }
+
+  // /**
+  //  * @enhance LionCombobox
+  //  * @param {*} option
+  //  * @param  {...any} args
+  //  */
+  // matchCondition(option, ...args) {
+  //   return super.matchCondition(option, ...args) && option.category === this.category;
+  // }
+
+  // _defineOverlayConfig() {
+  //   // temp
+  //   return { ...super._defineOverlayConfig(), hidesOnOutsideClick: false };
+  // }
+
+  __handleCategory(ev) {
+    this.category = ev.target.getAttribute('data-category');
+  }
+
+  // TODO: overrides below are not safe for override and should be made configurable in Combobox
+  // basically it should be possible te create a combobox without an overlay
+
+  /**
+   * @override
+   */
+  _textboxOnKeydown() {
+    // if (ev.key === 'Tab') {
+    //   this.opened = false;
+    // }
+    this.__hasSelection = this._inputNode.value.length !== this._inputNode.selectionStart;
+  }
+
+  /**
+   * @enhance OverlayMixin
+   */
+  _setupOpenCloseListeners() {
+    super._setupOpenCloseListeners();
+    this.__toggleOverlay = this.__toggleOverlay.bind(this);
+    this._overlayInvokerNode.addEventListener('click', this.__toggleOverlay);
+  }
+
+  __toggleOverlay() {
+    this.opened = !this.opened;
+  }
+
+  /**
+   * @enhance OverlayMixin
+   */
+  _teardownOpenCloseListeners() {
+    super._teardownOpenCloseListeners();
+    this._overlayInvokerNode.removeEventListener('click', this.__toggleOverlay);
+  }
+}
+customElements.define('gh-combobox', GhCombobox);

package/docs/components/combobox/src/google-combobox/assets/google-clear-icon.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+
+export default html`
+  <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+    ></path>
+  </svg>
+`;

package/docs/components/combobox/src/google-combobox/assets/google-search-icon.js

@@ -0,0 +1,9 @@
+import { html } from 'lit';
+
+export default html`
+  <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+    ></path>
+  </svg>
+`;

package/docs/components/combobox/src/google-combobox/assets/google-voice-search-icon.js

@@ -0,0 +1,19 @@
+import { html } from 'lit';
+
+export default html`
+  <svg class="HPVvwb" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
+      fill="#4285f4"
+    ></path>
+    <path d="m11 18.08h2v3.92h-2z" fill="#34a853"></path>
+    <path
+      d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
+      fill="#f4b400"
+    ></path>
+    <path
+      d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"
+      fill="#ea4335"
+    ></path>
+  </svg>
+`;