kemet-ui 1.3.1 → 2.0.0

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

@@ -1,76 +1,70 @@
+import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-
-export default class KemetTracker extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          display: flex;
-          justify-content: center;
-          align-items: flex-start;
-        }
-      `,
-    ];
-  }
-
-  static get properties() {
-    return {
-      /**
-       * The total number of steps
-       */
-      total: {
-        type: Number,
-      },
-      /**
-       * The point at which the tracker goes from mobile to standard
-       */
-      breakpoint: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.breakpoint = '767px';
-  }
-
-  firstUpdated() {
-    // elements
-    this.steps = this.querySelectorAll('kemet-tracker-step');
-
-    // methods exe
-    this.isMobile();
-
-    // events
-    window.addEventListener('resize', () => {
-      this.isMobile();
-    });
-  }
-
-  render() {
-    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
-  }
-
-  handleSlotChange() {
-    this.total = this.steps.length;
-
-    this.steps.forEach((step, index) => {
-      step.step = index + 1;
-      if (step.step === this.total) {
-        step.last = true;
+import { customElement, property, state } from 'lit/decorators.js';
+/**
+ *
+ * @since 1.2.0
+ * @status stable
+ *
+ * @prop {number} total - The total number of steps
+ * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard
+ *
+ */
+let KemetTracker = class KemetTracker extends LitElement {
+    constructor() {
+        super();
+        this.breakpoint = '767px';
+    }
+    firstUpdated() {
+        // elements
+        this.steps = this.querySelectorAll('kemet-tracker-step');
+        // methods exe
+        this.isMobile();
+        // events
+        window.addEventListener('resize', () => {
+            this.isMobile();
+        });
+    }
+    render() {
+        return html `<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+    }
+    handleSlotChange() {
+        this.total = this.steps.length;
+        this.steps.forEach((step, index) => {
+            step.step = index + 1;
+            if (step.step === this.total) {
+                step.last = true;
+            }
+        });
+    }
+    isMobile() {
+        const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+        this.steps.forEach((step) => {
+            step.mobile = mediaQuery.matches;
+        });
+    }
+};
+KemetTracker.styles = [
+    css `
+      :host {
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        width: 100%;
       }
-    });
-  }
-
-  isMobile() {
-    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
-
-    this.steps.forEach((step) => {
-      step.mobile = mediaQuery.matches;
-    });
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-tracker') || customElements.define('kemet-tracker', KemetTracker);
+    `,
+];
+__decorate([
+    property({ type: Number })
+], KemetTracker.prototype, "total", void 0);
+__decorate([
+    property({ type: String })
+], KemetTracker.prototype, "breakpoint", void 0);
+__decorate([
+    state()
+], KemetTracker.prototype, "steps", void 0);
+KemetTracker = __decorate([
+    customElement('kemet-tracker')
+], KemetTracker);
+export default KemetTracker;
+//# sourceMappingURL=kemet-tracker.js.map

