q2-tecton-elements 1.67.2 → 1.68.0

package/dist/q2-tecton-elements/q2-otp.entry.js

@@ -0,0 +1,453 @@
+import { r as t, c as e, h as i, g as o } from "./index-CGkHOjh1.js";
+
+import { c as s, o as r, i as a, l as n } from "./index-C5gj0T_3.js";
+
+const c = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-otp-margin:var(--tct-otp-margin-top, var(--t-otp-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-otp-margin-bottom, var(--t-otp-margin-bottom, var(--app-scale-5x, 25px)));--comp-otp-tween:var(--tct-otp-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));--comp-otp-vertical-gap:var(--tct-otp-vertical-gap, var(--app-scale-4x, 20px));--comp-otp-field-size:44px;--comp-otp-field-gap:var(--tct-otp-field-gap, var(--app-scale-2x, 10px));--comp-otp-field-background:var(--tct-otp-field-background, var(--t-base, #FFFFFF));--comp-otp-field-border-color:var(--tct-otp-field-border-color, var(--t-a11y-gray-color-AA, #404040));--comp-otp-field-border-radius:var(--tct-otp-field-border-radius, var(--tct-border-radius-2, var(--app-border-radius-2, 8px)));--comp-otp-field-border-width:var(--tct-otp-field-border-width, 1px);--comp-otp-field-font-color:var(--tct-otp-field-font-color, var(--t-text, inherit));--comp-otp-field-font-size:var(--tct-otp-field-font-size, var(--app-font-size, 16px));--comp-otp-field-masked-color:var(--tct-otp-field-masked-color, var(--tct-otp-field-font-color, var(--t-text, #1f1f1f)));--comp-otp-field-masked-size:var(--tct-otp-field-masked-size, var(--tct-otp-field-masked-font-size, 8px));--comp-otp-field-font-weight:var(--tct-otp-field-font-weight, 400);--comp-otp-field-focus-box-shadow:var(--tct-otp-field-focus-box-shadow, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc));--comp-otp-field-error-border-color:var(--tct-otp-field-error-border-color, var(--const-stoplight-alert, #C30000));--comp-otp-field-error-focus-ring-color:var(--tct-otp-field-error-focus-ring-color, #c30000);--comp-otp-field-error-focus-box-shadow:var(--tct-otp-field-error-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-error-focus-ring-color));--comp-otp-field-success-border-color:var(--tct-otp-field-success-border-color, var(--const-stoplight-success, #0e8a00));--comp-otp-field-success-focus-ring-color:var(--tct-otp-field-success-focus-ring-color, #0e8a00);--comp-otp-field-success-focus-box-shadow:var(--tct-otp-field-success-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color));--comp-otp-field-disabled-opacity:var(--tct-otp-field-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));--comp-otp-separator-color:var(--tct-otp-separator-color, var(--t-textA, var(--t-a11y-gray-color, #4d4d4d)));--comp-otp-separator-font-size:var(--tct-otp-separator-font-size, 20px);--comp-otp-separator-font-weight:var(--tct-otp-separator-font-weight, 600);display:flex;justify-content:center;margin:var(--tct-otp-margin, var(--comp-default-otp-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.otp-container{align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.otp-label{display:block;color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit));text-align:center;text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));transition:color var(--comp-otp-tween);width:100%}.helper-text{color:var(--tct-otp-helper-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-otp-helper-font-size, var(--app-font-size-small, 12px));text-align:center}.otp-content{align-items:center;display:inline-flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%}.send-code-hidden{clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;position:absolute;width:1px}.otp-control-group{align-items:center;display:flex;flex-direction:column;gap:var(--comp-otp-vertical-gap);max-width:100%;width:max-content}.fields-container{align-items:center;display:flex;flex-wrap:nowrap;gap:var(--comp-otp-field-gap);justify-content:center;pointer-events:none;position:relative;width:max-content}.fields-shell{max-width:100%;padding:4px;position:relative;width:max-content}.otp-hidden-input{appearance:none;-webkit-appearance:none;background:transparent;border:0;caret-color:transparent;color:transparent;cursor:text;font-size:16px;height:100%;inset:0;margin:0;opacity:1;outline:none;padding:0;pointer-events:auto;position:absolute;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:transparent}.otp-hidden-input::selection{background:transparent;color:transparent}.otp-hidden-input:focus,.otp-hidden-input:focus-visible{outline:none;box-shadow:none}.otp-hidden-input:disabled{cursor:not-allowed}.otp-slot{align-items:center;background:var(--comp-otp-field-background);border-color:var(--comp-otp-field-border-color);border-radius:var(--comp-otp-field-border-radius);border-style:solid;border-width:var(--comp-otp-field-border-width);box-sizing:border-box;color:var(--comp-otp-field-font-color);display:flex;flex:0 0 var(--comp-otp-field-size);height:var(--comp-otp-field-size);justify-content:center;position:relative;transition:border-color var(--comp-otp-tween), box-shadow var(--comp-otp-tween), opacity var(--comp-otp-tween);width:var(--comp-otp-field-size)}.otp-slot.is-active{border-color:var(--tct-otp-field-focus-border-color, var(--comp-otp-field-border-color));box-shadow:var(--comp-otp-field-focus-box-shadow)}.otp-slot .otp-caret{animation:otp-caret-blink 1s step-end infinite;background:currentColor;display:block;height:50%;pointer-events:none;width:2px}.state-error .otp-slot{border-color:var(--comp-otp-field-error-border-color)}.state-error .otp-slot.is-active{box-shadow:var(--comp-otp-field-error-focus-box-shadow)}.state-success .otp-slot{border-color:var(--comp-otp-field-success-border-color)}.state-success .otp-slot.is-active{box-shadow:var(--comp-otp-field-success-focus-box-shadow)}:host([disabled]) .otp-slot{opacity:var(--comp-otp-field-disabled-opacity)}:host([disabled]) .otp-hidden-input{cursor:not-allowed}@keyframes otp-caret-blink{0%,100%{opacity:1}50%{opacity:0}}.otp-char{color:var(--comp-otp-field-font-color);font-family:inherit;font-size:var(--comp-otp-field-font-size);font-weight:var(--comp-otp-field-font-weight);line-height:1;pointer-events:none;user-select:none}.otp-dot{background:var(--comp-otp-field-masked-color);border-radius:50%;display:block;height:var(--comp-otp-field-masked-size);pointer-events:none;width:var(--comp-otp-field-masked-size)}.otp-separator{color:var(--comp-otp-separator-color);font-size:var(--comp-otp-separator-font-size);font-weight:var(--comp-otp-separator-font-weight)}.submit-button{width:100%}.processing-overlay{align-items:center;background:var(--tct-otp-processing-overlay-background, rgba(255, 255, 255, 0.72));border-radius:var(--comp-otp-field-border-radius);display:flex;inset:0;justify-content:center;pointer-events:auto;position:absolute;--tct-loading-spinner-size:var(--tct-otp-processing-spinner-size, 32px);z-index:1}.otp-message{margin:0;text-align:center;width:100%}";
+
+const l = class {
+  constructor(i) {
+    t(this, i);
+    this.tctClear = e(this, "tctClear", 7);
+    this.tctComplete = e(this, "tctComplete", 7);
+    this.tctInput = e(this, "tctInput", 7);
+    this.tctSendCode = e(this, "tctSendCode", 7);
+    this.tctSubmit = e(this, "tctSubmit", 7);
+    // #region Own Properties
+        this.defaultSendCodeLabel = "tecton.element.otp.sendCode";
+    this.defaultSendCodeLabelValue = "Send code";
+    this.defaultSubmitLabel = "tecton.element.otp.verify";
+    this.defaultSubmitLabelValue = "Verify";
+    this.guid = s();
+    this.hasAutoFocused = false;
+    // #endregion
+    // #region State Properties
+        this.hasFocus = false;
+    // #endregion
+    // #region Public Property API
+    /** Focuses the first one-time password field when the component loads. */    this.autoFocus = false;
+    /** Triggers submission when the last field is filled. */    this.autoSubmit = false;
+    /** Clears all fields and returns focus to the first field when `state` becomes `error`. */    this.clearOnError = false;
+    /** Disables all one-time password fields. */    this.disabled = false;
+    /** Number of one-time password fields. */    this.length = 4 | 6 | 8;
+    /** Obscures entered characters. */    this.masked = false;
+    /** Toggles helper text visibility. */    this.showHelperText = false;
+    /**
+         * Renders fields in two equal groups with a dash separator.
+         * @private
+         */    this.split = false;
+    /** The composed one-time password value. */    this.value = "";
+    this.handleFocusIn = () => {
+      if (this.state === "error") {
+        this.value = "";
+        if (this.inputRef) this.inputRef.value = "";
+        this.state = undefined;
+      }
+      this.hasFocus = true;
+    };
+    this.handleFocusOut = t => {
+      if (this.autoFocus && this.hasAutoFocused && !this.value && !t.relatedTarget) {
+        return;
+      }
+      this.hasFocus = false;
+    };
+    this.handleInputEvent = () => {
+      if (this.disabled || this.locksInput) {
+        this.inputRef.value = this.value;
+        return;
+      }
+      const t = this.filterDigits(this.inputRef.value);
+      this.inputRef.value = t;
+      if (this.state === "error") {
+        this.state = undefined;
+      }
+      this.value = t;
+      this.tctInput.emit({
+        value: t
+      });
+      if (t.length === this.normalizedLength) {
+        this.handleComplete(t);
+      }
+    };
+    this.handleKeyDown = t => {
+      if (t.key !== "Enter") return;
+      if (this.disabled || this.locksInput || !this.isComplete) return;
+      t.preventDefault();
+      this.submit();
+    };
+    this.handlePaste = t => {
+      var e, i;
+      t.preventDefault();
+      if (this.disabled || this.locksInput) return;
+      const o = (i = (e = t.clipboardData) === null || e === void 0 ? void 0 : e.getData("text")) !== null && i !== void 0 ? i : "";
+      const s = this.filterDigits(o);
+      this.inputRef.value = s;
+      if (this.state === "error") {
+        this.state = undefined;
+      }
+      this.value = s;
+      this.tctInput.emit({
+        value: s
+      });
+      if (s.length === this.normalizedLength) {
+        this.handleComplete(s);
+      }
+    };
+    this.handleSendCodeClick = () => {
+      var t;
+      if (this.disabled) return;
+      (t = this.inputRef) === null || t === void 0 ? void 0 : t.focus();
+      this.state = undefined;
+      this.tctSendCode.emit();
+    };
+    this.handleSubmitClick = () => {
+      if (this.isVerifying || this.isSuccess) return;
+      this.submit();
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  componentWillLoad() {
+    this.value = this.filterDigits(this.value);
+  }
+  componentDidLoad() {
+    r(this.hostElement);
+    this.focusOnLoad();
+  }
+  componentDidRender() {
+    this.focusOnLoad();
+  }
+  // #endregion
+  // #region Listeners
+  onHostElementFocus(t) {
+    var e, i;
+    if (this.disabled || this.locksInput) return;
+    if (!a(t, this.hostElement)) return;
+    if (this.isAwaitingSendCode) {
+      (e = this.sendCodeRef) === null || e === void 0 ? void 0 : e.focus();
+      return;
+    }
+    (i = this.inputRef) === null || i === void 0 ? void 0 : i.focus();
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Clears all fields, focuses the first field, and emits `tctClear`.
+     */
+  async clear() {
+    this.clearValue(true);
+  }
+  /**
+     * Clears the component and resets error, success, and processing state.
+     */  async reset() {
+    this.clearValue(true);
+    this.state = undefined;
+  }
+  // #endregion
+  // #region Watchers
+  autoFocusObserver() {
+    this.focusOnLoad();
+  }
+  lengthObserver() {
+    if (this.value.length > this.normalizedLength) {
+      this.value = this.value.slice(0, this.normalizedLength);
+    }
+  }
+  stateObserver(t) {
+    if (t === null) {
+      Promise.resolve().then((() => {
+        if (this.state === null) this.state = undefined;
+      }));
+      return;
+    }
+    if (t === "error" && this.clearOnError) {
+      this.clearValue(true);
+    }
+  }
+  valueObserver() {
+    const t = this.filterDigits(this.value);
+    if (t !== this.value) {
+      this.value = t;
+    }
+    if (this.inputRef && this.inputRef.value !== t) {
+      this.inputRef.value = t;
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get activeSlotIndex() {
+    return Math.min(this.value.length, this.normalizedLength - 1);
+  }
+  get componentId() {
+    return `q2-otp-${this.guid}`;
+  }
+  get describedBy() {
+    const t = [];
+    if (this.state === "error" && this.errorMessage) t.push(this.messageId);
+    if (this.state === "success" && this.successMessage) t.push(this.messageId);
+    return t.length ? t.join(" ") : undefined;
+  }
+  get hasVisibleHelperText() {
+    return this.showHelperText && !!this.helperText;
+  }
+  get helperTextId() {
+    return `${this.componentId}-helper-text`;
+  }
+  get inputAriaLabel() {
+    const t = `${this.localizedLabel} (${this.normalizedLength} ${n("tecton.element.otp.digits")})`;
+    return [ this.hasVisibleHelperText ? this.localizedHelperText : "", t ].filter(Boolean).join(" ");
+  }
+  get isAwaitingSendCode() {
+    return this.state === "ready";
+  }
+  get isComplete() {
+    return this.value.length === this.normalizedLength;
+  }
+  get isSuccess() {
+    return this.state === "success";
+  }
+  get isVerifying() {
+    return this.state === "verifying";
+  }
+  get labelId() {
+    return `${this.componentId}-label`;
+  }
+  get localizedHelperText() {
+    return n(this.helperText);
+  }
+  get localizedLabel() {
+    return n(this.label);
+  }
+  get localizedProcessingLabel() {
+    return n(this.processingLabel || "Verifying");
+  }
+  get localizedSendCodeLabel() {
+    if (this.sendCodeLabel) return n(this.sendCodeLabel);
+    const t = n(this.defaultSendCodeLabel);
+    return t === this.defaultSendCodeLabel ? this.defaultSendCodeLabelValue : t;
+  }
+  get localizedSubmitLabel() {
+    if (this.submitLabel) return n(this.submitLabel);
+    const t = n(this.defaultSubmitLabel);
+    return t === this.defaultSubmitLabel ? this.defaultSubmitLabelValue : t;
+  }
+  get locksInput() {
+    return this.isVerifying || this.isSuccess;
+  }
+  get messageId() {
+    return `${this.componentId}-message`;
+  }
+  get normalizedLength() {
+    const t = Number(this.length);
+    return [ 4, 6, 8 ].includes(t) ? t : 6;
+  }
+  clearValue(t = false) {
+    var e;
+    this.value = "";
+    if (this.inputRef) this.inputRef.value = "";
+    (e = this.inputRef) === null || e === void 0 ? void 0 : e.focus();
+    if (t) this.tctClear.emit({
+      value: ""
+    });
+  }
+  filterDigits(t) {
+    return t.replace(/\D/g, "").slice(0, this.normalizedLength);
+  }
+  focusOnLoad() {
+    if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput) return;
+    setTimeout((() => {
+      if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput || !this.inputRef) {
+        return;
+      }
+      this.hasAutoFocused = true;
+      this.hasFocus = true;
+      this.inputRef.focus();
+    }), 100);
+  }
+  handleComplete(t) {
+    this.tctComplete.emit({
+      value: t
+    });
+    if (this.autoSubmit) {
+      setTimeout((() => this.submit(t)), 150);
+    }
+  }
+  submit(t = this.value) {
+    this.state = "verifying";
+    this.tctSubmit.emit({
+      value: t
+    });
+  }
+  // #endregion
+  // #region Render Methods
+  renderFields() {
+    return Array.from({
+      length: this.normalizedLength
+    }, ((t, e) => {
+      const o = this.value[e] || "";
+      const s = this.hasFocus && e === this.activeSlotIndex;
+      const r = !!o;
+      return [ this.split && e === this.normalizedLength / 2 && i("span", {
+        "aria-hidden": "true",
+        class: "otp-separator"
+      }, "-"), i("div", {
+        class: {
+          "otp-slot": true,
+          "is-active": s,
+          "has-value": r
+        }
+      }, s && !r ? i("span", {
+        class: "otp-caret",
+        "aria-hidden": "true"
+      }) : this.masked && r ? i("span", {
+        class: "otp-dot"
+      }) : i("span", {
+        class: "otp-char"
+      }, o)) ];
+    }));
+  }
+  renderHelperText() {
+    if (!this.hasVisibleHelperText) return;
+    return i("div", {
+      class: "helper-text",
+      id: this.helperTextId
+    }, this.localizedHelperText);
+  }
+  renderLabel() {
+    if (!this.label) return;
+    return i("div", {
+      class: "otp-label",
+      id: this.labelId
+    }, this.localizedLabel);
+  }
+  renderMessage() {
+    if (this.state === "error" && this.errorMessage) {
+      return i("q2-message", {
+        appearance: "minimal",
+        class: "otp-message",
+        id: this.messageId,
+        type: "error"
+      }, n(this.errorMessage));
+    }
+    if (this.state === "success" && this.successMessage) {
+      return i("q2-message", {
+        appearance: "minimal",
+        class: "otp-message",
+        id: this.messageId,
+        type: "success"
+      }, n(this.successMessage));
+    }
+  }
+  renderProcessingOverlay() {
+    if (this.autoSubmit && this.isVerifying) {
+      return i("div", {
+        class: "processing-overlay"
+      }, i("q2-loading", {
+        label: this.localizedProcessingLabel
+      }));
+    }
+  }
+  renderSendCodeButton() {
+    if (!this.isAwaitingSendCode) return;
+    return i("q2-btn", {
+      block: true,
+      class: "send-code-button",
+      disabled: this.disabled,
+      intent: "workflow-primary",
+      label: this.localizedSendCodeLabel,
+      onClick: this.handleSendCodeClick,
+      ref: t => this.sendCodeRef = t
+    });
+  }
+  renderSubmitArea() {
+    if (this.isSuccess) {
+      return i("q2-btn", {
+        block: true,
+        class: "submit-button",
+        intent: "neutral",
+        onClick: this.handleSubmitClick
+      }, i("q2-icon", {
+        type: "checkmark"
+      }), n("Success"));
+    }
+    return i("q2-btn", {
+      block: true,
+      class: "submit-button",
+      disabled: this.disabled || !this.isComplete,
+      intent: "workflow-primary",
+      label: this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel,
+      loading: this.isVerifying,
+      onClick: this.handleSubmitClick
+    });
+  }
+  render() {
+    return i("div", {
+      key: "3befb9c99f5fa35e6f7d653b256306513499e2fe",
+      "aria-busy": this.isVerifying ? "true" : undefined,
+      "aria-labelledby": this.label ? this.labelId : undefined,
+      class: {
+        "otp-container": true,
+        "has-focus": this.hasFocus,
+        "is-masked": this.masked,
+        "send-code-pending": this.isAwaitingSendCode,
+        "state-error": this.state === "error",
+        "state-success": this.state === "success",
+        "state-verifying": this.isVerifying,
+        [`length-${this.normalizedLength}`]: true
+      },
+      role: "group"
+    }, this.renderSendCodeButton(), i("div", {
+      key: "813749faba075fda49bc4aa05366479b386b9256",
+      class: {
+        "otp-content": true,
+        "send-code-hidden": this.isAwaitingSendCode
+      }
+    }, this.renderLabel(), i("div", {
+      key: "b9e4967cebebbec209359b6463502d9daab9a587",
+      class: "otp-control-group"
+    }, i("div", {
+      key: "611bff112f241cde331858545954a9dd3ce4d116",
+      class: "fields-shell"
+    }, i("div", {
+      key: "38b2d554c171c8b20ec075e2f9ccb6822274214d",
+      class: "fields-container"
+    }, i("input", {
+      key: "3a2f27e7aa17940b070b1c7ce9b472d8c498192e",
+      "aria-describedby": this.describedBy,
+      "aria-invalid": this.state === "error" ? "true" : "false",
+      "aria-label": this.inputAriaLabel,
+      autocomplete: "one-time-code",
+      autofocus: this.autoFocus,
+      class: "otp-hidden-input",
+      disabled: this.disabled || this.isVerifying || this.isSuccess,
+      inputmode: "numeric",
+      maxLength: this.normalizedLength,
+      onBlur: this.handleFocusOut,
+      onFocus: this.handleFocusIn,
+      onInput: this.handleInputEvent,
+      onKeyDown: this.handleKeyDown,
+      onPaste: this.handlePaste,
+      pattern: "[0-9]*",
+      ref: t => this.inputRef = t,
+      "test-id": "q2OtpInput",
+      type: "text",
+      value: this.value
+    }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText()));
+  }
+  get hostElement() {
+    return o(this);
+  }
+  static get watchers() {
+    return {
+      autoFocus: [ "autoFocusObserver" ],
+      length: [ "lengthObserver" ],
+      state: [ "stateObserver" ],
+      value: [ "valueObserver" ]
+    };
+  }
+};
+
+l.style = c;
+
+export { l as q2_otp };
+//# sourceMappingURL=q2-otp.entry.esm.js.map
+//# sourceMappingURL=q2-otp.entry.js.map

package/dist/q2-tecton-elements/q2-otp.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["q2OtpCss","Q2Otp","constructor","hostRef","this","defaultSendCodeLabel","defaultSendCodeLabelValue","defaultSubmitLabel","defaultSubmitLabelValue","guid","createGuid","hasAutoFocused","hasFocus","autoFocus","autoSubmit","clearOnError","disabled","length","masked","showHelperText","split","value","handleFocusIn","state","inputRef","undefined","handleFocusOut","event","relatedTarget","handleInputEvent","locksInput","digits","filterDigits","tctInput","emit","normalizedLength","handleComplete","handleKeyDown","key","isComplete","preventDefault","submit","handlePaste","pastedValue","_b","_a","clipboardData","getData","handleSendCodeClick","focus","tctSendCode","handleSubmitClick","isVerifying","isSuccess","componentWillLoad","componentDidLoad","overrideFocus","hostElement","focusOnLoad","componentDidRender","onHostElementFocus","isEventFromElement","isAwaitingSendCode","sendCodeRef","clear","clearValue","reset","autoFocusObserver","lengthObserver","slice","stateObserver","Promise","resolve","then","valueObserver","activeSlotIndex","Math","min","componentId","describedBy","ids","errorMessage","push","messageId","successMessage","join","hasVisibleHelperText","helperText","helperTextId","inputAriaLabel","inputLabel","localizedLabel","loc","localizedHelperText","filter","Boolean","labelId","label","localizedProcessingLabel","processingLabel","localizedSendCodeLabel","sendCodeLabel","localizedSubmitLabel","submitLabel","Number","includes","emitEvent","tctClear","replace","setTimeout","tctComplete","tctSubmit","renderFields","Array","from","_","index","char","isActive","hasValue","h","class","renderHelperText","id","renderLabel","renderMessage","appearance","type","renderProcessingOverlay","renderSendCodeButton","block","intent","onClick","ref","el","renderSubmitArea","loading","render","role","autocomplete","autofocus","inputmode","maxLength","onBlur","onFocus","onInput","onKeyDown","onPaste","pattern"],"sources":["src/components/q2-otp/q2-otp.scss?tag=q2-otp&encapsulation=shadow","src/components/q2-otp/q2-otp.tsx"],"sourcesContent":["@import '../../styles/host';\n@import '../../styles/functions';\n\n:host {\n    --comp-default-otp-margin: #{var-list(var-prefixer(otp-margin-top), --app-scale-5x, 25px) 0\n        var-list(var-prefixer(otp-margin-bottom), --app-scale-5x, 25px)};\n    --comp-otp-tween: #{var-list(--tct-otp-tween, --tct-tween-2, --app-tween-2, unquote('0.4s ease'))};\n    --comp-otp-vertical-gap: #{var-list(--tct-otp-vertical-gap, --app-scale-4x, 20px)};\n    --comp-otp-field-size: 44px;\n    --comp-otp-field-gap: #{var-list(--tct-otp-field-gap, --app-scale-2x, 10px)};\n    --comp-otp-field-background: #{var-list(--tct-otp-field-background, --t-base, #FFFFFF)};\n    --comp-otp-field-border-color: #{var-list(--tct-otp-field-border-color, --t-a11y-gray-color-AA, #404040)};\n    --comp-otp-field-border-radius: #{var-list(\n            --tct-otp-field-border-radius,\n            --tct-border-radius-2,\n            --app-border-radius-2,\n            8px\n        )};\n    --comp-otp-field-border-width: #{var-list(--tct-otp-field-border-width, 1px)};\n    --comp-otp-field-font-color: #{var-list(--tct-otp-field-font-color, --t-text, inherit)};\n    --comp-otp-field-font-size: #{var-list(--tct-otp-field-font-size, --app-font-size, 16px)};\n    --comp-otp-field-masked-color: #{var-list(--tct-otp-field-masked-color, --tct-otp-field-font-color, --t-text, #1f1f1f)};\n    --comp-otp-field-masked-size: #{var-list(--tct-otp-field-masked-size, --tct-otp-field-masked-font-size, 8px)};\n    --comp-otp-field-font-weight: #{var-list(--tct-otp-field-font-weight, 400)};\n    --comp-otp-field-focus-box-shadow: #{var-list(\n            --tct-otp-field-focus-box-shadow,\n            --const-double-focus-ring,\n            unquote('0 0 0 2px #ffffff, 0 0 0 4px #0066cc')\n        )};\n    --comp-otp-field-error-border-color: #{var-list(--tct-otp-field-error-border-color, --const-stoplight-alert, #C30000)};\n    --comp-otp-field-error-focus-ring-color: #{var-list(--tct-otp-field-error-focus-ring-color, #c30000)};\n    --comp-otp-field-error-focus-box-shadow: #{var-list(\n            --tct-otp-field-error-focus-box-shadow,\n            unquote('0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-error-focus-ring-color)')\n        )};\n    --comp-otp-field-success-border-color: #{var-list(--tct-otp-field-success-border-color, --const-stoplight-success, #0e8a00)};\n    --comp-otp-field-success-focus-ring-color: #{var-list(--tct-otp-field-success-focus-ring-color, #0e8a00)};\n    --comp-otp-field-success-focus-box-shadow: #{var-list(\n            --tct-otp-field-success-focus-box-shadow,\n            unquote('0 0 0 2px #ffffff, 0 0 0 4px var(--comp-otp-field-success-focus-ring-color)')\n        )};\n    --comp-otp-field-disabled-opacity: #{var-list(\n            --tct-otp-field-disabled-opacity,\n            --tct-disabled-opacity,\n            --app-disabled-opacity,\n            0.4\n        )};\n    --comp-otp-separator-color: #{var-list(--tct-otp-separator-color, --t-textA, --t-a11y-gray-color, #4d4d4d)};\n    --comp-otp-separator-font-size: #{var-list(--tct-otp-separator-font-size, 20px)};\n    --comp-otp-separator-font-weight: #{var-list(--tct-otp-separator-font-weight, 600)};\n\n    display: flex;\n    justify-content: center;\n    margin: var-list(--tct-otp-margin, --comp-default-otp-margin);\n    font-size: var-list(var-prefixer(input-font-size), --app-font-size, inherit);\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.otp-container {\n    align-items: center;\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--comp-otp-vertical-gap);\n    max-width: 100%;\n}\n\n.otp-label {\n    display: block;\n    color: var-list(var-prefixer(input-label-font-color), inherit);\n    font-size: var-list(var-prefixer(input-label-font-size), inherit);\n    font-weight: var-list(var-prefixer(input-label-font-weight), 600);\n    letter-spacing: var-list(var-prefixer(input-label-letter-spacing), inherit);\n    line-height: var-list(var-prefixer(input-label-line-height), inherit);\n    text-align: center;\n    text-transform: var-list(var-prefixer(input-label-text-transform), none);\n    transition: color var(--comp-otp-tween);\n    width: 100%;\n}\n\n.helper-text {\n    color: var-list(--tct-otp-helper-font-color, --t-textA, --t-a11y-gray-color, rgba(77, 77, 77, 0.77));\n    font-size: var-list(--tct-otp-helper-font-size, --app-font-size-small, 12px);\n    text-align: center;\n}\n\n.otp-content {\n    align-items: center;\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--comp-otp-vertical-gap);\n    max-width: 100%;\n}\n\n.send-code-hidden {\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    overflow: hidden;\n    position: absolute;\n    width: 1px;\n}\n\n.otp-control-group {\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    gap: var(--comp-otp-vertical-gap);\n    max-width: 100%;\n    width: max-content;\n}\n\n.fields-container {\n    align-items: center;\n    display: flex;\n    flex-wrap: nowrap;\n    gap: var(--comp-otp-field-gap);\n    justify-content: center;\n    pointer-events: none;\n    position: relative;\n    width: max-content;\n}\n\n.fields-shell {\n    max-width: 100%;\n    padding: 4px;\n    position: relative;\n    width: max-content;\n}\n\n.otp-hidden-input {\n    appearance: none;\n    -webkit-appearance: none;\n    background: transparent;\n    border: 0;\n    caret-color: transparent;\n    color: transparent;\n    cursor: text;\n    font-size: 16px;\n    height: 100%;\n    inset: 0;\n    margin: 0;\n    opacity: 1;\n    outline: none;\n    padding: 0;\n    pointer-events: auto;\n    position: absolute;\n    width: 100%;\n    z-index: 1;\n    -webkit-tap-highlight-color: transparent;\n    -webkit-text-fill-color: transparent;\n\n    &::selection {\n        background: transparent;\n        color: transparent;\n    }\n\n    &:focus,\n    &:focus-visible {\n        outline: none;\n        box-shadow: none;\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n}\n\n.otp-slot {\n    align-items: center;\n    background: var(--comp-otp-field-background);\n    border-color: var(--comp-otp-field-border-color);\n    border-radius: var(--comp-otp-field-border-radius);\n    border-style: solid;\n    border-width: var(--comp-otp-field-border-width);\n    box-sizing: border-box;\n    color: var(--comp-otp-field-font-color);\n    display: flex;\n    flex: 0 0 var(--comp-otp-field-size);\n    height: var(--comp-otp-field-size);\n    justify-content: center;\n    position: relative;\n    transition:\n        border-color var(--comp-otp-tween),\n        box-shadow var(--comp-otp-tween),\n        opacity var(--comp-otp-tween);\n    width: var(--comp-otp-field-size);\n\n    &.is-active {\n        border-color: var-list(--tct-otp-field-focus-border-color, --comp-otp-field-border-color);\n        box-shadow: var(--comp-otp-field-focus-box-shadow);\n    }\n\n    .otp-caret {\n        animation: otp-caret-blink 1s step-end infinite;\n        background: currentColor;\n        display: block;\n        height: 50%;\n        pointer-events: none;\n        width: 2px;\n    }\n\n    .state-error & {\n        border-color: var(--comp-otp-field-error-border-color);\n\n        &.is-active {\n            box-shadow: var(--comp-otp-field-error-focus-box-shadow);\n        }\n    }\n\n    .state-success & {\n        border-color: var(--comp-otp-field-success-border-color);\n\n        &.is-active {\n            box-shadow: var(--comp-otp-field-success-focus-box-shadow);\n        }\n    }\n}\n\n:host([disabled]) .otp-slot {\n    opacity: var(--comp-otp-field-disabled-opacity);\n}\n\n:host([disabled]) .otp-hidden-input {\n    cursor: not-allowed;\n}\n\n@keyframes otp-caret-blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0; }\n}\n\n.otp-char {\n    color: var(--comp-otp-field-font-color);\n    font-family: inherit;\n    font-size: var(--comp-otp-field-font-size);\n    font-weight: var(--comp-otp-field-font-weight);\n    line-height: 1;\n    pointer-events: none;\n    user-select: none;\n}\n\n.otp-dot {\n    background: var(--comp-otp-field-masked-color);\n    border-radius: 50%;\n    display: block;\n    height: var(--comp-otp-field-masked-size);\n    pointer-events: none;\n    width: var(--comp-otp-field-masked-size);\n}\n\n.otp-separator {\n    color: var(--comp-otp-separator-color);\n    font-size: var(--comp-otp-separator-font-size);\n    font-weight: var(--comp-otp-separator-font-weight);\n}\n\n.submit-button {\n    width: 100%;\n}\n\n.processing-overlay {\n    align-items: center;\n    background: var(--tct-otp-processing-overlay-background, rgba(255, 255, 255, 0.72));\n    border-radius: var(--comp-otp-field-border-radius);\n    display: flex;\n    inset: 0;\n    justify-content: center;\n    pointer-events: auto;\n    position: absolute;\n    --tct-loading-spinner-size: var(--tct-otp-processing-spinner-size, 32px);\n    z-index: 1;\n}\n\n.otp-message {\n    margin: 0;\n    text-align: center;\n    width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n/**\n * @name One-Time Password\n * @category Forms\n * @summary Use for entering a short one-time verification code.\n */\n@Component({ tag: 'q2-otp', shadow: true, styleUrl: 'q2-otp.scss' })\nexport class Q2Otp {\n    // #region Own Properties\n\n    private readonly defaultSendCodeLabel = 'tecton.element.otp.sendCode';\n    private readonly defaultSendCodeLabelValue = 'Send code';\n    private readonly defaultSubmitLabel = 'tecton.element.otp.verify';\n    private readonly defaultSubmitLabelValue = 'Verify';\n    guid = createGuid();\n    hasAutoFocused = false;\n    inputRef: HTMLInputElement;\n    sendCodeRef: HTMLElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasFocus: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Focuses the first one-time password field when the component loads. */\n    @Prop({ reflect: true })\n    autoFocus: boolean = false;\n\n    /** Triggers submission when the last field is filled. */\n    @Prop({ reflect: true })\n    autoSubmit: boolean = false;\n\n    /** Clears all fields and returns focus to the first field when `state` becomes `error`. */\n    @Prop({ reflect: true })\n    clearOnError: boolean = false;\n\n    /** Disables all one-time password fields. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Error message rendered below the submit area.\n     * @localizable\n     */\n    @Prop()\n    errorMessage: string;\n\n    /**\n     * Helper text content.\n     * @localizable\n     */\n    @Prop()\n    helperText: string;\n\n    /**\n     * Visible label above the one-time password fields.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Number of one-time password fields. */\n    @Prop({ reflect: true })\n    length: number = 4 | 6 | 8;\n\n    /** Obscures entered characters. */\n    @Prop({ reflect: true })\n    masked: boolean = false;\n\n    /**\n     * Button text during processing.\n     * @localizable\n     */\n    @Prop()\n    processingLabel: string;\n\n    /**\n     * Button text for the send-code action.\n     * @localizable\n     */\n    @Prop()\n    sendCodeLabel: string;\n\n    /** Toggles helper text visibility. */\n    @Prop({ reflect: true })\n    showHelperText: boolean = false;\n\n    /**\n     * Renders fields in two equal groups with a dash separator.\n     * @private\n     */\n    @Prop({ reflect: true })\n    split: boolean = false;\n\n    /**\n     * Sets the visual status for the one-time password fields.\n     *\n     * - `ready` — Shows the send-code button and hides the input fields until the user requests a code.\n     * - `error` — Displays an error style on the fields. If `errorMessage` is set, it renders below the submit area.\n     *   When `clearOnError` is enabled, all fields are cleared and focus returns to the first field.\n     * - `success` — Locks the input, replaces the submit button with a success indicator, and displays the\n     *   `successMessage` if provided.\n     * - `verifying` — Locks the input and puts the submit button into a loading state. When combined with `autoSubmit`,\n     *   a processing overlay with `processingLabel` is shown over the fields.\n     */\n    @Prop({ reflect: true, mutable: true })\n    state: 'error' | 'ready' | 'success' | 'verifying' | undefined;\n\n    /**\n     * Renders a submit button with this label.\n     * @localizable\n     */\n    @Prop()\n    submitLabel: string;\n\n    /**\n     * Success message rendered below the submit area.\n     * @localizable\n     */\n    @Prop()\n    successMessage: string;\n\n    /** The composed one-time password value. */\n    @Prop({ mutable: true })\n    value: string = '';\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the fields are cleared. */\n    @Event()\n    tctClear: EventEmitter<{ value: string }>;\n\n    /** Emitted when all fields are filled. */\n    @Event()\n    tctComplete: EventEmitter<{ value: string }>;\n\n    /** Emitted when any field value changes. */\n    @Event()\n    tctInput: EventEmitter<{ value: string }>;\n\n    /** Emitted when the send-code button is clicked. */\n    @Event()\n    tctSendCode: EventEmitter<void>;\n\n    /** Emitted when the submit button is clicked or auto-submit triggers. */\n    @Event()\n    tctSubmit: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void {\n        this.value = this.filterDigits(this.value);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.focusOnLoad();\n    }\n\n    componentDidRender(): void {\n        this.focusOnLoad();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent): void {\n        if (this.disabled || this.locksInput) return;\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (this.isAwaitingSendCode) {\n            this.sendCodeRef?.focus();\n            return;\n        }\n        this.inputRef?.focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Clears all fields, focuses the first field, and emits `tctClear`.\n     */\n    @Method()\n    async clear(): Promise<void> {\n        this.clearValue(true);\n    }\n\n    /**\n     * Clears the component and resets error, success, and processing state.\n     */\n    @Method()\n    async reset(): Promise<void> {\n        this.clearValue(true);\n        this.state = undefined;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoFocus')\n    autoFocusObserver(): void {\n        this.focusOnLoad();\n    }\n\n    @Watch('length')\n    lengthObserver(): void {\n        if (this.value.length > this.normalizedLength) {\n            this.value = this.value.slice(0, this.normalizedLength);\n        }\n    }\n\n    @Watch('state')\n    stateObserver(state: string | null): void {\n        if (state === null) {\n            Promise.resolve().then(() => {\n                if (this.state === null) this.state = undefined;\n            });\n            return;\n        }\n\n        if (state === 'error' && this.clearOnError) {\n            this.clearValue(true);\n        }\n    }\n\n    @Watch('value')\n    valueObserver(): void {\n        const digits = this.filterDigits(this.value);\n        if (digits !== this.value) {\n            this.value = digits;\n        }\n        if (this.inputRef && this.inputRef.value !== digits) {\n            this.inputRef.value = digits;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get activeSlotIndex(): number {\n        return Math.min(this.value.length, this.normalizedLength - 1);\n    }\n\n    get componentId(): string {\n        return `q2-otp-${this.guid}`;\n    }\n\n    get describedBy(): string | undefined {\n        const ids = [];\n        if (this.state === 'error' && this.errorMessage) ids.push(this.messageId);\n        if (this.state === 'success' && this.successMessage) ids.push(this.messageId);\n        return ids.length ? ids.join(' ') : undefined;\n    }\n\n    get hasVisibleHelperText(): boolean {\n        return this.showHelperText && !!this.helperText;\n    }\n\n    get helperTextId(): string {\n        return `${this.componentId}-helper-text`;\n    }\n\n    get inputAriaLabel(): string {\n        const inputLabel = `${this.localizedLabel} (${this.normalizedLength} ${loc('tecton.element.otp.digits')})`;\n        return [this.hasVisibleHelperText ? this.localizedHelperText : '', inputLabel].filter(Boolean).join(' ');\n    }\n\n    get isAwaitingSendCode(): boolean {\n        return this.state === 'ready';\n    }\n\n    get isComplete(): boolean {\n        return this.value.length === this.normalizedLength;\n    }\n\n    get isSuccess(): boolean {\n        return this.state === 'success';\n    }\n\n    get isVerifying(): boolean {\n        return this.state === 'verifying';\n    }\n\n    get labelId(): string {\n        return `${this.componentId}-label`;\n    }\n\n    get localizedHelperText(): string {\n        return loc(this.helperText);\n    }\n\n    get localizedLabel(): string {\n        return loc(this.label);\n    }\n\n    get localizedProcessingLabel(): string {\n        return loc(this.processingLabel || 'Verifying');\n    }\n\n    get localizedSendCodeLabel(): string {\n        if (this.sendCodeLabel) return loc(this.sendCodeLabel);\n\n        const localizedLabel = loc(this.defaultSendCodeLabel);\n        return localizedLabel === this.defaultSendCodeLabel ? this.defaultSendCodeLabelValue : localizedLabel;\n    }\n\n    get localizedSubmitLabel(): string {\n        if (this.submitLabel) return loc(this.submitLabel);\n\n        const localizedLabel = loc(this.defaultSubmitLabel);\n        return localizedLabel === this.defaultSubmitLabel ? this.defaultSubmitLabelValue : localizedLabel;\n    }\n\n    get locksInput(): boolean {\n        return this.isVerifying || this.isSuccess;\n    }\n\n    get messageId(): string {\n        return `${this.componentId}-message`;\n    }\n\n    get normalizedLength() {\n        const length = Number(this.length);\n        return [4, 6, 8].includes(length) ? length : 6;\n    }\n\n    clearValue(emitEvent = false): void {\n        this.value = '';\n        if (this.inputRef) this.inputRef.value = '';\n        this.inputRef?.focus();\n        if (emitEvent) this.tctClear.emit({ value: '' });\n    }\n\n    filterDigits(value: string): string {\n        return value.replace(/\\D/g, '').slice(0, this.normalizedLength);\n    }\n\n    focusOnLoad(): void {\n        if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput) return;\n\n        setTimeout(() => {\n            if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput || !this.inputRef) {\n                return;\n            }\n\n            this.hasAutoFocused = true;\n            this.hasFocus = true;\n            this.inputRef.focus();\n        }, 100);\n    }\n\n    handleComplete(digits: string): void {\n        this.tctComplete.emit({ value: digits });\n\n        if (this.autoSubmit) {\n            setTimeout(() => this.submit(digits), 150);\n        }\n    }\n\n    handleFocusIn = () => {\n        if (this.state === 'error') {\n            this.value = '';\n            if (this.inputRef) this.inputRef.value = '';\n            this.state = undefined;\n        }\n        this.hasFocus = true;\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        if (this.autoFocus && this.hasAutoFocused && !this.value && !event.relatedTarget) {\n            return;\n        }\n        this.hasFocus = false;\n    };\n\n    handleInputEvent = () => {\n        if (this.disabled || this.locksInput) {\n            this.inputRef.value = this.value;\n            return;\n        }\n\n        const digits = this.filterDigits(this.inputRef.value);\n        this.inputRef.value = digits;\n\n        if (this.state === 'error') {\n            this.state = undefined;\n        }\n\n        this.value = digits;\n        this.tctInput.emit({ value: digits });\n\n        if (digits.length === this.normalizedLength) {\n            this.handleComplete(digits);\n        }\n    };\n\n    handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== 'Enter') return;\n        if (this.disabled || this.locksInput || !this.isComplete) return;\n\n        event.preventDefault();\n        this.submit();\n    };\n\n    handlePaste = (event: ClipboardEvent) => {\n        event.preventDefault();\n        if (this.disabled || this.locksInput) return;\n\n        const pastedValue = event.clipboardData?.getData('text') ?? '';\n        const digits = this.filterDigits(pastedValue);\n\n        this.inputRef.value = digits;\n\n        if (this.state === 'error') {\n            this.state = undefined;\n        }\n\n        this.value = digits;\n        this.tctInput.emit({ value: digits });\n\n        if (digits.length === this.normalizedLength) {\n            this.handleComplete(digits);\n        }\n    };\n\n    handleSendCodeClick = () => {\n        if (this.disabled) return;\n\n        this.inputRef?.focus();\n        this.state = undefined;\n        this.tctSendCode.emit();\n    };\n\n    handleSubmitClick = () => {\n        if (this.isVerifying || this.isSuccess) return;\n        this.submit();\n    };\n\n    submit(value = this.value): void {\n        this.state = 'verifying';\n        this.tctSubmit.emit({ value });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderFields() {\n        return Array.from({ length: this.normalizedLength }, (_, index) => {\n            const char = this.value[index] || '';\n            const isActive = this.hasFocus && index === this.activeSlotIndex;\n            const hasValue = !!char;\n\n            return [\n                this.split && index === this.normalizedLength / 2 && (\n                    <span\n                        aria-hidden=\"true\"\n                        class=\"otp-separator\"\n                    >\n                        -\n                    </span>\n                ),\n                <div\n                    class={{\n                        'otp-slot': true,\n                        'is-active': isActive,\n                        'has-value': hasValue,\n                    }}\n                >\n                    {isActive && !hasValue ? (\n                        <span\n                            class=\"otp-caret\"\n                            aria-hidden=\"true\"\n                        />\n                    ) : this.masked && hasValue ? (\n                        <span class=\"otp-dot\" />\n                    ) : (\n                        <span class=\"otp-char\">{char}</span>\n                    )}\n                </div>,\n            ];\n        });\n    }\n\n    renderHelperText() {\n        if (!this.hasVisibleHelperText) return;\n        return (\n            <div\n                class=\"helper-text\"\n                id={this.helperTextId}\n            >\n                {this.localizedHelperText}\n            </div>\n        );\n    }\n\n    renderLabel() {\n        if (!this.label) return;\n        return (\n            <div\n                class=\"otp-label\"\n                id={this.labelId}\n            >\n                {this.localizedLabel}\n            </div>\n        );\n    }\n\n    renderMessage() {\n        if (this.state === 'error' && this.errorMessage) {\n            return (\n                <q2-message\n                    appearance=\"minimal\"\n                    class=\"otp-message\"\n                    id={this.messageId}\n                    type=\"error\"\n                >\n                    {loc(this.errorMessage)}\n                </q2-message>\n            );\n        }\n\n        if (this.state === 'success' && this.successMessage) {\n            return (\n                <q2-message\n                    appearance=\"minimal\"\n                    class=\"otp-message\"\n                    id={this.messageId}\n                    type=\"success\"\n                >\n                    {loc(this.successMessage)}\n                </q2-message>\n            );\n        }\n    }\n\n    renderProcessingOverlay() {\n        if (this.autoSubmit && this.isVerifying) {\n            return (\n                <div class=\"processing-overlay\">\n                    <q2-loading label={this.localizedProcessingLabel} />\n                </div>\n            );\n        }\n    }\n\n    renderSendCodeButton() {\n        if (!this.isAwaitingSendCode) return;\n\n        return (\n            <q2-btn\n                block\n                class=\"send-code-button\"\n                disabled={this.disabled}\n                intent=\"workflow-primary\"\n                label={this.localizedSendCodeLabel}\n                onClick={this.handleSendCodeClick}\n                ref={el => (this.sendCodeRef = el)}\n            />\n        );\n    }\n\n    renderSubmitArea() {\n        if (this.isSuccess) {\n            return (\n                <q2-btn\n                    block\n                    class=\"submit-button\"\n                    intent=\"neutral\"\n                    onClick={this.handleSubmitClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                    {loc('Success')}\n                </q2-btn>\n            );\n        }\n\n        return (\n            <q2-btn\n                block\n                class=\"submit-button\"\n                disabled={this.disabled || !this.isComplete}\n                intent=\"workflow-primary\"\n                label={this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel}\n                loading={this.isVerifying}\n                onClick={this.handleSubmitClick}\n            />\n        );\n    }\n\n    render() {\n        return (\n            <div\n                aria-busy={this.isVerifying ? 'true' : undefined}\n                aria-labelledby={this.label ? this.labelId : undefined}\n                class={{\n                    'otp-container': true,\n                    'has-focus': this.hasFocus,\n                    'is-masked': this.masked,\n                    'send-code-pending': this.isAwaitingSendCode,\n                    'state-error': this.state === 'error',\n                    'state-success': this.state === 'success',\n                    'state-verifying': this.isVerifying,\n                    [`length-${this.normalizedLength}`]: true,\n                }}\n                role=\"group\"\n            >\n                {this.renderSendCodeButton()}\n                <div class={{ 'otp-content': true, 'send-code-hidden': this.isAwaitingSendCode }}>\n                    {this.renderLabel()}\n                    <div class=\"otp-control-group\">\n                        <div class=\"fields-shell\">\n                            <div class=\"fields-container\">\n                                <input\n                                    aria-describedby={this.describedBy}\n                                    aria-invalid={this.state === 'error' ? 'true' : 'false'}\n                                    aria-label={this.inputAriaLabel}\n                                    autocomplete=\"one-time-code\"\n                                    autofocus={this.autoFocus}\n                                    class=\"otp-hidden-input\"\n                                    disabled={this.disabled || this.isVerifying || this.isSuccess}\n                                    inputmode=\"numeric\"\n                                    maxLength={this.normalizedLength}\n                                    onBlur={this.handleFocusOut}\n                                    onFocus={this.handleFocusIn}\n                                    onInput={this.handleInputEvent}\n                                    onKeyDown={this.handleKeyDown}\n                                    onPaste={this.handlePaste}\n                                    pattern=\"[0-9]*\"\n                                    ref={el => (this.inputRef = el)}\n                                    test-id=\"q2OtpInput\"\n                                    type=\"text\"\n                                    value={this.value}\n                                />\n                                {this.renderFields()}\n                            </div>\n                            {this.renderProcessingOverlay()}\n                        </div>\n                        {this.renderSubmitArea()}\n                        {this.renderMessage()}\n                    </div>\n                    {this.renderHelperText()}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"],"mappings":"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","ignoreList":[]}