import { EventEmitter } from '../../stencil-public-runtime'; import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core'; import { VegaInputNumericRenderer } from './slimmers/renderers/vega-input-numeric-renderer'; import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics'; import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer'; import { EventEmitSlimmerBase } from '../../helpers/event-manager/slimmers/event-emit-slimmer'; import { VegaInputNumericValueController } from './slimmers/controllers/vega-input-numeric-value-controller'; import { VegaInputNumericKeyboardController } from './slimmers/controllers/vega-input-numeric-keyboard-controller'; import { FormFieldValidationRule } from '../../types/components.type'; import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer'; import { SubStateNotifySlimmerBase } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer-base'; /** * @vegaVersion 2.29.0 */ export declare class VegaInputNumeric { protected readonly globalSlimmers: GlobalSlimmers; protected readonly valueController: VegaInputNumericValueController; protected readonly keyboardController: VegaInputNumericKeyboardController; protected readonly renderer: VegaInputNumericRenderer; protected changeEventEmitter: EventEmitSlimmerBase; protected inputEventPrevent: ChildNodesEventPreventSlimmer; protected readonly formFieldController: FormFieldControllerSlimmer; protected readonly prefixTextNotifySlimmer: SubStateNotifySlimmerBase; protected readonly suffixTextNotifySlimmer: SubStateNotifySlimmerBase; protected readonly isCompactInputWidthNotifySlimmer: SubStateNotifySlimmerBase; protected vegaComponentUsageRuntimeMetricsSlimmer: VegaComponentUsageRuntimeMetricsSlimmer; host: HTMLVegaInputNumericElement; isCompactInputWidth: boolean; /** * Text displayed before (to the left of) the numeric value inside the input * field. Use this to provide contextual information such as a currency * symbol (e.g., `'$'`) or unit prefix. * * @default '' * @vegaVersion 2.29.0 */ prefixText: string; watchPrefixText(): void; /** * Text displayed after (to the right of) the numeric value inside the input * field. Use this to provide contextual information such as a unit suffix * (e.g., `'%'`, `'kg'`, `'USD'`). * * @default undefined * @vegaVersion 2.29.0 */ suffixText: string; watchSuffixText(): void; /** * Name of a Vega icon rendered before (to the left of) the input field, * providing additional visual context. The icon is purely decorative and * does not affect the input value. * * @default undefined * @vegaVersion 2.29.0 */ prefixIcon: string; /** * The current value of the numeric input field, represented as a string. * * This property is mutable and will be updated when the user types or uses * keyboard increment/decrement actions. It can also be set externally to * pre-populate or reset the field. When `thousandComma` is enabled, the * display is formatted with separators but the underlying value remains * unformatted. Changes to this property trigger the `vegaChange` event. * * @default '' * @vegaVersion 2.29.0 */ value: string; watchValue(): void; /** * Controls the visual size of the numeric input field. * * - `'medium'` — Standard height, suitable for most form layouts. * - `'small'` — Compact height, useful for dense UIs or inline editing. * * @default 'medium' * @vegaVersion 2.29.0 */ size: 'medium' | 'small'; /** * Specifies placeholder text displayed inside the input field when it is * empty. The placeholder disappears once the user begins typing and is * typically used to indicate the expected format (e.g., `'0.00'`). * * @default undefined * @vegaVersion 2.29.0 */ placeholder: string; /** * When `true`, the numeric input automatically formats the displayed value * with thousand separators (commas) as the user types (e.g., `1,000,000`). * The underlying `value` property remains an unformatted numeric string. * * @default false * @vegaVersion 2.29.0 */ thousandComma: boolean; /** * When `true`, restricts user input to whole numbers only — decimal points * and fractional digits are rejected. Useful for fields like quantity, * count, or age. * * @default false * @vegaVersion 2.29.0 */ integerOnly: boolean; /** * Specifies whether the numeric input field is disabled. When `true`, the * field is non-interactive — the user cannot type, focus, or use keyboard * controls to change the value. * * @default false * @vegaVersion 2.29.0 */ disabled: boolean; /** * The step value used when the user presses the `ArrowUp` or `ArrowDown` * key to increment or decrement the value. This controls fine-grained * adjustments to the numeric input. * * For larger jumps, see `majorIncrement` (activated with `Shift` + arrow * keys). * * @default 1 * @vegaVersion 2.29.0 */ minorIncrement: number; /** * The step value used when the user presses `Shift` + `ArrowUp` or * `Shift` + `ArrowDown` to increment or decrement the value by a larger * amount. This enables quick coarse-grained adjustments. * * For smaller steps, see `minorIncrement`. * * @default 10 * @vegaVersion 2.29.0 */ majorIncrement: number; /** * Specifies the visible label text rendered above the numeric input. * The label identifies the purpose of the field and serves as the * accessible name for screen readers. * * @default '' * @vegaVersion 2.29.0 */ label: string; /** * Supplementary helper message displayed below the input field that * assists users in understanding the expected value or range. Visible * at all times (not just on focus). * * @default undefined * @vegaVersion 2.29.0 */ hint: string; /** * Determines whether the numeric input 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 undefined * @vegaVersion 2.29.0 */ required: boolean; /** * An array of custom validation rules applied to the numeric input in * addition to the built-in rules (`RequiredFieldRule`, `MinNumberRule`, * `MaxNumberRule`). 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.29.0 */ validationRules: FormFieldValidationRule[]; watchValidationRules(): void; /** * Reflects the current validation status of the numeric 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.29.0 */ isValid: boolean; /** * Determines whether the numeric input should be validated automatically as * the user interacts with it. When `true`, validation rules (including * `required`, `min`, `max`, and custom `validationRules`) are evaluated * and the `isValid` property is updated accordingly. * * Set to `false` to handle validation manually. * * @default true * @vegaVersion 2.29.0 */ autoValidation: boolean; /** * Controls whether a clear (×) icon button is shown inside the input field * when a value is present. Clicking the button resets the value to an empty * string and triggers the `vegaChange` event. * * @default true * @vegaVersion 2.53.0 */ showClearIcon: boolean; /** * Sets the minimum allowable value for the numeric input. When set, the * built-in `MinNumberRule` is applied during validation. Values below this * threshold will cause validation to fail. * * Set to `null` to remove the lower bound. * * @default null * @vegaVersion 2.63.0 */ min: number | null; /** * Sets the maximum allowable value for the numeric input. When set, the * built-in `MaxNumberRule` is applied during validation. Values above this * threshold will cause validation to fail. * * Set to `null` to remove the upper bound. * * @default null * @vegaVersion 2.63.0 */ max: number | null; /** * Fires whenever the numeric input's value changes — including typing, * keyboard increment/decrement, clearing, and programmatic updates. * * The event detail contains the new numeric value (`number`), or `NaN` * when the field is empty. * * @eventDetail number * @vegaVersion 2.29.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 number * @eventSemantics namespace:native * @vegaVersion 2.29.0 */ change: EventEmitter; render(): VegaInputNumeric; }