package/dist/components/kemet-tracker/kemet-tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-tracker.js","sourceRoot":"","sources":["../../../src/components/kemet-tracker/kemet-tracker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;GAQG;AAGH,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,UAAU;IAqBlD;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;IAC5B,CAAC;IAED,YAAY;QACV,WAAW;QACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAEzD,cAAc;QACd,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,SAAS;QACT,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,qBAAqB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAE/B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACjC,IAAI,CAAC,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;YACtB,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,EAAE;gBAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;aAClB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,QAAQ;QACN,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QAExE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AA5DQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;KAOF;CACF,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACR;AAGnB;IADC,KAAK,EAAE;2CACG;AAnBQ,YAAY;IADhC,aAAa,CAAC,eAAe,CAAC;GACV,YAAY,CA6DhC;eA7DoB,YAAY","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @prop {number} total - The total number of steps\n * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard\n *\n */\n\n@customElement('kemet-tracker')\nexport default class KemetTracker extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        justify-content: center;\n        align-items: flex-start;\n        width: 100%;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  total: number;\n\n  @property({ type: String })\n  breakpoint: string;\n\n  @state()\n  steps: any;\n\n  constructor() {\n    super();\n    this.breakpoint = '767px';\n  }\n\n  firstUpdated() {\n    // elements\n    this.steps = this.querySelectorAll('kemet-tracker-step');\n\n    // methods exe\n    this.isMobile();\n\n    // events\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    this.total = this.steps.length;\n\n    this.steps.forEach((step, index) => {\n      step.step = index + 1;\n      if (step.step === this.total) {\n        step.last = true;\n      }\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n\n    this.steps.forEach((step) => {\n      step.mobile = mediaQuery.matches;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker': KemetTracker\n  }\n}\n"]}

package/dist/components/kemet-tracker/styles.d.ts

@@ -0,0 +1 @@
+export declare const stylesStep: import("lit").CSSResult;

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

@@ -0,0 +1,111 @@
+import { css } from 'lit';
+export const stylesStep = css `
+  :host {
+    --kemet-tracker-step-dot-size: 50px;
+    --kemet-tracker-step-dot-size-mobile: 25px;
+    --kemet-tracker-step-dot-gap: 4px;
+    --kemet-tracker-step-standard-line-weight: 1px;
+    --kemet-tracker-step-completed-line-weight: 3px;
+    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;
+
+    position: relative;
+    width: 100%;
+    text-align: center;
+  }
+
+  .dot {
+    font-size: var(--kemet-tracker-step-dot-font-size, 90%);
+    color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+    width: var(--kemet-tracker-step-dot-size);
+    height: var(--kemet-tracker-step-dot-size);
+    border-radius: 100%;
+    transition: var(--kemet-tracker-step-dot-transition);
+    background-color: var(--kemet-tracker-step-dot-background-color, var(--kemet-color-white));
+  }
+
+  .dot::after {
+    content: "";
+    width: unset;
+    height: unset;
+    position: absolute;
+    top: var(--kemet-tracker-step-dot-gap);
+    left: var(--kemet-tracker-step-dot-gap);
+    right: var(--kemet-tracker-step-dot-gap);
+    bottom: var(--kemet-tracker-step-dot-gap);
+    z-index: -1;
+    border-radius: 100%;
+    transition: var(--kemet-tracker-step-dot-transition);
+    border: var(--kemet-tracker-step-dot-border, 1px solid var(--kemet-color-primary));
+    background-color: var(--kemet-tracker-step-dot-fill-color, transparent);
+  }
+
+  :host([completed]) .dot {
+    color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));
+  }
+
+  :host([completed]) .dot::after {
+    border: 0;
+    background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));
+  }
+
+  :host([current]) .dot.animate {
+    color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));
+  }
+
+  :host([current]) .dot.animate::after {
+    border: 0;
+    background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));
+  }
+
+  :host([mobile]) .dot {
+    width: var(--kemet-tracker-step-dot-size-mobile);
+    height: var(--kemet-tracker-step-dot-size-mobile);
+  }
+
+  .line {
+    display: block;
+    position: absolute;
+    left: 50%;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+
+    /* standard */
+    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+    height: var(--kemet-tracker-step-standard-line-weight);
+    background-color: var(--kemet-tracker-step-line-color, var(--kemet-color-primary));
+  }
+
+  .line.completed {
+    width: 100%;
+    transform: scaleX(0);
+    transform-origin: left center;
+    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+    height: var(--kemet-tracker-step-completed-line-weight);
+    background-color: var(--kemet-tracker-step-completed-line-color, var(--kemet-color-primary));
+    animation-name: grow;
+    animation-delay: 1s;
+    animation-duration: 600ms;
+    animation-fill-mode: forwards;
+  }
+
+  :host([mobile]) .line {
+    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+  }
+
+  :host([mobile]) .line.completed {
+    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+  }
+
+  @keyframes grow {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/kemet-tracker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-tracker/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4G5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesStep = css`\n  :host {\n    --kemet-tracker-step-dot-size: 50px;\n    --kemet-tracker-step-dot-size-mobile: 25px;\n    --kemet-tracker-step-dot-gap: 4px;\n    --kemet-tracker-step-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\n\n    position: relative;\n    width: 100%;\n    text-align: center;\n  }\n\n  .dot {\n    font-size: var(--kemet-tracker-step-dot-font-size, 90%);\n    color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n    width: var(--kemet-tracker-step-dot-size);\n    height: var(--kemet-tracker-step-dot-size);\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    background-color: var(--kemet-tracker-step-dot-background-color, var(--kemet-color-white));\n  }\n\n  .dot::after {\n    content: \"\";\n    width: unset;\n    height: unset;\n    position: absolute;\n    top: var(--kemet-tracker-step-dot-gap);\n    left: var(--kemet-tracker-step-dot-gap);\n    right: var(--kemet-tracker-step-dot-gap);\n    bottom: var(--kemet-tracker-step-dot-gap);\n    z-index: -1;\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    border: var(--kemet-tracker-step-dot-border, 1px solid var(--kemet-color-primary));\n    background-color: var(--kemet-tracker-step-dot-fill-color, transparent);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));\n  }\n\n  :host([mobile]) .dot {\n    width: var(--kemet-tracker-step-dot-size-mobile);\n    height: var(--kemet-tracker-step-dot-size-mobile);\n  }\n\n  .line {\n    display: block;\n    position: absolute;\n    left: 50%;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n\n    /* standard */\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n    height: var(--kemet-tracker-step-standard-line-weight);\n    background-color: var(--kemet-tracker-step-line-color, var(--kemet-color-primary));\n  }\n\n  .line.completed {\n    width: 100%;\n    transform: scaleX(0);\n    transform-origin: left center;\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n    height: var(--kemet-tracker-step-completed-line-weight);\n    background-color: var(--kemet-tracker-step-completed-line-color, var(--kemet-color-primary));\n    animation-name: grow;\n    animation-delay: 1s;\n    animation-duration: 600ms;\n    animation-fill-mode: forwards;\n  }\n\n  :host([mobile]) .line {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n  }\n\n  :host([mobile]) .line.completed {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n  }\n\n  @keyframes grow {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n  }\n`;\n"]}

