kemet-ui 4.0.2 → 5.0.0

package/dist/elements/timer/index.d.ts

@@ -0,0 +1,54 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+
+declare enum EnumFormats {
+    Seconds = "seconds",
+    Minutes = "minutes",
+    Hours = "hours",
+    Days = "days"
+}
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-timer
+ * @summary Counts down from a specified amount of time or date.
+ *
+ * @prop {TypeFormats} format - The format of the amount property
+ * @prop {number} amount - The amount of time to set the timer
+ * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @event kemet-timer-start - Fires when the timer starts
+ * @event kemet-timer-complete - Fires when the timer reaches 0
+ * @event kemet-timer-increment - Fires on tick of the timer
+ *
+ * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM
+ * @detail {HTMLElement} element - The timer element
+ *
+ */
+declare class KemetTimer extends LitElement {
+    static styles: lit.CSSResult[];
+    format: EnumFormats;
+    amount: number;
+    expires: string;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    /** @internal */
+    interval: any;
+    firstUpdated(): void;
+    updated(prevProps: PropertyValues<this>): void;
+    render(): lit_html.TemplateResult<1>;
+    getTimeInSeconds(time: number): number;
+    timer(seconds?: number): void;
+    countDown(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-timer': KemetTimer;
+    }
+}
+
+export { EnumFormats, KemetTimer as default };

package/dist/elements/timer/index.js

