@lion/ui 0.25.0 → 0.26.0

package/docs/components/combobox/src/md-combobox/MdFieldMixin.js

@@ -1,345 +0,0 @@
-import { html, css } from 'lit';
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-
-export const MdFieldMixin = dedupeMixin(
-  superclass =>
-    class extends superclass {
-      static get styles() {
-        return [
-          ...super.styles,
-          css`
-            /** @configure FormControlMixin */
-
-            /* =======================
-            block | .form-field
-            ======================= */
-
-            :host {
-              position: relative;
-              font-family: 'Roboto', sans-serif;
-              padding-top: 16px;
-            }
-
-            /* ==========================
-            element | .form-field__label
-            ========================== */
-
-            .form-field__label ::slotted(label) {
-              display: block;
-              color: var(--text-color, #545454);
-              font-size: 1rem;
-              line-height: 1.5rem;
-            }
-
-            :host([disabled]) .form-field__label ::slotted(label) {
-              color: var(--disabled-text-color, lightgray);
-            }
-
-            .form-field__label {
-              position: absolute;
-              top: 4px;
-              left: 0;
-              font: inherit;
-              pointer-events: none;
-              width: 100%;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              overflow: hidden;
-              transform: perspective(100px);
-              -ms-transform: none;
-              transform-origin: 0 0;
-              transition:
-                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
-                color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
-                width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-              /* z-index: 1; */
-            }
-
-            :host([focused]) .form-field__label,
-            :host([filled]) .form-field__label {
-              transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
-              width: 133.333333333333333333%;
-            }
-
-            :host([focused]) .form-field__label {
-              color: var(--color-primary, royalblue);
-            }
-
-            /* ==============================
-            element | .form-field__help-text
-            ============================== */
-
-            .form-field__help-text {
-              visibility: hidden;
-              margin-top: 8px;
-              position: relative;
-              font-size: 0.8em;
-              display: block;
-            }
-
-            :host([disabled]) .form-field__help-text ::slotted(*) {
-              color: var(--disabled-text-color, lightgray);
-            }
-
-            :host([focused]) .form-field__help-text {
-              visibility: visible;
-            }
-
-            :host([shows-feedback-for~='error']) .form-field__help-text {
-              display: none;
-            }
-
-            /* ==============================
-            element | .form-field__feedback
-            ============================== */
-
-            .form-field__feedback {
-              margin-top: 8px;
-              position: relative;
-              font-size: 0.8em;
-              display: block;
-            }
-
-            :host([shows-feedback-for~='error']) .form-field__feedback {
-              color: var(--color-error, red);
-            }
-
-            /* ==============================
-            element | .input-group
-            ============================== */
-
-            .input-group {
-              display: flex;
-            }
-
-            /* ==============================
-            element | .input-group__container
-            ============================== */
-
-            .input-group__container {
-              position: relative;
-              display: flex;
-              flex-wrap: wrap;
-              align-items: stretch;
-              width: 100%;
-            }
-
-            /* ==============================
-            element | .input-group__input
-            ============================== */
-
-            .input-group__input {
-              display: flex;
-              flex: 1;
-              position: relative;
-            }
-
-            /* ==============================
-            element | [slot="input"]
-            ============================== */
-
-            * > ::slotted([slot='input']) {
-              display: block;
-              box-sizing: border-box;
-              flex: 1 1 auto;
-              width: 1%;
-              padding: 0.5rem 0;
-              outline: none;
-              border: none;
-              color: var(--primary-text-color, #333333);
-              background: transparent;
-              background-clip: padding-box;
-              font-size: 100%;
-            }
-
-            :host([disabled])
-              .input-group__container
-              > .input-group__input
-              ::slotted([slot='input']) {
-              color: var(--disabled-text-color, lightgray);
-            }
-
-            /* ==============================
-            element | .input-group__prefix,
-            element | .input-group__suffix
-            ============================== */
-
-            .input-group__prefix,
-            .input-group__suffix {
-              display: flex;
-            }
-
-            .input-group__prefix ::slotted(*),
-            .input-group__suffix ::slotted(*) {
-              align-self: center;
-              text-align: center;
-              padding: 0.375rem 0.75rem;
-              line-height: 1.5;
-              display: flex;
-              white-space: nowrap;
-              margin-bottom: 0;
-            }
-
-            .input-group__container > .input-group__prefix ::slotted(button),
-            .input-group__container > .input-group__suffix ::slotted(button) {
-              height: 100%;
-              border: none;
-              background: transparent;
-
-              position: relative;
-              overflow: hidden;
-              transform: translate3d(0, 0, 0);
-            }
-
-            .input-group__container > .input-group__prefix ::slotted(button)::after,
-            .input-group__container > .input-group__suffix ::slotted(button)::after {
-              content: '';
-              display: block;
-              position: absolute;
-              width: 100%;
-              height: 100%;
-              top: 0;
-              left: 0;
-              pointer-events: none;
-              background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
-              background-repeat: no-repeat;
-              background-position: 50%;
-              transform: scale(10, 10);
-              opacity: 0;
-              transition:
-                transform 0.25s,
-                opacity 0.5s;
-            }
-
-            .input-group__container > .input-group__prefix ::slotted(button:active)::after,
-            .input-group__container > .input-group__suffix ::slotted(button:active)::after {
-              transform: scale(0, 0);
-              opacity: 0.2;
-              transition: 0s;
-            }
-
-            /* ====  state | :focus  ==== */
-
-            /* ==============================
-            element | .input-group__before,
-            element | .input-group__after
-            ============================== */
-
-            .input-group__before,
-            .input-group__after {
-              display: flex;
-            }
-
-            .input-group__before ::slotted(*),
-            .input-group__after ::slotted(*) {
-              align-self: center;
-              text-align: center;
-              padding: 0.375rem 0.75rem;
-              line-height: 1.5;
-            }
-
-            .input-group__before ::slotted(*) {
-              padding-left: 0;
-            }
-
-            .input-group__after ::slotted(*) {
-              padding-right: 0;
-            }
-
-            /** @enhance FormControlMixin */
-
-            /* ==============================
-            element | .md-input__underline
-            ============================== */
-
-            .md-input__underline {
-              position: absolute;
-              height: 1px;
-              width: 100%;
-              background-color: rgba(0, 0, 0, 0.42);
-              bottom: 0;
-            }
-
-            :host([disabled]) .md-input__underline {
-              border-top: 1px var(--disabled-text-color, lightgray) dashed;
-              background-color: transparent;
-            }
-
-            :host([shows-feedback-for~='error']) .md-input__underline {
-              background-color: var(--color-error, red);
-            }
-
-            /* ==============================
-            element | .md-input__underline-ripple
-            ============================== */
-
-            .md-input__underline-ripple {
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 2px;
-              transform-origin: 50%;
-              transform: scaleX(0.5);
-              visibility: hidden;
-              opacity: 0;
-              transition: background-color 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-              background-color: var(--color-primary, royalblue);
-            }
-
-            :host([focused]) .md-input__underline-ripple {
-              visibility: visible;
-              opacity: 1;
-              transform: scaleX(1);
-              transition:
-                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
-                opacity 0.1s cubic-bezier(0.25, 0.8, 0.25, 1),
-                background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-            }
-
-            :host([shows-feedback-for~='error']) .md-input__underline-ripple {
-              background-color: var(--color-error, red);
-            }
-          `,
-        ];
-      }
-
-      /**
-       * @override FormControlMixin
-       */
-      _groupOneTemplate() {
-        return html``;
-      }
-
-      /**
-       * @override FormControlMixin
-       */
-      _inputGroupInputTemplate() {
-        return html`
-          <div class="input-group__input">
-            ${this._labelTemplate()}
-            <slot name="input"></slot>
-          </div>
-        `;
-      }
-
-      /**
-       * @enhance FormControlMixin
-       */
-      _inputGroupTemplate() {
-        return html`
-          <div class="input-group">
-            ${this._inputGroupBeforeTemplate()}
-            <div class="input-group__container">
-              ${this._inputGroupPrefixTemplate()} ${this._inputGroupInputTemplate()}
-              ${this._inputGroupSuffixTemplate()}
-              <div class="md-input__underline">
-                <span class="md-input__underline-ripple"></span>
-              </div>
-            </div>
-            ${this._inputGroupAfterTemplate()}
-          </div>
-        `;
-      }
-    },
-);

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

