@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
416 lines (415 loc) • 14.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 %}).
*/
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;
/**
* Determines whether the NumericTextBox is disabled ([see example]({% slug disabled_numerictextbox %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_numerictextbox#toc-managing-the-numerictextbox-disabled-state-in-reactive-forms).
*/
disabled: boolean;
/**
* Determines whether the NumericTextBox is in its read-only state ([see example]({% slug readonly_numerictextbox %})).
*
* @default false
*/
readonly: boolean;
/**
* Sets the title of the `input` element of the NumericTextBox.
*/
title: string;
/**
* Specifies whether the value will be auto-corrected based on the minimum and maximum values
* ([see example]({% slug precision_numerictextbox %})).
*/
autoCorrect: boolean;
/**
* Specifies the number format which is used when the NumericTextBox is not focused
* ([see example]({% slug formats_numerictextbox %})).
* If `format` is set to `null` or `undefined`, the default format will be used.
*/
get format(): string | NumberFormatOptions | null | undefined;
set format(value: string | NumberFormatOptions | null | undefined);
/**
* Specifies the greatest value that is valid
* ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
*/
max: number;
/**
* Specifies the smallest value that is valid
* ([see example]({% slug precision_numerictextbox %}#toc-value-ranges)).
*/
min: number;
/**
* Specifies the number of decimals that the user can enter when the input is focused
* ([see example]({% slug precision_numerictextbox %})).
*/
decimals: number;
/**
* Specifies the input placeholder.
*/
placeholder: string;
/**
* Specifies the value that is used to increment or decrement the component value
* ([see example]({% slug predefinedsteps_numerictextbox %})).
*/
step: number;
/**
* Specifies whether the **Up** and **Down** spin buttons will be rendered
* ([see example]({% slug spinbuttons_numerictextbox %})).
*/
spinners: boolean;
/**
* Determines whether the built-in minimum or maximum validators are enforced when a form is validated.
*
* > The 4.2.0 Angular version introduces the `min` and `max` validation directives. As a result, even if you set `rangeValidation`
* to `false`, the built-in Angular validators will be executed.
*/
rangeValidation: boolean;
/**
* Specifies 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;
/**
* Determines whether the value of the NumericTextBox will be changed via scrolling. Defaults to `true`.
*
* @default true
*/
changeValueOnScroll: boolean;
/**
* Determines whether the whole value will be selected when the NumericTextBox is clicked. Defaults to `true`.
*/
selectOnFocus: boolean;
/**
* Specifies the value of the NumericTextBox
* ([see example]({% slug formats_numerictextbox %})).
*/
value: number;
/**
* Specifies the maximum number of characters the end user can type or paste in the input.
* The locale-specific decimal separator and negative sign (`-`) are included in the length of the value when present.
* The `maxlength` restriction is not applied to the length of the formatted value when the component is not focused.
*/
maxlength: number;
/**
* The size property specifies padding of the NumericTextBox internal input element
* ([see example]({% slug appearance_numerictextbox %}#toc-size)).
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: InputSize);
get size(): InputSize;
/**
* The `rounded` property specifies the border radius of the NumericTextBox
* ([see example](slug:appearance_numerictextbox#toc-roundness)).
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set rounded(rounded: InputRounded);
get rounded(): InputRounded;
/**
* The `fillMode` property specifies the background and border styles of the NumericTextBox
* ([see example](slug:appearance_numerictextbox#toc-fill-mode)).
* The possible values are:
* * `flat`
* * `solid` (default)
* * `outline`
* * `none`
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
*/
set inputAttributes(attributes: {
[key: string]: string;
});
get inputAttributes(): {
[key: string]: string;
};
/**
* Fires each time the user selects a new value ([see example](slug:events_numerictextbox)).
*/
valueChange: EventEmitter<any>;
/**
* Fires each time the user focuses the NumericTextBox element ([see example](slug:events_numerictextbox)).
*/
onFocus: EventEmitter<any>;
/**
* Fires each time the NumericTextBox component gets blurred ([see example](slug:events_numerictextbox)).
*/
onBlur: EventEmitter<any>;
/**
* Fires each time the user focuses the `input` element.
*/
inputFocus: EventEmitter<any>;
/**
* Fires each time 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.
*
* @example
* ```ts-no-run
* _@Component({
* selector: 'my-app',
* template: `
* <button (click)="numerictextbox.focus()">Focus NumericTextBox</button>
* <kendo-numerictextbox #numerictextbox></kendo-numerictextbox>
* `
* })
* class AppComponent { }
* ```
*/
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: any) => 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>;
}