@progress/kendo-angular-inputs 17.0.0-develop.3 → 17.0.0-develop.31

package/{esm2020 → esm2022}/formfield/hint.component.mjs

@@ -9,21 +9,19 @@ let serial = 0;
  * Represents a hint message that will be shown underneath a form-bound component.
  */
 export class HintComponent {
-    constructor() {
-        /**
-         * Specifies the alignment of the Hint message.
-         *
-         * The possible values are:
-         * * (Default) `start`
-         * * `end`
-         */
-        this.align = 'start';
-        /**
-         * @hidden
-         */
-        this.id = `kendo-hint-${serial++}`;
-        this.hostClass = true;
-    }
+    /**
+     * Specifies the alignment of the Hint message.
+     *
+     * The possible values are:
+     * * (Default) `start`
+     * * `end`
+     */
+    align = 'start';
+    /**
+     * @hidden
+     */
+    id = `kendo-hint-${serial++}`;
+    hostClass = true;
     get startClass() {
         return this.align === 'start';
     }
@@ -33,12 +31,12 @@ export class HintComponent {
     get idAttribute() {
         return this.id;
     }
-}
-HintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HintComponent, isStandalone: true, selector: "kendo-formhint", inputs: { align: "align" }, host: { properties: { "class.k-form-hint": "this.hostClass", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HintComponent, isStandalone: true, selector: "kendo-formhint", inputs: { align: "align" }, host: { properties: { "class.k-form-hint": "this.hostClass", "class.k-text-start": "this.startClass", "class.k-text-end": "this.endClass", "attr.id": "this.idAttribute" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HintComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-formhint',

package/{esm2020 → esm2022}/formfield.module.mjs

@@ -41,11 +41,11 @@ import * as i3 from "./formfield/error.component";
  * ```
  */
 export class FormFieldModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormFieldModule, imports: [i1.FormFieldComponent, i2.HintComponent, i3.ErrorComponent], exports: [i1.FormFieldComponent, i2.HintComponent, i3.ErrorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldModule });
 }
-FormFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FormFieldModule, imports: [i1.FormFieldComponent, i2.HintComponent, i3.ErrorComponent], exports: [i1.FormFieldComponent, i2.HintComponent, i3.ErrorComponent] });
-FormFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormFieldModule, imports: [KENDO_FORMFIELD] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_FORMFIELD],

package/{esm2020 → esm2022}/inputs.module.mjs

@@ -82,11 +82,11 @@ import * as i39 from "./colorpicker/color-palette.component";
  * ```
  */
 export class InputsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent], exports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, AdornmentsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i2.TextBoxComponent, i7.SeparatorComponent, i8.NumericTextBoxComponent, i7.SeparatorComponent, i7.SeparatorComponent, i7.SeparatorComponent, i24.SliderComponent, i27.RangeSliderComponent, i29.RatingComponent, i33.SignatureComponent, i35.ColorPickerComponent, i37.FlatColorPickerComponent, i38.ColorGradientComponent, AdornmentsModule] });
 }
-InputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: InputsModule, imports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent], exports: [i1.TextBoxDirective, i2.TextBoxComponent, i3.InputSeparatorComponent, i4.TextBoxSuffixTemplateDirective, i5.TextBoxPrefixTemplateDirective, i6.TextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.PrefixTemplateDirective, i7.SuffixTemplateDirective, i7.SeparatorComponent, i11.TextAreaComponent, i12.TextAreaDirective, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i16.CheckBoxDirective, i17.RadioButtonComponent, i18.RadioButtonDirective, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i26.LabelTemplateDirective, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i26.LabelTemplateDirective, i29.RatingComponent, i30.RatingItemTemplateDirective, i31.RatingHoveredItemTemplateDirective, i32.RatingSelectedItemTemplateDirective, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, AdornmentsModule] });
-InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InputsModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i2.TextBoxComponent, i3.InputSeparatorComponent, i6.TextBoxCustomMessagesComponent, i7.SeparatorComponent, i8.NumericTextBoxComponent, i9.NumericTextBoxCustomMessagesComponent, i7.SeparatorComponent, i10.MaskedTextBoxComponent, i7.SeparatorComponent, i11.TextAreaComponent, i13.TextAreaPrefixComponent, i14.TextAreaSuffixComponent, i7.SeparatorComponent, i15.CheckBoxComponent, i17.RadioButtonComponent, i19.SwitchComponent, i20.SwitchCustomMessagesComponent, i21.FormFieldComponent, i22.HintComponent, i23.ErrorComponent, i24.SliderComponent, i25.SliderCustomMessagesComponent, i27.RangeSliderComponent, i28.RangeSliderCustomMessagesComponent, i29.RatingComponent, i33.SignatureComponent, i34.SignatureCustomMessagesComponent, i35.ColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i37.FlatColorPickerComponent, i36.ColorPickerCustomMessagesComponent, i38.ColorGradientComponent, i36.ColorPickerCustomMessagesComponent, i39.ColorPaletteComponent, i36.ColorPickerCustomMessagesComponent, AdornmentsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InputsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_INPUTS],

