kemet-ui 0.2.0 → 1.0.0

package/dist/components/kemet-combo.js

@@ -0,0 +1,207 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetCombo extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          opacity: 0;
+          width: var(--kemet-combo-width, calc(100% - 2px));
+          margin: var(--kemet-combo-margin, 1rem auto);
+          pointer-events: none;
+          display: block;
+          position: relative;
+          transition: opacity 0.3s ease-in-out;
+        }
+
+        :host([show]) {
+          opacity: 1;
+          pointer-events: auto;
+        }
+
+        ul {
+          width: 100%;
+          max-height: var(--kemet-combo-max-height, calc(5 * 3rem));
+          position: absolute;
+          z-index: 1;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          overflow-y: scroll;
+          border: var(--kemet-combo-border, 1px solid var(--kemet-color-primary));
+          border-radius: var(--kemet-combo-border-radius, var(--kemet-border-radius));
+          background-color: var(--kemet-combo-background-color, var(--kemet-color-white));
+          box-shadow: var(--kemet-combo-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
+        }
+        li {
+          line-height: 3rem;
+          padding: 0 1.5rem;
+          cursor: pointer;
+        }
+        li:hover,
+        li:focus {
+          color: var(--kemet-combo-hover-color, var(--kemet-color-white));
+          outline: none;
+          background-color: var(--kemet-combo-hover-background-color, var(--kemet-color-primary));
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Uniquely identifies the component. Should match the slug used in a control.
+       */
+      slug: {
+        type: String,
+      },
+      /**
+       * An array of items listed for the combo box
+       */
+      options: {
+        type: Array,
+      },
+      /**
+       * Used internally
+       */
+      filteredOptions: {
+        type: Array,
+      },
+      /**
+       * Controls the display of the combo box
+       */
+      show: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  firstUpdated() {
+    // standard properties
+    this.field = this.closest('kemet-field');
+    this.input = this.field.querySelector('[slot="input"]');
+
+    // managed properties
+    this.slug = this.field.slug;
+
+    // events listeners
+    this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
+    this.input.addEventListener('keydown', event => this.handleInputKeyDown(event));
+  }
+
+  render() {
+    return html`
+      <div
+        role="combobox"
+        aria-expanded=${this.show}
+        aria-controls="${this.slug}-listbox"
+        aria-haspopup="listbox"
+        id="${this.slug}-combobox"
+        aria-label="${this.field.label}"
+      >
+        <ul role="listbox" aria-labelledby="${this.slug}-label" id="${this.slug}-listbox">
+          ${this.makeOptions()}
+        </ul>
+      </div>
+    `;
+  }
+
+  makeOptions() {
+    if (this.input) {
+      this.filteredOptions = this.options.filter(
+        option => option.toLowerCase().indexOf(this.input.value.toLowerCase()) !== -1,
+      );
+
+      const options = this.filteredOptions.map(
+        (option, index) => html`<li
+            id="${this.slug}-option-${index}"
+            role="option"
+            tabindex="0"
+            aria-selected="false"
+            @click=${event => this.handleSelection(event)}
+            @keydown=${event => this.handleOptionKeyDown(event)}
+          >
+            ${option}
+          </li>`,
+      );
+
+      return options;
+    }
+
+    return null;
+  }
+
+  handleInput(event) {
+    this.makeOptions();
+
+    if (event.detail.length > 0) {
+      this.show = true;
+    } else {
+      this.show = false;
+    }
+  }
+
+  handleSelection(event) {
+    this.input.value = event.target.innerText;
+    this.show = false;
+
+    /**
+     * Fires when a selection has been made
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-combo-selection', {
+        bubbles: true,
+        composed: true,
+        detail: event.target.getAttribute('id'),
+      }),
+    );
+  }
+
+  handleOptionKeyDown(event) {
+    event.preventDefault();
+
+    if (event.code === 'ArrowDown') {
+      const next = event.target.nextElementSibling;
+
+      if (next) {
+        next.focus();
+      } else {
+        this.shadowRoot.querySelector('li').focus();
+      }
+    }
+
+    if (event.code === 'ArrowUp') {
+      const previous = event.target.previousElementSibling;
+
+      if (previous) {
+        previous.focus();
+      } else {
+        this.shadowRoot.querySelector('li:last-child').focus();
+      }
+    }
+
+    if (event.code === 'Escape' || event.code === 'Tab') {
+      this.show = false;
+      this.input.focus();
+    }
+
+    if (event.code === 'Enter' || event.code === 'Space') {
+      this.handleSelection(event);
+    }
+  }
+
+  handleInputKeyDown(event) {
+    if (event.code === 'ArrowDown') {
+      this.shadowRoot.querySelector('li').focus();
+    }
+
+    if (event.code === 'Escape') {
+      this.show = false;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-combo') || customElements.define('kemet-combo', KemetCombo);

package/dist/components/kemet-count.js

@@ -0,0 +1,112 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetCount extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: block;
+          font-size: var(--kemet-count-font-size, 90%);
+          margin-top: 0.8rem;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The text label shown to users
+       */
+      message: {
+        type: String,
+      },
+      /**
+       * The number of characters remaining
+       */
+      remaining: {
+        type: Number,
+      },
+      /**
+       * The maximum number of characters allowed
+       */
+      limit: {
+        type: Number,
+      },
+      /**
+       * Set to true if the field should validate as soon as the character limit is reached
+       */
+      validateImmediately: {
+        type: Boolean,
+        attribute: 'validate-immediately',
+      },
+    };
+  }
+
+  firstUpdated() {
+    this.field = this.closest('kemet-field');
+    this.inputSlot = this.field.querySelector('[slot="input"]');
+
+    this.remaining = this.limit - this.field.length;
+
+    this.field.addEventListener('kemet-field-input', (event) => {
+      this.remaining = this.limit - event.detail;
+
+      const nativeElement = this.input || this.textarea;
+
+      if (nativeElement) {
+        if (this.remaining < 0) {
+          nativeElement.validity.passedLimit = true;
+
+          if (this.validateImmediately) {
+            this.inputSlot.status = 'error';
+            this.inputSlot.invalid = true;
+
+            /**
+             * Fires when there's a change in status.
+             */
+            this.dispatchEvent(
+              new CustomEvent('kemet-count-status', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  status: 'error',
+                  validity: nativeElement.validity,
+                  element: this.inputSlot,
+                },
+              }),
+            );
+          }
+        } else {
+          this.inputSlot.status = 'standard';
+          nativeElement.checkValidity();
+
+          /**
+           * Fires when there's a change in status.
+           */
+          this.dispatchEvent(
+            new CustomEvent('kemet-count-status', {
+              bubbles: true,
+              composed: true,
+              detail: {
+                status: 'standard',
+                validity: nativeElement.validity,
+                element: this.inputSlot,
+              },
+            }),
+          );
+        }
+      }
+    });
+
+    this.input = this.inputSlot.shadowRoot.querySelector('input');
+    this.textarea = this.inputSlot.shadowRoot.querySelector('textarea');
+  }
+
+  render() {
+    return html`${this.remaining} ${this.message}`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-count') || customElements.define('kemet-count', KemetCount);

package/dist/components/kemet-draggable.js

@@ -1,6 +1,6 @@
 import { html, css, LitElement } from 'lit';
 
-export class KemetDraggable extends LitElement {
+export default class KemetDraggable extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -15,15 +15,28 @@ export class KemetDraggable extends LitElement {
 
   static get properties() {
     return {
+      /**
+       * A unique identifier used to store the element's position in local storage.
+       */
       memory: {
         type: String,
       },
+      /**
+       * The elements top position in pixels.
+       */
       top: {
         type: String,
       },
+      /**
+       * The element's left position in pixels.
+       */
       left: {
         type: String,
       },
+      /**
+       * If set to true, will measure the width and height
+       * of the element's content and apply it to the host element.
+       */
       measure: {
         type: Boolean,
       },
@@ -37,17 +50,16 @@ export class KemetDraggable extends LitElement {
     this.top = 'auto';
     this.left = 'auto';
     this.measure = false;
+  }
 
-    // js property defaults
+  firstUpdated() {
+    // standard properties
     this.position1 = 0;
     this.position2 = 0;
     this.position3 = 0;
     this.position4 = 0;
     this.mouseMove = event => this.drag(event);
     this.mouseUp = () => this.stopDrag();
-  }
-
-  firstUpdated() {
     this.draggableElement = this.shadowRoot.getElementById('draggable');
 
     const savedPosition = JSON.parse(localStorage.getItem(this.memory));
@@ -126,4 +138,5 @@ export class KemetDraggable extends LitElement {
   }
 }
 
-window.customElements.define('kemet-draggable', KemetDraggable);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-draggable') || customElements.define('kemet-draggable', KemetDraggable);

package/dist/components/kemet-drawer.js

@@ -1,25 +1,39 @@
 import { LitElement, html } from 'lit';
 import { stylesBase, stylesEffects } from './kemet-drawer.styles.js';
 
-export class KemetDrawer extends LitElement {
+export default class KemetDrawer extends LitElement {
   static get styles() {
     return [stylesBase, stylesEffects];
   }
 
   static get properties() {
     return {
+      /**
+       * Determines if the drawer is opened or not.
+       */
       opened: {
         type: Boolean,
         reflect: true,
       },
+      /**
+       * The animation effect for opening and closing the drawer.
+       * Values include: (slide | reveal | push | scale)
+       */
       effect: {
         type: String,
         reflect: true,
       },
+      /**
+       * Allows you to control which side the drawer opens from.
+       * Values include: (left | right | top | bottom)
+       */
       side: {
         type: String,
         reflect: true,
       },
+      /**
+       * Adds a overlay over the content section of the Drawer when opened
+       */
       overlay: {
         type: Boolean,
         reflect: true,
@@ -30,7 +44,7 @@ export class KemetDrawer extends LitElement {
   constructor() {
     super();
 
-    // property defaults
+    // managed properties
     this.opened = undefined;
     this.effect = 'slide';
     this.side = 'left';
@@ -47,11 +61,29 @@ export class KemetDrawer extends LitElement {
 
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
-      this.makeEvent('opened');
+      /**
+       * Fires when the drawer opens.
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-drawer-opened', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
     }
 
     if (prevProps.get('opened') && this.opened === false) {
-      this.makeEvent('closed');
+      /**
+       * Fires when the drawer closes.
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-drawer-closed', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
     }
   }
 
@@ -71,16 +103,7 @@ export class KemetDrawer extends LitElement {
       </section>
     `;
   }
-
-  makeEvent(type) {
-    this.dispatchEvent(
-      new CustomEvent(`kemet-drawer-${type}`, {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
-  }
 }
 
-window.customElements.define('kemet-drawer', KemetDrawer);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-drawer') || customElements.define('kemet-drawer', KemetDrawer);

package/dist/components/kemet-drawer.styles.js

@@ -3,6 +3,12 @@ import { css, unsafeCSS } from 'lit';
 const documentHeight = `${document.documentElement.scrollHeight}px`;
 
 export const stylesBase = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     width: 100%;
   }