@@ -0,0 +1,141 @@
+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/timer/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/elements/timer/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: block;
+}
+`;
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/timer/index.ts
+var EnumFormats = /* @__PURE__ */ ((EnumFormats2) => {
+  EnumFormats2["Seconds"] = "seconds";
+  EnumFormats2["Minutes"] = "minutes";
+  EnumFormats2["Hours"] = "hours";
+  EnumFormats2["Days"] = "days";
+  return EnumFormats2;
+})(EnumFormats || {});
+var KemetTimer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.format = "seconds" /* Seconds */;
+    this.amount = 10;
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    if (this.expires) {
+      this.countDown();
+    } else {
+      this.timer(this.getTimeInSeconds(this.amount));
+    }
+    emitEvent(this, "kemet-timer-start", { element: this });
+    emitEvent(this, "kemet-timer-increment", { element: this, timeleft: this.getTimeInSeconds(this.amount) });
+    emitEvent(this, "kemet-timer-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated(prevProps) {
+    const hasFormatOrAmountChanged = prevProps.get("format") || prevProps.get("amount");
+    const hasExpiredChanged = prevProps.get("expires");
+    if (hasFormatOrAmountChanged) {
+      clearInterval(this.interval);
+      this.timer(this.getTimeInSeconds(this.amount));
+    }
+    if (hasExpiredChanged) {
+      clearInterval(this.interval);
+      this.countDown();
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  getTimeInSeconds(time) {
+    switch (this.format) {
+      case "minutes":
+        return time * 60;
+      case "hours":
+        return time * 60 * 60;
+      case "days":
+        return time * 60 * 60 * 24;
+      default:
+        return time;
+    }
+  }
+  timer(seconds = 0) {
+    const now = Date.now();
+    const then = now + seconds * 1e3;
+    this.interval = setInterval(() => {
+      const secondsLeft = Math.round((then - Date.now()) / 1e3);
+      if (secondsLeft < 0) {
+        clearInterval(this.interval);
+        emitEvent(this, "kemet-timer-complete", { element: this });
+        return;
+      }
+      emitEvent(this, "kemet-timer-increment", { element: this, timeleft: secondsLeft });
+    }, 1e3);
+  }
+  countDown() {
+    const expires = new Date(this.expires).getTime();
+    this.interval = setInterval(() => {
+      const secondsLeft = Math.round((expires - Date.now()) / 1e3);
+      if (secondsLeft < 0) {
+        clearInterval(this.interval);
+        emitEvent(this, "kemet-timer-complete", { element: this });
+        return;
+      }
+      emitEvent(this, "kemet-timer-increment", { element: this, timeleft: secondsLeft });
+    }, 1e3);
+  }
+};
+KemetTimer.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], KemetTimer.prototype, "format", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTimer.prototype, "amount", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTimer.prototype, "expires", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetTimer.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetTimer.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetTimer.prototype, "interval", 2);
+KemetTimer = __decorateClass([
+  customElement("kemet-timer")
+], KemetTimer);
+export {
+  EnumFormats,
+  KemetTimer as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/timer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/timer/index.ts","../../../src/elements/timer/styles.css.ts","../../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\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 * @event kemet-timer-start - Fires when the timer starts\n * @event kemet-timer-complete - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM\n * @detail {HTMLElement} element - The timer element\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires!: 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  interval!: any;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-start', { element: this });\n    emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: this.getTimeInSeconds(this.amount) });\n\n    emitEvent(this, 'kemet-timer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: PropertyValues<this>) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\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"],"mappings":"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","names":["EnumFormats"]}

package/dist/elements/timer/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/timer/styles.css.js

@@ -0,0 +1,10 @@
+// src/elements/timer/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: block;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/timer/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/timer/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/timer-display/index.d.ts

@@ -0,0 +1,38 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { EnumFormats } from '../timer/index.js';
+
+/**
+ * @since 3.1.0
+ * @status stable
+ *
+ * @tagname kemet-timer-display
+ * @summary Displays remaining time
+ *
+ * @prop {EnumFormats} format - The format to display the remaining time in
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @fires kemet-timer-display-mounted - Fired when the timer display is mounted to the DOM
+ * @detail {HTMLElement} element - The timer display element
+ */
+declare class KemetTimerDisplay extends LitElement {
+    static styles: lit.CSSResult[];
+    format: EnumFormats;
+    displayTime: string;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    getTime(): void;
+    getTimeInSeconds(time: number): number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-timer-display': KemetTimerDisplay;
+    }
+}
+
+export { KemetTimerDisplay as default };

package/dist/elements/timer-display/index.js

@@ -0,0 +1,216 @@
+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/timer-display/index.ts
+import { html as html2, LitElement as LitElement2 } from "lit";
+import { customElement as customElement2, property as property2, state as state2 } from "lit/decorators.js";
+
+// src/elements/timer/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/elements/timer/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: block;
+}
+`;
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/timer/index.ts
+var KemetTimer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.format = "seconds" /* Seconds */;
+    this.amount = 10;
+    this.dom = "initializing";
+  }
+  firstUpdated() {
+    if (this.expires) {
+      this.countDown();
+    } else {
+      this.timer(this.getTimeInSeconds(this.amount));
+    }
+    emitEvent(this, "kemet-timer-start", { element: this });
+    emitEvent(this, "kemet-timer-increment", { element: this, timeleft: this.getTimeInSeconds(this.amount) });
+    emitEvent(this, "kemet-timer-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated(prevProps) {
+    const hasFormatOrAmountChanged = prevProps.get("format") || prevProps.get("amount");
+    const hasExpiredChanged = prevProps.get("expires");
+    if (hasFormatOrAmountChanged) {
+      clearInterval(this.interval);
+      this.timer(this.getTimeInSeconds(this.amount));
+    }
+    if (hasExpiredChanged) {
+      clearInterval(this.interval);
+      this.countDown();
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+  getTimeInSeconds(time) {
+    switch (this.format) {
+      case "minutes":
+        return time * 60;
+      case "hours":
+        return time * 60 * 60;
+      case "days":
+        return time * 60 * 60 * 24;
+      default:
+        return time;
+    }
+  }
+  timer(seconds = 0) {
+    const now = Date.now();
+    const then = now + seconds * 1e3;
+    this.interval = setInterval(() => {
+      const secondsLeft = Math.round((then - Date.now()) / 1e3);
+      if (secondsLeft < 0) {
+        clearInterval(this.interval);
+        emitEvent(this, "kemet-timer-complete", { element: this });
+        return;
+      }
+      emitEvent(this, "kemet-timer-increment", { element: this, timeleft: secondsLeft });
+    }, 1e3);
+  }
+  countDown() {
+    const expires = new Date(this.expires).getTime();
+    this.interval = setInterval(() => {
+      const secondsLeft = Math.round((expires - Date.now()) / 1e3);
+      if (secondsLeft < 0) {
+        clearInterval(this.interval);
+        emitEvent(this, "kemet-timer-complete", { element: this });
+        return;
+      }
+      emitEvent(this, "kemet-timer-increment", { element: this, timeleft: secondsLeft });
+    }, 1e3);
+  }
+};
+KemetTimer.styles = [styles_css_default];
+__decorateClass([
+  property({ type: String })
+], KemetTimer.prototype, "format", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTimer.prototype, "amount", 2);
+__decorateClass([
+  property({ type: String })
+], KemetTimer.prototype, "expires", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetTimer.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetTimer.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetTimer.prototype, "interval", 2);
+KemetTimer = __decorateClass([
+  customElement("kemet-timer")
+], KemetTimer);
+
+// src/elements/timer-display/styles.css.ts
+import { css as css2 } from "lit";
+var styles_css_default2 = css2`:host {
+  display: inline-block;
+}
+`;
+
+// src/elements/timer-display/index.ts
+var KemetTimerDisplay = class extends LitElement2 {
+  constructor() {
+    super();
+    this.format = "seconds" /* Seconds */;
+    this.dom = "initializing";
+    this.getTime();
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-timer-display-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  render() {
+    return html2`${this.displayTime}`;
+  }
+  getTime() {
+    this.closest("kemet-timer")?.addEventListener("kemet-timer-increment", (event) => {
+      const secondsLeft = event.detail.timeleft;
+      switch (this.format) {
+        case "seconds":
+          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
+          break;
+        case "minutes":
+          this.displayTime = Math.floor(secondsLeft % 86400 % 3600 / 60).toString();
+          break;
+        case "hours":
+          this.displayTime = Math.floor(secondsLeft % 86400 / 3600).toString();
+          break;
+        case "days":
+          this.displayTime = Math.floor(secondsLeft / 86400).toString();
+          break;
+        default:
+          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
+      }
+    });
+  }
+  getTimeInSeconds(time) {
+    switch (this.format) {
+      case "minutes":
+        return time * 60;
+      case "hours":
+        return time * 60 * 60;
+      case "days":
+        return time * 60 * 60 * 24;
+      default:
+        return time;
+    }
+  }
+};
+KemetTimerDisplay.styles = [styles_css_default2];
+__decorateClass([
+  property2({ type: String })
+], KemetTimerDisplay.prototype, "format", 2);
+__decorateClass([
+  state2()
+], KemetTimerDisplay.prototype, "displayTime", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetTimerDisplay.prototype, "polarity", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], KemetTimerDisplay.prototype, "dom", 2);
+KemetTimerDisplay = __decorateClass([
+  customElement2("kemet-timer-display")
+], KemetTimerDisplay);
+export {
+  KemetTimerDisplay as default
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/timer-display/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/timer-display/index.ts","../../../src/elements/timer/index.ts","../../../src/elements/timer/styles.css.ts","../../../src/utilities/events.ts","../../../src/elements/timer-display/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { EnumFormats } from '../timer';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n *\n * @prop {EnumFormats} format - The format to display the remaining time in\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-timer-display-mounted - Fired when the timer display is mounted to the DOM\n * @detail {HTMLElement} element - The timer display element\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @state()\n  displayTime!: 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  constructor() {\n    super();\n    this.getTime();\n  }\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-timer-display-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  render() {\n    return html`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer')?.addEventListener('kemet-timer-increment', (event: Event) => {\n      const secondsLeft = (event as CustomEvent).detail.timeleft;\n      switch (this.format) {\n        case 'seconds':\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n          break;\n        case 'minutes':\n          this.displayTime = Math.floor((secondsLeft % 86400) % 3600 / 60).toString();\n          break;\n        case 'hours':\n          this.displayTime = Math.floor((secondsLeft % 86400) / 3600).toString();\n          break;\n        case 'days':\n          this.displayTime = Math.floor(secondsLeft / 86400).toString();\n          break;\n        default:\n          this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();\n      }\n    });\n  }\n\n  getTimeInSeconds(time: number) {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer-display': KemetTimerDisplay\n  }\n}\n","import { html, LitElement, unsafeCSS, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport styles from './styles.css.ts';\nimport { emitEvent } from '../../utilities/events';\n\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer\n * @summary Counts down from a specified amount of time or date.\n *\n * @prop {TypeFormats} format - The format of the amount property\n * @prop {number} amount - The amount of time to set the timer\n * @prop {string} expires - Begins a count down to a specified time, accepts a string that matches value given for a Date constructor\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 * @event kemet-timer-start - Fires when the timer starts\n * @event kemet-timer-complete - Fires when the timer reaches 0\n * @event kemet-timer-increment - Fires on tick of the timer\n *\n * @fires kemet-timer-mounted - Fired when the timer is mounted to the DOM\n * @detail {HTMLElement} element - The timer element\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String })\n  format: EnumFormats = EnumFormats.Seconds;\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires!: 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  interval!: any;\n\n  firstUpdated() {\n    if (this.expires) {\n      this.countDown();\n    } else {\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    emitEvent(this, 'kemet-timer-start', { element: this });\n    emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: this.getTimeInSeconds(this.amount) });\n\n    emitEvent(this, 'kemet-timer-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated(prevProps: PropertyValues<this>) {\n    const hasFormatOrAmountChanged = prevProps.get('format') || prevProps.get('amount');\n    const hasExpiredChanged = prevProps.get('expires');\n\n    if (hasFormatOrAmountChanged) {\n      clearInterval(this.interval);\n      this.timer(this.getTimeInSeconds(this.amount));\n    }\n\n    if (hasExpiredChanged) {\n      clearInterval(this.interval);\n      this.countDown();\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  getTimeInSeconds(time: number): number {\n    switch (this.format) {\n      case 'minutes': return time * 60;\n      case 'hours': return time * 60 * 60;\n      case 'days': return time * 60 * 60 * 24;\n      default: return time;\n    }\n  }\n\n  timer(seconds: number = 0) {\n    const now = Date.now();\n    const then = now + seconds * 1000;\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((then - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n\n  countDown() {\n    const expires = new Date(this.expires).getTime();\n\n    this.interval = setInterval(() => {\n      const secondsLeft = Math.round((expires - Date.now()) / 1000);\n\n      if (secondsLeft < 0) {\n        clearInterval(this.interval);\n        emitEvent(this, 'kemet-timer-complete', { element: this });\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', { element: this, timeleft: secondsLeft });\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","import { css } from 'lit';\n\nexport default css`:host {\n  display: block;\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-block;\n}\n`;\n"],"mappings":"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","names":["html","LitElement","customElement","property","state","css","styles_css_default","LitElement","html","styles_css_default","property","state","customElement"]}

package/dist/elements/timer-display/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/timer-display/styles.css.js

@@ -0,0 +1,10 @@
+// src/elements/timer-display/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  display: inline-block;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

package/dist/elements/timer-display/styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/timer-display/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  display: inline-block;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/toggle/index.d.ts

@@ -0,0 +1,73 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-toggle
+ * @summary A toggle switch for forms.
+ *
+ * @prop {string} name - The name on the input field
+ * @prop {boolean} checked - Determines whether the toggle is checked
+ * @prop {boolean} disabled - Determines whether the toggle is disabled
+ * @prop {string} label - A description of the toggle's purpose
+ * @prop {boolean} show - Determines whether to show text options
+ * @prop {boolean} squared - Displays the toggle as squared instead of rounded
+ * @prop {string} optionChecked - The checked option text
+ * @prop {string} optionUnchecked - The unchecked option text
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @csspart label - The label element.
+ * @csspart control - The control element.
+ * @csspart text - The label text.
+ * @csspart checked - The checked text.
+ * @csspart unchecked - The unchecked text.
+ *
+ * @cssproperty --kemet-toggle-width - The width of the entire toggle.
+ * @cssproperty --kemet-toggle-height - The height of the entire toggle.
+ * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.
+ * @cssproperty --kemet-toggle-track-border - The border of the track.
+ * @cssproperty --kemet-toggle-track-color - The color of the track.
+ * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.
+ * @cssproperty --kemet-toggle-handle-border - The border on the handle.
+ * @cssproperty --kemet-toggle-handle-color - The color of the handle.
+ * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.
+ *
+ * @event kemet-toggle-change - Fires when the toggle changes state
+ *
+ * @fires kemet-toggle-mounted - Fired when the toggle is mounted to the DOM
+ * @detail {HTMLElement} element - The toggle element
+ *
+ */
+declare class KemetToggle extends LitElement {
+    formSubmitController: FormSubmitController;
+    static styles: lit.CSSResult[];
+    name: string;
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+    show: boolean;
+    squared: boolean;
+    optionChecked: string;
+    optionUnchecked: string;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    value: string | boolean;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    handleChange(): void;
+    makeUncheckedOption(): lit_html.TemplateResult<1> | null;
+    makeCheckedOption(): lit_html.TemplateResult<1> | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-toggle': KemetToggle;
+    }
+}
+
+export { KemetToggle as default };