package/{esm2020 → esm2022}/maskedtextbox/maskedtextbox.component.mjs

@@ -44,209 +44,30 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class MaskedTextBoxComponent {
-    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;
-        /**
-         * @hidden
-         */
-        this.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).
-         */
-        this.disabled = false;
-        /**
-         * Determines whether the MaskedTextBox is in its read-only state ([see example]({% slug readonly_maskedtextbox %})).
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Represents a prompt character for the masked value.
-         * @default `_`
-         */
-        this.prompt = '_';
-        /**
-         * Indicates a character which represents an empty position in the raw value.
-         * @default ' '
-         */
-        this.promptPlaceholder = ' ';
-        /**
-         * Indicates whether to include literals in the raw value  ([see example]({% slug value_maskedtextbox %})).
-         * @default false
-         */
-        this.includeLiterals = false;
-        /**
-         * Specifies if the mask should be shown on focus for empty value.
-         */
-        this.maskOnFocus = false;
-        /**
-         * Determines whether the built-in mask validator is enforced when a form is validated
-         * ([see example]({% slug validation_maskedtextbox %})).
-         * @default true
-         */
-        this.maskValidation = true;
-        /**
-         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         */
-        this.tabindex = 0;
-        /**
-         * 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");
-         *   }
-         * }
-         * ```
-         */
-        this.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");
-         *   }
-         * }
-         * ```
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires each time the user focuses the `input` element.
-         */
-        this.inputFocus = new EventEmitter();
-        /**
-         * Fires each time the `input` element gets blurred.
-         */
-        this.inputBlur = new EventEmitter();
-        /**
-         * Fires each time the value changes.
-         */
-        this.valueChange = new EventEmitter();
-        this.hostClasses = true;
-        this.focusClick = false;
-        this.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]/
-        };
-        this.isPasted = false;
-        this.selection = [0, 0];
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        this.parsedAttributes = {};
-        /**
-         * @hidden
-         */
-        this.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
-         */
-        this.handleInputFocus = () => {
-            this.handleFocus();
-            if (hasObservers(this.inputFocus)) {
-                this.ngZone.run(() => {
-                    this.inputFocus.emit();
-                });
-            }
-        };
-        /**
-         * @hidden
-         */
-        this.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
-         */
-        this.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
-         */
-        this.handleInputBlur = () => {
-            this.changeDetector.markForCheck();
-            if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
-                this.ngZone.run(() => {
-                    this.inputBlur.emit();
-                });
-            }
-        };
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
-        validatePackage(packageMetadata);
-        this.direction = rtl ? 'rtl' : 'ltr';
-        this.updateService();
-    }
+    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)).
@@ -298,6 +119,18 @@ export class MaskedTextBoxComponent {
     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 %})).
      */
@@ -307,6 +140,35 @@ export class MaskedTextBoxComponent {
     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
      */
@@ -352,9 +214,111 @@ export class MaskedTextBoxComponent {
             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");
@@ -376,6 +340,80 @@ export class MaskedTextBoxComponent {
             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
      */
@@ -551,6 +589,8 @@ export class MaskedTextBoxComponent {
             this.valueChange.emit(this.value);
         }
     }
+    onChange = (_) => { };
+    onTouched = () => { };
     updateValue(value, callOnChange = true) {
         if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
             this.value = '';
@@ -648,25 +688,24 @@ export class MaskedTextBoxComponent {
         const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
     }
-}
-MaskedTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
+    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"
@@ -708,7 +747,8 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             </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: "15.2.10", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoMaskedTextBox',