q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-otp/q2-otp.js

@@ -0,0 +1,873 @@
+import { h } from "@stencil/core";
+import { createGuid, isEventFromElement, loc, overrideFocus } from "../../utils/index";
+/**
+ * @name One-Time Password
+ * @category Forms
+ * @summary Use for entering a short one-time verification code.
+ */
+export class Q2Otp {
+    constructor() {
+        // #region Own Properties
+        this.defaultSendCodeLabel = 'tecton.element.otp.sendCode';
+        this.defaultSendCodeLabelValue = 'Send code';
+        this.defaultSubmitLabel = 'tecton.element.otp.verify';
+        this.defaultSubmitLabelValue = 'Verify';
+        this.guid = createGuid();
+        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 = (event) => {
+            if (this.autoFocus && this.hasAutoFocused && !this.value && !event.relatedTarget) {
+                return;
+            }
+            this.hasFocus = false;
+        };
+        this.handleInputEvent = () => {
+            if (this.disabled || this.locksInput) {
+                this.inputRef.value = this.value;
+                return;
+            }
+            const digits = this.filterDigits(this.inputRef.value);
+            this.inputRef.value = digits;
+            if (this.state === 'error') {
+                this.state = undefined;
+            }
+            this.value = digits;
+            this.tctInput.emit({ value: digits });
+            if (digits.length === this.normalizedLength) {
+                this.handleComplete(digits);
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== 'Enter')
+                return;
+            if (this.disabled || this.locksInput || !this.isComplete)
+                return;
+            event.preventDefault();
+            this.submit();
+        };
+        this.handlePaste = (event) => {
+            var _a, _b;
+            event.preventDefault();
+            if (this.disabled || this.locksInput)
+                return;
+            const pastedValue = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            const digits = this.filterDigits(pastedValue);
+            this.inputRef.value = digits;
+            if (this.state === 'error') {
+                this.state = undefined;
+            }
+            this.value = digits;
+            this.tctInput.emit({ value: digits });
+            if (digits.length === this.normalizedLength) {
+                this.handleComplete(digits);
+            }
+        };
+        this.handleSendCodeClick = () => {
+            var _a;
+            if (this.disabled)
+                return;
+            (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.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() {
+        overrideFocus(this.hostElement);
+        this.focusOnLoad();
+    }
+    componentDidRender() {
+        this.focusOnLoad();
+    }
+    // #endregion
+    // #region Listeners
+    onHostElementFocus(event) {
+        var _a, _b;
+        if (this.disabled || this.locksInput)
+            return;
+        if (!isEventFromElement(event, this.hostElement))
+            return;
+        if (this.isAwaitingSendCode) {
+            (_a = this.sendCodeRef) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.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(state) {
+        if (state === null) {
+            Promise.resolve().then(() => {
+                if (this.state === null)
+                    this.state = undefined;
+            });
+            return;
+        }
+        if (state === 'error' && this.clearOnError) {
+            this.clearValue(true);
+        }
+    }
+    valueObserver() {
+        const digits = this.filterDigits(this.value);
+        if (digits !== this.value) {
+            this.value = digits;
+        }
+        if (this.inputRef && this.inputRef.value !== digits) {
+            this.inputRef.value = digits;
+        }
+    }
+    // #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 ids = [];
+        if (this.state === 'error' && this.errorMessage)
+            ids.push(this.messageId);
+        if (this.state === 'success' && this.successMessage)
+            ids.push(this.messageId);
+        return ids.length ? ids.join(' ') : undefined;
+    }
+    get hasVisibleHelperText() {
+        return this.showHelperText && !!this.helperText;
+    }
+    get helperTextId() {
+        return `${this.componentId}-helper-text`;
+    }
+    get inputAriaLabel() {
+        const inputLabel = `${this.localizedLabel} (${this.normalizedLength} ${loc('tecton.element.otp.digits')})`;
+        return [this.hasVisibleHelperText ? this.localizedHelperText : '', inputLabel].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 loc(this.helperText);
+    }
+    get localizedLabel() {
+        return loc(this.label);
+    }
+    get localizedProcessingLabel() {
+        return loc(this.processingLabel || 'Verifying');
+    }
+    get localizedSendCodeLabel() {
+        if (this.sendCodeLabel)
+            return loc(this.sendCodeLabel);
+        const localizedLabel = loc(this.defaultSendCodeLabel);
+        return localizedLabel === this.defaultSendCodeLabel ? this.defaultSendCodeLabelValue : localizedLabel;
+    }
+    get localizedSubmitLabel() {
+        if (this.submitLabel)
+            return loc(this.submitLabel);
+        const localizedLabel = loc(this.defaultSubmitLabel);
+        return localizedLabel === this.defaultSubmitLabel ? this.defaultSubmitLabelValue : localizedLabel;
+    }
+    get locksInput() {
+        return this.isVerifying || this.isSuccess;
+    }
+    get messageId() {
+        return `${this.componentId}-message`;
+    }
+    get normalizedLength() {
+        const length = Number(this.length);
+        return [4, 6, 8].includes(length) ? length : 6;
+    }
+    clearValue(emitEvent = false) {
+        var _a;
+        this.value = '';
+        if (this.inputRef)
+            this.inputRef.value = '';
+        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        if (emitEvent)
+            this.tctClear.emit({ value: '' });
+    }
+    filterDigits(value) {
+        return value.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(digits) {
+        this.tctComplete.emit({ value: digits });
+        if (this.autoSubmit) {
+            setTimeout(() => this.submit(digits), 150);
+        }
+    }
+    submit(value = this.value) {
+        this.state = 'verifying';
+        this.tctSubmit.emit({ value });
+    }
+    // #endregion
+    // #region Render Methods
+    renderFields() {
+        return Array.from({ length: this.normalizedLength }, (_, index) => {
+            const char = this.value[index] || '';
+            const isActive = this.hasFocus && index === this.activeSlotIndex;
+            const hasValue = !!char;
+            return [
+                this.split && index === this.normalizedLength / 2 && (h("span", { "aria-hidden": "true", class: "otp-separator" }, "-")),
+                h("div", { class: {
+                        'otp-slot': true,
+                        'is-active': isActive,
+                        'has-value': hasValue,
+                    } }, isActive && !hasValue ? (h("span", { class: "otp-caret", "aria-hidden": "true" })) : this.masked && hasValue ? (h("span", { class: "otp-dot" })) : (h("span", { class: "otp-char" }, char))),
+            ];
+        });
+    }
+    renderHelperText() {
+        if (!this.hasVisibleHelperText)
+            return;
+        return (h("div", { class: "helper-text", id: this.helperTextId }, this.localizedHelperText));
+    }
+    renderLabel() {
+        if (!this.label)
+            return;
+        return (h("div", { class: "otp-label", id: this.labelId }, this.localizedLabel));
+    }
+    renderMessage() {
+        if (this.state === 'error' && this.errorMessage) {
+            return (h("q2-message", { appearance: "minimal", class: "otp-message", id: this.messageId, type: "error" }, loc(this.errorMessage)));
+        }
+        if (this.state === 'success' && this.successMessage) {
+            return (h("q2-message", { appearance: "minimal", class: "otp-message", id: this.messageId, type: "success" }, loc(this.successMessage)));
+        }
+    }
+    renderProcessingOverlay() {
+        if (this.autoSubmit && this.isVerifying) {
+            return (h("div", { class: "processing-overlay" }, h("q2-loading", { label: this.localizedProcessingLabel })));
+        }
+    }
+    renderSendCodeButton() {
+        if (!this.isAwaitingSendCode)
+            return;
+        return (h("q2-btn", { block: true, class: "send-code-button", disabled: this.disabled, intent: "workflow-primary", label: this.localizedSendCodeLabel, onClick: this.handleSendCodeClick, ref: el => (this.sendCodeRef = el) }));
+    }
+    renderSubmitArea() {
+        if (this.isSuccess) {
+            return (h("q2-btn", { block: true, class: "submit-button", intent: "neutral", onClick: this.handleSubmitClick }, h("q2-icon", { type: "checkmark" }), loc('Success')));
+        }
+        return (h("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 (h("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(), h("div", { key: '813749faba075fda49bc4aa05366479b386b9256', class: { 'otp-content': true, 'send-code-hidden': this.isAwaitingSendCode } }, this.renderLabel(), h("div", { key: 'b9e4967cebebbec209359b6463502d9daab9a587', class: "otp-control-group" }, h("div", { key: '611bff112f241cde331858545954a9dd3ce4d116', class: "fields-shell" }, h("div", { key: '38b2d554c171c8b20ec075e2f9ccb6822274214d', class: "fields-container" }, h("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: el => (this.inputRef = el), "test-id": "q2OtpInput", type: "text", value: this.value }), this.renderFields()), this.renderProcessingOverlay()), this.renderSubmitArea(), this.renderMessage()), this.renderHelperText())));
+    }
+    static get is() { return "q2-otp"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-otp.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-otp.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoFocus": {
+                "type": "boolean",
+                "attribute": "auto-focus",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Focuses the first one-time password field when the component loads."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "autoSubmit": {
+                "type": "boolean",
+                "attribute": "auto-submit",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggers submission when the last field is filled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "clearOnError": {
+                "type": "boolean",
+                "attribute": "clear-on-error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Clears all fields and returns focus to the first field when `state` becomes `error`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all one-time password fields."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "attribute": "error-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "Error message rendered below the submit area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "helperText": {
+                "type": "string",
+                "attribute": "helper-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "Helper text content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "Visible label above the one-time password fields."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "length": {
+                "type": "number",
+                "attribute": "length",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of one-time password fields."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "4 | 6 | 8"
+            },
+            "masked": {
+                "type": "boolean",
+                "attribute": "masked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Obscures entered characters."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "processingLabel": {
+                "type": "string",
+                "attribute": "processing-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "Button text during processing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "sendCodeLabel": {
+                "type": "string",
+                "attribute": "send-code-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "Button text for the send-code action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "showHelperText": {
+                "type": "boolean",
+                "attribute": "show-helper-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles helper text visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "split": {
+                "type": "boolean",
+                "attribute": "split",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }],
+                    "text": "Renders fields in two equal groups with a dash separator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "string",
+                "attribute": "state",
+                "mutable": true,
+                "complexType": {
+                    "original": "'error' | 'ready' | 'success' | 'verifying' | undefined",
+                    "resolved": "\"error\" | \"ready\" | \"success\" | \"verifying\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the visual status for the one-time password fields.\n\n- `ready` \u2014 Shows the send-code button and hides the input fields until the user requests a code.\n- `error` \u2014 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` \u2014 Locks the input, replaces the submit button with a success indicator, and displays the\n  `successMessage` if provided.\n- `verifying` \u2014 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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "submitLabel": {
+                "type": "string",
+                "attribute": "submit-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "Renders a submit button with this label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "successMessage": {
+                "type": "string",
+                "attribute": "success-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "localizable",
+                            "text": undefined
+                        }],
+                    "text": "Success message rendered below the submit area."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The composed one-time password value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tctClear",
+                "name": "tctClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the fields are cleared."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tctComplete",
+                "name": "tctComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when all fields are filled."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tctInput",
+                "name": "tctInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when any field value changes."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "tctSendCode",
+                "name": "tctSendCode",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the send-code button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tctSubmit",
+                "name": "tctSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the submit button is clicked or auto-submit triggers."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears all fields, focuses the first field, and emits `tctClear`.",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the component and resets error, success, and processing state.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "autoFocus",
+                "methodName": "autoFocusObserver"
+            }, {
+                "propName": "length",
+                "methodName": "lengthObserver"
+            }, {
+                "propName": "state",
+                "methodName": "stateObserver"
+            }, {
+                "propName": "value",
+                "methodName": "valueObserver"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "onHostElementFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=q2-otp.js.map