kemet-ui 0.2.0 → 1.0.0

package/dist/components/kemet-modal.js

@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { stylesBase, stylesEffects } from './kemet-modal.styles.js';
 
-export class KemetModal extends LitElement {
+export default class KemetModal extends LitElement {
   static get styles() {
     return [
       stylesBase,
@@ -23,33 +23,87 @@ export class KemetModal extends LitElement {
         type: Boolean,
         attribute: 'close-on-click',
       },
+      breakpoint: {
+        type: String,
+      },
+      mobile: {
+        type: Boolean,
+        reflect: true,
+      },
     };
   }
 
   constructor() {
     super();
+
+    // managed properties
     this.opened = false;
     this.closeOnClick = false;
+    this.breakpoint = '600px';
 
-    this.addEventListener('kemet-modal-close-btn', () => { this.opened = false; });
+    // bindings
+    this.addEventListener('kemet-modal-close-pressed', () => { this.opened = false; });
   }
 
   firstUpdated() {
+    // standard properties
+    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
+    this.focusableElements = this.querySelectorAll(this.focusableSelector);
+
+    // events
+    this.addEventListener('keyup', (event) => {
+      if (event.key === 'Escape') {
+        this.opened = false;
+      }
+    });
+
     this.addEventListener('click', (event) => {
       if (this.opened && this.closeOnClick && event.target.tagName.toLowerCase() === 'kemet-modal') {
         this.opened = false;
       }
     });
+
+    window.addEventListener('resize', () => {
+      this.isMobile();
+    });
+
+    this.focusableElements.forEach((element) => {
+      element.addEventListener('keydown', event => this.handleFocusableDown(event));
+    });
   }
 
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
-      this.makeEvent('opened');
+      setTimeout(() => {
+        this.focusableElements[0].focus();
+      }, 100);
+
+      /**
+       * Fires when the modal opens
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-modal-opened', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
     }
 
     if (prevProps.get('opened') && this.opened === false) {
-      this.makeEvent('closed');
+      /**
+       * Fires when the modal closes
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-modal-closed', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
     }
+
+    this.isMobile();
   }
 
   render() {
@@ -61,15 +115,26 @@ export class KemetModal extends LitElement {
     `;
   }
 
-  makeEvent(type) {
-    this.dispatchEvent(
-      new CustomEvent(`kemet-modal-${type}`, {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+    this.mobile = mediaQuery.matches;
+  }
+
+  handleFocusableDown(event) {
+    const firstFocusable = this.focusableElements[0];
+    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
+
+    if (event.key === 'Tab') {
+      if (event.shiftKey && document.activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      } else if (!event.shiftKey && document.activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus();
+      }
+    }
   }
 }
 
-window.customElements.define('kemet-modal', KemetModal);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-modal') || customElements.define('kemet-modal', KemetModal);

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

@@ -1,6 +1,12 @@
 import { css } from 'lit';
 
 export const stylesBase = css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     position: fixed;
     display: flex;
@@ -21,8 +27,14 @@ export const stylesBase = css`
     position: relative;
     z-index: 3;
     margin: auto;
-    min-width: var(--kemet-modal-min-width, 0);
-    max-width: var(--kemet-modal-max-width, none);
+    min-width: var(--kemet-modal-content-min-width, 0);
+    max-width: var(--kemet-modal-content-max-width, none);
+  }
+
+  :host([mobile]) .content {
+    min-width: var(--kemet-modal-content-mobile-min-width, 100%);
+    min-height: var(--kemet-modal-content-mobile-min-height, 80vh);
+    padding: var(--kemet-modal-content-mobile-padding, 1rem);
   }
 
   .overlay {

package/dist/components/kemet-option.js

@@ -0,0 +1,45 @@
+import { html, LitElement } from 'lit';
+
+export default class KemetOption extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * The label of the option
+       */
+      label: {
+        type: String,
+      },
+      /**
+       * The value of the options
+       */
+      value: {
+        type: String,
+      },
+      /**
+       * Determines whether to disable the option
+       */
+      disabled: {
+        type: Boolean,
+      },
+      /**
+       * Selects the option if true
+       */
+      selected: {
+        type: Boolean,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.value = '';
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-option') || customElements.define('kemet-option', KemetOption);

package/dist/components/kemet-popover-close.js

@@ -6,7 +6,7 @@ const keyCodes = {
   ESC: 27,
 };
 
-export class KemetPopoverClose extends LitElement {
+export default class KemetPopoverClose extends LitElement {
   static get styles() {
     return [
       css`

package/dist/components/kemet-popover.js

@@ -17,7 +17,7 @@ const keyCodes = {
   ESC: 27,
 };
 
-export class KemetPopover extends LitElement {
+export default class KemetPopover extends LitElement {
   static get styles() {
     return [
       css`
@@ -121,33 +121,62 @@ export class KemetPopover extends LitElement {
 
   static get properties() {
     return {
+      /**
+       * Determines whether or not the popover displays.
+       */
       opened: {
         type: Boolean,
         reflect: true,
       },
+      /**
+       * The opening and closing effect of the popover. Is optional.
+       * Values include:
+       * (fade | scale | slide | fall | flip horizontal | flip vertical | sign | super scaled)
+       */
       effect: {
         string: String,
         reflect: true,
       },
+      /**
+       * Determines the placement of the popover.
+       * Values include: (top | right | bottom | left)
+       */
       position: {
         type: String,
         reflect: true,
       },
+      /**
+       * Adds a built in tooltip to the popover.
+       */
       tooltip: {
         type: Boolean,
       },
+      /**
+       * Adds a custom tooltip to the popover.
+       * Use the custom-tooltip slot to specify the custom tooltip.
+       */
       customTooltip: {
         type: Boolean,
         attribute: 'custom-tooltip',
       },
+      /**
+       * Controls how the trigger should activate the popover.
+       * Values include: (click | hover)
+       */
       fireOn: {
         type: String,
         attribute: 'fire-on',
       },
+      /**
+       * Allows the popover to be closed by clicking outside of its content.
+       */
       clickOutside: {
         type: Boolean,
         attribute: 'click-outside',
       },
+      /**
+       * Intelligently positions the popover.
+       */
       smart: {
         type: Boolean,
       },
@@ -170,6 +199,10 @@ export class KemetPopover extends LitElement {
   }
 
   firstUpdated() {
+    // standard properties
+    this.focusableSelector = 'body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popover-close';
+    this.focusableElements = this.querySelectorAll(this.focusableSelector);
+
     // eslint-disable-next-line prefer-destructuring
     this.contentElement = this.shadowRoot
       .querySelector('slot[name="content"]')
@@ -178,15 +211,39 @@ export class KemetPopover extends LitElement {
     window.addEventListener('resize', () => {
       this.smartContent();
     });
+
+    if (this.fireOn === 'click') {
+      this.focusableElements.forEach((element) => {
+        element.addEventListener('keydown', event => this.handleFocusableDown(event));
+      });
+    }
   }
 
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
-      this.makeEvent('opened');
+      /**
+       * Fires when the popover opens.
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-popover-opened', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
     }
 
     if (prevProps.get('opened') && this.opened === false) {
-      this.makeEvent('closed');
+      /**
+       * Fires when the popover closes.
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-popover-closed', {
+          bubbles: true,
+          composed: true,
+          detail: this,
+        }),
+      );
     }
 
     this.smartContent();
@@ -247,14 +304,19 @@ export class KemetPopover extends LitElement {
     }
   }
 
-  makeEvent(type) {
-    this.dispatchEvent(
-      new CustomEvent(`kemet-popover-${type}`, {
-        bubbles: true,
-        composed: true,
-        detail: this,
-      }),
-    );
+  handleFocusableDown(event) {
+    const firstFocusable = this.focusableElements[0];
+    const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
+
+    if (event.key === 'Tab') {
+      if (event.shiftKey && document.activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      } else if (!event.shiftKey && document.activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus();
+      }
+    }
   }
 
   makeTooltip() {
@@ -361,4 +423,5 @@ export class KemetPopover extends LitElement {
   }
 }
 
-window.customElements.define('kemet-popover', KemetPopover);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-popover') || customElements.define('kemet-popover', KemetPopover);

package/dist/components/kemet-radio.js

@@ -0,0 +1,214 @@
+import { html, css, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+
+export default class KemetRadio extends LitElement {
+  static get styles() {
+    return [
+      css`
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: inline-block;
+        }
+
+        :host([disabled]) {
+          opacity: 0.5;
+        }
+
+        label {
+          cursor: pointer;
+          display: inline-flex;
+          gap: 0.5rem;
+          align-items: center;
+          margin-right: 0.5rem;
+        }
+
+        input {
+          cursor: pointer;
+          margin: 0;
+          padding: 0;
+          width: var(--kemet-radio-size, 18px);
+          height: var(--kemet-radio-size, 18px);
+          position: absolute;
+          opacity: 0;
+        }
+
+        button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--kemet-radio-size, 18px);
+          height: var(--kemet-radio-size, 18px);
+          padding: 0;
+          border-radius: 50%;
+          background: none;
+          border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));
+        }
+
+        [part='dot'] {
+          display: inline-flex;
+          border-radius: 50%;
+          width: var(--kemet-radio-size, 18px);
+          height: var(--kemet-radio-size, 18px);
+          background: var(--kemet-radio-dot-color, var(--kemet-color-primary));
+          border: var(--kemet-radio-border, 1px solid var(--kemet-color-primary));
+          box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 3px) var(--kemet-radio-dot-border-color, var(--kemet-color-white));
+        }
+
+        :host([filled]) [part='dot'] {
+          background: var(--kemet-radio-dot-color-filled, var(--kemet-color-white));
+          box-shadow: inset 0px 0px 0px var(--kemet-radio-dot-border-width, 4px) var(--kemet-radio-dot-border-color, var(--kemet-color-primary));
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The text next to the radio button
+       */
+      label: {
+        type: String,
+      },
+      /**
+       * Determines whether or not the button is checked
+       */
+      checked: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * The name of the field
+       */
+      name: {
+        type: String,
+      },
+      /**
+       * The value of the radio button
+       */
+      value: {
+        type: String,
+      },
+      /**
+       * Determines if the button should be disabled
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Is true when the button is focused on
+       */
+      focused: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Displayed the button as a filled button
+       */
+      filled: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.label = '';
+    this.name = this.closest('kemet-radios').name || 'radio-button';
+    this.disabled = false;
+  }
+
+  firstUpdated() {
+    this.input = this.shadowRoot.querySelector('input');
+    this.setAttribute('role', 'radio');
+
+    if (this.checked) {
+      this.setAttribute('aria-checked', 'true');
+    } else {
+      this.setAttribute('aria-checked', 'false');
+    }
+  }
+
+  render() {
+    return html`
+      <label part="label">
+        <input
+          type="radio"
+          name=${ifDefined(this.name)}
+          .value=${this.value}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          @blur=${() => this.handleBlur()}
+          @focus=${() => this.handleFocus()}
+        />
+        <button part="button" aria-label=${this.label}>${this.makeDot()}</button>
+        <span part="text">${this.label}</span>
+      </label>
+    `;
+  }
+
+  click() {
+    this.input.click();
+  }
+
+  blur() {
+    this.input.blur();
+  }
+
+  focus() {
+    this.input.focus();
+  }
+
+  handleBlur() {
+    this.focused = false;
+
+    /**
+     * Fires when the checkbox loses or receives focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-radio-focused', {
+        bubbles: true,
+        composed: true,
+        detail: false,
+      }),
+    );
+  }
+
+  handleFocus() {
+    this.focused = true;
+
+    /**
+     * Fires when the checkbox loses or receives focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-radio-focused', {
+        bubbles: true,
+        composed: true,
+        detail: true,
+      }),
+    );
+  }
+
+  makeDot() {
+    if (this.checked) {
+      return html`
+        <span part="dot"></span>
+      `;
+    }
+
+    return null;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-radio') || customElements.define('kemet-radio', KemetRadio);