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

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

import { ContextConsumer as p } from "../../node_modules/@lit/context/lib/controllers/context-consumer.js";
import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as c, html as h } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { state as a } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as x } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { DdsElement as f } from "../../internal/dds-hu-element.js";
import "../../localization/localization.js";
import { codePuncherContext as m } from "./code-puncher.context.js";
import v from "./code-puncher-slot.scss.js";
import { t as $ } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as b } from "../../node_modules/@lit/reactive-element/css-tag.js";
var y = Object.defineProperty, n = (d, t, s, l) => {
  for (var e = void 0, o = d.length - 1, _; o >= 0; o--)
    (_ = d[o]) && (e = _(t, s, e) || e);
  return e && y(t, s, e), e;
};
const r = class r extends f {
  constructor() {
    super(...arguments), this._index = -1, this._isActive = !1, this._registered = !1, this._onInput = () => {
      if (!this._input || !this._ctx) return;
      const t = this._input.value;
      t === "" ? this._ctx.setCharAt(this._index, "") : this._ctx.pattern.test(t) ? (this._ctx.setCharAt(this._index, t), this._index < this._ctx.slotCount - 1 && this._ctx.focusSlot(this._index + 1)) : this._input.value = this._ctx.getCharAt(this._index);
    }, this._onKeydown = (t) => {
      this._ctx && this._ctx.handleKeydown(this._index, t);
    }, this._handlePaste = (t) => {
      this._ctx && this._ctx.handlePaste(t);
    }, this._onFocus = () => {
      var s;
      if (!this._ctx) return;
      this._isActive = !0, (s = this._input) != null && s.value && this._input.select();
      const t = this.closest("dap-ds-code-puncher");
      t == null || t.setActiveIndex(this._index), this.requestUpdate();
    }, this._onBlur = () => {
      this._isActive = !1, this.requestUpdate();
    };
  }
  connectedCallback() {
    super.connectedCallback(), this._consumer = new p(this, {
      context: m,
      subscribe: !0,
      callback: (t) => {
        this._ctx = t, t && !this._registered && (this._index = t.registerSlot(this), this._registered = !0), this.requestUpdate();
      }
    });
  }
  disconnectedCallback() {
    this._ctx && this._registered && (this._ctx.unregisterSlot(this), this._registered = !1), super.disconnectedCallback();
  }
  willUpdate(t) {
    super.willUpdate(t), this._ctx && (this._isActive = this._ctx.activeIndex === this._index);
  }
  // Get properties from context
  get disabled() {
    var t, s;
    return (s = (t = this._ctx) == null ? void 0 : t.disabled) != null ? s : !1;
  }
  get readonly() {
    var t, s;
    return (s = (t = this._ctx) == null ? void 0 : t.readonly) != null ? s : !1;
  }
  get size() {
    var t, s;
    return (s = (t = this._ctx) == null ? void 0 : t.size) != null ? s : "sm";
  }
  // Focus the internal input
  focus() {
    var t;
    (t = this._input) == null || t.focus();
  }
  render() {
    if (!this._ctx || this._index < 0)
      return c;
    const t = this._ctx.getCharAt(this._index), s = !t && this._ctx.placeholder && !this._isActive, l = this._ctx.slotCount;
    return h`
      <div
        part="base"
        class=${u("code-puncher-slot", `code-puncher-slot--${this.size}`, {
      "code-puncher-slot--filled": !!t
    })}>
        <input
          id="input"
          part="input"
          class=${u(
      "code-puncher-slot__input",
      `code-puncher-slot__input--${this.size}`,
      {
        "code-puncher-slot__input--disabled": this.disabled,
        "code-puncher-slot__input--readonly": this.readonly,
        "code-puncher-slot__input--success": this._ctx.status === "success",
        "code-puncher-slot__input--error": this._ctx.status === "error"
      }
    )}
          type=${this._ctx.mask ? "password" : "text"}
          inputmode="numeric"
          maxlength="1"
          .value=${t}
          ?disabled=${this.disabled}
          ?readonly=${this.readonly}
          autocomplete=${this._index === 0 ? this._ctx.autocomplete : "off"}
          aria-label=${$("code-puncher.slot.aria-label", {
      index: this._index + 1,
      count: l
    })}
          @input=${this._onInput}
          @keydown=${this._onKeydown}
          @focus=${this._onFocus}
          @blur=${this._onBlur}
          @paste=${this._handlePaste} />
        ${s ? h`<span class="code-puncher-slot__placeholder"
              >${this._ctx.placeholder}</span
            >` : c}
        ${this._isActive && !t ? h`<span class="code-puncher-slot__caret"></span>` : c}
      </div>
    `;
  }
};
r.tagName = "dap-ds-code-puncher-slot", r.styles = b(v);
let i = r;
n([
  x("#input")
], i.prototype, "_input");
n([
  a()
], i.prototype, "_index");
n([
  a()
], i.prototype, "_isActive");
n([
  a()
], i.prototype, "_registered");
export {
  i as default
};
//# sourceMappingURL=code-puncher-slot.component.js.map