kemet-ui 4.0.2 → 5.0.0

package/dist/elements/input-file/index.d.ts

@@ -0,0 +1,59 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import '../icon/index.js';
+
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-input-file
+ * @summary Displays a file to be uploaded.
+ *
+ * @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
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @cssproperty --kemet-upload-file-color - The default text color.
+ * @cssproperty --kemet-upload-file-padding - The padding around the file.
+ * @cssproperty --kemet-upload-file-border - The border around the file.
+ *
+ * @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.
+ *
+ * @fires kemet-input-file-mounted - Fired when the input file is mounted to the DOM
+ * @detail {HTMLElement} element - The input file element
+ */
+declare class InputFile extends LitElement {
+    static styles: lit.CSSResult[];
+    name: string;
+    loaded: number;
+    size: number;
+    type: string;
+    status: string;
+    percent: number;
+    message: string;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    calculatePercent(): number;
+    getStatusIcon(): lit_html.TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-input-file': InputFile;
+    }
+}
+
+export { InputFile as default };

package/dist/elements/input-file/index.js

@@ -0,0 +1,438 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/input-file/index.ts
+import { html as html2, LitElement as LitElement2 } from "lit";
+import { customElement as customElement2, property as property2 } from "lit/decorators.js";
+
+// src/elements/icon/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { isTemplateResult } from "lit/directive-helpers.js";
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/icon/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+`;
+
+// src/elements/icon/index.ts
+var CACHEABLE_ERROR = /* @__PURE__ */ Symbol();
+var RETRYABLE_ERROR = /* @__PURE__ */ Symbol();
+var parser;
+var iconCache = /* @__PURE__ */ new Map();
+var MAX_CONCURRENT_REQUESTS = 10;
+var requestQueue = [];
+var activeRequests = 0;
+function queueRequest(callback) {
+  if (activeRequests < MAX_CONCURRENT_REQUESTS) {
+    activeRequests++;
+    callback();
+  } else {
+    requestQueue.push(callback);
+  }
+}
+function requestComplete() {
+  activeRequests--;
+  if (requestQueue.length > 0) {
+    const nextRequest = requestQueue.shift();
+    if (nextRequest) {
+      activeRequests++;
+      nextRequest();
+    }
+  }
+}
+var KemetIcon = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.name = "house";
+    this.library = "bootstrap";
+    this.family = "regular";
+    this.size = 16;
+    this.dom = "initializing";
+    this.svg = null;
+    this.url = "https://unpkg.com/bootstrap-icons@latest/icons";
+    /** @internal */
+    this.isVisible = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateUrl();
+    if (!this.svg) {
+      this.isVisible = true;
+      this.setIcon();
+    }
+  }
+  updated() {
+    this.updateUrl();
+    this.updateSize();
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-icon-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    if (this.svg) {
+      return this.svg;
+    }
+    if (!this.isVisible) {
+      this.isVisible = true;
+      this.setIcon();
+    }
+    return html`<svg part="svg" width="${this.size}" height="${this.size}" viewBox="0 0 16 16"></svg>`;
+  }
+  /** Public method to force icon loading */
+  loadIcon() {
+    this.isVisible = true;
+    this.setIcon();
+  }
+  async setIcon() {
+    if (!this.isVisible) return;
+    let iconResolver = iconCache.get(`${this.family}/${this.name}`);
+    if (!iconResolver) {
+      iconResolver = this.resolveIcon();
+      iconCache.set(`${this.family}/${this.name}`, iconResolver);
+    }
+    const svg = await iconResolver;
+    if (svg === RETRYABLE_ERROR) {
+      iconCache.delete(`${this.family}/${this.name}`);
+    }
+    if (isTemplateResult(svg)) {
+      this.svg = svg;
+    } else if (svg instanceof SVGSVGElement) {
+      this.svg = svg.cloneNode(true);
+    }
+  }
+  updateUrl() {
+    switch (this.library) {
+      case "fontawesome" /* FONTAWESOME */:
+        this.version = this.version || "7.3.1";
+        this.url = `https://unpkg.com/@fortawesome/fontawesome-free@${this.version}/svgs`;
+        break;
+      case "bootstrap" /* BOOTSTRAP */:
+        this.version = this.version || "1.11.3";
+        this.url = `https://unpkg.com/bootstrap-icons@${this.version}/icons`;
+        break;
+    }
+  }
+  async resolveIcon() {
+    return new Promise((resolve) => {
+      queueRequest(async () => {
+        let fileData;
+        let fetchURL = `${this.url}/${this.family}/${this.name}.svg`;
+        switch (this.library) {
+          case "fontawesome" /* FONTAWESOME */:
+            fetchURL = `${this.url}/${this.family}/${this.name}.svg`;
+            break;
+          case "bootstrap" /* BOOTSTRAP */:
+            fetchURL = `${this.url}/${this.name}.svg`;
+            break;
+        }
+        try {
+          fileData = await fetch(fetchURL);
+          if (!fileData.ok) {
+            requestComplete();
+            resolve(fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR);
+            return;
+          }
+        } catch {
+          requestComplete();
+          resolve(RETRYABLE_ERROR);
+          return;
+        }
+        try {
+          const div = document.createElement("div");
+          div.innerHTML = await fileData.text();
+          const svg = div.firstElementChild;
+          if (svg?.tagName?.toLowerCase() !== "svg") {
+            requestComplete();
+            resolve(CACHEABLE_ERROR);
+            return;
+          }
+          if (!parser) parser = new DOMParser();
+          const doc = parser.parseFromString(svg.outerHTML, "text/html");
+          const svgEl = doc.body.querySelector("svg");
+          if (!svgEl) {
+            requestComplete();
+            resolve(CACHEABLE_ERROR);
+            return;
+          }
+          svgEl.part.add("svg");
+          svgEl.setAttribute("width", `${this.size}px`);
+          svgEl.setAttribute("height", `${this.size}px`);
+          requestComplete();
+          resolve(document.adoptNode(svgEl));
+        } catch {
+          requestComplete();
+          resolve(CACHEABLE_ERROR);
+        }
+      });
+    });
+  }
+  updateSize() {
+    if (this.svg) {
+      const svg = this.svg;
+      svg.setAttribute("width", `${this.size}px`);
+      svg.setAttribute("height", `${this.size}px`);
+    }
+  }
+};
+KemetIcon.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "library", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "family", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetIcon.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], KemetIcon.prototype, "version", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetIcon.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetIcon.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetIcon.prototype, "svg", 2);
+__decorateClass([
+  state()
+], KemetIcon.prototype, "url", 2);
+KemetIcon = __decorateClass([
+  customElement("kemet-icon")
+], KemetIcon);
+
+// src/elements/input-file/styles.css.ts
+import { css as css2 } from "lit";
+var styles_css_default2 = css2`:host {
+  --kemet-upload-file-ripple-color: var(--kemet-color-font-active);
+  --kemet-upload-file-color: var(--kemet-color-font-base);
+  --kemet-upload-file-padding: 0.5rem 1rem;
+  --kemet-upload-file-border: 1px solid var(--kemet-color-font-base);
+
+  color: var(--kemet-upload-file-color);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  height: 100%;
+  max-height: 50%;
+  padding: var(--kemet-upload-file-padding);
+  border: var(--kemet-upload-file-border);
+}
+
+:host([status='error']) {
+  border: 1px solid var(--kemet-color-font-error);
+}
+
+:host([status='complete']) {
+  border: 1px solid var(--kemet-color-font-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: rgb(var(--kemet-color-success));
+}
+
+:host([status='error']) .message,
+:host([status='error']) .indicator {
+  color: rgb(var(--kemet-color-error));
+}
+`;
+
+// src/elements/input-file/loaders.css.ts
+import { css as css3 } from "lit";
+var loaders_css_default = css3`.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: var(--kemet-border-radius-circle);
+  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;
+  }
+}
+`;
+
+// src/elements/input-file/index.ts
+var 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));
+  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
+};
+var InputFile = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.loaded = 0;
+    this.size = 0;
+    this.percent = 0;
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-input-file-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated() {
+    this.percent = this.calculatePercent();
+  }
+  render() {
+    return html2`
+      <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 ? html2`<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 / this.size);
+    return percent > 100 ? 100 : percent;
+  }
+  getStatusIcon() {
+    if (this.status === "uploading") {
+      return html2`<div class="lds-ripple"><div></div><div></div></div>`;
+    }
+    if (this.status === "complete") {
+      return html2`<kemet-icon name="check-circle" size="48"></kemet-icon>`;
+    }
+    if (this.status === "error") {
+      return html2`<kemet-icon name="exclamation-circle" size="48"></kemet-icon>`;
+    }
+    return null;
+  }
+};
+InputFile.styles = [styles_css_default2, loaders_css_default];
+__decorateClass([
+  property2({ type: String })
+], InputFile.prototype, "name", 2);
+__decorateClass([
+  property2({ type: Number })
+], InputFile.prototype, "loaded", 2);
+__decorateClass([
+  property2({ type: Number })
+], InputFile.prototype, "size", 2);
+__decorateClass([
+  property2({ type: String })
+], InputFile.prototype, "type", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], InputFile.prototype, "status", 2);
+__decorateClass([
+  property2({ type: Number })
+], InputFile.prototype, "percent", 2);
+__decorateClass([
+  property2({ type: String })
+], InputFile.prototype, "message", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], InputFile.prototype, "polarity", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], InputFile.prototype, "dom", 2);
+InputFile = __decorateClass([
+  customElement2("kemet-input-file")
+], InputFile);
+export {
+  InputFile as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/input-file/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input-file/index.ts","../../../src/elements/icon/index.ts","../../../src/utilities/events.ts","../../../src/elements/icon/styles.css.ts","../../../src/elements/input-file/styles.css.ts","../../../src/elements/input-file/loaders.css.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../icon';\nimport styles from './styles.css.ts';\nimport loaderStyles from './loaders.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nconst formatBytes = (bytes: number, 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  return `${parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;\n};\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-input-file\n * @summary Displays a file to be uploaded.\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 * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @cssproperty --kemet-upload-file-color - The default text color.\n * @cssproperty --kemet-upload-file-padding - The padding around the file.\n * @cssproperty --kemet-upload-file-border - The border around the file.\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 * @fires kemet-input-file-mounted - Fired when the input file is mounted to the DOM\n * @detail {HTMLElement} element - The input file element\n */\n\n@customElement('kemet-input-file')\nexport default class InputFile extends LitElement {\n  static styles = [styles, loaderStyles];\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  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-input-file-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\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 name=\"check-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    if (this.status === 'error') {\n      return html`<kemet-icon name=\"exclamation-circle\" size=\"48\"></kemet-icon>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-file': InputFile\n  }\n}\n","import { html, HTMLTemplateResult, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\n// Request queue with concurrency limit\nconst MAX_CONCURRENT_REQUESTS = 10;\nconst requestQueue: Array<() => void> = [];\nlet activeRequests = 0;\n\nfunction queueRequest(callback: () => void) {\n  if (activeRequests < MAX_CONCURRENT_REQUESTS) {\n    activeRequests++;\n    callback();\n  } else {\n    requestQueue.push(callback);\n  }\n}\n\nfunction requestComplete() {\n  activeRequests--;\n  if (requestQueue.length > 0) {\n    const nextRequest = requestQueue.shift();\n    if (nextRequest) {\n      activeRequests++;\n      nextRequest();\n    }\n  }\n}\n\nexport enum EnumLibrary {\n  FONTAWESOME = 'fontawesome',\n  BOOTSTRAP = 'bootstrap',\n}\n\n/**\n * @since 5.0.0\n * @status stable\n *\n * @tagname kemet-icon\n * @summary An element that represents an icon from a predefined set of open sourced icons.\n *\n * @prop {string} name - The name of the icon to reference.\n * @prop {string} library - The library of icons to use. Values include: (bootstrap | fontawesome)\n * @prop {string} family - The family of icons to use. The family is relative to the library being used. Font awesome values include: (regular | solid | brand)\n * @prop {string} version - The version of the icon library to use. Use latest to grab the most recent version.\n * @prop {number} size - The width and height of the icon in pixels.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-icon-mounted - Fired when the icon is mounted to the DOM\n * @detail {HTMLElement} element - The icon element\n *\n */\n\n@customElement('kemet-icon')\nexport default class KemetIcon extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  name: string = 'house';\n\n  @property({ type: String })\n  library: string = 'bootstrap';\n\n  @property({ type: String })\n  family: string = 'regular';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: String })\n  version?: string;\n\n  @property({ type: String, reflect: true })\n  polarity?: 'light' | 'dark';\n\n  @property({ type: String, reflect: true })\n  dom: string = 'initializing';\n\n  /** @internal */\n  @state()\n  private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /** @internal */\n  @state()\n  private url: string = 'https://unpkg.com/bootstrap-icons@latest/icons';\n\n  /** @internal */\n  private isVisible: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Load icon when connected to DOM\n    this.updateUrl();\n    if (!this.svg) {\n      this.isVisible = true;\n      this.setIcon();\n    }\n  }\n\n  updated() {\n    this.updateUrl();\n    this.updateSize();\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-icon-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    // Return the svg if it's loaded, otherwise show placeholder\n    if (this.svg) {\n      return this.svg;\n    }\n\n    // If not loaded, trigger loading\n    if (!this.isVisible) {\n      this.isVisible = true;\n      this.setIcon();\n    }\n\n    return html`<svg part=\"svg\" width=\"${this.size}\" height=\"${this.size}\" viewBox=\"0 0 16 16\"></svg>`;\n  }\n\n  /** Public method to force icon loading */\n  public loadIcon() {\n    this.isVisible = true;\n    this.setIcon();\n  }\n\n  async setIcon() {\n    if (!this.isVisible) return;\n\n    let iconResolver = iconCache.get(`${this.family}/${this.name}`);\n\n    if (!iconResolver) {\n      iconResolver = this.resolveIcon();\n      iconCache.set(`${this.family}/${this.name}`, iconResolver);\n    }\n\n    const svg = await iconResolver;\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(`${this.family}/${this.name}`);\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n    } else if (svg instanceof SVGSVGElement) {\n      // Clone the SVG so each icon instance gets its own copy\n      this.svg = svg.cloneNode(true) as SVGSVGElement;\n    }\n  }\n\n  private updateUrl() {\n    switch (this.library) {\n      case EnumLibrary.FONTAWESOME:\n        this.version = this.version || '7.3.1';\n        this.url = `https://unpkg.com/@fortawesome/fontawesome-free@${this.version}/svgs`;\n        break;\n      case EnumLibrary.BOOTSTRAP:\n        this.version = this.version || '1.11.3';\n        this.url = `https://unpkg.com/bootstrap-icons@${this.version}/icons`;\n        break;\n    }\n  }\n\n  private async resolveIcon(): Promise<SVGResult> {\n    return new Promise((resolve) => {\n      queueRequest(async () => {\n        let fileData: Response;\n        let fetchURL: string = `${this.url}/${this.family}/${this.name}.svg`;\n\n        switch (this.library) {\n          case EnumLibrary.FONTAWESOME:\n            fetchURL = `${this.url}/${this.family}/${this.name}.svg`;\n            break;\n          case EnumLibrary.BOOTSTRAP:\n            fetchURL = `${this.url}/${this.name}.svg`;\n            break;\n        }\n\n        try {\n          fileData = await fetch(fetchURL);\n          if (!fileData.ok) {\n            requestComplete();\n            resolve(fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR);\n            return;\n          }\n        } catch {\n          requestComplete();\n          resolve(RETRYABLE_ERROR);\n          return;\n        }\n\n        try {\n          const div = document.createElement('div');\n          div.innerHTML = await fileData.text();\n\n          const svg = div.firstElementChild;\n          if (svg?.tagName?.toLowerCase() !== 'svg') {\n            requestComplete();\n            resolve(CACHEABLE_ERROR);\n            return;\n          }\n\n          if (!parser) parser = new DOMParser();\n          const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n          const svgEl = doc.body.querySelector('svg');\n          if (!svgEl) {\n            requestComplete();\n            resolve(CACHEABLE_ERROR);\n            return;\n          }\n\n          svgEl.part.add('svg');\n          svgEl.setAttribute('width', `${this.size}px`);\n          svgEl.setAttribute('height', `${this.size}px`);\n\n          requestComplete();\n          resolve(document.adoptNode(svgEl));\n        } catch {\n          requestComplete();\n          resolve(CACHEABLE_ERROR);\n        }\n      });\n    });\n  }\n\n  private updateSize() {\n    if (this.svg) {\n      const svg = this.svg as SVGElement;\n      svg.setAttribute('width', `${this.size}px`);\n      svg.setAttribute('height', `${this.size}px`);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-icon': KemetIcon\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n}\n`;\n","import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-file-ripple-color: var(--kemet-color-font-active);\n  --kemet-upload-file-color: var(--kemet-color-font-base);\n  --kemet-upload-file-padding: 0.5rem 1rem;\n  --kemet-upload-file-border: 1px solid var(--kemet-color-font-base);\n\n  color: var(--kemet-upload-file-color);\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  height: 100%;\n  max-height: 50%;\n  padding: var(--kemet-upload-file-padding);\n  border: var(--kemet-upload-file-border);\n}\n\n:host([status='error']) {\n  border: 1px solid var(--kemet-color-font-error);\n}\n\n:host([status='complete']) {\n  border: 1px solid var(--kemet-color-font-success);\n}\n\nh3 {\n  margin: 0;\n}\n\n.percentage {\n  font-size: clamp(2rem, 3vw, 2.5rem);\n  align-self: center;\n  justify-self: center;\n}\n\n.indicator {\n  transform: scale(0.8);\n}\n\n:host([status='complete']) .message,\n:host([status='complete']) .indicator {\n  color: rgb(var(--kemet-color-success));\n}\n\n:host([status='error']) .message,\n:host([status='error']) .indicator {\n  color: rgb(var(--kemet-color-error));\n}\n`;\n","import { css } from 'lit';\n\nexport default css`.lds-ripple {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n\n.lds-ripple div {\n  position: absolute;\n  border: 4px solid var(--kemet-upload-file-ripple-color);\n  opacity: 1;\n  border-radius: var(--kemet-border-radius-circle);\n  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n.lds-ripple div:nth-child(2) {\n  animation-delay: -0.5s;\n}\n\n@keyframes lds-ripple {\n  0% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  4.9% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  5% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 1;\n  }\n  100% {\n    top: 0px;\n    left: 0px;\n    width: 72px;\n    height: 72px;\n    opacity: 0;\n  }\n}\n`;\n"],"mappings":"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","names":["html","LitElement","customElement","property","css","styles_css_default","css","LitElement","html","styles_css_default","property","customElement"]}