@@ -1,91 +0,0 @@
-import { css, html } from 'lit';
-import { LionOption } from '@lion/ui/listbox.js';
-import { LionCombobox } from '@lion/ui/combobox.js';
-import { MdFieldMixin } from './MdFieldMixin.js';
-import './style/md-ripple.js';
-import './style/load-roboto.js';
-
-// TODO: insert ink wc here
-export class MdOption extends LionOption {
-  static styles = [
-    ...super.styles,
-    css`
-      :host {
-        position: relative;
-        padding: 8px;
-      }
-
-      :host([focused]) {
-        background: lightgray;
-      }
-
-      :host([active]) {
-        color: #1867c0 !important;
-        caret-color: #1867c0 !important;
-      }
-
-      :host ::slotted(.md-highlight) {
-        color: rgba(0, 0, 0, 0.38);
-        background: #eee;
-      }
-    `,
-  ];
-
-  /**
-   * @override
-   * @param {string} matchingString
-   */
-  onFilterMatch(matchingString) {
-    const { innerHTML } = this;
-    this.__originalInnerHTML = innerHTML;
-    this.innerHTML = innerHTML.replace(
-      new RegExp(`(${matchingString})`, 'i'),
-      `<span class="md-highlight">$1</span>`,
-    );
-    this.style.display = '';
-  }
-
-  /**
-   * @override
-   */
-  onFilterUnmatch() {
-    if (this.__originalInnerHTML) {
-      this.innerHTML = this.__originalInnerHTML;
-    }
-    this.style.display = 'none';
-  }
-
-  render() {
-    return html`
-      ${super.render()}
-      <md-ripple></md-ripple>
-    `;
-  }
-}
-customElements.define('md-option', MdOption);
-
-export class MdCombobox extends MdFieldMixin(LionCombobox) {
-  static styles = [
-    ...super.styles,
-    css`
-      .input-group__container {
-        display: flex;
-        border-bottom: none;
-      }
-
-      * > ::slotted([role='listbox']) {
-        box-shadow: 0 4px 6px 0 rgba(32, 33, 36, 0.28);
-        padding-top: 8px;
-        padding-bottom: 8px;
-        top: 2px;
-      }
-    `,
-  ];
-
-  constructor() {
-    super();
-
-    this.showAllOnEmpty = true;
-  }
-}
-customElements.define('md-combobox', MdCombobox);