package/dist/components/kemet-tracker/types.d.ts

@@ -0,0 +1,13 @@
+export interface KemetTrackerInterface extends HTMLElement {
+    total?: number;
+    breakpoint?: string;
+}
+export interface KemetTrackerStepInterface extends HTMLElement {
+    step?: number;
+    completed?: boolean;
+    current?: boolean;
+    last?: boolean;
+    mobile?: boolean;
+    hideDotContent?: boolean;
+    completedSize?: number;
+}

package/dist/components/kemet-tracker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/kemet-tracker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-tracker/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetTrackerInterface extends HTMLElement {\n  total?: number,\n  breakpoint?: string,\n}\n\nexport interface KemetTrackerStepInterface extends HTMLElement {\n  step?: number,\n  completed?: boolean,\n  current?: boolean,\n  last?: boolean,\n  mobile?: boolean,\n  hideDotContent?: boolean,\n  completedSize?: number,\n}\n"]}

package/dist/components/kemet-upload/kemet-upload-file.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-upload-file
+ * @summary A file in the upload.
+ *
+ * @prop {string} name - The name of the file
+ * @prop {number} loaded - The number of bytes loaded
+ * @prop {number} size - The file size in bytes
+ * @prop {string} type - The file type
+ * @prop {string} status - The status of the file. Values are complete | uploading | error.
+ * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.
+ * @prop {string} message - An error message to give to users
+ *
+ * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).
+ * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.
+ * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).
+ *
+ * @csspart percentage - Area that displays the percentage.
+ * @csspart filename - Area that displays file name.
+ * @csspart loaded - Area that displays how much has uploaded.
+ * @csspart message - Area for the error message.
+ * @csspart indicator - Area for status icon.
+ *
+ */
+export default class KemetUploadFile extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name: string;
+    loaded: number;
+    size: number;
+    type: string;
+    status: string;
+    percent: number;
+    message: string;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    calculatePercent(): number;
+    getStatusIcon(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-upload-file': KemetUploadFile;
+    }
+}

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

