kemet-ui 0.2.0 → 1.0.0

package/dist/components/kemet-scroll-snap.js

@@ -1,12 +1,23 @@
 import { html, css, LitElement } from 'lit';
 
-export class KemetScrollSnap extends LitElement {
+export default class KemetScrollSnap extends LitElement {
   static get styles() {
     return css`
+      *,
+      *::after,
+      *::before {
+        box-sizing: border-box;
+      }
+
       :host {
         display: flex;
-        width: 100%;
         flex-direction: column;
+        width: 100%;
+      }
+
+      :host([axis='horizontal']) {
+        margin: auto;
+        max-width: var(--kemet-scroll-snap-horizontal-max-width, 1024px);
       }
 
       :host([pagination="left"]),
@@ -26,9 +37,8 @@ export class KemetScrollSnap extends LitElement {
 
       ::slotted([slot="slides"]) {
         display: flex;
-        gap: var(--kemet-scroll-snap-gap, 0);
+        gap: var(--kemet-scroll-snap-gap, 1.5rem);
         scroll-snap-type: x mandatory;
-
         overflow-x: scroll;
       }
 
@@ -41,38 +51,36 @@ export class KemetScrollSnap extends LitElement {
         flex-direction: column;
         overflow-x: hidden;
         scroll-snap-type: y mandatory;
+        padding: var(--kemet-scroll-snap-slides-vertical-padding, 0 2rem);
       }
     `;
   }
 
   static get properties() {
     return {
+      /**
+       * Determines the direction the component flows. Values include: (horizontal|vertical)
+       */
       axis: {
         type: String,
         reflect: true,
       },
+      /**
+       * Determines where to display the paginator. Values include: (top | right | bottom | left)
+       */
       pagination: {
         type: String,
         reflect: true,
       },
-      isTouchDevice: {
-        type: Boolean,
-        reflect: true,
-        attribute: 'is-touch-device',
-      },
-      slides: {
-        type: Array,
-      },
     };
   }
 
   constructor() {
     super();
 
+    // managed properties
     this.axis = 'horizontal';
     this.pagination = 'bottom';
-    this.isTouchDevice = 'ontouchstart' in document.documentElement;
-    this.slides = [];
 
     this.addEventListener('kemet-scroll-snap-focus', (event) => {
       this.focusSlide(event.detail);
@@ -80,6 +88,10 @@ export class KemetScrollSnap extends LitElement {
   }
 
   firstUpdated() {
+    // standard properties
+    this.isTouchDevice = 'ontouchstart' in document.documentElement;
+    this.slides = [];
+
     this.setFocusedSlides();
   }
 
@@ -134,7 +146,6 @@ export class KemetScrollSnap extends LitElement {
       const slide = element;
 
       slide.index = index;
-
       slides.push({
         id: index,
         focused: slide.focused,
@@ -144,6 +155,9 @@ export class KemetScrollSnap extends LitElement {
 
     this.slides = slides;
 
+    /**
+     * Fires when slide data has been created.
+     */
     this.dispatchEvent(new CustomEvent('kemet-scroll-snap-make-slides', {
       bubbles: true,
       composed: true,
@@ -163,4 +177,5 @@ export class KemetScrollSnap extends LitElement {
   }
 }
 
-window.customElements.define('kemet-scroll-snap', KemetScrollSnap);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-scroll-snap') || customElements.define('kemet-scroll-snap', KemetScrollSnap);

package/dist/components/kemet-select.js

@@ -0,0 +1,365 @@
+import { html, css, LitElement } from 'lit';
+import { FormSubmitController } from '../../utilities/controllers/forms.js';
+
+export default class KemetSelect extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          position: relative;
+          display: block;
+        }
+
+        select {
+          display: block;
+          font-size: 1rem;
+          width: 100%;
+          padding: var(--kemet-select-padding, 1rem);
+          border: var(--kemet-select-border, 1px solid var(--kemet-color-primary));
+          appearance: none;
+          box-sizing: border-box;
+          background-color: transparent;
+        }
+
+        :host([status='error']) select {
+          border: var(--kemet-select-border-color-error, 1px solid var(--kemet-color-error));
+        }
+
+        :host([status='success']) select {
+          border: var(--kemet-select-border-color-success, 1px solid var(--kemet-color-success));
+        }
+
+        :host([status='warning']) select {
+          border: var(--kemet-select-border-color-warning, 1px solid var(--kemet-color-warning));
+        }
+
+        :host([disabled]) select {
+          opacity: 0.5;
+        }
+
+        :host([rounded]) select {
+          border-radius: var(--kemet-select-border-radius-rounded, var(--kemet-border-radius));
+        }
+
+        :host([filled]) select {
+          border: var(--kemet-select-border-filled, none);
+          color: var(--kemet-select-color-filled, var(--kemet-color-white));
+          background-color: var(--kemet-select-background-color-filled, var(--kemet-color-primary));
+        }
+
+        :host([filled]) kemet-icon {
+          color: var(--kemet-select-color-filled, var(--kemet-color-white));
+        }
+
+        :host([status='error'][filled]) select {
+          background-color: var(--kemet-select-background-color-error, var(--kemet-color-error));
+        }
+
+        :host([status='success'][filled]) select {
+          background-color: var(--kemet-select-background-color-success, var(--kemet-color-success));
+        }
+
+        :host([status='warning'][filled]) select {
+          background-color: var(--kemet-select-background-color-warning, var(--kemet-color-warning));
+        }
+
+        kemet-icon {
+          position: absolute;
+          right: var(--kemet-select-icon-right, 1rem);
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * A string the uniquely identifies the select
+       */
+      slug: {
+        type: String,
+      },
+      /**
+       * The name of the select
+       */
+      name: {
+        type: String,
+      },
+      /**
+       * The value of the select
+       */
+      value: {
+        type: String,
+      },
+      /**
+       * The options the select contains
+       */
+      options: {
+        type: Array,
+      },
+      /**
+       * The status of the select
+       */
+      status: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * Determines whether or not the field is required
+       */
+      required: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Determines whether or not the field is disabled
+       */
+      disabled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Support of multiple choice selections
+       */
+      multiple: {
+        type: Boolean,
+      },
+      /**
+       * The dropdown icon
+       */
+      icon: {
+        type: String,
+      },
+      /**
+       * The dropdown icon size
+       */
+      iconSize: {
+        type: Number,
+        attribute: 'icon-size',
+      },
+      /**
+       * Displays a filled select
+       */
+      filled: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Displays rounded corners
+       */
+      rounded: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // managed properties
+    this.name = 'select';
+    this.icon = 'chevron-down';
+    this.iconSize = 16;
+
+    /**
+     * Used only for form reactive controller
+     */
+    this.formSubmitController = new FormSubmitController(this);
+
+    // elements
+    this.control = this.closest('kemet-field');
+  }
+
+  firstUpdated() {
+    // elements
+    this.select = this.shadowRoot.querySelector('select');
+    this.selectedOption = this.querySelector('[selected]');
+
+    this.value = this.selecltedOption ? this.selectedOption.value : '';
+  }
+
+  render() {
+    return html`
+      <select
+        part="select"
+        id=${this.slug}
+        name=${this.name}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?multiple=${this.multiple}
+        @change=${this.handleChange}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        @invalid=${this.handleInvalid}
+      >
+        ${this.makeOptions()}
+      </select>
+      ${this.makeIcon()}
+      <slot @slotchange=${() => this.makeOptions()}></slot>
+    `;
+  }
+
+  /**
+   * Generates the option elements
+   * @private
+   * @returns {TemplateResult} An option element
+   */
+  makeOptions() {
+    this.options = [];
+    this.optionElements = this.querySelectorAll('kemet-option');
+
+    this.optionElements.forEach((option) => {
+      // if (index === 0) this.value = option.value;
+      // this.value = option.selected ? option.value : this.value;
+      this.options = this.options.concat({
+        label: option.label,
+        value: option.value,
+        disabled: option.disabled,
+        selected: option.selected,
+      });
+    });
+
+    return this.options.map(
+      option => html`<option value=${option.value} ?disabled=${option.disabled} ?selected=${option.selected}>
+          ${option.label}
+        </option>`,
+    );
+  }
+
+  /**
+   * Generates an dropdown icon
+   * @private
+   */
+  makeIcon() {
+    if (this.icon || this.icon !== '') {
+      return html`<kemet-icon icon=${this.icon} size=${this.iconSize}></kemet-icon>`;
+    }
+
+    return null;
+  }
+
+  /**
+   * Handles when the input receives focus
+   * @private
+   */
+  handleFocus() {
+    this.hasFocus = true;
+
+    /**
+     * Fires when the input receives and loses focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-input-focused', {
+        bubbles: true,
+        composed: true,
+        detail: true,
+      }),
+    );
+  }
+
+  /**
+   * Handles when the input loses focus
+   * @private
+   */
+  handleBlur() {
+    this.hasFocus = false;
+
+    /**
+     * Fires when the input receives and loses focus
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-input-focused', {
+        bubbles: true,
+        composed: true,
+        detail: false,
+      }),
+    );
+
+    this.select.checkValidity();
+
+    if (!this.select.checkValidity()) {
+      this.invalid = true;
+      this.status = 'error';
+      this.control.status = 'error';
+
+      this.dispatchEvent(
+        new CustomEvent('kemet-input-status', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            status: 'error',
+            validity: this.select.validity,
+            element: this,
+          },
+        }),
+      );
+    }
+  }
+
+  /**
+   * Handles when the input changes value
+   * @private
+   */
+  handleChange() {
+    this.value = this.select.value;
+
+    if (this.select.checkValidity()) {
+      this.invalid = false;
+      this.status = 'standard';
+
+      /**
+       * Fires when there's a change in status
+       */
+      this.dispatchEvent(
+        new CustomEvent('kemet-input-status', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            status: 'standard',
+            validity: this.select.validity,
+            element: this,
+          },
+        }),
+      );
+    }
+  }
+
+  /**
+   * Handles when the input has an error
+   * @private
+   */
+  handleInvalid() {
+    this.invalid = true;
+    this.status = 'error';
+
+    /**
+     * Fires when there's a change in status
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-input-status', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          status: 'error',
+          validity: this.select.validity,
+          element: this,
+        },
+      }),
+    );
+  }
+
+  /**
+   * Checks the validity of the standard select
+   * @public
+   * @returns {boolean}
+   */
+  checkValidity() {
+    this.select.checkValidity();
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-select') || customElements.define('kemet-select', KemetSelect);

package/dist/components/kemet-svg.js

@@ -1,6 +1,6 @@
 import { html, css, LitElement } from 'lit';
 
-export class KemetSVG extends LitElement {
+export default class KemetSVG extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -16,18 +16,33 @@ export class KemetSVG extends LitElement {
 
   static get properties() {
     return {
+      /**
+       * Defines which set of svgs is referenced.
+       */
       set: {
         type: String,
       },
+      /**
+       * The name (id) of the svg to be displayed.
+       */
       svg: {
         type: String,
       },
+      /**
+       * Sets the width and height of a the svg to the given value in pixels.
+       */
       size: {
         type: Number,
       },
+      /**
+       * The value for the preserveAspectRatio attribute of the svg.
+       */
       ratio: {
         type: String,
       },
+      /**
+       * The value for the viewBox attribute of the svg.
+       */
       viewBox: {
         type: String,
       },
@@ -90,4 +105,5 @@ export class KemetSVG extends LitElement {
   }
 }
 
-window.customElements.define('kemet-svg', KemetSVG);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-svg') || customElements.define('kemet-svg', KemetSVG);

package/dist/components/kemet-svgs.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 
-export class KemetSVGs extends LitElement {
+export default class KemetSVGs extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -11,6 +11,9 @@ export class KemetSVGs extends LitElement {
 
   static get properties() {
     return {
+      /**
+       * Defines the name for the set of svgs.
+       */
       set: {
         type: String,
       },
@@ -21,11 +24,11 @@ export class KemetSVGs extends LitElement {
     super();
 
     this.set = 'svgs';
-    document.kemetSVGs = document.kemetSVGs || {};
   }
 
   firstUpdated() {
     this.slotElement = this.shadowRoot.querySelector('slot');
+    document.kemetSVGs = document.kemetSVGs || {};
 
     this.populateIcons();
     this.slotElement.addEventListener('slotchange', this.populateIcons());
@@ -45,4 +48,5 @@ export class KemetSVGs extends LitElement {
   }
 }
 
-window.customElements.define('kemet-svgs', KemetSVGs);
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-svgs') || customElements.define('kemet-svgs', KemetSVGs);

package/dist/components/kemet-tab-panel.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 
-export class KemetTabPanel extends LitElement {
+export default class KemetTabPanel extends LitElement {
   static get styles() {
     return css`
       :host {
@@ -26,15 +26,29 @@ export class KemetTabPanel extends LitElement {
       :host(.fade.push) {
         margin-left: -100%;
       }
+
+      :host(.vertical) {
+        display: none;
+      }
+
+      :host(.vertical[selected]) {
+        display: block;
+      }
     `;
   }
 
   static get properties() {
     return {
+      /**
+       * Is true when a panel is selected
+       */
       selected: {
         type: Boolean,
         reflect: true,
       },
+      /**
+       * Identifies the panel to be linked by a tab
+       */
       panel: {
         type: String,
       },

package/dist/components/kemet-tab.js

@@ -1,27 +1,51 @@
 import { LitElement, html, css } from 'lit';
 
-export class KemetTab extends LitElement {
+export default class KemetTab extends LitElement {
   static get styles() {
     return css`
       :host {
         cursor: pointer;
+        display: inline-flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+        padding: var(--kemet-tab-padding, 1rem);
       }
 
       :host([selected]) {
         cursor: auto;
+        color: var(--kemet-tab-color, var(--kemet-color-primary));
+      }
+
+      kemet-icon {
+        cursor: pointer;
+        margin-left: 0.5rem;
       }
     `;
   }
 
   static get properties() {
     return {
+      /**
+       * Is true when the tab is selected
+       */
       selected: {
         type: Boolean,
         reflect: true,
       },
+      /**
+       * Links to a panel name
+       */
       link: {
         type: String,
       },
+      /**
+       * Determines if the tab can be closed
+       */
+      closable: {
+        type: Boolean,
+      },
     };
   }
 
@@ -43,10 +67,14 @@ export class KemetTab extends LitElement {
   render() {
     return html`
       <slot></slot>
+      ${this.makeCloseable()}
     `;
   }
 
   select() {
+    /**
+     * Fires when a tab is selected
+     */
     this.dispatchEvent(new CustomEvent('kemet-tab-selected', {
       bubbles: true,
       composed: true,
@@ -65,6 +93,25 @@ export class KemetTab extends LitElement {
       this.setAttribute('tabindex', '-1');
     }
   }
+
+  makeCloseable() {
+    if (this.closable) {
+      return html`<kemet-icon icon="x-lg" @click=${() => this.handleClosable()}></kemet-icon>`;
+    }
+
+    return null;
+  }
+
+  handleClosable() {
+    /**
+     * Fires when the tab should close
+     */
+    this.dispatchEvent(new CustomEvent('kemet-tab-close', {
+      bubbles: true,
+      composed: true,
+      detail: this,
+    }));
+  }
 }
 
 customElements.define('kemet-tab', KemetTab);