package/docs/components/combobox/src/md-combobox/md-input.js

@@ -1,5 +0,0 @@
-import { LionInput } from '@lion/ui/input.js';
-import { MdFieldMixin } from './MdFieldMixin.js';
-
-export class MdInput extends MdFieldMixin(LionInput) {}
-customElements.define('md-input', MdInput);

package/docs/components/combobox/src/md-combobox/style/load-roboto.js

@@ -1,6 +0,0 @@
-// We don't have access to our main index html, so let's add Roboto font like this
-const linkNode = document.createElement('link');
-linkNode.href = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
-linkNode.rel = 'stylesheet';
-linkNode.type = 'text/css';
-document.head.appendChild(linkNode);

package/docs/components/combobox/src/md-combobox/style/md-ripple.js

@@ -1,82 +0,0 @@
-import { html, css, LitElement } from 'lit';
-
-/**
- * Material Design Ripple Element
- *
- * - should be placed in a 'positioned' context (having positon: (realtive/fixed/absolute))
- */
-class MdRipple extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          overflow: hidden;
-          transition: 0.1s ease-in;
-          user-select: none;
-          display: block;
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-
-        :host:hover {
-          cursor: pointer;
-        }
-
-        #ripple {
-          background-color: rgba(0, 0, 0, 0.1);
-          border-radius: 100%;
-          position: relative;
-          transform: scale(0);
-        }
-
-        .animate {
-          animation: ripple 0.4s linear;
-        }
-
-        @keyframes ripple {
-          100% {
-            transform: scale(12);
-            background-color: transparent;
-          }
-        }
-      `,
-    ];
-  }
-
-  render() {
-    return html` <div id="ripple"></div> `;
-  }
-
-  firstUpdated(c) {
-    super.firstUpdated(c);
-    this._ripple = this.shadowRoot.querySelector('#ripple');
-    this._ripple.style.cssText = `width: ${this.offsetHeight}px; height: ${this.offsetHeight}px;`;
-    this.__onRipple = this.__onRipple.bind(this);
-    this.addEventListener('mousedown', this.__onRipple);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('mousedown', this.__onRipple);
-  }
-
-  __onRipple(e) {
-    this._ripple.classList.remove('animate');
-    const rect = this.getBoundingClientRect();
-    const offset = {
-      top: rect.top + document.body.scrollTop,
-      left: rect.left + document.body.scrollLeft,
-    };
-    this._ripple.style.left = `${
-      parseInt(e.pageX - offset.left, 10) - this._ripple.offsetWidth / 2
-    }px`;
-    this._ripple.style.top = `${
-      parseInt(e.pageY - offset.top, 10) - this._ripple.offsetHeight / 2
-    }px`;
-    this._ripple.classList.add('animate');
-  }
-}
-customElements.define('md-ripple', MdRipple);