package/dist/elements/input-file/loaders.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/input-file/loaders.css.js

@@ -0,0 +1,56 @@
+// src/elements/input-file/loaders.css.ts
+import { css } from "lit";
+var loaders_css_default = 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: var(--kemet-border-radius-circle);
+  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;
+  }
+}
+`;
+export {
+  loaders_css_default as default
+};
+//# sourceMappingURL=loaders.css.js.map

package/dist/elements/input-file/loaders.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input-file/loaders.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`.lds-ripple {\n  display: inline-block;\n  position: relative;\n  width: 80px;\n  height: 80px;\n}\n\n.lds-ripple div {\n  position: absolute;\n  border: 4px solid var(--kemet-upload-file-ripple-color);\n  opacity: 1;\n  border-radius: var(--kemet-border-radius-circle);\n  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;\n}\n\n.lds-ripple div:nth-child(2) {\n  animation-delay: -0.5s;\n}\n\n@keyframes lds-ripple {\n  0% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  4.9% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 0;\n  }\n  5% {\n    top: 36px;\n    left: 36px;\n    width: 0;\n    height: 0;\n    opacity: 1;\n  }\n  100% {\n    top: 0px;\n    left: 0px;\n    width: 72px;\n    height: 72px;\n    opacity: 0;\n  }\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,sBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/input-file/styles.css.d.ts

