kemet-ui 4.0.2 → 4.1.0

package/custom-elements.json

@@ -6546,6 +6546,230 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/otp-input.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetOtpInput",
+          "cssProperties": [
+            {
+              "description": "The text color of the otp inputs.",
+              "name": "--kemet-otp-input-color"
+            },
+            {
+              "description": "The minimum width of the otp inputs.",
+              "name": "--kemet-otp-input-min-width"
+            },
+            {
+              "description": "The font size of the otp inputs.",
+              "name": "--kemet-otp-input-font-size"
+            },
+            {
+              "description": "The border of the otp inputs.",
+              "name": "--kemet-otp-input-border"
+            },
+            {
+              "description": "The border radius of the otp inputs.",
+              "name": "--kemet-otp-input-border-radius"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The input elements.",
+              "name": "input"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "digits",
+              "type": {
+                "text": "number"
+              },
+              "default": "6",
+              "description": "The number of inputs.",
+              "attribute": "digits"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "All digits entered by the user combined in one string.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string"
+              },
+              "description": "The pattern to match against for stripping characters",
+              "attribute": "pattern"
+            },
+            {
+              "kind": "field",
+              "name": "autoFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "values",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "lastInput",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "completed",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "inputElements",
+              "type": {
+                "text": "NodeListOf<HTMLInputElement>"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "determineCompleted"
+            },
+            {
+              "kind": "method",
+              "name": "makeInputs"
+            },
+            {
+              "kind": "method",
+              "name": "eatCharacters",
+              "parameters": [
+                {
+                  "name": "inputValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handlePaste",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "ClipboardEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when otp is filled out completely",
+              "name": "kemet-completed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "digits",
+              "type": {
+                "text": "number"
+              },
+              "default": "6",
+              "description": "The number of inputs.",
+              "fieldName": "digits"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "All digits entered by the user combined in one string.",
+              "fieldName": "value"
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string"
+              },
+              "description": "The pattern to match against for stripping characters",
+              "fieldName": "pattern"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-otp-input",
+          "customElement": true,
+          "summary": "An input element that accepts multiple items from a combo."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetOtpInput",
+            "module": "src/elements/otp-input.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-otp-input",
+          "declaration": {
+            "name": "KemetOtpInput",
+            "module": "src/elements/otp-input.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/password.ts",
@@ -11723,6 +11947,168 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/typewriter.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KemetTypewriter",
+          "members": [
+            {
+              "kind": "field",
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The content to be typed.",
+              "attribute": "content"
+            },
+            {
+              "kind": "field",
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The delay between each character.",
+              "attribute": "delay"
+            },
+            {
+              "kind": "field",
+              "name": "cursor",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The cursor to be displayed.",
+              "attribute": "cursor"
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to loop the content.",
+              "attribute": "loop"
+            },
+            {
+              "kind": "field",
+              "name": "restartDelay",
+              "type": {
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "The delay before restarting the typewriter.",
+              "attribute": "restart-delay"
+            },
+            {
+              "kind": "field",
+              "name": "typewriter",
+              "type": {
+                "text": "Typewriter"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "timeoutId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "restartTypewriter"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when typewriter is completed",
+              "name": "kemet-completed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The content to be typed.",
+              "fieldName": "content"
+            },
+            {
+              "name": "delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The delay between each character.",
+              "fieldName": "delay"
+            },
+            {
+              "name": "cursor",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The cursor to be displayed.",
+              "fieldName": "cursor"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to loop the content.",
+              "fieldName": "loop"
+            },
+            {
+              "name": "restart-delay",
+              "type": {
+                "text": "number"
+              },
+              "default": "1000",
+              "description": "The delay before restarting the typewriter.",
+              "fieldName": "restartDelay"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kemet-typewriter",
+          "customElement": true,
+          "summary": "An element that types out content."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "KemetTypewriter",
+            "module": "src/elements/typewriter.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kemet-typewriter",
+          "declaration": {
+            "name": "KemetTypewriter",
+            "module": "src/elements/typewriter.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/upload-file.ts",

package/dist/elements/otp-input.d.mts

@@ -0,0 +1,52 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 4.1.0
+ * @status stable
+ *
+ * @tagname kemet-otp-input
+ * @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.
+ *
+ * @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-completed - Fires when otp is filled out completely
+ *
+ */
+declare class KemetOtpInput extends LitElement {
+    static styles: lit.CSSResult[];
+    digits: number;
+    value: string;
+    pattern: string;
+    autoFocus: boolean;
+    values: string[];
+    lastInput: string;
+    completed: boolean;
+    inputElements: NodeListOf<HTMLInputElement>;
+    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-otp-input': KemetOtpInput;
+    }
+}
+
+export { KemetOtpInput as default };

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

@@ -0,0 +1,52 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 4.1.0
+ * @status stable
+ *
+ * @tagname kemet-otp-input
+ * @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.
+ *
+ * @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-completed - Fires when otp is filled out completely
+ *
+ */
+declare class KemetOtpInput extends LitElement {
+    static styles: lit.CSSResult[];
+    digits: number;
+    value: string;
+    pattern: string;
+    autoFocus: boolean;
+    values: string[];
+    lastInput: string;
+    completed: boolean;
+    inputElements: NodeListOf<HTMLInputElement>;
+    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-otp-input': KemetOtpInput;
+    }
+}
+
+export { KemetOtpInput as default };

package/dist/elements/otp-input.js

@@ -0,0 +1,202 @@
+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/otp-input.ts
+var otp_input_exports = {};
+__export(otp_input_exports, {
+  default: () => KemetOtpInput
+});
+module.exports = __toCommonJS(otp_input_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/otp-input.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  :host {
+    --kemet-otp-input-color: rgb(var(--kemet-color-gray-600));
+    --kemet-otp-input-min-width: 3rem;
+    --kemet-otp-input-font-size: 2rem;
+    --kemet-otp-input-border: 1px solid rgb(var(--kemet-color-gray-300));
+    --kemet-otp-input-border-radius: var(--kemet-border-radius-md);
+
+    display: grid;
+    gap: var(--kemet-spacer-md);
+    grid-template-columns: repeat(auto-fit, minmax(var(--kemet-otp-input-min-width), 1fr));
+  }
+
+  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-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/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/otp-input.ts
+var KemetOtpInput = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.digits = 6;
+    this.value = "";
+    this.autoFocus = true;
+    this.values = [];
+    this.completed = false;
+  }
+  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-completed", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      });
+      this.completed = true;
+    }
+  }
+  makeInputs() {
+    return Array.from(
+      { length: this.digits },
+      (_, index) => import_lit2.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"));
+    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();
+  }
+};
+KemetOtpInput.styles = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetOtpInput.prototype, "digits", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetOtpInput.prototype, "value", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetOtpInput.prototype, "pattern", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetOtpInput.prototype, "autoFocus", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetOtpInput.prototype, "values", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetOtpInput.prototype, "lastInput", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetOtpInput.prototype, "completed", 2);
+__decorateClass([
+  (0, import_decorators.queryAll)("input")
+], KemetOtpInput.prototype, "inputElements", 2);
+KemetOtpInput = __decorateClass([
+  (0, import_decorators.customElement)("kemet-otp-input")
+], KemetOtpInput);
+//# sourceMappingURL=otp-input.js.map