@lion/ui 0.0.2 → 0.0.4

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

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

@@ -0,0 +1,89 @@
+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 get styles() {
+    return [
+      ...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 get styles() {
+    return [
+      ...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;
+        }
+      `,
+    ];
+  }
+}
+customElements.define('md-combobox', MdCombobox);

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

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

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

@@ -0,0 +1,81 @@
+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() {
+    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);