kemet-ui 3.1.0 → 4.0.0

package/dist/components/kemet-timer/docs/stories.js

@@ -1,40 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-timer';
-import '../kemet-timer-display';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Timer',
-    component: 'kemet-timer',
-    argTypes: {
-        format: {
-            control: { type: 'select' },
-            options: ['seconds', 'minutes', 'hours', 'days'],
-        },
-        amount: {
-            control: { type: 'number' },
-        },
-        expires: {
-            control: { type: 'text' },
-        },
-    },
-};
-export default meta;
-const Template = args => html `
-  <kemet-timer amount=${args.amount} format=${args.format} expires=${ifDefined(args.expires)}>
-    <kemet-timer-display format="seconds"></kemet-timer-display>&nbsp;Seconds&nbsp;:
-    <kemet-timer-display format="minutes"></kemet-timer-display>&nbsp;Minutes&nbsp;:
-    <kemet-timer-display format="hours"></kemet-timer-display>&nbsp;Hours&nbsp;:
-    <kemet-timer-display format="days"></kemet-timer-display>&nbsp;Days
-  </kemet-timer>
-`;
-export const Standard = {
-    render: args => Template(args),
-    args: {
-        amount: 2,
-        format: 'minutes',
-    },
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-timer/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-timer/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAEhC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;SACjD;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;wBACL,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,MAAM,YAAY,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;CAM3F,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../kemet-timer';\nimport '../kemet-timer-display';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Timer',\n  component: 'kemet-timer',\n  argTypes: {\n    format: {\n      control: { type: 'select' },\n      options: ['seconds', 'minutes', 'hours', 'days'],\n    },\n    amount: {\n      control: { type: 'number' },\n    },\n    expires: {\n      control: { type: 'text' },\n    },\n  },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = args => html`\n  <kemet-timer amount=${args.amount} format=${args.format} expires=${ifDefined(args.expires)}>\n    <kemet-timer-display format=\"seconds\"></kemet-timer-display>&nbsp;Seconds&nbsp;:\n    <kemet-timer-display format=\"minutes\"></kemet-timer-display>&nbsp;Minutes&nbsp;:\n    <kemet-timer-display format=\"hours\"></kemet-timer-display>&nbsp;Hours&nbsp;:\n    <kemet-timer-display format=\"days\"></kemet-timer-display>&nbsp;Days\n  </kemet-timer>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    amount: 2,\n    format: 'minutes',\n  },\n};\n"]}

package/dist/components/kemet-timer/kemet-timer-display.d.ts

@@ -1,25 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeFormats } from './types';
-/**
- * @since 3.1.0
- * @status stable
- *
- * @tagname kemet-timer-display
- * @summary Displays remaining time
- *
- * @prop {TypeFormats} format - The format to display the remaining time in
- */
-export default class KemetTimerDisplay extends LitElement {
-    static styles: import("lit").CSSResult[];
-    format: TypeFormats;
-    displayTime: string;
-    constructor();
-    render(): import("lit-html").TemplateResult<1>;
-    getTime(): void;
-    getTimeInSeconds(time: any): any;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-timer-display': KemetTimerDisplay;
-    }
-}

package/dist/components/kemet-timer/kemet-timer-display.js

@@ -1,65 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { stylesDisplay } from './styles';
-/**
- * @since 3.1.0
- * @status stable
- *
- * @tagname kemet-timer-display
- * @summary Displays remaining time
- *
- * @prop {TypeFormats} format - The format to display the remaining time in
- */
-let KemetTimerDisplay = class KemetTimerDisplay extends LitElement {
-    constructor() {
-        super();
-        this.format = 'seconds';
-        this.getTime();
-    }
-    render() {
-        return html `${this.displayTime}`;
-    }
-    getTime() {
-        this.closest('kemet-timer').addEventListener('kemet-timer-increment', (event) => {
-            const secondsLeft = event.detail;
-            switch (this.format) {
-                case 'seconds':
-                    this.displayTime = (secondsLeft % 60 < 10 ? `0${secondsLeft % 60}` : secondsLeft % 60).toString();
-                    break;
-                case 'minutes':
-                    // eslint-disable-next-line no-mixed-operators
-                    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 = [stylesDisplay];
-__decorate([
-    property({ type: String })
-], KemetTimerDisplay.prototype, "format", void 0);
-__decorate([
-    state()
-], KemetTimerDisplay.prototype, "displayTime", void 0);
-KemetTimerDisplay = __decorate([
-    customElement('kemet-timer-display')
-], KemetTimerDisplay);
-export default KemetTimerDisplay;
-//# sourceMappingURL=kemet-timer-display.js.map

package/dist/components/kemet-timer/kemet-timer-display.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-timer-display.js","sourceRoot":"","sources":["../../../src/components/kemet-timer/kemet-timer-display.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC;;;;;;;;GAQG;AAGY,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IASvD;QACE,KAAK,EAAE,CAAC;QANV,WAAM,GAAgB,SAAS,CAAC;QAO9B,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACnC,CAAC;IAED,OAAO;QACL,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,CAAC,KAAkB,EAAE,EAAE;YAC3F,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpB,KAAK,SAAS;oBACZ,IAAI,CAAC,WAAW,GAAG,CAAC,WAAW,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,WAAW,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;oBAClG,MAAM;gBACR,KAAK,SAAS;oBACZ,8CAA8C;oBAC9C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;oBAC5E,MAAM;gBACR,KAAK,OAAO;oBACV,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;oBACvE,MAAM;gBACR,KAAK,MAAM;oBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;oBAC9D,MAAM;gBACR;oBACE,IAAI,CAAC,WAAW,GAAG,CAAC,WAAW,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,WAAW,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;YACtG,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB,CAAC,IAAI;QACnB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;YACpB,KAAK,SAAS,CAAC,CAAC,OAAO,IAAI,GAAG,EAAE,CAAC;YACjC,KAAK,OAAO,CAAC,CAAC,OAAO,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;YACpC,KAAK,MAAM,CAAC,CAAC,OAAO,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;YACxC,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;;AA/CM,wBAAM,GAAG,CAAC,aAAa,CAAC,AAAlB,CAAmB;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACK;AAGhC;IADC,KAAK,EAAE;sDACY;AAPD,iBAAiB;IADrC,aAAa,CAAC,qBAAqB,CAAC;GAChB,iBAAiB,CAiDrC;eAjDoB,iBAAiB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesDisplay } from './styles';\nimport { TypeFormats } from './types';\n\n/**\n * @since 3.1.0\n * @status stable\n *\n * @tagname kemet-timer-display\n * @summary Displays remaining time\n *\n * @prop {TypeFormats} format - The format to display the remaining time in\n */\n\n@customElement('kemet-timer-display')\nexport default class KemetTimerDisplay extends LitElement {\n  static styles = [stylesDisplay];\n\n  @property({ type: String })\n  format: TypeFormats = 'seconds';\n\n  @state()\n  displayTime: string;\n\n  constructor() {\n    super();\n    this.getTime();\n  }\n\n  render() {\n    return html`${this.displayTime}`;\n  }\n\n  getTime() {\n    this.closest('kemet-timer').addEventListener('kemet-timer-increment', (event: CustomEvent) => {\n      const secondsLeft = event.detail;\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          // eslint-disable-next-line no-mixed-operators\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) {\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"]}

package/dist/components/kemet-timer/kemet-timer.d.ts

@@ -1,36 +0,0 @@
-import { LitElement } from 'lit';
-import { TypeFormats } from './types';
-/**
- * @since 3.1.0
- * @status stable
- *
- * @tagname kemet-timer
- * @summary Counts down from a specified amount of time or date.
- *
- * @prop {string} 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-timer-completed - Fires when the timer reaches 0
- * @event kemet-timer-increment - Fires on tick of the timer
- *
- */
-export default class KemetTimer extends LitElement {
-    static styles: import("lit").CSSResult[];
-    format: TypeFormats;
-    amount: number;
-    expires: string;
-    /** @internal */
-    interval: any;
-    firstUpdated(): void;
-    updated(prevProps: any): void;
-    render(): import("lit-html").TemplateResult<1>;
-    getTimeInSeconds(time: any): any;
-    timer(seconds?: number): void;
-    countDown(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-timer': KemetTimer;
-    }
-}

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

@@ -1,103 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { stylesBase } from './styles';
-import { emitEvent } from '../../utilities/misc/events';
-/**
- * @since 3.1.0
- * @status stable
- *
- * @tagname kemet-timer
- * @summary Counts down from a specified amount of time or date.
- *
- * @prop {string} 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-timer-completed - Fires when the timer reaches 0
- * @event kemet-timer-increment - Fires on tick of the timer
- *
- */
-let KemetTimer = class KemetTimer extends 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-timer-started', true);
-        emitEvent(this, 'kemet-timer-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 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 * 1000;
-        this.interval = setInterval(() => {
-            const secondsLeft = Math.round((then - Date.now()) / 1000);
-            if (secondsLeft < 0) {
-                clearInterval(this.interval);
-                emitEvent(this, 'kemet-timer-completed', true);
-                return;
-            }
-            emitEvent(this, 'kemet-timer-increment', secondsLeft);
-        }, 1000);
-    }
-    countDown() {
-        const expires = new Date(this.expires).getTime();
-        this.interval = setInterval(() => {
-            const secondsLeft = Math.round((expires - Date.now()) / 1000);
-            if (secondsLeft < 0) {
-                clearInterval(this.interval);
-                emitEvent(this, 'kemet-timer-completed', true);
-                return;
-            }
-            emitEvent(this, 'kemet-timer-increment', secondsLeft);
-        }, 1000);
-    }
-};
-KemetTimer.styles = [stylesBase];
-__decorate([
-    property({ type: String })
-], KemetTimer.prototype, "format", void 0);
-__decorate([
-    property({ type: Number })
-], KemetTimer.prototype, "amount", void 0);
-__decorate([
-    property({ type: String })
-], KemetTimer.prototype, "expires", void 0);
-__decorate([
-    state()
-], KemetTimer.prototype, "interval", void 0);
-KemetTimer = __decorate([
-    customElement('kemet-timer')
-], KemetTimer);
-export default KemetTimer;
-//# sourceMappingURL=kemet-timer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-timer.js","sourceRoot":"","sources":["../../../src/components/kemet-timer/kemet-timer.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from './styles';\nimport { TypeFormats } from './types';\nimport { emitEvent } from '../../utilities/misc/events';\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 {string} 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-timer-completed - Fires when the timer reaches 0\n * @event kemet-timer-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-timer-started', true);\n    emitEvent(this, 'kemet-timer-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) {\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-completed', true);\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-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-timer-completed', true);\n        return;\n      }\n\n      emitEvent(this, 'kemet-timer-increment', secondsLeft);\n    }, 1000);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-timer': KemetTimer\n  }\n}\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-timer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;CAI5B,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;CAI/B,CAAC","sourcesContent":["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"]}

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

@@ -1 +0,0 @@
-export type TypeFormats = 'seconds' | 'minutes' | 'hours' | 'days';

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-timer/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeFormats = 'seconds' | 'minutes' | 'hours' | 'days';\n"]}

package/dist/components/kemet-toggle/docs/stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-toggle';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Squared: Story;
-export declare const ShowOptions: Story;

package/dist/components/kemet-toggle/docs/stories.js

@@ -1,43 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-toggle';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Toggle',
-    component: 'kemet-toggle',
-    args: {
-        label: 'Label'
-    }
-};
-export default meta;
-const Template = (args) => html `
-  <kemet-toggle
-    label=${ifDefined(args.label)}
-    ?disabled=${args.disabled}
-    ?checked=${args.checked}
-    ?show=${args.show}
-    ?squared=${args.squared}
-    option-unchecked=${ifDefined(args.optionUnchecked)}
-    option-checked=${ifDefined(args.optionChecked)}
-  ></kemet-toggle>
-`;
-export const Standard = {
-    render: args => Template(args),
-};
-export const Squared = {
-    render: args => Template(args),
-    args: {
-        squared: true,
-    },
-};
-export const ShowOptions = {
-    render: args => Template(args),
-    args: {
-        show: true,
-        optionUnchecked: 'No',
-        optionChecked: 'Yes',
-    },
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-toggle/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-toggle/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AAEzB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;KACf;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;YAEnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;gBACjB,IAAI,CAAC,QAAQ;eACd,IAAI,CAAC,OAAO;YACf,IAAI,CAAC,IAAI;eACN,IAAI,CAAC,OAAO;uBACJ,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;qBACjC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;CAEjD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,eAAe,EAAE,IAAI;QACrB,aAAa,EAAE,KAAK;KACrB;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-toggle';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Toggle',\n  component: 'kemet-toggle',\n  args: {\n    label: 'Label'\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => html`\n  <kemet-toggle\n    label=${ifDefined(args.label)}\n    ?disabled=${args.disabled}\n    ?checked=${args.checked}\n    ?show=${args.show}\n    ?squared=${args.squared}\n    option-unchecked=${ifDefined(args.optionUnchecked)}\n    option-checked=${ifDefined(args.optionChecked)}\n  ></kemet-toggle>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Squared: Story = {\n  render: args => Template(args),\n  args: {\n    squared: true,\n  },\n};\n\nexport const ShowOptions: Story = {\n  render: args => Template(args),\n  args: {\n    show: true,\n    optionUnchecked: 'No',\n    optionChecked: 'Yes',\n  },\n};\n"]}

package/dist/components/kemet-toggle/kemet-toggle.d.ts

@@ -1,60 +0,0 @@
-import { LitElement } from 'lit';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-/**
- * @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-toggle-change - Fires when the toggle changes state
- *
- */
-export default class KemetToggle extends LitElement {
-    formSubmitController: FormSubmitController;
-    static styles: import("lit").CSSResult[];
-    name: string;
-    checked: boolean;
-    disabled: boolean;
-    label: string;
-    show: boolean;
-    squared: boolean;
-    optionChecked: string;
-    optionUnchecked: string;
-    value: string | boolean;
-    constructor();
-    render(): import("lit-html").TemplateResult<1>;
-    handleChange(): void;
-    makeUncheckedOption(): import("lit-html").TemplateResult<1>;
-    makeCheckedOption(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-toggle': KemetToggle;
-    }
-}

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

@@ -1,130 +0,0 @@
-import { __decorate } from "tslib";
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { FormSubmitController } from '../../utilities/controllers/forms';
-import { emitEvent } from '../../utilities/misc/events';
-import { stylesToggle } from './styles';
-/**
- * @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-toggle-change - Fires when the toggle changes state
- *
- */
-let KemetToggle = class KemetToggle extends LitElement {
-    constructor() {
-        super();
-        this.name = 'toggle-switch';
-        this.checked = false;
-        this.disabled = false;
-        this.label = '';
-        this.show = false;
-        this.squared = false;
-        this.optionChecked = 'on';
-        this.optionUnchecked = 'off';
-        this.value = this.checked ? this.optionChecked : this.optionUnchecked;
-        /** @internal */
-        this.formSubmitController = new FormSubmitController(this);
-    }
-    render() {
-        return html `
-      <label part="label">
-        ${this.makeUncheckedOption()}
-        <span part="control">
-          <span part="track"></span>
-          <span part="handle"></span>
-        </span>
-        <input
-          role="switch"
-          type="checkbox"
-          name="${this.name}"
-          aria-label="${this.label}"
-          aria-checked=${this.checked ? 'true' : 'false'}
-          ?disabled=${this.disabled}
-          ?checked=${this.checked}
-          @change=${this.handleChange}
-        />
-        ${this.makeCheckedOption()}
-        <span part="text">${this.label}</span>
-      </label>
-    `;
-    }
-    handleChange() {
-        this.checked = !this.checked;
-        this.value = this.checked ? this.optionChecked : this.optionUnchecked;
-        emitEvent(this, 'kemet-toggle-change', true);
-    }
-    makeUncheckedOption() {
-        if (this.show) {
-            return html `<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
-        }
-        return null;
-    }
-    makeCheckedOption() {
-        if (this.show) {
-            return html `<span class="option" part="checked">${this.optionChecked}</span>`;
-        }
-        return null;
-    }
-};
-KemetToggle.styles = [stylesToggle];
-__decorate([
-    property({ type: String })
-], KemetToggle.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], KemetToggle.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetToggle.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], KemetToggle.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetToggle.prototype, "show", void 0);
-__decorate([
-    property({ type: Boolean })
-], KemetToggle.prototype, "squared", void 0);
-__decorate([
-    property({ type: String, attribute: 'option-checked' })
-], KemetToggle.prototype, "optionChecked", void 0);
-__decorate([
-    property({ type: String, attribute: 'option-unchecked' })
-], KemetToggle.prototype, "optionUnchecked", void 0);
-__decorate([
-    state()
-], KemetToggle.prototype, "value", void 0);
-KemetToggle = __decorate([
-    customElement('kemet-toggle')
-], KemetToggle);
-export default KemetToggle;
-//# sourceMappingURL=kemet-toggle.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-toggle.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/kemet-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesToggle } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-toggle-change - Fires when the toggle changes state\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesToggle];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-toggle-change', true);\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n"]}

package/dist/components/kemet-toggle/spec.d.ts

@@ -1 +0,0 @@
-import './kemet-toggle';

package/dist/components/kemet-toggle/spec.js

@@ -1,46 +0,0 @@
-import { html, render } from 'lit';
-import { expect } from '@wdio/globals';
-import { userEvent } from '@testing-library/user-event';
-import { fireEvent, getByText, waitFor } from '@testing-library/dom';
-import './kemet-toggle';
-const templates = {
-    default: html `<kemet-toggle label="Label"></kemet-toggle>`,
-    checked: html `<kemet-toggle checked label="Label"></kemet-toggle>`,
-    showOptions: html `<kemet-toggle label="Label" show option-unchecked="No" option-checked="Yes"></kemet-toggle>`,
-};
-describe('Toggle', () => {
-    it('should toggle the switch when clicked', async () => {
-        render(templates.default, document.body);
-        const toggle = document.querySelector('kemet-toggle');
-        await waitFor(async () => {
-            const label = toggle.shadowRoot.querySelector('label');
-            const input = toggle.shadowRoot.querySelector('input');
-            await userEvent.click(label);
-            expect(toggle.checked).toBe(true);
-            fireEvent.blur(input);
-        });
-    });
-    it('should toggle the switch when clicked and initially checked', async () => {
-        render(templates.checked, document.body);
-        const toggle = document.querySelector('kemet-toggle');
-        await waitFor(async () => {
-            const label = toggle.shadowRoot.querySelector('label');
-            const input = toggle.shadowRoot.querySelector('input');
-            await userEvent.click(label);
-            expect(toggle.checked).toBe(false);
-            fireEvent.blur(input);
-        });
-    });
-    it('should show option labels', async () => {
-        render(templates.showOptions, document.body);
-        const kemetToggle = document.querySelector('kemet-toggle');
-        await waitFor(() => {
-            const label = kemetToggle.shadowRoot.querySelector('label');
-            const checkedText = getByText(label, 'Yes');
-            const uncheckedText = getByText(label, 'No');
-            expect(checkedText).toBeTruthy();
-            expect(uncheckedText).toBeTruthy();
-        });
-    });
-});
-//# sourceMappingURL=spec.js.map