@@ -1,167 +1,110 @@
-import { html, css, LitElement } from 'lit';
-import { stylesLoaders } from './kemet-upload-file.loaders.styles.js';
-
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesUploadFile } from './styles';
+import { stylesLoaders } from './styles';
 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]}`;
+    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 / 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`
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-upload-file
+ * @summary A file in the upload.
+ *
+ * @prop {string} name - The name of the file
+ * @prop {number} loaded - The number of bytes loaded
+ * @prop {number} size - The file size in bytes
+ * @prop {string} type - The file type
+ * @prop {string} status - The status of the file. Values are complete | uploading | error.
+ * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.
+ * @prop {string} message - An error message to give to users
+ *
+ * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).
+ * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.
+ * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).
+ *
+ * @csspart percentage - Area that displays the percentage.
+ * @csspart filename - Area that displays file name.
+ * @csspart loaded - Area that displays how much has uploaded.
+ * @csspart message - Area for the error message.
+ * @csspart indicator - Area for status icon.
+ *
+ */
+let KemetUploadFile = class KemetUploadFile extends LitElement {
+    constructor() {
+        super(...arguments);
+        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}
+        ${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>`;
+    calculatePercent() {
+        const percent = Math.round((this.loaded * 100.0) / this.size);
+        return percent > 100 ? 100 : percent;
     }
-
-    if (this.status === 'error') {
-      return html`<kemet-icon icon="exclamation-circle" size="48"></kemet-icon>`;
+    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;
     }
-
-    return null;
-  }
-}
-
-// eslint-disable-next-line no-unused-expressions
-customElements.get('kemet-upload-file') || customElements.define('kemet-upload-file', KemetUploadFile);
+};
+KemetUploadFile.styles = [stylesUploadFile, stylesLoaders];
+__decorate([
+    property({ type: String })
+], KemetUploadFile.prototype, "name", void 0);
+__decorate([
+    property({ type: Number })
+], KemetUploadFile.prototype, "loaded", void 0);
+__decorate([
+    property({ type: Number })
+], KemetUploadFile.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], KemetUploadFile.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KemetUploadFile.prototype, "status", void 0);
+__decorate([
+    property({ type: Number })
+], KemetUploadFile.prototype, "percent", void 0);
+__decorate([
+    property({ type: String })
+], KemetUploadFile.prototype, "message", void 0);
+KemetUploadFile = __decorate([
+    customElement('kemet-upload-file')
+], KemetUploadFile);
+export default KemetUploadFile;
+//# sourceMappingURL=kemet-upload-file.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-upload-file.js","sourceRoot":"","sources":["../../../src/components/kemet-upload/kemet-upload-file.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesUploadFile } from './styles';\nimport { stylesLoaders } from './styles';\n\nconst formatBytes = (bytes, decimals = 2) => {\n  if (bytes === 0) return '0 Bytes';\n\n  const k = 1024;\n  const dm = decimals < 0 ? 0 : decimals;\n  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  // eslint-disable-next-line no-restricted-properties\n  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-upload-file\n * @summary A file in the upload.\n *\n * @prop {string} name - The name of the file\n * @prop {number} loaded - The number of bytes loaded\n * @prop {number} size - The file size in bytes\n * @prop {string} type - The file type\n * @prop {string} status - The status of the file. Values are complete | uploading | error.\n * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.\n * @prop {string} message - An error message to give to users\n *\n * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).\n * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.\n * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).\n *\n * @csspart percentage - Area that displays the percentage.\n * @csspart filename - Area that displays file name.\n * @csspart loaded - Area that displays how much has uploaded.\n * @csspart message - Area for the error message.\n * @csspart indicator - Area for status icon.\n *\n */\n\n@customElement('kemet-upload-file')\nexport default class KemetUploadFile extends LitElement {\n  static styles = [stylesUploadFile, stylesLoaders];\n\n  @property({ type: String })\n  name: string;\n\n  @property({ type: Number })\n  loaded: number = 0;\n\n  @property({ type: Number })\n  size: number = 0;\n\n  @property({ type: String })\n  type: string;\n\n  @property({ type: String, reflect: true })\n  status: string;\n\n  @property({ type: Number })\n  percent: number = 0;\n\n  @property({ type: String })\n  message: string;\n\n  updated() {\n    this.percent = this.calculatePercent();\n  }\n\n  render() {\n    return html`\n      <div class=\"percentage\" part=\"percentage\">\n        <span>${this.percent}%</span>\n      </div>\n      <div>\n        <h3 part=\"filename\">${this.name}</h3>\n        <span part=\"loaded\">${formatBytes(this.loaded)} / ${formatBytes(this.size)}</span>\n        ${this.message ? html`<div class=\"message\" part=\"message\">${this.message}</div>` : null}\n      </div>\n      <div class=\"indicator\" part=\"indicator\">\n        ${this.getStatusIcon()}\n      </div>\n    `;\n  }\n\n  calculatePercent() {\n    const percent = Math.round((this.loaded * 100.0) / this.size);\n    return percent > 100 ? 100 : percent;\n  }\n\n  getStatusIcon() {\n    if (this.status === 'uploading') {\n      return html`<div class=\"lds-ripple\"><div></div><div></div></div>`;\n    }\n\n    if (this.status === 'complete') {\n      return html`<kemet-icon icon=\"check-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon icon=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-upload-file': KemetUploadFile\n  }\n}\n"]}