import { EventEmitter } from '../../stencil-public-runtime'; import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core'; import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics'; import { VegaInputPasscodeRenderer } from './slimmers/renderers/vega-input-passcode-renderer'; import { VegaInputPasscodeValueController } from './slimmers/controllers/vega-input-passcode-value-controller'; import { EventEmitSlimmerBase } from '../../helpers/event-manager/slimmers/event-emit-slimmer'; import { VegaInputPasscodeKeyboardController } from './slimmers/controllers/vega-input-passcode-keyboard-controller'; import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer'; import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer'; import { FormFieldValidationRule } from '../../helpers/validator/rules/form-field-validation-rule'; import { ImmutableArray } from '../../helpers/immutable/immutable-array'; /** * @vegaVersion 2.66.0 */ export declare class VegaInputPasscode { protected readonly globalSlimmers: GlobalSlimmers; protected readonly formFieldController: FormFieldControllerSlimmer; protected vegaComponentUsageRuntimeMetricsSlimmer: VegaComponentUsageRuntimeMetricsSlimmer; protected keyboardController: VegaInputPasscodeKeyboardController; protected valueController: VegaInputPasscodeValueController; protected inputPasscodeRenderer: VegaInputPasscodeRenderer; protected changeEventEmitter: EventEmitSlimmerBase; protected completeEventEmitter: EventEmitSlimmerBase; protected eventPreventSlimmer: ChildNodesEventPreventSlimmer; host: HTMLVegaInputPasscodeElement; vegaInputValues: ImmutableArray; watchVegaInputValues(): void; /** * Specifies the visible label text rendered above the passcode input. * The label identifies the purpose of the field (e.g., "Enter verification * code") and serves as the accessible name for screen readers. * * @default '' * @vegaVersion 2.66.0 */ label: string; /** * Specifies whether the passcode input is disabled. When `true`, all * individual input boxes become non-interactive — the user cannot type, * paste, or focus any box. * * @default false * @vegaVersion 2.66.0 */ disabled: boolean; /** * Controls the visual size of the passcode input boxes. * * - `'medium'` — Standard height, suitable for most form layouts. * - `'small'` — Compact height, useful for dense UIs. * * @default 'medium' * @vegaVersion 2.66.0 */ size: 'medium' | 'small'; /** * Supplementary helper message displayed below the passcode input that * assists users in understanding the expected input. For example, * `'Enter the 4-digit code sent to your email'`. * * @default '' * @vegaVersion 2.66.0 */ hint: string; /** * Specifies the number of individual input boxes rendered for the passcode. * Each box accepts a single character. Common values are `4` for a PIN and * `6` for a two-factor authentication code. * * @default 4 * @vegaVersion 2.66.0 */ length: number; /** * Specifies the type of characters accepted by each passcode box. * * - `'numeric'` — Only digits `0`–`9` are accepted. * - `'text'` — Any non-space character is accepted. * * Spaces are always rejected regardless of the selected type. * * @default 'numeric' * @vegaVersion 2.66.0 */ inputType: 'numeric' | 'text'; watchLengthAndInputType(): void; /** * The current value of the passcode input, represented as a concatenated * string of all box values (e.g., `'1234'` for a 4-digit passcode). * * This property is mutable and reflected to the host element attribute. * It updates as the user types into the boxes and can be set externally * to pre-populate or reset the field. * * @default '' * @vegaVersion 2.66.0 */ value: string; watchValue(): void; /** * Determines whether the passcode field must have a value before the form * can be submitted. When `true`, the built-in `RequiredFieldRule` is * applied during validation and a required indicator is shown on the label. * * @default false * @vegaVersion 2.66.0 */ required: boolean; /** * An array of custom validation rules applied to the passcode input in * addition to the built-in `RequiredFieldRule`. Each rule must implement * the `FormFieldValidationRule` interface. * * Rules are evaluated in order when `autoValidation` is enabled or when * validation is triggered programmatically. * * @default [] * @vegaVersion 2.66.0 */ validationRules: FormFieldValidationRule[]; watchValidationRules(): void; /** * Determines whether the passcode input should be validated automatically * as the user types. When `true`, validation rules (including `required` * and custom `validationRules`) are evaluated and the `isValid` property * is updated accordingly. * * Set to `false` to handle validation manually. * * @default true * @vegaVersion 2.66.0 */ autoValidation: boolean; /** * Reflects the current validation status of the passcode input. * * - `true` — the field value passes all validation rules. * - `false` — one or more validation rules have failed. * - `null` — the field has not been validated yet (initial state). * * This property is mutable: it is updated automatically when * `autoValidation` is enabled, but can also be set manually to override * the validation state. * * @default null * @vegaVersion 2.66.0 */ isValid: boolean | null; /** * Fires whenever the passcode value changes — each time a character is * entered, deleted, or pasted into any box. The event detail contains the * concatenated string of all box values at the time of the change. * * @eventDetail string * @vegaVersion 2.66.0 */ vegaChange: EventEmitter; /** * Native-equivalent mirror of `vegaChange`. Fires with the same payload * and at the same time, allowing consumers to listen using the standard * `change` event name. * * @eventDetail string * @eventSemantics namespace:native * @vegaVersion 2.66.0 */ change: EventEmitter; /** * Fires when all passcode boxes have been filled (i.e., the value length * equals the configured `length`). The event detail contains the complete * passcode string. Useful for triggering auto-submit or verification * workflows. * * @eventDetail string * @vegaVersion 2.66.0 */ vegaComplete: EventEmitter; /** * Native-equivalent mirror of `vegaComplete`. Fires with the same payload * and at the same time, allowing consumers to listen using the standard * `complete` event name. * * @eventDetail string * @eventSemantics namespace:native * @vegaVersion 2.66.0 */ complete: EventEmitter; render(): VegaInputPasscode; }