kemet-ui 0.2.0 → 1.1.0

package/dist/components/kemet-checkbox/kemet-checkbox.js

@@ -0,0 +1,298 @@
+import { html, css, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { FormSubmitController } from '../../utilities/controllers/forms.js';
+
+export default class KemetCheckbox extends LitElement {
+  static get styles() {
+    return [
+      css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: inline-block;
+        }
+
+        :host([disabled]) {
+          opacity: 0.5;
+        }
+
+        label {
+          display: inline-flex;
+          gap: 0.5rem;
+          align-items: center;
+        }
+
+        input {
+          cursor: pointer;
+          margin: 0;
+          padding: 0;
+          width: var(--kemet-checkbox-size, 18px);
+          height: var(--kemet-checkbox-size, 18px);
+          position: absolute;
+          opacity: 0;
+        }
+
+        button {
+          margin: 0;
+          border: none;
+          background: none;
+        }
+
+        [part='checkbox'] {
+          color: var(--kemet-checkbox-color, var(--kemet-color-primary));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--kemet-checkbox-size, 18px);
+          height: var(--kemet-checkbox-size, 18px);
+          border: var(--kemet-checkbox-border, 1px solid var(--kemet-color-primary));
+        }
+
+        :host([rounded]) [part='checkbox'] {
+          border-radius: var(--kemet-checkbox-border-radius, 4px);
+        }
+
+        :host([filled][checked]) [part='checkbox'],
+        :host([filled][indeterminate]) [part='checkbox'] {
+          border: none;
+          background-color: var(--kemet-checkbox-filled-background-color, var(--kemet-color-primary));
+        }
+
+        [part='mark'] {
+          display: flex;
+          width: calc(var(--kemet-checkbox-size, 18px) - 4px);
+          height: calc(var(--kemet-checkbox-size, 18px) - 4px);
+        }
+
+        :host([filled][checked]) [part='mark'],
+        :host([filled][indeterminate]) [part='mark'] {
+          color: var(--kemet-checkbox-filled-color, var(--kemet-color-white));
+        }
+
+        [part='message'] {
+          display: block;
+          margin-top: 0.5rem;
+        }
+
+        :host([status='error']) [part='message'] {
+          color: var(--kemet-color-error);
+        }
+
+        :host([status='warning']) [part='message'] {
+          color: var(--kemet-color-error);
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      label: {
+        type: String,
+      },
+      checked: {
+        type: Boolean,
+        reflect: true,
+      },
+      indeterminate: {
+        type: Boolean,
+        reflect: true,
+      },
+      name: {
+        type: String,
+      },
+      value: {
+        type: String,
+      },
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      required: {
+        type: Boolean,
+        reflect: true,
+      },
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
+      rounded: {
+        type: Boolean,
+        reflect: true,
+      },
+      filled: {
+        type: Boolean,
+        reflect: true,
+      },
+      status: {
+        type: String,
+        reflect: true,
+      },
+      message: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.label = '';
+    this.name = 'checkbox';
+    this.disabled = false;
+    this.required = false;
+    this.rounded = false;
+    this.filled = false;
+    this.status = 'standard';
+
+    /**
+     * Used only for form reactive controller
+     */
+    this.formSubmitController = new FormSubmitController(this);
+  }
+
+  firstUpdated() {
+    this.input = this.shadowRoot.querySelector('input');
+  }
+
+  render() {
+    return html`
+      <label part="label">
+        <input
+          type="checkbox"
+          name=${ifDefined(this.name)}
+          .value=${this.value}
+          .indeterminate=${live(this.indeterminate)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          @click=${() => this.handleClick()}
+          @blur=${() => this.handleBlur()}
+          @focus=${() => this.handleFocus()}
+          @change=${() => this.handleChange()}
+        />
+        <button part="checkbox" aria-label=${this.label}>
+          ${this.makeCheckMark()}
+        </button>
+        <span part="text">${this.label}</span>
+      </label>
+      ${this.makeMessage()}
+    `;
+  }
+
+  click() {
+    this.input.click();
+  }
+
+  handleClick() {
+    this.checked = !this.checked;
+    this.indeterminate = false;
+
+    /**
+     * Fires when the state of the checkbox changes
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-change', {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      }),
+    );
+  }
+
+  handleBlur() {
+    this.focused = false;
+
+    /**
+     * Fires when the checkbox loses or receives focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-focused', {
+        bubbles: true,
+        composed: true,
+        detail: false,
+      }),
+    );
+  }
+
+  handleFocus() {
+    this.focused = true;
+    /**
+     * Fires when the checkbox loses or receives focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-checkbox-focused', {
+        bubbles: true,
+        composed: true,
+        detail: true,
+      }),
+    );
+  }
+
+  handleChange() {
+    this.value = this.checked;
+
+    if (this.input.checkValidity()) {
+      this.status = 'standard';
+    }
+  }
+
+  makeMessage() {
+    if (this.status === 'error' || this.status === 'warning') {
+      return html`<span part="message">${this.message}</span>`;
+    }
+
+    return null;
+  }
+
+  makeCheckMark() {
+    if (this.checked) {
+      return html`
+        <span part="mark">
+          <svg viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+              <g stroke="currentColor" stroke-width="2">
+                <g transform="translate(3.428571, 3.428571)">
+                  <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
+                  <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+      `;
+    }
+
+    if (!this.checked && this.indeterminate) {
+      return html`
+        <span part="mark">
+          <svg viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+              <g stroke="currentColor" stroke-width="2">
+                <g transform="translate(2.285714, 6.857143)">
+                  <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+        </span>
+      `;
+    }
+
+    return null;
+  }
+
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-checkbox') || customElements.define('kemet-checkbox', KemetCheckbox);

package/dist/components/kemet-combo/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/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 → kemet-draggable/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);