@progress/kendo-angular-inputs 8.0.9-dev.202203220940 → 8.0.9-dev.202203231216

package/dist/es/maskedtextbox/maskedtextbox.component.js

@@ -5,14 +5,14 @@
 import * as tslib_1 from "tslib";
 import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef } from '@angular/core';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { take } from 'rxjs/operators';
-import { anyChanged, guid, hasObservers, KendoInput } from '@progress/kendo-angular-common';
+import { guid, hasObservers, isChanged, KendoInput } 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';
+var resolvedPromise = Promise.resolve(null);
 var FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -385,7 +385,7 @@ var MaskedTextBoxComponent = /** @class */ (function () {
             result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
         }
         else {
-            result = this.service.maskInput(value, this.maskedValue, e.target.selectionStart);
+            result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
         }
         this.updateInput(result.value, result.selection);
         this.updateValueWithEvents(result.value);
@@ -395,32 +395,22 @@ var MaskedTextBoxComponent = /** @class */ (function () {
      */
     MaskedTextBoxComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
+        if (changes.value) {
+            this.value = this.normalizeValue();
+        }
         if (!this.mask) {
-            if (changes.value) {
-                this.value = this.normalizeValue();
-            }
             this.updateInput(this.value);
             return;
         }
         var next = this.extractChanges(changes);
         this.updateService(next);
-        if (changes.value) {
-            this.value = this.normalizeValue();
-            var maskedValue = this.service.maskRaw(this.value);
-            if (maskedValue !== this.maskedValue) {
-                this.updateInput(maskedValue);
-            }
-            if (this.includeLiterals) {
-                this.updateValue(this.maskedValue);
-            }
-        }
-        if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(function () {
+        var maskedValue = this.service.maskRaw(this.value);
+        this.updateInput(maskedValue, null, true);
+        if (changes.includeLiterals || isChanged('promptPlaceholder', changes)) {
+            resolvedPromise.then(function () {
                 _this.updateValueWithEvents(_this.maskedValue);
             });
-            return;
         }
-        this.updateInput(this.service.maskRaw(this.value));
     };
     /**
      * @hidden
@@ -429,6 +419,9 @@ var MaskedTextBoxComponent = /** @class */ (function () {
     MaskedTextBoxComponent.prototype.writeValue = function (value) {
         this.value = this.normalizeValue(value);
         this.updateInput(this.service.maskRaw(this.value));
+        if (this.includeLiterals) {
+            this.updateValue(this.maskedValue);
+        }
     };
     /**
      * @hidden
@@ -481,10 +474,12 @@ var MaskedTextBoxComponent = /** @class */ (function () {
      */
     MaskedTextBoxComponent.prototype.updateValueWithEvents = function (maskedValue) {
         this.updateValue(maskedValue);
-        this.valueChange.emit(this.value);
+        if (hasObservers(this.valueChange)) {
+            this.valueChange.emit(this.value);
+        }
     };
     MaskedTextBoxComponent.prototype.updateValue = function (value) {
-        if (this.mask && !this.service.validationValue(value)) {
+        if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
             this.value = '';
         }
         else {
@@ -492,8 +487,11 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         this.onChange(this.value);
     };
-    MaskedTextBoxComponent.prototype.updateInput = function (maskedValue, selection) {
+    MaskedTextBoxComponent.prototype.updateInput = function (maskedValue, selection, isFromOnChanges) {
         if (maskedValue === void 0) { maskedValue = ''; }
+        if (isFromOnChanges && maskedValue === this.maskedValue) {
+            return;
+        }
         this.maskedValue = maskedValue;
         var value = this.maskOnFocus && !this.focused && this.emptyMask ? '' : maskedValue;
         this.renderer.setProperty(this.input.nativeElement, "value", value);

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1647941853,
+    publishDate: 1648037581,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es2015/maskedtextbox/maskedtextbox.component.js

@@ -6,14 +6,14 @@ import * as tslib_1 from "tslib";
 var MaskedTextBoxComponent_1;
 import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef } from '@angular/core';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { take } from 'rxjs/operators';
-import { anyChanged, guid, hasObservers, KendoInput } from '@progress/kendo-angular-common';
+import { guid, hasObservers, isChanged, KendoInput } 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';
+const resolvedPromise = Promise.resolve(null);
 const FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -359,7 +359,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
             result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
         }
         else {
-            result = this.service.maskInput(value, this.maskedValue, e.target.selectionStart);
+            result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
         }
         this.updateInput(result.value, result.selection);
         this.updateValueWithEvents(result.value);
@@ -368,32 +368,22 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
      * @hidden
      */
     ngOnChanges(changes) {
+        if (changes.value) {
+            this.value = this.normalizeValue();
+        }
         if (!this.mask) {
-            if (changes.value) {
-                this.value = this.normalizeValue();
-            }
             this.updateInput(this.value);
             return;
         }
         const next = this.extractChanges(changes);
         this.updateService(next);
-        if (changes.value) {
-            this.value = this.normalizeValue();
-            const maskedValue = this.service.maskRaw(this.value);
-            if (maskedValue !== this.maskedValue) {
-                this.updateInput(maskedValue);
-            }
-            if (this.includeLiterals) {
-                this.updateValue(this.maskedValue);
-            }
-        }
-        if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        const maskedValue = this.service.maskRaw(this.value);
+        this.updateInput(maskedValue, null, true);
+        if (changes.includeLiterals || isChanged('promptPlaceholder', changes)) {
+            resolvedPromise.then(() => {
                 this.updateValueWithEvents(this.maskedValue);
             });
-            return;
         }
-        this.updateInput(this.service.maskRaw(this.value));
     }
     /**
      * @hidden
@@ -402,6 +392,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
     writeValue(value) {
         this.value = this.normalizeValue(value);
         this.updateInput(this.service.maskRaw(this.value));
+        if (this.includeLiterals) {
+            this.updateValue(this.maskedValue);
+        }
     }
     /**
      * @hidden
@@ -454,10 +447,12 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
      */
     updateValueWithEvents(maskedValue) {
         this.updateValue(maskedValue);
-        this.valueChange.emit(this.value);
+        if (hasObservers(this.valueChange)) {
+            this.valueChange.emit(this.value);
+        }
     }
     updateValue(value) {
-        if (this.mask && !this.service.validationValue(value)) {
+        if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
             this.value = '';
         }
         else {
@@ -465,7 +460,10 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         }
         this.onChange(this.value);
     }
-    updateInput(maskedValue = '', selection) {
+    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);

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1647941853,
+    publishDate: 1648037581,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/fesm2015/index.js

@@ -8,7 +8,7 @@ import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages, MessageService } from '@progress/kendo-angular-l10n';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, isChanged, closest } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, closest } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -481,7 +481,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1647941853,
+    publishDate: 1648037581,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -4380,6 +4380,7 @@ MaskingService = __decorate([
 ], MaskingService);
 
 var MaskedTextBoxComponent_1;
+const resolvedPromise = Promise.resolve(null);
 const FOCUSED$2 = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -4725,7 +4726,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
             result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
         }
         else {
-            result = this.service.maskInput(value, this.maskedValue, e.target.selectionStart);
+            result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
         }
         this.updateInput(result.value, result.selection);
         this.updateValueWithEvents(result.value);
@@ -4734,32 +4735,22 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
      * @hidden
      */
     ngOnChanges(changes) {
+        if (changes.value) {
+            this.value = this.normalizeValue();
+        }
         if (!this.mask) {
-            if (changes.value) {
-                this.value = this.normalizeValue();
-            }
             this.updateInput(this.value);
             return;
         }
         const next = this.extractChanges(changes);
         this.updateService(next);
-        if (changes.value) {
-            this.value = this.normalizeValue();
-            const maskedValue = this.service.maskRaw(this.value);
-            if (maskedValue !== this.maskedValue) {
-                this.updateInput(maskedValue);
-            }
-            if (this.includeLiterals) {
-                this.updateValue(this.maskedValue);
-            }
-        }
-        if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        const maskedValue = this.service.maskRaw(this.value);
+        this.updateInput(maskedValue, null, true);
+        if (changes.includeLiterals || isChanged('promptPlaceholder', changes)) {
+            resolvedPromise.then(() => {
                 this.updateValueWithEvents(this.maskedValue);
             });
-            return;
         }
-        this.updateInput(this.service.maskRaw(this.value));
     }
     /**
      * @hidden
@@ -4768,6 +4759,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
     writeValue(value) {
         this.value = this.normalizeValue(value);
         this.updateInput(this.service.maskRaw(this.value));
+        if (this.includeLiterals) {
+            this.updateValue(this.maskedValue);
+        }
     }
     /**
      * @hidden
@@ -4820,10 +4814,12 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
      */
     updateValueWithEvents(maskedValue) {
         this.updateValue(maskedValue);
-        this.valueChange.emit(this.value);
+        if (hasObservers(this.valueChange)) {
+            this.valueChange.emit(this.value);
+        }
     }
     updateValue(value) {
-        if (this.mask && !this.service.validationValue(value)) {
+        if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
             this.value = '';
         }
         else {
@@ -4831,7 +4827,10 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
         }
         this.onChange(this.value);
     }
-    updateInput(maskedValue = '', selection) {
+    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);

package/dist/fesm5/index.js

@@ -8,7 +8,7 @@ import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages, MessageService } from '@progress/kendo-angular-l10n';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, isChanged, closest } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent, closest } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -514,7 +514,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1647941853,
+    publishDate: 1648037581,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -4473,6 +4473,7 @@ var MaskingService = /** @class */ (function () {
     return MaskingService;
 }());
 
+var resolvedPromise = Promise.resolve(null);
 var FOCUSED$2 = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -4845,7 +4846,7 @@ var MaskedTextBoxComponent = /** @class */ (function () {
             result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
         }
         else {
-            result = this.service.maskInput(value, this.maskedValue, e.target.selectionStart);
+            result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
         }
         this.updateInput(result.value, result.selection);
         this.updateValueWithEvents(result.value);
@@ -4855,32 +4856,22 @@ var MaskedTextBoxComponent = /** @class */ (function () {
      */
     MaskedTextBoxComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
+        if (changes.value) {
+            this.value = this.normalizeValue();
+        }
         if (!this.mask) {
-            if (changes.value) {
-                this.value = this.normalizeValue();
-            }
             this.updateInput(this.value);
             return;
         }
         var next = this.extractChanges(changes);
         this.updateService(next);
-        if (changes.value) {
-            this.value = this.normalizeValue();
-            var maskedValue = this.service.maskRaw(this.value);
-            if (maskedValue !== this.maskedValue) {
-                this.updateInput(maskedValue);
-            }
-            if (this.includeLiterals) {
-                this.updateValue(this.maskedValue);
-            }
-        }
-        if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(function () {
+        var maskedValue = this.service.maskRaw(this.value);
+        this.updateInput(maskedValue, null, true);
+        if (changes.includeLiterals || isChanged('promptPlaceholder', changes)) {
+            resolvedPromise.then(function () {
                 _this.updateValueWithEvents(_this.maskedValue);
             });
-            return;
         }
-        this.updateInput(this.service.maskRaw(this.value));
     };
     /**
      * @hidden
@@ -4889,6 +4880,9 @@ var MaskedTextBoxComponent = /** @class */ (function () {
     MaskedTextBoxComponent.prototype.writeValue = function (value) {
         this.value = this.normalizeValue(value);
         this.updateInput(this.service.maskRaw(this.value));
+        if (this.includeLiterals) {
+            this.updateValue(this.maskedValue);
+        }
     };
     /**
      * @hidden
@@ -4941,10 +4935,12 @@ var MaskedTextBoxComponent = /** @class */ (function () {
      */
     MaskedTextBoxComponent.prototype.updateValueWithEvents = function (maskedValue) {
         this.updateValue(maskedValue);
-        this.valueChange.emit(this.value);
+        if (hasObservers(this.valueChange)) {
+            this.valueChange.emit(this.value);
+        }
     };
     MaskedTextBoxComponent.prototype.updateValue = function (value) {
-        if (this.mask && !this.service.validationValue(value)) {
+        if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
             this.value = '';
         }
         else {
@@ -4952,8 +4948,11 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         this.onChange(this.value);
     };
-    MaskedTextBoxComponent.prototype.updateInput = function (maskedValue, selection) {
+    MaskedTextBoxComponent.prototype.updateInput = function (maskedValue, selection, isFromOnChanges) {
         if (maskedValue === void 0) { maskedValue = ''; }
+        if (isFromOnChanges && maskedValue === this.maskedValue) {
+            return;
+        }
         this.maskedValue = maskedValue;
         var value = this.maskOnFocus && !this.focused && this.emptyMask ? '' : maskedValue;
         this.renderer.setProperty(this.input.nativeElement, "value", value);

package/dist/npm/maskedtextbox/maskedtextbox.component.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
-var operators_1 = require("rxjs/operators");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
@@ -15,6 +14,7 @@ var package_metadata_1 = require("../package-metadata");
 var masking_service_1 = require("./masking.service");
 var dom_utils_1 = require("../common/dom-utils");
 var utils_1 = require("../common/utils");
+var resolvedPromise = Promise.resolve(null);
 var FOCUSED = 'k-focus';
 /**
  * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
@@ -387,7 +387,7 @@ var MaskedTextBoxComponent = /** @class */ (function () {
             result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
         }
         else {
-            result = this.service.maskInput(value, this.maskedValue, e.target.selectionStart);
+            result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
         }
         this.updateInput(result.value, result.selection);
         this.updateValueWithEvents(result.value);
@@ -397,32 +397,22 @@ var MaskedTextBoxComponent = /** @class */ (function () {
      */
     MaskedTextBoxComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
+        if (changes.value) {
+            this.value = this.normalizeValue();
+        }
         if (!this.mask) {
-            if (changes.value) {
-                this.value = this.normalizeValue();
-            }
             this.updateInput(this.value);
             return;
         }
         var next = this.extractChanges(changes);
         this.updateService(next);
-        if (changes.value) {
-            this.value = this.normalizeValue();
-            var maskedValue = this.service.maskRaw(this.value);
-            if (maskedValue !== this.maskedValue) {
-                this.updateInput(maskedValue);
-            }
-            if (this.includeLiterals) {
-                this.updateValue(this.maskedValue);
-            }
-        }
-        if (kendo_angular_common_1.anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
-            this.ngZone.onStable.pipe(operators_1.take(1)).subscribe(function () {
+        var maskedValue = this.service.maskRaw(this.value);
+        this.updateInput(maskedValue, null, true);
+        if (changes.includeLiterals || kendo_angular_common_1.isChanged('promptPlaceholder', changes)) {
+            resolvedPromise.then(function () {
                 _this.updateValueWithEvents(_this.maskedValue);
             });
-            return;
         }
-        this.updateInput(this.service.maskRaw(this.value));
     };
     /**
      * @hidden
@@ -431,6 +421,9 @@ var MaskedTextBoxComponent = /** @class */ (function () {
     MaskedTextBoxComponent.prototype.writeValue = function (value) {
         this.value = this.normalizeValue(value);
         this.updateInput(this.service.maskRaw(this.value));
+        if (this.includeLiterals) {
+            this.updateValue(this.maskedValue);
+        }
     };
     /**
      * @hidden
@@ -483,10 +476,12 @@ var MaskedTextBoxComponent = /** @class */ (function () {
      */
     MaskedTextBoxComponent.prototype.updateValueWithEvents = function (maskedValue) {
         this.updateValue(maskedValue);
-        this.valueChange.emit(this.value);
+        if (kendo_angular_common_1.hasObservers(this.valueChange)) {
+            this.valueChange.emit(this.value);
+        }
     };
     MaskedTextBoxComponent.prototype.updateValue = function (value) {
-        if (this.mask && !this.service.validationValue(value)) {
+        if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
             this.value = '';
         }
         else {
@@ -494,8 +489,11 @@ var MaskedTextBoxComponent = /** @class */ (function () {
         }
         this.onChange(this.value);
     };
-    MaskedTextBoxComponent.prototype.updateInput = function (maskedValue, selection) {
+    MaskedTextBoxComponent.prototype.updateInput = function (maskedValue, selection, isFromOnChanges) {
         if (maskedValue === void 0) { maskedValue = ''; }
+        if (isFromOnChanges && maskedValue === this.maskedValue) {
+            return;
+        }
         this.maskedValue = maskedValue;
         var value = this.maskOnFocus && !this.focused && this.emptyMask ? '' : maskedValue;
         this.renderer.setProperty(this.input.nativeElement, "value", value);

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1647941853,
+    publishDate: 1648037581,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };