kemet-ui 4.0.0 → 4.0.2

package/dist/elements/timer.d.mts

@@ -0,0 +1,49 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare const formats: readonly ["seconds", "minutes", "hours", "days"];
+declare enum EnumFormats {
+    Seconds = "seconds",
+    Minutes = "minutes",
+    Hours = "hours",
+    Days = "days"
+}
+type TypeFormats = typeof formats[number];
+/**
+ * @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
+ *
+ * @event kemet-start - Fires when the timer starts
+ * @event kemet-complete - Fires when the timer reaches 0
+ * @event kemet-increment - Fires on tick of the timer
+ *
+ */
+declare class KemetTimer extends LitElement {
+    static styles: lit.CSSResult[];
+    format: TypeFormats;
+    amount: number;
+    expires: string;
+    /** @internal */
+    interval: any;
+    firstUpdated(): void;
+    updated(prevProps: any): 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, type TypeFormats, KemetTimer as default, formats };

package/dist/elements/timer.d.ts

@@ -0,0 +1,49 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare const formats: readonly ["seconds", "minutes", "hours", "days"];
+declare enum EnumFormats {
+    Seconds = "seconds",
+    Minutes = "minutes",
+    Hours = "hours",
+    Days = "days"
+}
+type TypeFormats = typeof formats[number];
+/**
+ * @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
+ *
+ * @event kemet-start - Fires when the timer starts
+ * @event kemet-complete - Fires when the timer reaches 0
+ * @event kemet-increment - Fires on tick of the timer
+ *
+ */
+declare class KemetTimer extends LitElement {
+    static styles: lit.CSSResult[];
+    format: TypeFormats;
+    amount: number;
+    expires: string;
+    /** @internal */
+    interval: any;
+    firstUpdated(): void;
+    updated(prevProps: any): 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, type TypeFormats, KemetTimer as default, formats };

package/dist/elements/timer.js

@@ -0,0 +1,156 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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.ts
+var timer_exports = {};
+__export(timer_exports, {
+  EnumFormats: () => EnumFormats,
+  default: () => KemetTimer,
+  formats: () => formats
+});
+module.exports = __toCommonJS(timer_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/timer.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  :host {
+    display: block;
+  }
+`;
+var stylesDisplay = import_lit.css`
+  :host {
+    display: inline-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.ts
+var formats = ["seconds", "minutes", "hours", "days"];
+var EnumFormats = /* @__PURE__ */ ((EnumFormats2) => {
+  EnumFormats2["Seconds"] = "seconds";
+  EnumFormats2["Minutes"] = "minutes";
+  EnumFormats2["Hours"] = "hours";
+  EnumFormats2["Days"] = "days";
+  return EnumFormats2;
+})(EnumFormats || {});
+var KemetTimer = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.format = "seconds";
+    this.amount = 10;
+  }
+  firstUpdated() {
+    if (this.expires) {
+      this.countDown();
+    } else {
+      this.timer(this.getTimeInSeconds(this.amount));
+    }
+    emitEvent(this, "kemet-start", this);
+    emitEvent(this, "kemet-increment", this.getTimeInSeconds(this.amount));
+  }
+  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 import_lit2.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-complete", this);
+        return;
+      }
+      emitEvent(this, "kemet-increment", 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-complete", this);
+        return;
+      }
+      emitEvent(this, "kemet-increment", secondsLeft);
+    }, 1e3);
+  }
+};
+KemetTimer.styles = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTimer.prototype, "format", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetTimer.prototype, "amount", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTimer.prototype, "expires", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetTimer.prototype, "interval", 2);
+KemetTimer = __decorateClass([
+  (0, import_decorators.customElement)("kemet-timer")
+], KemetTimer);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnumFormats,
+  formats
+});
+//# sourceMappingURL=timer.js.map

package/dist/elements/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/timer.ts","../../src/styles/elements/timer.ts","../../src/utilities/events.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/timer';\nimport { emitEvent } from '../utilities/events';\n\nexport const formats = ['seconds', 'minutes', 'hours', 'days'] as const;\nexport enum EnumFormats {\n  Seconds = 'seconds',\n  Minutes = 'minutes',\n  Hours = 'hours',\n  Days = 'days'\n}\nexport type TypeFormats = typeof formats[number];\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 *\n * @event kemet-start - Fires when the timer starts\n * @event kemet-complete - Fires when the timer reaches 0\n * @event kemet-increment - Fires on tick of the timer\n *\n */\n\n@customElement('kemet-timer')\nexport default class KemetTimer extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: String })\n  format: TypeFormats = 'seconds';\n\n  @property({ type: Number })\n  amount: number = 10;\n\n  @property({ type: String })\n  expires: string;\n\n  /** @internal */\n  @state()\n  interval;\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-start', this);\n    emitEvent(this, 'kemet-increment', this.getTimeInSeconds(this.amount));\n  }\n\n  updated(prevProps) {\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-complete', this);\n        return;\n      }\n\n      emitEvent(this, 'kemet-increment', 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-complete', this);\n        return;\n      }\n\n      emitEvent(this, 'kemet-increment', secondsLeft);\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    display: block;\n  }\n`;\n\nexport const stylesDisplay = css`\n  :host {\n    display: inline-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":["import_lit","EnumFormats"]}

package/dist/elements/timer.mjs

@@ -0,0 +1,14 @@
+import {
+  EnumFormats,
+  KemetTimer,
+  formats
+} from "../chunk-U4JLLOLD.mjs";
+import "../chunk-CK7STPSD.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  EnumFormats,
+  KemetTimer as default,
+  formats
+};
+//# sourceMappingURL=timer.mjs.map

package/dist/elements/timer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/toggle.d.mts

@@ -0,0 +1,65 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { F as FormSubmitController } from '../form-controller-BR0gZhrG.mjs';
+
+/**
+ * @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
+ *
+ * @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-change - Fires when the toggle changes state
+ *
+ */
+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;
+    value: string | boolean;
+    constructor();
+    render(): lit_html.TemplateResult<1>;
+    handleChange(): void;
+    makeUncheckedOption(): lit_html.TemplateResult<1>;
+    makeCheckedOption(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-toggle': KemetToggle;
+    }
+}
+
+export { KemetToggle as default };

package/dist/elements/toggle.d.ts

@@ -0,0 +1,65 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { F as FormSubmitController } from '../form-controller-BR0gZhrG.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
+ *
+ * @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-change - Fires when the toggle changes state
+ *
+ */
+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;
+    value: string | boolean;
+    constructor();
+    render(): lit_html.TemplateResult<1>;
+    handleChange(): void;
+    makeUncheckedOption(): lit_html.TemplateResult<1>;
+    makeCheckedOption(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-toggle': KemetToggle;
+    }
+}
+
+export { KemetToggle as default };