kemet-ui 4.0.2 → 5.0.0

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

@@ -0,0 +1,59 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 4.1.0
+ * @status stable
+ *
+ * @tagname kemet-input-otp
+ * @summary An input element that accepts multiple items from a combo.
+ *
+ * @prop {number} digits - The number of inputs.
+ * @prop {string} pattern - The pattern to match against for stripping characters
+ * @prop {string} value - All digits entered by the user combined in one string.
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ *
+ * @csspart input - The input elements.
+ *
+ * @cssproperty --kemet-otp-input-color - The text color of the otp inputs.
+ * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.
+ * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.
+ * @cssproperty --kemet-otp-input-border - The border of the otp inputs.
+ * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.
+ *
+ * @event kemet-input-otp-completed - Fires when otp is filled out completely
+ * @event kemet-input-otp-mounted - Fires when the component is mounted
+ *
+ */
+declare class KemetInputOtp extends LitElement {
+    static styles: lit.CSSResult[];
+    digits: number;
+    value: string;
+    pattern: string;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    autoFocus: boolean;
+    values: string[];
+    lastInput: string;
+    completed: boolean;
+    inputElements: NodeListOf<HTMLInputElement>;
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>[];
+    determineCompleted(): void;
+    makeInputs(): lit_html.TemplateResult<1>[];
+    eatCharacters(inputValue: string): string;
+    handleInput(event: InputEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handlePaste(event: ClipboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-input-otp': KemetInputOtp;
+    }
+}
+
+export { KemetInputOtp as default };

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

@@ -0,0 +1,205 @@
+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-otp/index.ts
+import { html, LitElement } from "lit";
+import { customElement, property, queryAll, state } from "lit/decorators.js";
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/input-otp/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  --kemet-otp-input-font-color: var(--kemet-color-font-base);
+  --kemet-otp-input-min-width: 3rem;
+  --kemet-otp-input-font-size: 2rem;
+  --kemet-otp-input-border: 1px solid;
+  --kemet-otp-input-border-radius: var(--kemet-border-radius-md);
+
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));
+}
+
+:host([polarity="dark"]) {
+  --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);
+}
+
+label {
+  display: flex;
+  aspect-ratio: 4/3;
+}
+
+span {
+  position: absolute;
+  margin: -1px;
+  width: 1px;
+  height: 1px;
+  display: block;
+  overflow: hidden;
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+[part="input"] {
+  color: var(--kemet-otp-input-font-color);
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  font-size: var(--kemet-otp-input-font-size);
+  border: var(--kemet-otp-input-border);
+  border-radius: var(--kemet-otp-input-border-radius);
+}
+`;
+
+// src/elements/input-otp/index.ts
+var KemetInputOtp = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.digits = 6;
+    this.value = "";
+    this.dom = "initializing";
+    this.autoFocus = true;
+    this.values = [];
+    this.completed = false;
+  }
+  firstUpdated() {
+    emitEvent(this, "kemet-input-otp-mounted", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        element: this
+      }
+    });
+    this.dom = "mounted";
+  }
+  updated() {
+    this.determineCompleted();
+  }
+  render() {
+    return this.makeInputs();
+  }
+  determineCompleted() {
+    const hasBlankValues = this.values.includes("");
+    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {
+      emitEvent(this, "kemet-input-otp-completed", {
+        detail: { value: this.value, element: this },
+        bubbles: true,
+        composed: true
+      });
+      this.completed = true;
+    }
+  }
+  makeInputs() {
+    return Array.from(
+      { length: this.digits },
+      (_, index) => html`
+        <label>
+          <span>Enter digit ${index + 1}</span>
+          <input
+            part="input"
+            id="${index}"
+            maxlength="1"
+            @input=${this.handleInput}
+            @keydown=${this.handleKeyDown}
+            @paste=${this.handlePaste}
+          />
+        </label>
+      `
+    );
+  }
+  eatCharacters(inputValue) {
+    const regex = new RegExp(this.pattern);
+    return inputValue.replace(regex, "");
+  }
+  handleInput(event) {
+    const input = event.target;
+    const currentIndex = parseInt(input.getAttribute("id") ?? "0");
+    const nextInput = this.inputElements[currentIndex + 1];
+    if (this.pattern) {
+      input.value = this.eatCharacters(input.value);
+    }
+    this.values[currentIndex] = input.value;
+    this.value = this.values.join("");
+    this.lastInput = input.value;
+    const fullDigits = this.values.length === this.digits && !!input.value;
+    if (!fullDigits) {
+      this.completed = false;
+    }
+    if (nextInput && this.autoFocus && !!input.value) {
+      nextInput.focus();
+    }
+  }
+  handleKeyDown(event) {
+    this.autoFocus = event.key !== "Backspace" /* BACKSPACE */;
+  }
+  handlePaste(event) {
+    event.preventDefault();
+    const pasteData = event.clipboardData?.getData("text") ?? "";
+    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split("").join(""));
+    const charactersArray = charactersString.split("");
+    charactersArray.forEach((character, index) => {
+      const input = this.inputElements[index];
+      if (input && !!character) {
+        input.value = character;
+        this.values[index] = character;
+      }
+    });
+    const lastFilled = this.inputElements[charactersArray.length - 1];
+    lastFilled?.focus();
+    this.value = this.values.join("");
+    this.determineCompleted();
+  }
+};
+KemetInputOtp.styles = [styles_css_default];
+__decorateClass([
+  property({ type: Number })
+], KemetInputOtp.prototype, "digits", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetInputOtp.prototype, "value", 2);
+__decorateClass([
+  property()
+], KemetInputOtp.prototype, "pattern", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetInputOtp.prototype, "polarity", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetInputOtp.prototype, "dom", 2);
+__decorateClass([
+  state()
+], KemetInputOtp.prototype, "autoFocus", 2);
+__decorateClass([
+  state()
+], KemetInputOtp.prototype, "values", 2);
+__decorateClass([
+  state()
+], KemetInputOtp.prototype, "lastInput", 2);
+__decorateClass([
+  state()
+], KemetInputOtp.prototype, "completed", 2);
+__decorateClass([
+  queryAll("input")
+], KemetInputOtp.prototype, "inputElements", 2);
+KemetInputOtp = __decorateClass([
+  customElement("kemet-input-otp")
+], KemetInputOtp);
+export {
+  KemetInputOtp as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input-otp/index.ts","../../../src/utilities/events.ts","../../../src/elements/input-otp/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, queryAll, state } from 'lit/decorators.js';\nimport { EnumKeyCodes } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 4.1.0\n * @status stable\n *\n * @tagname kemet-input-otp\n * @summary An input element that accepts multiple items from a combo.\n *\n * @prop {number} digits - The number of inputs.\n * @prop {string} pattern - The pattern to match against for stripping characters\n * @prop {string} value - All digits entered by the user combined in one string.\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 *\n * @csspart input - The input elements.\n *\n * @cssproperty --kemet-otp-input-color - The text color of the otp inputs.\n * @cssproperty --kemet-otp-input-min-width - The minimum width of the otp inputs.\n * @cssproperty --kemet-otp-input-font-size - The font size of the otp inputs.\n * @cssproperty --kemet-otp-input-border - The border of the otp inputs.\n * @cssproperty --kemet-otp-input-border-radius - The border radius of the otp inputs.\n *\n * @event kemet-input-otp-completed - Fires when otp is filled out completely\n * @event kemet-input-otp-mounted - Fires when the component is mounted\n *\n */\n\n@customElement('kemet-input-otp')\nexport default class KemetInputOtp extends LitElement {\n  static styles = [styles];\n\n  @property({ type: Number })\n  digits: number = 6;\n\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  @property()\n  pattern!: 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  @state()\n  autoFocus: boolean = true;\n\n  @state()\n  values: string[] = [];\n\n  @state()\n  lastInput!: string;\n\n  @state()\n  completed: boolean = false;\n\n  @queryAll('input')\n  inputElements!: NodeListOf<HTMLInputElement>;\n\n  firstUpdated() {\n    emitEvent(this, 'kemet-input-otp-mounted', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        element: this,\n      },\n    });\n    this.dom = 'mounted';\n  }\n\n  updated() {\n    this.determineCompleted();\n  }\n\n  render() {\n    return this.makeInputs();\n  }\n\n  determineCompleted() {\n    const hasBlankValues = this.values.includes('');\n    if (this.values.length === this.digits && !hasBlankValues && !this.completed) {\n      emitEvent(this, 'kemet-input-otp-completed', {\n        detail: { value: this.value, element: this },\n        bubbles: true,\n        composed: true,\n      });\n      this.completed = true;\n    }\n  }\n\n  makeInputs() {\n    return Array.from(\n      { length: this.digits },\n      (_, index) => html`\n        <label>\n          <span>Enter digit ${index + 1}</span>\n          <input\n            part=\"input\"\n            id=\"${index}\"\n            maxlength=\"1\"\n            @input=${this.handleInput}\n            @keydown=${this.handleKeyDown}\n            @paste=${this.handlePaste}\n          />\n        </label>\n      `\n    );\n  }\n\n  eatCharacters(inputValue: string) {\n    const regex = new RegExp(this.pattern);\n    return inputValue.replace(regex, '');\n  }\n\n  handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    const currentIndex = parseInt(input.getAttribute('id') ?? '0');\n    const nextInput = this.inputElements[currentIndex + 1];\n\n    if (this.pattern) {\n      input.value = this.eatCharacters(input.value);\n    }\n\n    this.values[currentIndex] = input.value;\n    this.value = this.values.join('');\n    this.lastInput = input.value;\n\n    const fullDigits = this.values.length === this.digits && !!input.value;\n\n    if (!fullDigits) {\n      this.completed = false;\n    }\n\n    if (nextInput && this.autoFocus && !!input.value) {\n      nextInput.focus();\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    this.autoFocus = event.key !== EnumKeyCodes.BACKSPACE;\n  }\n\n  handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n    const pasteData = event.clipboardData?.getData('text') ?? '';\n\n    // Trim and limit to number of digits\n    const charactersString = this.eatCharacters(pasteData.trim().slice(0, this.digits).split('').join(''));\n    const charactersArray = charactersString.split('');\n\n    // Fill the inputs and values array one by one\n    charactersArray.forEach((character, index) => {\n      const input = this.inputElements[index];\n      if (input && !!character) {\n        input.value = character;\n        this.values[index] = character;\n      }\n    });\n\n    const lastFilled = this.inputElements[charactersArray.length - 1];\n    lastFilled?.focus();\n    this.value = this.values.join('');\n    this.determineCompleted();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-input-otp': KemetInputOtp\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  --kemet-otp-input-font-color: var(--kemet-color-font-base);\n  --kemet-otp-input-min-width: 3rem;\n  --kemet-otp-input-font-size: 2rem;\n  --kemet-otp-input-border: 1px solid;\n  --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n}\n\n:host([polarity=\"dark\"]) {\n  --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\nlabel {\n  display: flex;\n  aspect-ratio: 4/3;\n}\n\nspan {\n  position: absolute;\n  margin: -1px;\n  width: 1px;\n  height: 1px;\n  display: block;\n  overflow: hidden;\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n[part=\"input\"] {\n  color: var(--kemet-otp-input-font-color);\n  text-align: center;\n  width: 100%;\n  height: 100%;\n  font-size: var(--kemet-otp-input-font-size);\n  border: var(--kemet-otp-input-border);\n  border-radius: var(--kemet-otp-input-border-radius);\n}\n`;\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,49 @@
+// src/elements/input-otp/styles.css.ts
+import { css } from "lit";
+var styles_css_default = css`:host {
+  --kemet-otp-input-font-color: var(--kemet-color-font-base);
+  --kemet-otp-input-min-width: 3rem;
+  --kemet-otp-input-font-size: 2rem;
+  --kemet-otp-input-border: 1px solid;
+  --kemet-otp-input-border-radius: var(--kemet-border-radius-md);
+
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));
+}
+
+:host([polarity="dark"]) {
+  --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);
+}
+
+label {
+  display: flex;
+  aspect-ratio: 4/3;
+}
+
+span {
+  position: absolute;
+  margin: -1px;
+  width: 1px;
+  height: 1px;
+  display: block;
+  overflow: hidden;
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+[part="input"] {
+  color: var(--kemet-otp-input-font-color);
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  font-size: var(--kemet-otp-input-font-size);
+  border: var(--kemet-otp-input-border);
+  border-radius: var(--kemet-otp-input-border-radius);
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/input-otp/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n  --kemet-otp-input-font-color: var(--kemet-color-font-base);\n  --kemet-otp-input-min-width: 3rem;\n  --kemet-otp-input-font-size: 2rem;\n  --kemet-otp-input-border: 1px solid;\n  --kemet-otp-input-border-radius: var(--kemet-border-radius-md);\n\n  display: grid;\n  gap: 1rem;\n  grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));\n}\n\n:host([polarity=\"dark\"]) {\n  --kemet-otp-input-font-color: var(--kemet-color-font-inverse-base);\n}\n\nlabel {\n  display: flex;\n  aspect-ratio: 4/3;\n}\n\nspan {\n  position: absolute;\n  margin: -1px;\n  width: 1px;\n  height: 1px;\n  display: block;\n  overflow: hidden;\n  border-width: 0;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n}\n\n[part=\"input\"] {\n  color: var(--kemet-otp-input-font-color);\n  text-align: center;\n  width: 100%;\n  height: 100%;\n  font-size: var(--kemet-otp-input-font-size);\n  border: var(--kemet-otp-input-border);\n  border-radius: var(--kemet-otp-input-border-radius);\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;","names":[]}

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

@@ -0,0 +1,44 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare enum EnumVariants {
+    NO_BORDER = "no-border",
+    BORDER_TOP = "border-top",
+    DOUBLE_BORDER = "double-border",
+    DOUBLE_SPINNERS = "double-spinners",
+    THREE_DOTS = "three-dots",
+    FULL_CIRCLE = "full-circle",
+    SPINNER = "spinner",
+    MESH = "mesh"
+}
+/**
+ * @since 5.0.0
+ * @status stable
+ *
+ * @tagname kemet-loader
+ * @summary Displays animations for a loading state.
+ *
+ * @prop {string} variant - The style of loader to display
+ * @prop {number} size - How large to make the loader.
+ *
+ * @csspart loader - The main loader container
+ *
+ * @cssproperty --kemet-loader-color - The color of the loader.
+ * @cssproperty --kemet-loader-thickness - The thickness of the loader.
+ * @cssproperty --kemet-loader-dot-size - The size of the dots in the loader.
+ * @cssproperty --kemet-loader-size - The size of the loader.
+ *
+ * @fires kemet-loader-mounted - Fired when the loader is mounted to the DOM
+ * @detail {HTMLElement} element - The loader element
+ */
+declare class KemetLoader extends LitElement {
+    static styles: lit.CSSResult[];
+    variant: EnumVariants;
+    size: number;
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makeLoader(): lit_html.TemplateResult<1>;
+}
+
+export { EnumVariants, KemetLoader };