kemet-ui 1.2.0 → 1.3.0

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

@@ -84,7 +84,7 @@ export default class KemetCombo extends LitElement {
     this.input = this.field.querySelector('[slot="input"]');
 
     // managed properties
-    this.slug = this.field.slug;
+    this.slug = this.field.slug || 'slug';
 
     // events listeners
     this.input.addEventListener('kemet-input-input', this.handleInput.bind(this));
@@ -99,7 +99,7 @@ export default class KemetCombo extends LitElement {
         aria-controls="${this.slug}-listbox"
         aria-haspopup="listbox"
         id="${this.slug}-combobox"
-        aria-label="${this.field.label}"
+        aria-label="${this.field?.label}"
       >
         <ul role="listbox" aria-labelledby="${this.slug}-label" id="${this.slug}-listbox">
           ${this.makeOptions()}
@@ -154,7 +154,11 @@ export default class KemetCombo extends LitElement {
       new CustomEvent('kemet-combo-selection', {
         bubbles: true,
         composed: true,
-        detail: event.target.getAttribute('id'),
+        detail: {
+          element: event.target,
+          text: event.target.innerText,
+          id: event.target.getAttribute('id'),
+        },
       }),
     );
   }

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

@@ -75,7 +75,7 @@ export default class KemetModal extends LitElement {
   updated(prevProps) {
     if (!prevProps.get('opened') && this.opened === true) {
       setTimeout(() => {
-        this.focusableElements[0].focus();
+        this.focusableElements[0]?.focus();
       }, 100);
 
       /**

package/dist/components/kemet-sortable/kemet-sortable-item.js

@@ -0,0 +1,42 @@
+import { html, css, LitElement } from 'lit';
+
+export default class KemetSortableItem extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          cursor: grab;
+          display: block;
+          padding: 1rem;
+          border: 1px solid var(--kemet-color-primary);
+        }
+
+        :host([ghost]) {
+          opacity: 0.5;
+          border-style: dashed;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /* Automatically set to true when an item is dragged to a new spot */
+      ghost: {
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  firstUpdated() {
+    this.draggable = true;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-sortable-item') || customElements.define('kemet-sortable-item', KemetSortableItem);

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

@@ -0,0 +1,93 @@
+import { html, css, LitElement } from 'lit';
+import { polyfill } from 'mobile-drag-drop';
+
+const getMouseOffset = (event) => {
+  const targetRect = event.target.getBoundingClientRect();
+  const offset = {
+    x: event.pageX - targetRect.left,
+    y: event.pageY - targetRect.top,
+  };
+
+  return offset;
+};
+
+const getElementVerticalCenter = (element) => {
+  const rect = element.getBoundingClientRect();
+  return (rect.bottom - rect.top) / 2;
+};
+
+export default class KemetSortable extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          display: flex;
+          gap: 1rem;
+          flex-direction: column;
+        }
+      `,
+    ];
+  }
+
+  firstUpdated() {
+    polyfill();
+
+    this.addEventListener('dragstart', event => this.handleDragStart(event), false);
+    this.addEventListener('dragenter', (event) => { event.preventDefault(); });
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  handleDragStart(event) {
+    this.sortableItem = event.target;
+
+    this.addEventListener('dragover', dragOverEvent => this.handleDragOver(dragOverEvent), false);
+    this.addEventListener('dragend', dragEndEvent => this.handleDragEnd(dragEndEvent), false);
+
+    setTimeout(() => {
+      this.sortableItem.ghost = true;
+    }, 0);
+  }
+
+  handleDragOver(event) {
+    event.preventDefault();
+
+    const { target } = event;
+
+    if (target && target.tagName === 'KEMET-SORTABLE-ITEM') {
+      const offset = getMouseOffset(event);
+      const middleY = getElementVerticalCenter(event.target);
+
+      if (offset.y > middleY) {
+        this.insertBefore(this.sortableItem, target.nextSibling);
+      } else {
+        this.insertBefore(this.sortableItem, target);
+      }
+    }
+  }
+
+  handleDragEnd(event) {
+    event.preventDefault();
+    this.sortableItem.ghost = false;
+
+    /**
+     * Fires when an item has been moved to a new spot
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-sortable-drag-end', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+          current: this.sortableItem,
+          all: this.querySelectorAll('kemet-sortable-item'),
+        },
+      }),
+    );
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-sortable') || customElements.define('kemet-sortable', KemetSortable);

package/dist/components/kemet-upload/kemet-upload-file.js

@@ -0,0 +1,167 @@
+import { html, css, LitElement } from 'lit';
+import { stylesLoaders } from './kemet-upload-file.loaders.styles.js';
+
+const formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  // eslint-disable-next-line no-restricted-properties
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+
+export default class KemetUploadFile extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          --kemet-upload-file-ripple-color: var(--kemet-color-primary);
+
+          color: var(--kemet-upload-file-color, var(--kemet-color-gray7));
+          display: grid;
+          gap: 1rem;
+          grid-template-columns: auto 1fr auto;
+          align-items: center;
+          padding: var(--kemet-upload-file-padding, 0.5rem 1rem);
+          border: var(--kemet-upload-file-border, 1px solid var(--kemet-color-primary));
+        }
+
+        :host([status='error']) {
+          border: 1px solid var(--kemet-color-error);
+        }
+
+        :host([status='complete']) {
+          border: 1px solid var(--kemet-color-success);
+        }
+
+        h3 {
+          margin: 0;
+        }
+
+        .percentage {
+          font-size: clamp(2rem, 3vw, 2.5rem);
+          align-self: center;
+          justify-self: center;
+        }
+
+        .indicator {
+          transform: scale(0.8);
+        }
+
+        :host([status='complete']) .message,
+        :host([status='complete']) .indicator {
+          color: var(--kemet-color-success);
+        }
+
+        :host([status='error']) .message,
+        :host([status='error']) .indicator {
+          color: var(--kemet-color-error);
+        }
+      `,
+      stylesLoaders,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The name of the file
+       */
+      name: {
+        type: String,
+      },
+      /**
+       * The number of bytes loaded
+       */
+      loaded: {
+        type: Number,
+      },
+      /**
+       * The file size in bytes
+       */
+      size: {
+        type: Number,
+      },
+      /**
+       * The file type
+       */
+      type: {
+        type: String,
+      },
+      /**
+       * The status of the file. Values are complete | uploading | error.
+       */
+      status: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * A percentage of file completion that's calculated by the loaded property
+       */
+      percent: {
+        type: Number,
+      },
+      /**
+       * An error message to give to users
+       */
+      message: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.loaded = 0;
+    this.size = 0;
+    this.percent = 0;
+  }
+
+  updated() {
+    this.percent = this.calculatePercent();
+  }
+
+  render() {
+    return html`
+      <div class="percentage" part="percentage">
+        <span>${this.percent}%</span>
+      </div>
+      <div>
+        <h3 part="filename">${this.name}</h3>
+        <span part="loaded">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>
+        ${this.message ? html`<div class="message" part="message">${this.message}</div>` : null}
+      </div>
+      <div class="indicator" part="indicator">
+        ${this.getStatusIcon()}
+      </div>
+    `;
+  }
+
+  calculatePercent() {
+    const percent = Math.round((this.loaded * 100.0) / this.size);
+    return percent > 100 ? 100 : percent;
+  }
+
+  getStatusIcon() {
+    if (this.status === 'uploading') {
+      return html`<div class="lds-ripple"><div></div><div></div></div>`;
+    }
+
+    if (this.status === 'complete') {
+      return html`<kemet-icon icon="check-circle" size="48"></kemet-icon>`;
+    }
+
+    if (this.status === 'error') {
+      return html`<kemet-icon icon="exclamation-circle" size="48"></kemet-icon>`;
+    }
+
+    return null;
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-upload-file') || customElements.define('kemet-upload-file', KemetUploadFile);

package/dist/components/kemet-upload/kemet-upload-file.loaders.styles.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+
+export const stylesLoaders = css`
+  .lds-ripple {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+
+  .lds-ripple div {
+    position: absolute;
+    border: 4px solid var(--kemet-upload-file-ripple-color);
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+  }
+
+  .lds-ripple div:nth-child(2) {
+    animation-delay: -0.5s;
+  }
+
+  @keyframes lds-ripple {
+    0% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+    4.9% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+    5% {
+      top: 36px;
+      left: 36px;
+      width: 0;
+      height: 0;
+      opacity: 1;
+    }
+    100% {
+      top: 0px;
+      left: 0px;
+      width: 72px;
+      height: 72px;
+      opacity: 0;
+    }
+  }
+`;

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

@@ -0,0 +1,260 @@
+import { html, css, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+const preventDefaults = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+export default class KemetUpload extends LitElement {
+  static get styles() {
+    return [
+      css`
+        :host {
+          color: var(--kemet-upload-color, var(--kemet-color-white));
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          height: var(--kemet-upload-height, 364px);
+          border: var(--kemet-upload-border, 1rem solid var(--kemet-color-white));
+          background-color: var(--kemet-upload-background-color, var(--kemet-color-primary));
+        }
+
+        :host([mobile]) {
+          display: block;
+          height: auto;
+        }
+
+        input {
+          display: none;
+        }
+
+        .button {
+          cursor: pointer;
+          font-size: 1rem;
+          display: block;
+          color: var(--kemet-color-white);
+          padding: 0.5rem 1rem;
+          border: 1px solid var(--kemet-color-white);
+          background-color: transparent;
+        }
+
+        .upload {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 1rem;
+          flex-direction: column;
+          border: 2px dashed var(--kemet-color-white);
+        }
+
+        :host([over]) .upload {
+          background-color: green;
+        }
+
+        :host([mobile]) .upload {
+          height: 280px;
+        }
+
+        .files {
+          display: flex;
+          gap: 1rem;
+          flex-direction: column;
+          padding: 0 1rem;
+          overflow: auto;
+          background-color: var(--kemet-color-white);
+        }
+
+        :host([mobile]) .files {
+          padding: 0;
+          max-height: 280px;
+        }
+
+        .heading {
+          font-size: 1.25rem;
+          margin: 0 0 2rem 0;
+        }
+
+        :host([no-drag-drop]) .heading {
+          display: none;
+        }
+
+        ::slotted(:first-child) {
+          margin-top: 1rem;
+        }
+      `,
+    ];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * A unique identifier for the component
+       */
+      slug: {
+        type: String,
+      },
+      /**
+       * Determines what file types are accepted
+       */
+      accept: {
+        type: String,
+      },
+      /**
+       * Allows for multiple files
+       */
+      multiple: {
+        type: Boolean,
+      },
+      /**
+       * Automatically is true when a file is being dragged over the upload area
+       */
+      over: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Descriptive text for the upload area
+       */
+      heading: {
+        type: String,
+      },
+      /**
+       * Displays the component in a mobile context
+       */
+      mobile: {
+        type: Boolean,
+        reflect: true,
+      },
+      /**
+       * Controls the point at which the component is considered mobile
+       */
+      breakpoint: {
+        type: String,
+        reflect: true,
+      },
+      /**
+       * If true if drag and drop support is not detected
+       */
+      noDragDrop: {
+        type: Boolean,
+        reflect: true,
+        attribute: 'no-drag-drop',
+      },
+      /**
+       * The maximum file size for uploads
+       */
+      maxSize: {
+        type: Number,
+        attribute: 'max-size',
+      },
+      /**
+       * The browse files button text
+       */
+      buttonLabel: {
+        type: String,
+        attribute: 'button-label',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.slug = 'upload';
+    this.breakpoint = '600px';
+    this.buttonLabel = 'Browse Files';
+    this.heading = 'Drag & Drop Files';
+  }
+
+  firstUpdated() {
+    this.fileInputElement = this.shadowRoot.querySelector('[type="file"]');
+    this.upload = this.shadowRoot.querySelector('.upload');
+
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.upload.addEventListener(eventName, event => preventDefaults(event), false);
+    });
+
+    ['dragenter', 'dragover'].forEach((eventName) => {
+      this.upload.addEventListener(eventName, () => { this.over = true; }, false);
+    });
+
+    ['dragleave', 'drop'].forEach((eventName) => {
+      this.upload.addEventListener(eventName, () => { this.over = false; }, false);
+    });
+
+    this.isMobile();
+    this.hasDragDrop();
+
+    window.addEventListener('resize', () => { this.isMobile(); });
+    this.upload.addEventListener('drop', event => this.handleDrop(event), false);
+  }
+
+  render() {
+    return html`
+      <div class="upload" part="upload">
+        <kemet-icon icon="cloud-arrow-up" size="128"></kemet-icon>
+        <input
+          type="file"
+          id=${this.slug}
+          ?multiple=${this.multiple}
+          accept=${ifDefined(this.accept) ? this.accept : null}
+          @change=${event => this.handleChange(event)}
+        />
+        <h3 class="heading" part="heading">${this.heading}</h3>
+        <label class="button" part="button" for=${this.slug}>${this.buttonLabel}</label>
+      </div>
+      <div class="files" part="files">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  handleChange(event) {
+    /**
+     * Fires when files have been added
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-upload-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+          files: this.fileInputElement.files,
+          fileElement: this.fileInputElement,
+        },
+      }),
+    );
+  }
+
+  handleDrop(event) {
+    /**
+     * Fires when files have been added
+     */
+    this.dispatchEvent(
+      new CustomEvent('kemet-upload-change', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          event,
+          files: event?.dataTransfer.files || [],
+          fileElement: this.fileInputElement,
+        },
+      }),
+    );
+  }
+
+  isMobile() {
+    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+    this.mobile = mediaQuery.matches;
+  }
+
+  hasDragDrop() {
+    if ('draggable' in document.createElement('span')) {
+      this.noDragDrop = false;
+    } else {
+      this.noDragDrop = true;
+    }
+  }
+}
+
+// eslint-disable-next-line no-unused-expressions
+customElements.get('kemet-upload') || customElements.define('kemet-upload', KemetUpload);