@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
325 lines (324 loc) • 10.8 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, Renderer2, SimpleChanges, NgZone, Injector, ChangeDetectorRef } from '@angular/core';
import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
import { PrefixTemplateDirective, SuffixTemplateDirective } from '@progress/kendo-angular-common';
import { MaskingService } from './masking.service';
import { InputSize } from '../common/models';
import { InputRounded } from '../common/models/rounded';
import { InputFillMode } from '../common/models/fillmode';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
*
* @example
* ```typescript
* import { Component } from '@angular/core';
*
* @Component({
* selector: 'my-app',
* template: `
* <kendo-maskedtextbox
* [mask]="mask"
* [value]="value">
* </kendo-maskedtextbox>
* `
* })
* export class AppComponent {
* public value: string = "9580128055807792";
* public mask: string = "0000-0000-0000-0000";
* }
* ```
*/
export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnChanges, Validator {
private service;
private renderer;
hostElement: ElementRef;
private ngZone;
private injector;
private changeDetector;
/**
* @hidden
*/
focusableId: string;
/**
* Disables the MaskedTextBox when you set it to `true` ([see example]({% slug disabled_maskedtextbox %})).
* To disable the component in reactive forms, see [Forms Support](slug:formssupport_maskedtextbox#toc-managing-the-maskedtextbox-disabled-state-in-reactive-forms).
* @default false
*/
disabled: boolean;
/**
* When `true`, sets the MaskedTextBox to read-only mode ([see example]({% slug readonly_maskedtextbox %})).
* @default false
*/
readonly: boolean;
/**
* Sets the `title` attribute of the input element.
*/
title: string;
/**
* Sets the padding size of the MaskedTextBox input element ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
* @default 'medium'
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Sets the border radius of the MaskedTextBox ([see example](slug:appearance_maskedtextbox#toc-roundness)).
* @default 'medium'
*/
set rounded(rounded: InputRounded);
get rounded(): InputRounded;
/**
* Sets the background and border style of the MaskedTextBox ([see example]({% slug appearance_maskedtextbox %}#toc-fill-mode)).
* @default 'solid'
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* Sets the mask pattern for the MaskedTextBox ([see example]({% slug value_maskedtextbox %})).
* If you do not set a mask, the component acts as a standard `type="text"` input.
*
* If the mask allows spaces, set the [`promptPlaceholder`]({% slug api_inputs_maskedtextboxcomponent %}#toc-promptplaceholder)
* to a character that the mask does not accept.
*/
mask: string;
/**
* Sets the value of the MaskedTextBox.
*/
value: string;
/**
* Sets the RegExp-based mask validation rules ([see example]({% slug masks_maskedtextbox %})).
*/
set rules(value: {
[key: string]: RegExp;
});
get rules(): {
[key: string]: RegExp;
};
/**
* Sets the prompt character for the masked value.
* @default `_`
*/
prompt: string;
/**
* Sets the character that represents an empty position in the raw value.
* @default ' '
*/
promptPlaceholder: string;
/**
* When `true` includes literals in the raw value ([see example]({% slug value_maskedtextbox %})).
* @default false
*/
includeLiterals: boolean;
/**
* Shows the mask on focus when the value is empty.
*/
maskOnFocus: boolean;
/**
* Enables the built-in mask validator when you set it to `true` ([see example]({% slug validation_maskedtextbox %})).
* @default true
*/
maskValidation: boolean;
/**
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute of the component.
*/
tabindex: number;
/**
* @hidden
*/
set tabIndex(tabIndex: number);
get tabIndex(): number;
/**
* Sets HTML attributes for the inner input element.
* You cannot change attributes that are essential for component functionality.
*/
set inputAttributes(attributes: {
[key: string]: string;
});
get inputAttributes(): {
[key: string]: string;
};
private get defaultAttributes();
private get mutableAttributes();
/**
* Fires when the MaskedTextBox gets focused.
*
* To subscribe programmatically, use the `onFocus` property.
*
*/
onFocus: EventEmitter<any>;
/**
* Fires when the MaskedTextBox gets blurred.
*
* To subscribe programmatically, use the `onBlur` property.
*
*/
onBlur: EventEmitter<any>;
/**
* Fires when the input element gets focused.
*/
inputFocus: EventEmitter<any>;
/**
* Fires when the input element gets blurred.
*/
inputBlur: EventEmitter<any>;
/**
* Fires when the value changes.
*/
valueChange: EventEmitter<string>;
direction: string;
hostClasses: boolean;
get hostDisabledClass(): boolean;
/**
* Returns the `ElementRef` of the visible `input` element.
*/
input: ElementRef;
/**
* @hidden
*/
suffixTemplate: SuffixTemplateDirective;
/**
* @hidden
*/
prefixTemplate: PrefixTemplateDirective;
protected isFocused: boolean;
private maskedValue;
private focusClick;
private defaultRules;
private _rules;
private isPasted;
private selection;
private control;
private _size;
private _rounded;
private _fillMode;
private _inputAttributes;
private parsedAttributes;
constructor(service: MaskingService, renderer: Renderer2, hostElement: ElementRef, ngZone: NgZone, injector: Injector, changeDetector: ChangeDetectorRef, rtl: boolean);
ngOnInit(): void;
ngAfterViewInit(): void;
/**
* @hidden
* Used by the FloatingLabel to determine if the MaskedTextBox is empty.
*/
isEmpty(): boolean;
/**
* @hidden
*/
handleFocus: () => void;
/**
* @hidden
*/
handleInputFocus: () => void;
/**
* @hidden
*/
handleClick: () => void;
/**
* @hidden
*/
handleBlur: () => void;
/**
* @hidden
*/
handleInputBlur: () => void;
/**
* @hidden
*/
handleDragDrop(): boolean;
/**
* Focuses the MaskedTextBox.
*
* @example
* ```ts-no-run
* _@Component({
* selector: 'my-app',
* template: `
* <button (click)="maskedinput.focus()">Focus the input</button>
* <kendo-maskedtextbox #maskedinput></kendo-maskedtextbox>
* `
* })
* class AppComponent { }
* ```
*/
focus(): void;
/**
* Blurs the MaskedTextBox.
*/
blur(): void;
/**
* @hidden
*/
pasteHandler(e: any): void;
/**
* @hidden
*/
inputHandler(e: any): void;
/**
* @hidden
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* @hidden
* Writes a new value to the element.
*/
writeValue(value: string): void;
/**
* @hidden
* Sets the function that will be called when a `change` event is triggered.
*/
registerOnChange(fn: (_: any) => void): void;
/**
* @hidden
* Sets the function that will be called when a `touch` event is triggered.
*/
registerOnTouched(fn: () => void): 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;
/**
* @hidden
*/
validate(_?: AbstractControl): any;
/**
* @hidden
*/
get isControlInvalid(): boolean;
/**
* @hidden
*/
get isControlRequired(): boolean;
/**
* @hidden
*/
updateValueWithEvents(maskedValue: string, callOnChange?: boolean): void;
protected onChange: (_: any) => void;
protected onTouched: () => void;
private updateValue;
private updateInput;
private extractChanges;
private updateService;
private setSelection;
private get emptyMask();
private setFocusSelection;
/**
* @hidden
*/
get focused(): boolean;
/**
* @hidden
*/
set focused(value: boolean);
private normalizeValue;
private handleClasses;
private setInputAttributes;
static ɵfac: i0.ɵɵFactoryDeclaration<MaskedTextBoxComponent, [null, null, null, null, null, null, { optional: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<MaskedTextBoxComponent, "kendo-maskedtextbox", ["kendoMaskedTextBox"], { "focusableId": { "alias": "focusableId"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "title": { "alias": "title"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "value": { "alias": "value"; "required": false; }; "rules": { "alias": "rules"; "required": false; }; "prompt": { "alias": "prompt"; "required": false; }; "promptPlaceholder": { "alias": "promptPlaceholder"; "required": false; }; "includeLiterals": { "alias": "includeLiterals"; "required": false; }; "maskOnFocus": { "alias": "maskOnFocus"; "required": false; }; "maskValidation": { "alias": "maskValidation"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; "valueChange": "valueChange"; }, ["suffixTemplate", "prefixTemplate"], never, true, never>;
}