@lion/ui 0.25.0 → 0.26.0

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

@@ -1,515 +0,0 @@
-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" aria-label="branches and tags">
-        <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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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>
-`;