@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
403 lines (402 loc) • 13.1 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ElementRef, EventEmitter, OnChanges, OnDestroy, Renderer2, NgZone, ChangeDetectorRef, Injector } from '@angular/core';
import { SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
import { ControlValueAccessor, AbstractControl, NgControl, Validator } from '@angular/forms';
import { IntlService, NumberFormatOptions } from '@progress/kendo-angular-intl';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { ArrowDirection } from './arrow-direction';
import { Subscription } from 'rxjs';
import { InputSize, InputRounded, InputFillMode } from '../common/models';
import { SVGIcon } from '@progress/kendo-svg-icons';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI NumericTextBox component for Angular]({% slug overview_numerictextbox %}).
*
* Use this component to allow users to input numeric values.
*
* @example
* ```html
* <kendo-numerictextbox [(ngModel)]="value"></kendo-numerictextbox>
* ```
*
* @remarks
* Supported children components are: {@link NumericTextBoxCustomMessagesComponent}.
*/
export declare class NumericTextBoxComponent implements ControlValueAccessor, OnChanges, OnDestroy, Validator {
private intl;
private renderer;
private localizationService;
private injector;
private ngZone;
private changeDetector;
hostElement: ElementRef;
/**
* @hidden
*/
focusableId: string;
/**
* When `true`, disables the `NumericTextBox`.
* To disable the component in reactive forms, see [Forms Support](slug:formssupport_numerictextbox#toc-managing-the-numerictextbox-disabled-state-in-reactive-forms).
*
* @default false
*/
disabled: boolean;
/**
* When `true`, makes the NumericTextBox read-only.
*
* @default false
*/
readonly: boolean;
/**
* Sets the `title` attribute of the input element.
*/
title: string;
/**
* When `true`, the value is automatically corrected based on the minimum and maximum values ([see example]({% slug precision_numerictextbox %})).
*/
autoCorrect: boolean;
/**
* Specifies the number format used when the NumericTextBox is not focused ([see example]({% slug formats_numerictextbox %})).
* If `format` is `null` or `undefined`, the default format is used.
*/
get format(): string | NumberFormatOptions | null | undefined;
set format(value: string | NumberFormatOptions | null | undefined);
/**
* Sets the maximum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
*/
max: number;
/**
* Sets the minimum valid value ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
*/
min: number;
/**
* Specifies the number of decimals the user can enter when the input is focused ([see example]({% slug precision_numerictextbox %})).
*/
decimals: number;
/**
* Sets the input placeholder.
*/
placeholder: string;
/**
* Specifies the value used to increment or decrement the component value ([see example]({% slug predefinedsteps_numerictextbox %})).
*
* @default 1
*/
step: number;
/**
* When `true`, renders the **Up** and **Down** spin buttons ([see example]({% slug spinbuttons_numerictextbox %})).
*
* @default true
*/
spinners: boolean;
/**
* Enforces the built-in minimum and maximum validators during form validation.
*
* @default true
*/
rangeValidation: boolean;
/**
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabindex: number;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* When `true`, enables changing the value with the mouse wheel.
*
* @default true
*/
changeValueOnScroll: boolean;
/**
* When `true`, enables selecting the entire value on click.
*
* @default true
*/
selectOnFocus: boolean;
/**
* Sets the value of the NumericTextBox ([see example]({% slug formats_numerictextbox %})).
*/
value: number;
/**
* Sets the maximum number of characters the user can type or paste in the input.
* The locale-specific decimal separator and negative sign (`-`) count toward the length.
* The `maxlength` does not apply to the formatted value when the component is not focused.
*/
maxlength: number;
/**
* Sets the padding of the internal input element ([see example]({% slug appearance_numerictextbox %}#toc-size)).
*
* @default 'medium'
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Sets the border radius of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-roundness)).
*
* @default 'medium'
*/
set rounded(rounded: InputRounded);
get rounded(): InputRounded;
/**
* Sets the background and border styles of the NumericTextBox ([see example](slug:appearance_numerictextbox#toc-fill-mode)).
*
* @default 'solid'
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* Sets HTML attributes on the inner input element.
* The component ignores attributes that are essential for its functionality.
*/
set inputAttributes(attributes: {
[key: string]: string;
});
get inputAttributes(): {
[key: string]: string;
};
/**
* Fires when the user selects a new value ([see example](slug:events_numerictextbox)).
*/
valueChange: EventEmitter<any>;
/**
* Fires when the NumericTextBox element is focused ([see example](slug:events_numerictextbox)).
*/
onFocus: EventEmitter<any>;
/**
* Fires when the `NumericTextBox` component gets blurred ([see example](slug:events_numerictextbox)).
*/
onBlur: EventEmitter<any>;
/**
* Fires when the input element is focused.
*/
inputFocus: EventEmitter<any>;
/**
* Fires when the input element gets blurred.
*/
inputBlur: EventEmitter<any>;
/**
* @hidden
*/
numericInput: ElementRef;
/**
* @hidden
*/
suffixTemplate: SuffixTemplateDirective;
/**
* @hidden
*/
prefixTemplate: PrefixTemplateDirective;
direction: string;
/**
* @hidden
*/
ArrowDirection: any;
/**
* @hidden
*/
arrowDirection: ArrowDirection;
get disableClass(): boolean;
hostClasses: boolean;
/**
* @hidden
*/
arrowUpIcon: SVGIcon;
/**
* @hidden
*/
arrowDownIcon: SVGIcon;
protected subscriptions: Subscription;
protected inputValue: string;
protected spinTimeout: number;
protected isFocused: boolean;
protected minValidateFn: any;
protected maxValidateFn: any;
protected numericRegex: RegExp;
protected _format: string | NumberFormatOptions;
protected previousSelection: any;
protected pressedKey: any;
protected control: NgControl;
protected isPasted: boolean;
protected mouseDown: boolean;
private _size;
private _rounded;
private _fillMode;
private ngChange;
private ngTouched;
private ngValidatorChange;
private domEvents;
private _inputAttributes;
private parsedAttributes;
private get defaultAttributes();
private get mutableAttributes();
constructor(intl: IntlService, renderer: Renderer2, localizationService: LocalizationService, injector: Injector, ngZone: NgZone, changeDetector: ChangeDetectorRef, hostElement: ElementRef);
ngOnInit(): void;
ngAfterViewInit(): void;
/**
* @hidden
*/
increasePress: (e: any) => void;
/**
* @hidden
*/
decreasePress: (e: any) => void;
/**
* @hidden
*/
releaseArrow: () => void;
/**
* @hidden
*/
ngOnChanges(changes: any): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
validate(control: AbstractControl): {
[key: string]: any;
};
/**
* @hidden
*/
registerOnValidatorChange(fn: Function): void;
/**
* @hidden
*/
writeValue(value: number): void;
/**
* @hidden
*/
registerOnChange(fn: () => any): void;
/**
* @hidden
*/
registerOnTouched(fn: () => any): void;
/**
* @hidden
* Called when the status of the component changes to or from `disabled`.
* Depending on the value, it enables or disables the appropriate DOM element.
*
* @param isDisabled
*/
setDisabledState(isDisabled: boolean): void;
/**
* Focuses the NumericTextBox.
*/
focus(): void;
/**
* Blurs the NumericTextBox.
*/
blur(): void;
/**
* Notifies the NumericTextBoxComponent that the input value should be changed.
* Can be used to update the input after setting the component properties directly.
*/
notifyValueChange(): void;
/**
* @hidden
*/
handlePaste: () => void;
/**
* @hidden
*/
handleInput: () => void;
/**
* @hidden
*/
handleDragEnter: () => void;
/**
* @hidden
*/
handleMouseDown: () => void;
/**
* @hidden
*/
handleInputFocus: () => void;
/**
* @hidden
*/
handleFocus(): void;
/**
* @hidden
*/
handleBlur: () => void;
/**
* @hidden
*/
handleInputBlur: () => void;
/**
* @hidden
*/
handleKeyDown: (e: KeyboardEvent) => void;
/**
* @hidden
*/
handleWheel: (e: any) => void;
/**
* @hidden
*/
get incrementTitle(): string;
/**
* @hidden
*/
get decrementTitle(): string;
/**
* @hidden
*/
get isControlInvalid(): boolean;
/**
* @hidden
*/
get isControlRequired(): boolean;
/**
* @hidden
*/
get focused(): boolean;
/**
* @hidden
*/
set focused(value: boolean);
private get decimalSeparator();
private get elementValue();
private set elementValue(value);
private get hasDecimals();
private get isDisabled();
private arrowPress;
private updateValue;
private replaceNumpadDotValue;
private isValid;
private spin;
private addStep;
private setSelection;
private limitValue;
private limitInputValue;
private tryPadValue;
private isInRange;
private restrictModelValue;
private restrictDecimals;
private formatInputValue;
private formatValue;
private setInputValue;
private verifySettings;
private verifyValue;
private parseOptions;
private intlChange;
private hasTrailingZeros;
private selectAll;
private selectCaret;
private numberOfLeadingZeroes;
private adjustSignificantChars;
private handleClasses;
private setInputAttributes;
static ɵfac: i0.ɵɵFactoryDeclaration<NumericTextBoxComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NumericTextBoxComponent, "kendo-numerictextbox", ["kendoNumericTextBox"], { "focusableId": { "alias": "focusableId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "title": { "alias": "title"; "required": false; }; "autoCorrect": { "alias": "autoCorrect"; "required": false; }; "format": { "alias": "format"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "decimals": { "alias": "decimals"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "step": { "alias": "step"; "required": false; }; "spinners": { "alias": "spinners"; "required": false; }; "rangeValidation": { "alias": "rangeValidation"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "changeValueOnScroll": { "alias": "changeValueOnScroll"; "required": false; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; }; "value": { "alias": "value"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; }, ["suffixTemplate", "prefixTemplate"], never, true, never>;
}