dap-design-system/dist/components/code-puncher/code-puncher.component.js

Official design system for the DÁP (dap.gov.hu)

import { ContextProvider as g } from "../../node_modules/@lit/context/lib/controllers/context-provider.js";
import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as p, html as h } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as u } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as _ } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
import { GenericFormElement as v } from "../../internal/mixin/genericFormElement.js";
import y from "../feedback/feedback.component.js";
import $ from "../form/form-label/form-label.component.js";
import k from "../icon/icon.component.js";
import x from "../icon-button/icon-button.component.js";
import S from "../tooltip/tooltip.component.js";
import C from "../typography/typography.component.js";
import { codePuncherContext as F } from "./code-puncher.context.js";
import I from "./code-puncher.scss.js";
import { unsafeCSS as V } from "../../node_modules/@lit/reactive-element/css-tag.js";
var A = Object.defineProperty, r = (m, t, s, e) => {
  for (var i = void 0, a = m.length - 1, n; a >= 0; a--)
    (n = m[a]) && (i = n(t, s, i) || i);
  return i && A(t, s, i), i;
};
const c = class c extends v {
  constructor() {
    super(...arguments), this.mask = !1, this.pattern = "[0-9]", this.placeholder = "", this.autocomplete = "one-time-code", this._slots = [], this._activeIndex = -1, this._chars = [], this._hasFocus = !1, this._rawValue = "", this._patternRegex = /^[0-9]$/;
  }
  _getContextValue() {
    return {
      registerSlot: this._registerSlot.bind(this),
      unregisterSlot: this._unregisterSlot.bind(this),
      getCharAt: this._getCharAt.bind(this),
      setCharAt: this._setCharAt.bind(this),
      focusSlot: this._focusSlot.bind(this),
      handleKeydown: this._handleKeydown.bind(this),
      handlePaste: this._handlePaste.bind(this),
      activeIndex: this._activeIndex,
      mask: this.mask,
      disabled: this.disabled,
      readonly: this.readonly,
      size: this.size,
      placeholder: this.placeholder,
      pattern: this._patternRegex,
      status: this.status,
      autocomplete: this.autocomplete,
      slotCount: this._slots.length
    };
  }
  connectedCallback() {
    super.connectedCallback(), this._provider = new g(this, {
      context: F,
      initialValue: this._getContextValue()
    });
  }
  _updateContext() {
    this._provider && this._provider.setValue(this._getContextValue());
  }
  get value() {
    return this._chars.join("");
  }
  set value(t) {
    if (this._rawValue = t, this._slots.length === 0) return;
    const s = t.split("");
    this._chars = Array.from(
      { length: this._slots.length },
      (e, i) => {
        var a;
        return (a = s[i]) != null ? a : "";
      }
    ), this.internals.setFormValue(this.value), this.requestUpdate();
  }
  willUpdate(t) {
    super.willUpdate(t), t.has("pattern") && (this._patternRegex = new RegExp(`^${this.pattern}$`)), this._updateContext();
  }
  _registerSlot(t) {
    var e;
    const s = this._slots.length;
    return this._slots = [...this._slots, t], this._chars = [...this._chars, (e = this._rawValue[s]) != null ? e : ""], this.internals.setFormValue(this.value), this.requestUpdate(), s;
  }
  _unregisterSlot(t) {
    const s = this._slots.indexOf(t);
    s > -1 && (this._slots = this._slots.filter((e) => e !== t), this._chars = this._chars.filter((e, i) => i !== s), this.requestUpdate());
  }
  _getCharAt(t) {
    return this._chars[t] || "";
  }
  _setCharAt(t, s) {
    const e = this.value;
    this._chars = this._chars.map((i, a) => a === t ? s : i), this.internals.setFormValue(this.value), this.emit("dds-input", { value: this.value, index: t }), this.value !== e && this.emit("dds-change", { value: this.value }), this._chars.length > 0 && this._chars.every((i) => i !== "") && s !== "" && this.emit("dds-complete", { value: this.value }), this.requestUpdate(), this.setValidity();
  }
  _focusSlot(t) {
    var s;
    t >= 0 && t < this._slots.length && (this._activeIndex = t, (s = this._slots[t]) == null || s.focus(), this.requestUpdate());
  }
  _handleKeydown(t, s) {
    const e = this._chars[t] || "";
    switch (s.key) {
      case "Backspace":
        e === "" && t > 0 ? (this._setCharAt(t - 1, ""), this._focusSlot(t - 1)) : this._setCharAt(t, ""), s.preventDefault();
        break;
      case "Delete":
        this._setCharAt(t, ""), s.preventDefault();
        break;
      case "ArrowLeft":
        t > 0 && this._focusSlot(t - 1), s.preventDefault();
        break;
      case "ArrowRight":
        t < this._slots.length - 1 && this._focusSlot(t + 1), s.preventDefault();
        break;
      case "Home":
        this._focusSlot(0), s.preventDefault();
        break;
      case "End":
        this._focusSlot(this._slots.length - 1), s.preventDefault();
        break;
    }
  }
  _handlePaste(t) {
    var n;
    t.preventDefault();
    const e = (((n = t.clipboardData) == null ? void 0 : n.getData("text")) || "").replace(/[-·\s]/g, "").split("").filter((l) => this._patternRegex.test(l));
    e.slice(0, this._slots.length).forEach((l, b) => {
      this._chars[b] = l;
    }), this.internals.setFormValue(this.value), this.emit("dds-change", { value: this.value });
    const i = Math.min(
      e.length - 1,
      this._slots.length - 1
    ), a = this._chars.findIndex((l) => l === "");
    a > -1 ? this._focusSlot(a) : this._focusSlot(i), this._chars.every((l) => l !== "") && this.emit("dds-complete", { value: this.value }), this.requestUpdate();
  }
  _handleFocusIn() {
    this._hasFocus || (this._hasFocus = !0, this.emit("dds-focus"));
  }
  _handleFocusOut(t) {
    const s = t.relatedTarget;
    this.contains(s) || (this._hasFocus = !1, this._activeIndex = -1, this.emit("dds-blur"), this.requestUpdate());
  }
  setActiveIndex(t) {
    this._activeIndex = t, this.requestUpdate();
  }
  get focusElement() {
    return this._slots[0] || this;
  }
  focus() {
    const t = this._chars.findIndex((e) => e === ""), s = t > -1 ? t : 0;
    this._focusSlot(s);
  }
  setValidity() {
    this.required && this._chars.some((t) => t === "") ? this.internals.setValidity(
      { valueMissing: !0 },
      "Please fill in all digits",
      this._slots[0]
    ) : this.internals.setValidity({});
  }
  render() {
    return h`
      <div
        part="base"
        class=${f("code-puncher", `code-puncher--${this.size}`, {
      "code-puncher--disabled": this.disabled,
      "code-puncher--readonly": this.readonly,
      "code-puncher--success": this.status === "success",
      "code-puncher--error": this.status === "error",
      "code-puncher--focused": this._hasFocus
    })}
        role="group"
        aria-label=${d(this.label || "Code input")}
        @focusin=${this._handleFocusIn}
        @focusout=${this._handleFocusOut}>
        ${this.label || this.tooltip ? h`
              <div class="label-container">
                ${this.label ? h`<dap-ds-form-label
                      part="label"
                      id="label"
                      .size=${this.size}
                      .required=${this.required}
                      .requiredLabel=${this.requiredLabel}
                      .optional=${this.optional}
                      .optionalLabel=${this.optionalLabel}
                      .disabled=${this.disabled}
                      class=${f("label")}
                      .noMargin=${!!this.description}
                      .hideLabel=${this.hideLabel}
                      label=${d(this.label)}>
                    </dap-ds-form-label>` : p}
                ${this.tooltip ? h`<dap-ds-tooltip
                      part="tooltip"
                      content=${this.tooltip}
                      mode="toggle"
                      floatingStrategy="fixed"
                      placement=${this.tooltipPlacement}>
                      <dap-ds-icon-button
                        clean
                        class="info-button"
                        slot="trigger"
                        aria-label=${this.tooltipAriaLabel || "More information"}
                        size=${this.size || "sm"}
                        iconSize=${this.size === "xs" ? "16" : "22"}>
                        <dap-ds-icon
                          name="information-line"
                          class="info-button"></dap-ds-icon>
                      </dap-ds-icon-button>
                    </dap-ds-tooltip>` : p}
              </div>
            ` : p}
        ${this.description ? h`
              <dap-ds-typography
                part="description"
                variant="description"
                class=${f("input-description")}
                size=${d(this.size)}
                id="description">
                ${this.description}
              </dap-ds-typography>
            ` : p}
        <div part="slots" class="code-puncher__slots">
          <slot></slot>
        </div>
        ${this.feedback && this._renderFeedback()}
      </div>
    `;
  }
  _renderFeedback() {
    return h`
      <dap-ds-feedback
        part="feedback"
        role="alert"
        feedbackType=${d(this.feedbackType)}
        feedbackSize="${d(this.size)}"
        .subtle=${this.subtle}
        id="feedback">
        <slot
          name="feedback-icon"
          @slotchange="${this._handleSlotChange}"></slot>
        ${this.feedback}
      </dap-ds-feedback>
    `;
  }
  _handleSlotChange(t) {
    (t == null ? void 0 : t.target).setAttribute("slot", "icon");
  }
};
c.tagName = "dap-ds-code-puncher", c.dependencies = {
  "dap-ds-form-label": $,
  "dap-ds-tooltip": S,
  "dap-ds-icon-button": x,
  "dap-ds-icon": k,
  "dap-ds-typography": C,
  "dap-ds-feedback": y
}, c.styles = V(I);
let o = c;
r([
  u({ type: Boolean, reflect: !0 })
], o.prototype, "mask");
r([
  u()
], o.prototype, "pattern");
r([
  u()
], o.prototype, "placeholder");
r([
  u()
], o.prototype, "autocomplete");
r([
  _()
], o.prototype, "_slots");
r([
  _()
], o.prototype, "_activeIndex");
r([
  _()
], o.prototype, "_chars");
r([
  _()
], o.prototype, "_hasFocus");
export {
  o as default
};
//# sourceMappingURL=code-puncher.component.js.map