@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
902 lines (901 loc) • 32.2 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef, ContentChild } from '@angular/core';
import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
import { EventsOutsideAngularDirective, guid, hasObservers, isChanged, isControlRequired, isObjectPresent, KendoInput, parseAttributes, PrefixTemplateDirective, removeHTMLAttributes, setHTMLAttributes, SuffixTemplateDirective } from '@progress/kendo-angular-common';
import { RTL } from '@progress/kendo-angular-l10n';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { MaskingService } from './masking.service';
import { invokeElementMethod } from '../common/dom-utils';
import { requiresZoneOnBlur, isPresent, getStylingClasses } from '../common/utils';
import { InputSeparatorComponent } from '../shared/input-separator.component';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { SharedInputEventsDirective } from '../shared/shared-events.directive';
import * as i0 from "@angular/core";
import * as i1 from "./masking.service";
const resolvedPromise = Promise.resolve(null);
const FOCUSED = 'k-focus';
const DEFAULT_SIZE = 'medium';
const DEFAULT_ROUNDED = 'medium';
const DEFAULT_FILL_MODE = 'solid';
/**
* Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
*
* @example
* ```ts-no-run
*
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-maskedtextbox
* [mask]="mask"
* [value]="value">
* </kendo-maskedtextbox>
* `
* })
*
* class AppComponent {
* public value: string = "9580128055807792";
* public mask: string = "0000-0000-0000-0000";
* }
* ```
*/
export class MaskedTextBoxComponent {
service;
renderer;
hostElement;
ngZone;
injector;
changeDetector;
/**
* @hidden
*/
focusableId = `k-${guid()}`;
/**
* Determines whether the MaskedTextBox is disabled ([see example]({% slug disabled_maskedtextbox %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_maskedtextbox#toc-managing-the-maskedtextbox-disabled-state-in-reactive-forms).
*/
disabled = false;
/**
* Determines whether the MaskedTextBox is in its read-only state ([see example]({% slug readonly_maskedtextbox %})).
*
* @default false
*/
readonly = false;
/**
* Sets the title of the `input` element.
*/
title;
/**
* The size property specifies the padding of the MaskedTextBox internal input element
* ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size) {
const newSize = size ? size : DEFAULT_SIZE;
this.handleClasses(newSize, 'size');
this._size = newSize;
}
get size() {
return this._size;
}
/**
* The rounded property specifies the border radius of the MaskedTextBox
* ([see example](slug:appearance_maskedtextbox#toc-roundness)).
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set rounded(rounded) {
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
this.handleClasses(newRounded, 'rounded');
this._rounded = newRounded;
}
get rounded() {
return this._rounded;
}
/**
* The `fillMode` property specifies the background and border styles of the MaskedTexBox
* ([see example]({% slug appearance_maskedtextbox %}#toc-fill-mode)).
* The possible values are:
* * `flat`
* * `solid` (default)
* * `outline`
* * `none`
*/
set fillMode(fillMode) {
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
this.handleClasses(newFillMode, 'fillMode');
this._fillMode = newFillMode;
}
get fillMode() {
return this._fillMode;
}
/**
* Represents the current mask ([see example]({% slug value_maskedtextbox %})).
* If no mask is set, the component behaves as a standard `type="text"` input.
*
* > If the mask allows for spaces, set the [promptPlaceholder]({% slug api_inputs_maskedtextboxcomponent %}#toc-promptplaceholder)
* to a character that is not accepted by the mask.
*/
mask;
/**
* Provides a value for the MaskedTextBox.
*/
value;
/**
* Exposes the RegExp-based mask validation array ([see example]({% slug masks_maskedtextbox %})).
*/
set rules(value) {
this._rules = Object.assign({}, this.defaultRules, value);
}
get rules() {
return this._rules || this.defaultRules;
}
/**
* Represents a prompt character for the masked value.
* @default `_`
*/
prompt = '_';
/**
* Indicates a character which represents an empty position in the raw value.
* @default ' '
*/
promptPlaceholder = ' ';
/**
* Indicates whether to include literals in the raw value ([see example]({% slug value_maskedtextbox %})).
* @default false
*/
includeLiterals = false;
/**
* Specifies if the mask should be shown on focus for empty value.
*/
maskOnFocus = false;
/**
* Determines whether the built-in mask validator is enforced when a form is validated
* ([see example]({% slug validation_maskedtextbox %})).
* @default true
*/
maskValidation = true;
/**
* Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
*/
tabindex = 0;
/**
* @hidden
*/
set tabIndex(tabIndex) {
this.tabindex = tabIndex;
}
get tabIndex() {
return this.tabindex;
}
/**
* Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
*/
set inputAttributes(attributes) {
if (isObjectPresent(this.parsedAttributes)) {
removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
}
this._inputAttributes = attributes;
this.parsedAttributes = this.inputAttributes ?
parseAttributes(this.inputAttributes, this.defaultAttributes) :
this.inputAttributes;
this.setInputAttributes();
}
get inputAttributes() {
return this._inputAttributes;
}
get defaultAttributes() {
return {
id: this.focusableId,
disabled: this.disabled ? '' : null,
readonly: this.readonly ? '' : null,
tabindex: this.tabIndex,
'aria-invalid': this.isControlInvalid,
title: this.title,
required: this.isControlRequired ? '' : null
};
}
get mutableAttributes() {
return {
'aria-placeholder': this.mask,
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off',
spellcheck: 'false'
};
}
/**
* Fires each time the user focuses the MaskedTextBox component.
*
* > To wire the event programmatically, use the `onFocus` property.
*
* @example
* ```ts-no-run
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-maskedtextbox (focus)="handleFocus()"></kendo-maskedtextbox>
* `
* })
* class AppComponent {
* public handleFocus(): void {
* console.log("Component is focused");
* }
* }
* ```
*/
onFocus = new EventEmitter();
/**
* Fires each time the MaskedTextBox component gets blurred.
*
* > To wire the event programmatically, use the `onBlur` property.
*
* @example
* ```ts-no-run
* _@Component({
* selector: 'my-app',
* template: `
* <kendo-maskedtextbox (blur)="handleBlur()"></kendo-maskedtextbox>
* `
* })
* class AppComponent {
* public handleBlur(): void {
* console.log("Component is blurred");
* }
* }
* ```
*/
onBlur = new EventEmitter();
/**
* Fires each time the user focuses the `input` element.
*/
inputFocus = new EventEmitter();
/**
* Fires each time the `input` element gets blurred.
*/
inputBlur = new EventEmitter();
/**
* Fires each time the value changes.
*/
valueChange = new EventEmitter();
direction;
hostClasses = true;
get hostDisabledClass() {
return this.disabled;
}
/**
* Represents the `ElementRef` of the visible `input` element.
*/
input;
/**
* @hidden
*/
suffixTemplate;
/**
* @hidden
*/
prefixTemplate;
isFocused;
maskedValue;
focusClick = false;
defaultRules = {
"#": /[\d\s\+\-]/,
"&": /[\S]/,
"0": /[\d]/,
"9": /[\d\s]/,
"?": /[a-zA-Z\s]/,
"A": /[a-zA-Z0-9]/,
"C": /./,
"L": /[a-zA-Z]/,
"a": /[a-zA-Z0-9\s]/
};
_rules;
isPasted = false;
selection = [0, 0];
control;
_size = 'medium';
_rounded = 'medium';
_fillMode = 'solid';
_inputAttributes;
parsedAttributes = {};
constructor(service, renderer, hostElement, ngZone, injector, changeDetector, rtl) {
this.service = service;
this.renderer = renderer;
this.hostElement = hostElement;
this.ngZone = ngZone;
this.injector = injector;
this.changeDetector = changeDetector;
validatePackage(packageMetadata);
this.direction = rtl ? 'rtl' : 'ltr';
this.updateService();
}
ngOnInit() {
if (this.hostElement) {
this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
}
this.control = this.injector.get(NgControl, null);
}
ngAfterViewInit() {
const stylingInputs = ['size', 'rounded', 'fillMode'];
stylingInputs.forEach(input => {
this.handleClasses(this[input], input);
});
}
/**
* @hidden
* Used by the FloatingLabel to determine if the MaskedTextBox is empty.
*/
isEmpty() {
if (this.input) {
return !this.input.nativeElement.value;
}
}
/**
* @hidden
*/
handleFocus = () => {
this.ngZone.run(() => {
if (!this.focused && hasObservers(this.onFocus)) {
this.onFocus.emit();
}
this.focused = true;
});
if (this.maskOnFocus && this.emptyMask) {
this.updateInput(this.service.maskRaw(this.value));
this.ngZone.runOutsideAngular(() => {
setTimeout(() => { this.setSelection(0, 0); }, 0);
});
}
};
/**
* @hidden
*/
handleInputFocus = () => {
this.handleFocus();
if (hasObservers(this.inputFocus)) {
this.ngZone.run(() => {
this.inputFocus.emit();
});
}
};
/**
* @hidden
*/
handleClick = () => {
if (this.focused && !this.focusClick) {
this.focusClick = true;
}
if (this.promptPlaceholder === null || this.promptPlaceholder === '') {
const { selectionStart, selectionEnd } = this.input.nativeElement;
if (selectionStart === selectionEnd) {
this.setFocusSelection();
}
}
};
/**
* @hidden
*/
handleBlur = () => {
this.changeDetector.markForCheck();
this.focused = false;
this.focusClick = false;
if (this.maskOnFocus && this.emptyMask) {
this.updateInput(this.maskedValue);
}
if (hasObservers(this.onBlur)) {
this.ngZone.run(() => {
this.onBlur.emit();
});
}
this.ngZone.run(() => {
if (this.control) {
this.control && !this.control.touched && this.onTouched();
}
});
};
/**
* @hidden
*/
handleInputBlur = () => {
this.changeDetector.markForCheck();
if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
this.ngZone.run(() => {
this.inputBlur.emit();
});
}
};
/**
* @hidden
*/
handleDragDrop() {
return false;
}
/**
* 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() {
if (!this.input) {
return;
}
this.input.nativeElement.focus();
this.focused = true;
this.setFocusSelection();
}
/**
* Blurs the MaskedTextBox.
*/
blur() {
if (!this.input) {
return;
}
this.input.nativeElement.blur();
this.focused = false;
}
/**
* @hidden
*/
pasteHandler(e) {
const { selectionStart, selectionEnd } = e.target;
if (selectionEnd === selectionStart) {
return;
}
this.isPasted = true;
this.selection = [selectionStart, selectionEnd];
}
/**
* @hidden
*/
inputHandler(e) {
const value = e.target.value;
const [start, end] = this.selection;
if (!this.mask) {
this.updateValueWithEvents(value);
this.isPasted = false;
return;
}
let result;
if (this.isPasted) {
this.isPasted = false;
const rightPart = this.maskedValue.length - end;
const to = value.length - rightPart;
result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
}
else {
result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
}
this.updateInput(result.value, result.selection);
this.updateValueWithEvents(result.value);
}
/**
* @hidden
*/
ngOnChanges(changes) {
if (changes['value']) {
this.value = this.normalizeValue(this.value);
}
const next = this.extractChanges(changes);
this.updateService(next);
if (!this.mask) {
this.updateInput(this.value);
return;
}
const maskedValue = this.service.maskRaw(this.value);
this.updateInput(maskedValue, null, true);
if (changes['includeLiterals'] || isChanged('promptPlaceholder', changes)) {
resolvedPromise.then(() => {
this.updateValueWithEvents(this.maskedValue, false);
});
}
}
/**
* @hidden
* Writes a new value to the element.
*/
writeValue(value) {
this.value = this.normalizeValue(value);
this.updateInput(this.service.maskRaw(this.value));
if (this.includeLiterals) {
this.updateValue(this.maskedValue, false);
}
}
/**
* @hidden
* Sets the function that will be called when a `change` event is triggered.
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @hidden
* Sets the function that will be called when a `touch` event is triggered.
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @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) {
this.changeDetector.markForCheck();
this.disabled = isDisabled;
}
/**
* @hidden
*/
validate(_) {
if (this.maskValidation === false || !this.mask) {
return null;
}
if (!this.service.validationValue(this.maskedValue)) {
return null;
}
if (this.maskedValue.indexOf(this.prompt) !== -1) {
return {
patternError: {
mask: this.mask,
maskedValue: this.maskedValue,
value: this.value
}
};
}
return null;
}
/**
* @hidden
*/
get isControlInvalid() {
return this.control && this.control.touched && this.control.invalid;
}
/**
* @hidden
*/
get isControlRequired() {
return isControlRequired(this.control?.control);
}
/**
* @hidden
*/
updateValueWithEvents(maskedValue, callOnChange = true) {
const previousValue = this.value;
this.updateValue(maskedValue, callOnChange);
const valueChanged = this.value !== previousValue;
if (valueChanged && hasObservers(this.valueChange)) {
this.valueChange.emit(this.value);
}
}
onChange = (_) => { };
onTouched = () => { };
updateValue(value, callOnChange = true) {
if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
this.value = '';
}
else {
this.value = this.service.rawValue(value);
}
callOnChange && this.onChange(this.value);
}
updateInput(maskedValue = '', selection, isFromOnChanges) {
if (isFromOnChanges && maskedValue === this.maskedValue) {
return;
}
this.maskedValue = maskedValue;
const value = this.maskOnFocus && !this.focused && this.emptyMask ? '' : maskedValue;
this.renderer.setProperty(this.input.nativeElement, "value", value);
if (selection !== undefined) {
this.setSelection(selection, selection);
}
}
extractChanges(changes) {
return Object.keys(changes).filter(key => key !== 'rules').reduce((obj, key) => {
obj[key] = changes[key].currentValue;
return obj;
}, {});
}
updateService(extra) {
const config = Object.assign({
includeLiterals: this.includeLiterals,
mask: this.mask,
prompt: this.prompt,
promptPlaceholder: this.promptPlaceholder,
rules: this.rules
}, extra);
this.service.update(config);
}
setSelection(start = this.selection[0], end = this.selection[1]) {
if (this.focused) {
invokeElementMethod(this.input, 'setSelectionRange', start, end);
}
}
get emptyMask() {
return this.service.maskRaw() === this.maskedValue;
}
setFocusSelection() {
const selectionStart = this.input.nativeElement.selectionStart;
const index = this.maskedValue ? this.maskedValue.indexOf(this.prompt) : 0;
if (index >= 0 && index < selectionStart) {
this.selection = [index, index];
this.setSelection();
}
}
/**
* @hidden
*/
get focused() {
return this.isFocused;
}
/**
* @hidden
*/
set focused(value) {
if (this.isFocused !== value && this.hostElement) {
const element = this.hostElement.nativeElement;
if (value) {
this.renderer.addClass(element, FOCUSED);
}
else {
this.renderer.removeClass(element, FOCUSED);
}
this.isFocused = value;
}
}
normalizeValue(value) {
const present = isPresent(value);
if (present && typeof value !== 'string') {
if (isDevMode()) {
throw new Error('The MaskedTextBox component supports only string values.');
}
return String(value);
}
return present ? value : '';
}
handleClasses(value, input) {
const elem = this.hostElement.nativeElement;
const classes = getStylingClasses('input', input, this[input], value);
if (classes.toRemove) {
this.renderer.removeClass(elem, classes.toRemove);
}
if (classes.toAdd) {
this.renderer.addClass(elem, classes.toAdd);
}
}
setInputAttributes() {
const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: i1.MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaskedTextBoxComponent, isStandalone: true, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
MaskingService,
{
multi: true,
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MaskedTextBoxComponent) /* eslint-disable-line*/
},
{
multi: true,
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MaskedTextBoxComponent) /* eslint-disable-line*/
},
{
provide: KendoInput,
useExisting: forwardRef(() => MaskedTextBoxComponent)
}
], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
<ng-container
kendoInputSharedEvents
[hostElement]="hostElement"
[(isFocused)]="focused"
(handleBlur)="handleBlur()"
(onFocus)="handleFocus()"
>
<span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
<ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
</ng-template>
</span>
<kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
<input #input
class="k-input-inner"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
[id]="focusableId"
[tabindex]="tabIndex"
[attr.title]="title"
[attr.aria-placeholder]="mask"
[attr.aria-invalid]="isControlInvalid"
[attr.required]="isControlRequired ? '' : null"
[disabled]="disabled"
[readonly]="readonly"
[kendoEventsOutsideAngular]="{
focus: handleInputFocus,
blur: handleInputBlur,
click: handleClick,
dragstart: handleDragDrop,
drop: handleDragDrop
}"
/>
<kendo-input-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-input-separator>
<span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
<ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
</ng-template>
</span>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoMaskedTextBox',
providers: [
MaskingService,
{
multi: true,
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MaskedTextBoxComponent) /* eslint-disable-line*/
},
{
multi: true,
provide: NG_VALIDATORS,
useExisting: forwardRef(() => MaskedTextBoxComponent) /* eslint-disable-line*/
},
{
provide: KendoInput,
useExisting: forwardRef(() => MaskedTextBoxComponent)
}
],
selector: 'kendo-maskedtextbox',
template: `
<ng-container
kendoInputSharedEvents
[hostElement]="hostElement"
[(isFocused)]="focused"
(handleBlur)="handleBlur()"
(onFocus)="handleFocus()"
>
<span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
<ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
</ng-template>
</span>
<kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
<input #input
class="k-input-inner"
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
[id]="focusableId"
[tabindex]="tabIndex"
[attr.title]="title"
[attr.aria-placeholder]="mask"
[attr.aria-invalid]="isControlInvalid"
[attr.required]="isControlRequired ? '' : null"
[disabled]="disabled"
[readonly]="readonly"
[kendoEventsOutsideAngular]="{
focus: handleInputFocus,
blur: handleInputBlur,
click: handleClick,
dragstart: handleDragDrop,
drop: handleDragDrop
}"
/>
<kendo-input-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-input-separator>
<span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
<ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
</ng-template>
</span>
</ng-container>
`,
standalone: true,
imports: [SharedInputEventsDirective, NgIf, NgTemplateOutlet, InputSeparatorComponent, EventsOutsideAngularDirective]
}]
}], ctorParameters: function () { return [{ type: i1.MaskingService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [RTL]
}] }]; }, propDecorators: { focusableId: [{
type: Input
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}, {
type: HostBinding,
args: ['class.k-readonly']
}], title: [{
type: Input
}], size: [{
type: Input
}], rounded: [{
type: Input
}], fillMode: [{
type: Input
}], mask: [{
type: Input
}], value: [{
type: Input
}], rules: [{
type: Input
}], prompt: [{
type: Input
}], promptPlaceholder: [{
type: Input
}], includeLiterals: [{
type: Input
}], maskOnFocus: [{
type: Input
}], maskValidation: [{
type: Input
}], tabindex: [{
type: Input
}], tabIndex: [{
type: Input
}], inputAttributes: [{
type: Input
}], onFocus: [{
type: Output,
args: ['focus']
}], onBlur: [{
type: Output,
args: ['blur']
}], inputFocus: [{
type: Output
}], inputBlur: [{
type: Output
}], valueChange: [{
type: Output
}], direction: [{
type: HostBinding,
args: ['attr.dir']
}], hostClasses: [{
type: HostBinding,
args: ['class.k-input']
}, {
type: HostBinding,
args: ['class.k-maskedtextbox']
}], hostDisabledClass: [{
type: HostBinding,
args: ['class.k-disabled']
}], input: [{
type: ViewChild,
args: ['input', { static: true }]
}], suffixTemplate: [{
type: ContentChild,
args: [SuffixTemplateDirective]
}], prefixTemplate: [{
type: ContentChild,
args: [PrefixTemplateDirective]
}], pasteHandler: [{
type: HostListener,
args: ['paste', ['$event']]
}], inputHandler: [{
type: HostListener,
args: ['input', ['$event']]
}] } });