import { EventEmitter } from '../../stencil-public-runtime'; import { FormFieldValidationRule } from '../../helpers/validator/rules/form-field-validation-rule'; import { DataTransferType, InputAutocompleteTypes, InputEnterKeyHintTypes, InputType, InputValueUpdateTriggeredBy, MaskConfigType, VegaInputSuggestionsDropdownConfig } from './types'; import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core'; import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer'; import { EventEmitSlimmerBase } from '../../helpers/event-manager/slimmers/event-emit-slimmer'; import { VegaInputCopyPasteController } from './slimmers/controllers/vega-input-copy-paste-controller'; import { VegaInputPrefixSlotRenderer } from './slimmers/renderers/vega-input-prefix-slot-renderer'; import { VegaInputMaskConfigController } from './slimmers/controllers/vega-input-mask-config-controller'; import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics'; import { LabelSuffixButtonConfig, LabelSuffixButtonProps } from '../vega-field-label/types'; import { VegaInputCompactWidthController } from './slimmers/controllers/vega-input-compact-width-controller'; import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer'; import { VegaInputStateController } from './slimmers/controllers/vega-input-state-controller'; import { Nullable } from '../../types/general'; import { VegaInputPasswordEyeRenderer } from './slimmers/renderers/vega-input-password-eye-renderer'; import { VegaInputInputContainerRenderer } from './slimmers/renderers/vega-input-input-container-renderer'; import { VegaInputInputRenderer } from './slimmers/renderers/vega-input-input-renderer'; import { VegaInputRenderer } from './slimmers/renderers/vega-input-renderer'; import { VegaInputValueController } from './slimmers/controllers/vega-input-value-controller'; import { VegaInputInputSuggestionsRenderer } from './slimmers/renderers/vega-input-input-suggestions-renderer'; import { VegaDropdownSourceItem } from '../vega-dropdown/types'; import { VegaInputRenderModeController } from './slimmers/controllers/vega-input-render-mode-controller'; import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper'; import { DataTabIndexValueMapper } from '../../helpers/slimmers/mutation-observer/data-tab-index-value-mapper'; /** * @vegaVersion 1.0.5 */ export declare class VegaInput { protected readonly globalSlimmers: GlobalSlimmers; protected ariaAttributesValueMapper: AriaAttributesValueMapper; protected dataTabIndexValueMapper: DataTabIndexValueMapper; protected readonly formFieldController: FormFieldControllerSlimmer; protected readonly pageResizeObserverSlimmer: PageResizeObserverSlimmer; protected renderModeController: VegaInputRenderModeController; protected copyPasteController: VegaInputCopyPasteController; protected compactWidthController: VegaInputCompactWidthController; protected stateController: VegaInputStateController; protected maskConfigController: VegaInputMaskConfigController; protected valueController: VegaInputValueController; protected prefixSlotRenderer: VegaInputPrefixSlotRenderer; protected renderer: VegaInputRenderer; protected inputContainerRenderer: VegaInputInputContainerRenderer; protected inputRenderer: VegaInputInputRenderer; protected inputSuggestionsRenderer: VegaInputInputSuggestionsRenderer; protected changeEventEmitter: EventEmitSlimmerBase; protected nativeInputChangeEventEmitter: EventEmitSlimmerBase; protected focusEventEmitter: EventEmitSlimmerBase; protected blurEventEmitter: EventEmitSlimmerBase; protected labelButtonClickEventEmitter: EventEmitSlimmerBase; protected suggestionItemClickEventEmitter: EventEmitSlimmerBase; protected pasteEventEmitter: EventEmitSlimmerBase; protected vegaComponentUsageRuntimeMetricsSlimmer: VegaComponentUsageRuntimeMetricsSlimmer; protected readonly passwordEyeRenderer: VegaInputPasswordEyeRenderer; host: HTMLVegaInputElement; prefixText: string; suffixText: string; watchSuffixText(): void; isCompactInputWidth: boolean; isPasswordDisplay: boolean; suggestionsDropdownConfig: VegaInputSuggestionsDropdownConfig; /** * Specifies the visible label text displayed above the input field. * * The label provides an accessible, descriptive title that helps users identify * the purpose or content expected in the input field. It is rendered as a * `` element and is associated with the native `` for * accessibility (screen readers, click-to-focus). * * When set to an empty string, no label is rendered. * * @default '' * @vegaVersion 1.0.5 */ label: string; /** * @deprecated Please use `labelSuffixButtonConfig` instead. * * Configures an optional action button displayed at the trailing end of the * field label. This can be used to provide contextual actions such as a * "Forgot password?" link or an info tooltip trigger. * * @default null * @vegaVersion 2.25.0 */ labelSuffixButtonProps: Nullable; /** * Configures an optional action button displayed at the trailing end of the * field label. Use this to provide contextual actions such as a * "Forgot password?" link, a help tooltip trigger, or any custom label-level action. * * When clicked, the `vegaLabelButtonClick` event is emitted. * * @default null * @vegaVersion 2.68.0 */ labelSuffixButtonConfig: Nullable; /** * The current value of the input field. * * Use this property to programmatically set or read the input's value. * The value is two-way bound — it updates when the user types and can be * set externally to pre-fill or reset the field. * * When a `maskConfig` is applied, the displayed value may differ from the * raw value (e.g., formatted phone numbers). The `vegaChange` event emits * the current value whenever it changes. * * @default '' * @vegaVersion 1.0.5 */ value: string; /** * The input component is embedded in other components. * * If modifying the input value does not meet the requirements * of other components, such as limiting the maximum value, etc., * you need to modify the value of the input component and * display it in real time. * * Since the value of `inputRef` is still the old value retained, * when the value changes, which needs to be updated manually. */ watchValue(value: string): void; /** * Controls when the `vegaChange` event is emitted, allowing you to choose * between real-time updates and committed-value updates. * * - `'input'` — Fires on every keystroke as the user types (real-time). * - `'change'` — Fires only when the input loses focus or the user presses Enter, * similar to the native HTML `change` event behavior. * * Use `'change'` for expensive operations (e.g., API calls) where you only need * the final committed value. Use `'input'` for live search or filtering scenarios. * * @default 'input' * @vegaVersion 2.24.0 */ valueUpdateTrigger: InputValueUpdateTriggeredBy; /** * Sets the HTML input type, which controls the browser's input behavior, * on-screen keyboard layout, and built-in validation. * * - `'text'` — Standard single-line text input. * - `'email'` — Optimized for email entry; triggers email validation automatically. * - `'password'` — Masks the entered characters; displays a show/hide toggle icon. * - `'number'` — Restricts input to numeric values; may show increment/decrement controls. * - `'hidden'` — Renders the input as invisible (useful for programmatic form values). * * @default 'text' * @vegaVersion 1.0.9 */ type: InputType; /** * The below method is e2e-test covered in * @see{module:vega-input-on-type-change} */ watchTypeChange(newType: InputType, oldType: InputType): void; /** * Sets the `name` attribute on the underlying native `` element. * * This is used to identify the field when submitting form data and is also * used by the browser's autocomplete feature to recall previously entered values. * * @default '' * @vegaVersion 1.0.5 */ name: string; /** * Controls the browser's autofill and autocomplete behavior for this input. * * Set to a semantic token (e.g., `'email'`, `'tel'`, `'street-address'`) to help * the browser suggest previously saved values. Set to `'off'` to disable * autocomplete suggestions entirely. * * See the full list of valid tokens: * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete * * @default 'off' * @vegaVersion 1.0.5 */ autocomplete: InputAutocompleteTypes; /** * Provides a hint to the browser about the type of virtual keyboard to display * on mobile devices, independent of the `type` attribute. * * - `'text'` — Standard text keyboard. * - `'numeric'` — Numeric keypad (digits only), useful for PIN codes or quantities. * * See https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode for more details. * * @vegaVersion 2.71.0 */ inputmode: 'text' | 'numeric'; /** * Configures the action label (or icon) to present for the enter key on virtual keyboards. * * - `'enter'` — Insert a new line. * - `'done'` — Nothing more to input, close the virtual keyboard. * - `'go'` — Navigate to the target of the typed text. * - `'next'` — Move to the next field that will accept text. * - `'previous'` — Move to the previous field that will accept text. * - `'search'` — Execute a search query. * - `'send'` — Deliver the content (e.g. a message). * * See https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint for more details. * * @vegaVersion 2.81.0 */ enterkeyhint: InputEnterKeyHintTypes; /** * Sets the input field as read-only, preventing direct keyboard input. * * When set to `true`, prevents manual keyboard text entry in the input field on * all platforms. On touch devices, this typically suppresses the virtual keyboard. * * @default false * @vegaVersion 2.79.0 */ readOnly: boolean; /** * Displays a Vega icon at the leading (left) side of the input field, * providing visual context about the expected input. * * Pass a valid Vega icon name (e.g., `'search'`, `'email'`, `'lock'`). * The icon is rendered inside the input container and does not affect * the input's value or validation. * * @vegaVersion 1.0.5 */ prefixIcon: string; /** * When `true`, enforces email format validation on the input value. * * The validation checks that the entered text conforms to standard email * formatting rules (e.g., `user@domain.com`). An invalid email will cause * `isValid` to be set to `false` when validation is triggered. * * @deprecated Please use `type='email'` instead, which provides the same * validation along with optimized mobile keyboard and browser autofill support. * @default false * @vegaVersion 1.0.5 */ email: boolean; /** * Marks the input field as required for form submission. * * When `true`, a required-field validation rule is automatically applied. * If `autoValidation` is enabled, the field will display a validation error * when the user leaves it empty. A visual required indicator (asterisk) is * shown next to the label. * * @default false * @vegaVersion 1.0.5 */ required: boolean; /** * Sets the minimum allowable numeric value for the input. * * When set, a `MinNumberRule` validation is applied automatically. * If the user enters a number below this threshold, the field will * be marked as invalid. Only applies when the input value is numeric. * * @default null * @vegaVersion 1.0.5 */ min: number | null; /** * Sets the maximum allowable numeric value for the input. * * When set, a `MaxNumberRule` validation is applied automatically. * If the user enters a number above this threshold, the field will * be marked as invalid. Only applies when the input value is numeric. * * @default null * @vegaVersion 1.0.5 */ max: number | null; /** * Sets the minimum character length required for the input value. * * When set, a `MinStringLengthRule` validation is applied automatically. * If the user enters fewer characters than specified, the field will be * marked as invalid when validation is triggered. * * @default null * @vegaVersion 1.0.5 */ minLength: number; /** * Sets the maximum character length allowed for the input value. * * When set, a `MaxStringLengthRule` validation is applied automatically. * If the user enters more characters than specified, the field will be * marked as invalid when validation is triggered. * * @default null * @vegaVersion 1.0.5 */ maxLength: number; /** * Controls whether a clear (✕) icon button is displayed inside the input * when the field has a non-empty value. * * When `true`, clicking the clear icon resets the input value to an empty * string and emits a `vegaChange` event. Set to `false` to hide the icon * (e.g., for inputs where clearing is not desired, such as read-only displays). * * @default true * @vegaVersion 1.3.0 */ showClearIcon: boolean; /** * Reflects the current validation state of the input field. * * - `true` — The field value passes all validation rules; no error styling is shown. * - `false` — The field value is invalid; error styling and messages are displayed. * - `null` — Validation has not yet been triggered (initial state). * * This property is automatically updated when `autoValidation` is `true`. * It can also be set programmatically to force a specific validation state * (e.g., after server-side validation). * * @default null * @vegaVersion 1.3.0 */ isValid: boolean; /** * Enables or disables automatic validation as the user interacts with the input. * * When `true`, the component validates the input value in real-time against * all configured validation rules (`required`, `min`, `max`, `minLength`, * `maxLength`, `email`, and custom `validationRules`). Validation is triggered * on blur and during input, updating the `isValid` property accordingly. * * Set to `false` when you need to manage validation manually (e.g., only on * form submission). * * @default true * @vegaVersion 1.0.10 */ autoValidation: boolean; /** * An array of custom validation rules applied to the input field in addition * to the built-in rules derived from `required`, `min`, `max`, `minLength`, * `maxLength`, and `email` props. * * Each rule is a `FormFieldValidationRule` object that defines a validation * function and an associated error message. Rules are evaluated in order; * the first failing rule's message is displayed. * * @default [] * @vegaVersion 1.0.10 */ validationRules: FormFieldValidationRule[]; watchValidationRules(): void; /** * Sets the visual size variant of the input field, affecting its height * and internal padding. * * - `'default'` — Standard height (40px), suitable for most form layouts. * - `'small'` — Compact height (32px), useful in dense or inline * layouts. Such as table cells or toolbars. * * @default 'default' * @vegaVersion 1.3.0 */ size: 'default' | 'small'; /** * Sets the placeholder text displayed inside the input when the value is empty. * * Use this to provide a short hint about the expected input format or content * (e.g., `'Enter your email'`, `'MM/DD/YYYY'`). The placeholder text disappears * as soon as the user begins typing. * * **Note:** Placeholder text is not a substitute for a `label` — always provide * a descriptive label for accessibility. * * @vegaVersion 1.3.0 */ placeholder: string; /** * When `true`, disables the input field, preventing user interaction. * * A disabled input cannot receive focus, does not respond to click or keyboard * events, and is visually styled with reduced opacity to indicate its inactive * state. Disabled fields are excluded from form validation. * * @default false * @vegaVersion 1.3.0 */ disabled: boolean; /** * Displays a helper text message below the input field. * * Use this to provide additional guidance about the expected input, such as * format requirements (e.g., `'Must be at least 8 characters'`) or contextual * tips. The hint is rendered via the `` sub-component and is * replaced by an error message when validation fails. * * @default '' * @vegaVersion 1.3.0 */ hint: string; /** * Configures input masking to automatically format the user's input according * to a predefined pattern. * * Supports built-in mask types (`'phone'`, `'zipcode'`, `'taxId'`, * `'thousand-comma'`, `'number'`) as well as custom masks via `'custom'` or * `'custom-formatter'` strategies. * * Pass a single `MaskConfigType` object or an array of configs to apply * multiple masks. Each config specifies the mask `type`, optional formatting * `options`, and a `trigger` (`'input'` or `'blur'`) to control when * formatting is applied. * * @vegaVersion 1.3.0 */ maskConfig: MaskConfigType | MaskConfigType[]; /** * The below method is e2e-test covered in * @see{module:vega-input-mask-change-with-custom-e2e} * For the ComponentLoadRequired, the test can not be added in e2e at now, we will add it while have better solution, * releated issue: https://gitlab.com/heartland1/vega/tiger/-/issues/646 */ watchMaskChange(newValue: MaskConfigType | MaskConfigType[], oldValue: MaskConfigType | MaskConfigType[]): void; /** * When `true`, disables the ability to copy from or paste into the input field. * * This is useful for security-sensitive fields (e.g., password confirmation) * where you want to prevent users from pasting values. Both keyboard shortcuts * and context menu copy/paste actions are blocked. * * @default false * @vegaVersion 2.1.0 */ disableCopyPaste: boolean; /** * Provides the data source for the input's autocomplete suggestion dropdown. * * Pass an array of `VegaDropdownSourceItem` objects to enable the suggestions * feature. The dropdown appears as the user types, filtering items that match * the current input value. When the user selects a suggestion, the * `vegaSuggestionItemClick` event is emitted. * * **Important:** You must set this property to at least an empty array (`[]`) * to enable the suggestion dropdown. If left `undefined`, the feature is disabled. * * @vegaVersion 2.75.0 */ suggestionsDropdownSource: VegaDropdownSourceItem[]; watchSuggestionsDropdownSource(): void; /** * Emitted when the input value changes. * * The timing of this event depends on the `valueUpdateTrigger` prop: * - When `valueUpdateTrigger` is `'input'` (default), fires on every keystroke. * - When `valueUpdateTrigger` is `'change'`, fires on blur or when the user presses Enter. * * Also fires when the user clicks the clear icon or when the value is * programmatically updated. * * @eventDetail `string` — The current input value after the change. * @vegaVersion 1.0.10 */ vegaChange: EventEmitter; /** * Native-namespace alias for the `vegaChange` event. * * Emitted at the same time and under the same conditions as `vegaChange`. * Use this event when integrating with frameworks that expect native-style * event names (e.g., `@change` in Vue or Angular). * * @eventDetail `string` — The current input value after the change. * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ change: EventEmitter; /** * Emitted on every native `input` event from the underlying `` element, * regardless of the `valueUpdateTrigger` setting. * * This event fires on every keystroke and provides the raw input value. * Use this for real-time monitoring (e.g., driving a suggestions dropdown) * while keeping `vegaChange` set to `'change'` trigger for the main value binding. * * @eventDetail `string` — The raw value from the native input element. * @vegaVersion 2.75.0 */ vegaNativeInputChange: EventEmitter; /** * Native-namespace alias for the `vegaNativeInputChange` event. * * Emitted at the same time and under the same conditions as * `vegaNativeInputChange`. Use this event when integrating with frameworks * that expect native-style event names. * * @eventDetail `string` — The raw value from the native input element. * @eventSemantics namespace:native * @vegaVersion 2.75.0 */ nativeInputChange: EventEmitter; /** * Emitted when the input field loses focus. * * This event fires after the underlying native `` element's `blur` * event. Useful for triggering validation, saving state, or updating UI * when the user navigates away from the field. * * @eventDetail `undefined` — No payload; listen for the event occurrence only. * @vegaVersion 1.3.0 */ vegaBlur: EventEmitter; /** * Native-namespace alias for the `vegaBlur` event. * * Emitted at the same time and under the same conditions as `vegaBlur`. * Use this event when integrating with frameworks that expect native-style * event names. * * @eventDetail `undefined` — No payload; listen for the event occurrence only. * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ blur: EventEmitter; /** * Emitted when the input field receives focus. * * This event fires after the underlying native `` element's `focus` * event, including when focus is set programmatically via the `doFocus()` method. * Useful for highlighting the field, showing contextual help, or opening * a suggestions dropdown. * * @eventDetail `undefined` — No payload; listen for the event occurrence only. * @vegaVersion 1.12.0 */ vegaFocus: EventEmitter; /** * Native-namespace alias for the `vegaFocus` event. * * Emitted at the same time and under the same conditions as `vegaFocus`. * Use this event when integrating with frameworks that expect native-style * event names. * * @eventDetail `undefined` — No payload; listen for the event occurrence only. * @eventSemantics namespace:native * @vegaVersion 2.0.0 */ focus: EventEmitter; /** * Emitted when the user clicks the suffix button in the field label. * * This event only fires when a `labelSuffixButtonConfig` (or the deprecated * `labelSuffixButtonProps`) is provided. Use it to handle contextual actions * such as opening a tooltip, navigating to a help page, or triggering a * "Forgot password?" flow. * * @eventDetail `void` — No payload. * @vegaVersion 2.25.0 */ vegaLabelButtonClick: EventEmitter; /** * Native-namespace alias for the `vegaLabelButtonClick` event. * * Emitted at the same time and under the same conditions as * `vegaLabelButtonClick`. Use this event when integrating with frameworks * that expect native-style event names. * * @eventDetail `void` — No payload. * @eventSemantics namespace:native * @vegaVersion 2.25.0 */ labelButtonClick: EventEmitter; /** * Emitted when the user pastes content into the input field. * * This event fires regardless of the `disableCopyPaste` setting — the paste * action is blocked visually, but the event still propagates for tracking * purposes. Use this to inspect or transform pasted data before it is applied. * * @eventDetail `DataTransferType` — An object containing the pasted data, * including the MIME type and raw text content from the clipboard. * @vegaVersion 2.66.0 */ vegaPaste: EventEmitter; /** * Native-namespace alias for the `vegaPaste` event. * * Emitted at the same time and under the same conditions as `vegaPaste`. * Use this event when integrating with frameworks that expect native-style * event names. * * @eventDetail `DataTransferType` — An object containing the pasted data, * including the MIME type and raw text content from the clipboard. * @eventSemantics namespace:native * @vegaVersion 2.66.0 */ paste: EventEmitter; /** * Emitted when the user selects an item from the suggestions dropdown. * * This event only fires when the `suggestionsDropdownSource` prop is set. * Use it to respond to the user's selection — for example, to populate * related fields, navigate to a detail page, or trigger a search. * * @eventDetail `VegaDropdownSourceItem` — The full data object of the selected * suggestion item, including its `label`, `value`, and any custom properties. * @vegaVersion 2.75.0 */ vegaSuggestionItemClick: EventEmitter; /** * Native-namespace alias for the `vegaSuggestionItemClick` event. * * Emitted at the same time and under the same conditions as * `vegaSuggestionItemClick`. Use this event when integrating with frameworks * that expect native-style event names. * * @eventDetail `VegaDropdownSourceItem` — The full data object of the selected * suggestion item, including its `label`, `value`, and any custom properties. * @eventSemantics namespace:native * @vegaVersion 2.75.0 */ suggestionItemClick: EventEmitter; /** * Programmatically sets focus on the underlying native `` element. * * Use this method when you need to direct the user's attention to this input * (e.g., after form validation fails or on page load). Calling this method * triggers the `vegaFocus` event. * * @returns A promise that resolves once focus has been applied. * @vegaVersion 1.12.0 */ doFocus(): Promise; /** * Programmatically removes focus from the underlying native `` element. * * Use this method when you need to dismiss the keyboard on mobile or move * focus away from the input programmatically. Calling this method triggers * the `vegaBlur` event and, if `autoValidation` is enabled, validation * will be executed. * * @returns A promise that resolves once blur has been applied. * @vegaVersion 1.12.0 */ doBlur(): Promise; /** * Programmatically opens the suggestions dropdown. * * Use this method when you need to display the dropdown independently of * user input — for example, to show all available suggestions on focus * or in response to an external trigger. Requires `suggestionsDropdownSource` * to be set. * * @param dropdownConfig - Optional configuration to customize the dropdown * behavior (e.g., itemDisplayRule, caseSensitive). * @returns A promise that resolves once the dropdown is displayed. * @vegaVersion 2.75.0 */ showSuggestionsDropdown(dropdownConfig?: VegaInputSuggestionsDropdownConfig): Promise; /** * Programmatically closes the suggestions dropdown. * * Use this method when you need to dismiss the dropdown in response to an * external event (e.g., pressing Escape, clicking outside, or completing * a selection workflow). * * @returns A promise that resolves once the dropdown is hidden. * @vegaVersion 2.75.0 */ hideSuggestionsDropdown(): Promise; render(): VegaInput; }