@@ -0,0 +1,5 @@
+import * as lit from 'lit';
+
+declare const _default: lit.CSSResult;
+
+export { _default as default };

package/dist/elements/input-file/styles.css.js

@@ -0,0 +1,55 @@
+// src/elements/input-file/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  --kemet-upload-file-ripple-color: var(--kemet-color-font-active);
+  --kemet-upload-file-color: var(--kemet-color-font-base);
+  --kemet-upload-file-padding: 0.5rem 1rem;
+  --kemet-upload-file-border: 1px solid var(--kemet-color-font-base);
+
+  color: var(--kemet-upload-file-color);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  height: 100%;
+  max-height: 50%;
+  padding: var(--kemet-upload-file-padding);
+  border: var(--kemet-upload-file-border);
+}
+
+:host([status='error']) {
+  border: 1px solid var(--kemet-color-font-error);
+}
+
+:host([status='complete']) {
+  border: 1px solid var(--kemet-color-font-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: rgb(var(--kemet-color-success));
+}
+
+:host([status='error']) .message,
+:host([status='error']) .indicator {
+  color: rgb(var(--kemet-color-error));
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/input-file/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input-file/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-upload-file-ripple-color: var(--kemet-color-font-active);\n  --kemet-upload-file-color: var(--kemet-color-font-base);\n  --kemet-upload-file-padding: 0.5rem 1rem;\n  --kemet-upload-file-border: 1px solid var(--kemet-color-font-base);\n\n  color: var(--kemet-upload-file-color);\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  height: 100%;\n  max-height: 50%;\n  padding: var(--kemet-upload-file-padding);\n  border: var(--kemet-upload-file-border);\n}\n\n:host([status='error']) {\n  border: 1px solid var(--kemet-color-font-error);\n}\n\n:host([status='complete']) {\n  border: 1px solid var(--kemet-color-font-success);\n}\n\nh3 {\n  margin: 0;\n}\n\n.percentage {\n  font-size: clamp(2rem, 3vw, 2.5rem);\n  align-self: center;\n  justify-self: center;\n}\n\n.indicator {\n  transform: scale(0.8);\n}\n\n:host([status='complete']) .message,\n:host([status='complete']) .indicator {\n  color: rgb(var(--kemet-color-success));\n}\n\n:host([status='error']) .message,\n:host([status='error']) .indicator {\n  color: rgb(var(--kemet-color-error));\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}