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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/dist/cdn/js/kendo-angular-inputs.js +1 -1
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/maskedtextbox/maskedtextbox.component.js +48 -44
  4. package/dist/es/package-metadata.js +1 -1
  5. package/dist/es/rangeslider/rangeslider.component.js +9 -5
  6. package/dist/es/shared/utils.js +3 -2
  7. package/dist/es/textarea/textarea-suffix.component.js +1 -2
  8. package/dist/es/textbox/textbox-suffix.directive.js +0 -1
  9. package/dist/es2015/index.metadata.json +1 -1
  10. package/dist/es2015/maskedtextbox/maskedtextbox.component.d.ts +5 -4
  11. package/dist/es2015/maskedtextbox/maskedtextbox.component.js +45 -41
  12. package/dist/es2015/package-metadata.js +1 -1
  13. package/dist/es2015/rangeslider/rangeslider.component.js +9 -5
  14. package/dist/es2015/shared/utils.js +3 -2
  15. package/dist/es2015/textarea/textarea-suffix.component.d.ts +1 -2
  16. package/dist/es2015/textarea/textarea-suffix.component.js +2 -4
  17. package/dist/es2015/textbox/textbox-suffix.directive.d.ts +0 -1
  18. package/dist/es2015/textbox/textbox-suffix.directive.js +0 -1
  19. package/dist/fesm2015/index.js +59 -53
  20. package/dist/fesm5/index.js +61 -54
  21. package/dist/npm/maskedtextbox/maskedtextbox.component.js +48 -44
  22. package/dist/npm/package-metadata.js +1 -1
  23. package/dist/npm/rangeslider/rangeslider.component.js +9 -5
  24. package/dist/npm/shared/utils.js +3 -2
  25. package/dist/npm/textarea/textarea-suffix.component.js +1 -2
  26. package/dist/npm/textbox/textbox-suffix.directive.js +0 -1
  27. package/dist/systemjs/kendo-angular-inputs.js +1 -1
  28. package/package.json +1 -1
@@ -83,9 +83,6 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
83
83
  * * `null`
84
84
  */
85
85
  fillMode: InputFillMode;
86
- direction: string;
87
- hostClasses: boolean;
88
- readonly hostDisabledClass: boolean;
89
86
  /**
90
87
  * Represents the current mask ([see example]({% slug value_maskedtextbox %})).
91
88
  * If no mask is set, the component behaves as a standard `type="text"` input.
@@ -183,6 +180,9 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
183
180
  * Fires each time the value changes.
184
181
  */
185
182
  valueChange: EventEmitter<string>;
183
+ direction: string;
184
+ hostClasses: boolean;
185
+ readonly hostDisabledClass: boolean;
186
186
  /**
187
187
  * Represents the `ElementRef` of the visible `input` element.
188
188
  */
@@ -284,9 +284,10 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
284
284
  /**
285
285
  * @hidden
286
286
  */
287
- updateValue(maskedValue: string): void;
287
+ updateValueWithEvents(maskedValue: string): void;
288
288
  protected onChange: (_: any) => void;
289
289
  protected onTouched: () => void;
290
+ private updateValue;
290
291
  private updateInput;
291
292
  private extractChanges;
292
293
  private updateService;
@@ -6,11 +6,11 @@ import * as tslib_1 from "tslib";
6
6
  var MaskedTextBoxComponent_1;
7
7
  import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef } from '@angular/core';
8
8
  import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
9
+ import { guid, hasObservers, isChanged, KendoInput } from '@progress/kendo-angular-common';
9
10
  import { RTL } from '@progress/kendo-angular-l10n';
10
11
  import { validatePackage } from '@progress/kendo-licensing';
11
12
  import { packageMetadata } from '../package-metadata';
12
13
  import { MaskingService } from './masking.service';
13
- import { isChanged, anyChanged, guid, hasObservers, KendoInput } from '@progress/kendo-angular-common';
14
14
  import { invokeElementMethod } from '../common/dom-utils';
15
15
  import { requiresZoneOnBlur, isPresent, getStylingClasses } from '../common/utils';
16
16
  const resolvedPromise = Promise.resolve(null);
@@ -57,7 +57,6 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
57
57
  * Determines whether the MaskedTextBox is in its read-only state ([see example]({% slug readonly_maskedtextbox %})).
58
58
  */
59
59
  this.readonly = false;
60
- this.hostClasses = true;
61
60
  /**
62
61
  * Represents a prompt character for the masked value.
63
62
  * @default `_`
@@ -133,6 +132,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
133
132
  * Fires each time the value changes.
134
133
  */
135
134
  this.valueChange = new EventEmitter();
135
+ this.hostClasses = true;
136
136
  this.focusClick = false;
137
137
  this.defaultRules = {
138
138
  "#": /[\d\s\+\-]/,
@@ -250,18 +250,15 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
250
250
  get fillMode() {
251
251
  return this._fillMode;
252
252
  }
253
- get hostDisabledClass() {
254
- return this.disabled;
255
- }
256
253
  /**
257
254
  * Exposes the RegExp-based mask validation array ([see example]({% slug masks_maskedtextbox %})).
258
255
  */
259
- get rules() {
260
- return this._rules || this.defaultRules;
261
- }
262
256
  set rules(value) {
263
257
  this._rules = Object.assign({}, this.defaultRules, value);
264
258
  }
259
+ get rules() {
260
+ return this._rules || this.defaultRules;
261
+ }
265
262
  /**
266
263
  * @hidden
267
264
  */
@@ -271,6 +268,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
271
268
  get tabIndex() {
272
269
  return this.tabindex;
273
270
  }
271
+ get hostDisabledClass() {
272
+ return this.disabled;
273
+ }
274
274
  ngOnInit() {
275
275
  if (this.hostElement) {
276
276
  this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
@@ -347,7 +347,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
347
347
  const value = e.target.value;
348
348
  const [start, end] = this.selection;
349
349
  if (!this.mask) {
350
- this.updateValue(value);
350
+ this.updateValueWithEvents(value);
351
351
  this.isPasted = false;
352
352
  return;
353
353
  }
@@ -359,10 +359,10 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
359
359
  result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
360
360
  }
361
361
  else {
362
- result = this.service.maskInput(value, this.maskedValue, e.target.selectionStart);
362
+ result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
363
363
  }
364
364
  this.updateInput(result.value, result.selection);
365
- this.updateValue(result.value);
365
+ this.updateValueWithEvents(result.value);
366
366
  }
367
367
  /**
368
368
  * @hidden
@@ -377,20 +377,13 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
377
377
  }
378
378
  const next = this.extractChanges(changes);
379
379
  this.updateService(next);
380
- if (isChanged('value', changes)) {
381
- const maskedValue = this.service.maskRaw(this.value);
382
- if (maskedValue !== this.maskedValue) {
383
- this.updateInput(maskedValue);
384
- }
385
- }
386
- else if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
380
+ const maskedValue = this.service.maskRaw(this.value);
381
+ this.updateInput(maskedValue, null, true);
382
+ if (changes.includeLiterals || isChanged('promptPlaceholder', changes)) {
387
383
  resolvedPromise.then(() => {
388
- this.updateValue(this.maskedValue);
384
+ this.updateValueWithEvents(this.maskedValue);
389
385
  });
390
386
  }
391
- else {
392
- this.updateInput(this.service.maskRaw(this.value));
393
- }
394
387
  }
395
388
  /**
396
389
  * @hidden
@@ -399,6 +392,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
399
392
  writeValue(value) {
400
393
  this.value = this.normalizeValue(value);
401
394
  this.updateInput(this.service.maskRaw(this.value));
395
+ if (this.includeLiterals) {
396
+ this.updateValue(this.maskedValue);
397
+ }
402
398
  }
403
399
  /**
404
400
  * @hidden
@@ -449,17 +445,25 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
449
445
  /**
450
446
  * @hidden
451
447
  */
452
- updateValue(maskedValue) {
453
- if (this.mask && !this.service.validationValue(maskedValue)) {
448
+ updateValueWithEvents(maskedValue) {
449
+ this.updateValue(maskedValue);
450
+ if (hasObservers(this.valueChange)) {
451
+ this.valueChange.emit(this.value);
452
+ }
453
+ }
454
+ updateValue(value) {
455
+ if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
454
456
  this.value = '';
455
457
  }
456
458
  else {
457
- this.value = this.service.rawValue(maskedValue);
459
+ this.value = this.service.rawValue(value);
458
460
  }
459
461
  this.onChange(this.value);
460
- this.valueChange.emit(this.value);
461
462
  }
462
- updateInput(maskedValue = '', selection) {
463
+ updateInput(maskedValue = '', selection, isFromOnChanges) {
464
+ if (isFromOnChanges && maskedValue === this.maskedValue) {
465
+ return;
466
+ }
463
467
  this.maskedValue = maskedValue;
464
468
  const value = this.maskOnFocus && !this.focused && this.emptyMask ? '' : maskedValue;
465
469
  this.renderer.setProperty(this.input.nativeElement, "value", value);
@@ -566,20 +570,6 @@ tslib_1.__decorate([
566
570
  tslib_1.__metadata("design:type", String),
567
571
  tslib_1.__metadata("design:paramtypes", [String])
568
572
  ], MaskedTextBoxComponent.prototype, "fillMode", null);
569
- tslib_1.__decorate([
570
- HostBinding('attr.dir'),
571
- tslib_1.__metadata("design:type", String)
572
- ], MaskedTextBoxComponent.prototype, "direction", void 0);
573
- tslib_1.__decorate([
574
- HostBinding('class.k-input'),
575
- HostBinding('class.k-maskedtextbox'),
576
- tslib_1.__metadata("design:type", Boolean)
577
- ], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
578
- tslib_1.__decorate([
579
- HostBinding('class.k-disabled'),
580
- tslib_1.__metadata("design:type", Boolean),
581
- tslib_1.__metadata("design:paramtypes", [])
582
- ], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
583
573
  tslib_1.__decorate([
584
574
  Input(),
585
575
  tslib_1.__metadata("design:type", String)
@@ -634,6 +624,20 @@ tslib_1.__decorate([
634
624
  Output(),
635
625
  tslib_1.__metadata("design:type", EventEmitter)
636
626
  ], MaskedTextBoxComponent.prototype, "valueChange", void 0);
627
+ tslib_1.__decorate([
628
+ HostBinding('attr.dir'),
629
+ tslib_1.__metadata("design:type", String)
630
+ ], MaskedTextBoxComponent.prototype, "direction", void 0);
631
+ tslib_1.__decorate([
632
+ HostBinding('class.k-input'),
633
+ HostBinding('class.k-maskedtextbox'),
634
+ tslib_1.__metadata("design:type", Boolean)
635
+ ], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
636
+ tslib_1.__decorate([
637
+ HostBinding('class.k-disabled'),
638
+ tslib_1.__metadata("design:type", Boolean),
639
+ tslib_1.__metadata("design:paramtypes", [])
640
+ ], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
637
641
  tslib_1.__decorate([
638
642
  ViewChild('input', { static: true }),
639
643
  tslib_1.__metadata("design:type", ElementRef)
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-inputs',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1646924118,
12
+ publishDate: 1648037581,
13
13
  version: '',
14
14
  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'
15
15
  };
@@ -217,9 +217,13 @@ let RangeSliderComponent = RangeSliderComponent_1 = class RangeSliderComponent e
217
217
  const lastCoords = this.draggedHandle.getBoundingClientRect();
218
218
  this.lastHandlePosition = { x: lastCoords.left, y: lastCoords.top };
219
219
  this.dragging = { value: true, target };
220
- const left = args.pageX < this.lastHandlePosition.x;
221
- const right = args.pageX > this.lastHandlePosition.x;
222
- const up = args.pageY > this.lastHandlePosition.y;
220
+ const mousePos = {
221
+ x: (args.pageX - 0.5) - (lastCoords.width / 2),
222
+ y: (args.pageY - (lastCoords.width / 2))
223
+ };
224
+ const left = mousePos.x < this.lastHandlePosition.x;
225
+ const right = mousePos.x > this.lastHandlePosition.x;
226
+ const up = mousePos.y > this.lastHandlePosition.y;
223
227
  const moveStartHandle = () => this.changeValue([eventValue(args, this.track.nativeElement, this.getProps()), this.value[1]]);
224
228
  const moveEndHandle = () => this.changeValue([this.value[0], eventValue(args, this.track.nativeElement, this.getProps())]);
225
229
  const moveBothHandles = () => this.changeValue([eventValue(args, this.track.nativeElement, this.getProps()), eventValue(args, this.track.nativeElement, this.getProps())]);
@@ -227,8 +231,8 @@ let RangeSliderComponent = RangeSliderComponent_1 = class RangeSliderComponent e
227
231
  const vertical = this.vertical;
228
232
  const horizontal = !vertical;
229
233
  const forward = (vertical && up) || (this.reverse ? horizontal && right : horizontal && left);
230
- // const forward = (this.reverse ? (!this.vertical && !left) : (!this.vertical && left)) || (this.vertical && up);
231
- if (this.value[0] === this.value[1]) {
234
+ const incorrectValueState = this.value[0] > this.value[1];
235
+ if (this.value[0] === this.value[1] || incorrectValueState) {
232
236
  if (forward) {
233
237
  activeStartHandle ? moveStartHandle() : moveBothHandles();
234
238
  }
@@ -9,8 +9,9 @@ import { detectDesktopBrowser, detectMobileOS } from "@progress/kendo-common";
9
9
  * Returns true if the used browser is Safari.
10
10
  */
11
11
  export const isSafari = (userAgent) => {
12
- return detectDesktopBrowser(userAgent).safari ||
13
- (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
12
+ const desktopBrowser = detectDesktopBrowser(userAgent);
13
+ const mobileOS = detectMobileOS(userAgent);
14
+ return (desktopBrowser && desktopBrowser.safari) || (mobileOS && mobileOS.browser === 'mobilesafari');
14
15
  };
15
16
  /**
16
17
  * @hidden
@@ -3,8 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
7
- * @example
6
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
8
7
  * ```ts-no-run
9
8
  * _@Component({
10
9
  * selector: 'my-app',
@@ -5,8 +5,7 @@
5
5
  import * as tslib_1 from "tslib";
6
6
  import { Component, HostBinding } from '@angular/core';
7
7
  /**
8
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
9
- * @example
8
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
10
9
  * ```ts-no-run
11
10
  * _@Component({
12
11
  * selector: 'my-app',
@@ -23,8 +22,7 @@ import { Component, HostBinding } from '@angular/core';
23
22
  */
24
23
  let TextAreaSuffixComponent = class TextAreaSuffixComponent {
25
24
  /**
26
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
27
- * @example
25
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
28
26
  * ```ts-no-run
29
27
  * _@Component({
30
28
  * selector: 'my-app',
@@ -5,7 +5,6 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  /**
7
7
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
8
- * @example
9
8
  * ```ts-no-run
10
9
  * _@Component({
11
10
  * selector: 'my-app',
@@ -6,7 +6,6 @@ import * as tslib_1 from "tslib";
6
6
  import { Directive, Optional, TemplateRef } from '@angular/core';
7
7
  /**
8
8
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
9
- * @example
10
9
  * ```ts-no-run
11
10
  * _@Component({
12
11
  * selector: 'my-app',
@@ -481,7 +481,7 @@ const packageMetadata = {
481
481
  name: '@progress/kendo-angular-inputs',
482
482
  productName: 'Kendo UI for Angular',
483
483
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
484
- publishDate: 1646924118,
484
+ publishDate: 1648037581,
485
485
  version: '',
486
486
  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'
487
487
  };
@@ -1552,9 +1552,13 @@ let RangeSliderComponent = RangeSliderComponent_1 = class RangeSliderComponent e
1552
1552
  const lastCoords = this.draggedHandle.getBoundingClientRect();
1553
1553
  this.lastHandlePosition = { x: lastCoords.left, y: lastCoords.top };
1554
1554
  this.dragging = { value: true, target };
1555
- const left = args.pageX < this.lastHandlePosition.x;
1556
- const right = args.pageX > this.lastHandlePosition.x;
1557
- const up = args.pageY > this.lastHandlePosition.y;
1555
+ const mousePos = {
1556
+ x: (args.pageX - 0.5) - (lastCoords.width / 2),
1557
+ y: (args.pageY - (lastCoords.width / 2))
1558
+ };
1559
+ const left = mousePos.x < this.lastHandlePosition.x;
1560
+ const right = mousePos.x > this.lastHandlePosition.x;
1561
+ const up = mousePos.y > this.lastHandlePosition.y;
1558
1562
  const moveStartHandle = () => this.changeValue([eventValue(args, this.track.nativeElement, this.getProps()), this.value[1]]);
1559
1563
  const moveEndHandle = () => this.changeValue([this.value[0], eventValue(args, this.track.nativeElement, this.getProps())]);
1560
1564
  const moveBothHandles = () => this.changeValue([eventValue(args, this.track.nativeElement, this.getProps()), eventValue(args, this.track.nativeElement, this.getProps())]);
@@ -1562,8 +1566,8 @@ let RangeSliderComponent = RangeSliderComponent_1 = class RangeSliderComponent e
1562
1566
  const vertical = this.vertical;
1563
1567
  const horizontal = !vertical;
1564
1568
  const forward = (vertical && up) || (this.reverse ? horizontal && right : horizontal && left);
1565
- // const forward = (this.reverse ? (!this.vertical && !left) : (!this.vertical && left)) || (this.vertical && up);
1566
- if (this.value[0] === this.value[1]) {
1569
+ const incorrectValueState = this.value[0] > this.value[1];
1570
+ if (this.value[0] === this.value[1] || incorrectValueState) {
1567
1571
  if (forward) {
1568
1572
  activeStartHandle ? moveStartHandle() : moveBothHandles();
1569
1573
  }
@@ -4420,7 +4424,6 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4420
4424
  * Determines whether the MaskedTextBox is in its read-only state ([see example]({% slug readonly_maskedtextbox %})).
4421
4425
  */
4422
4426
  this.readonly = false;
4423
- this.hostClasses = true;
4424
4427
  /**
4425
4428
  * Represents a prompt character for the masked value.
4426
4429
  * @default `_`
@@ -4496,6 +4499,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4496
4499
  * Fires each time the value changes.
4497
4500
  */
4498
4501
  this.valueChange = new EventEmitter();
4502
+ this.hostClasses = true;
4499
4503
  this.focusClick = false;
4500
4504
  this.defaultRules = {
4501
4505
  "#": /[\d\s\+\-]/,
@@ -4613,18 +4617,15 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4613
4617
  get fillMode() {
4614
4618
  return this._fillMode;
4615
4619
  }
4616
- get hostDisabledClass() {
4617
- return this.disabled;
4618
- }
4619
4620
  /**
4620
4621
  * Exposes the RegExp-based mask validation array ([see example]({% slug masks_maskedtextbox %})).
4621
4622
  */
4622
- get rules() {
4623
- return this._rules || this.defaultRules;
4624
- }
4625
4623
  set rules(value) {
4626
4624
  this._rules = Object.assign({}, this.defaultRules, value);
4627
4625
  }
4626
+ get rules() {
4627
+ return this._rules || this.defaultRules;
4628
+ }
4628
4629
  /**
4629
4630
  * @hidden
4630
4631
  */
@@ -4634,6 +4635,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4634
4635
  get tabIndex() {
4635
4636
  return this.tabindex;
4636
4637
  }
4638
+ get hostDisabledClass() {
4639
+ return this.disabled;
4640
+ }
4637
4641
  ngOnInit() {
4638
4642
  if (this.hostElement) {
4639
4643
  this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
@@ -4710,7 +4714,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4710
4714
  const value = e.target.value;
4711
4715
  const [start, end] = this.selection;
4712
4716
  if (!this.mask) {
4713
- this.updateValue(value);
4717
+ this.updateValueWithEvents(value);
4714
4718
  this.isPasted = false;
4715
4719
  return;
4716
4720
  }
@@ -4722,10 +4726,10 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4722
4726
  result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
4723
4727
  }
4724
4728
  else {
4725
- result = this.service.maskInput(value, this.maskedValue, e.target.selectionStart);
4729
+ result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
4726
4730
  }
4727
4731
  this.updateInput(result.value, result.selection);
4728
- this.updateValue(result.value);
4732
+ this.updateValueWithEvents(result.value);
4729
4733
  }
4730
4734
  /**
4731
4735
  * @hidden
@@ -4740,20 +4744,13 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4740
4744
  }
4741
4745
  const next = this.extractChanges(changes);
4742
4746
  this.updateService(next);
4743
- if (isChanged('value', changes)) {
4744
- const maskedValue = this.service.maskRaw(this.value);
4745
- if (maskedValue !== this.maskedValue) {
4746
- this.updateInput(maskedValue);
4747
- }
4748
- }
4749
- else if (anyChanged(['promptPlaceholder', 'includeLiterals'], changes)) {
4747
+ const maskedValue = this.service.maskRaw(this.value);
4748
+ this.updateInput(maskedValue, null, true);
4749
+ if (changes.includeLiterals || isChanged('promptPlaceholder', changes)) {
4750
4750
  resolvedPromise.then(() => {
4751
- this.updateValue(this.maskedValue);
4751
+ this.updateValueWithEvents(this.maskedValue);
4752
4752
  });
4753
4753
  }
4754
- else {
4755
- this.updateInput(this.service.maskRaw(this.value));
4756
- }
4757
4754
  }
4758
4755
  /**
4759
4756
  * @hidden
@@ -4762,6 +4759,9 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4762
4759
  writeValue(value) {
4763
4760
  this.value = this.normalizeValue(value);
4764
4761
  this.updateInput(this.service.maskRaw(this.value));
4762
+ if (this.includeLiterals) {
4763
+ this.updateValue(this.maskedValue);
4764
+ }
4765
4765
  }
4766
4766
  /**
4767
4767
  * @hidden
@@ -4812,17 +4812,25 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
4812
4812
  /**
4813
4813
  * @hidden
4814
4814
  */
4815
- updateValue(maskedValue) {
4816
- if (this.mask && !this.service.validationValue(maskedValue)) {
4815
+ updateValueWithEvents(maskedValue) {
4816
+ this.updateValue(maskedValue);
4817
+ if (hasObservers(this.valueChange)) {
4818
+ this.valueChange.emit(this.value);
4819
+ }
4820
+ }
4821
+ updateValue(value) {
4822
+ if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
4817
4823
  this.value = '';
4818
4824
  }
4819
4825
  else {
4820
- this.value = this.service.rawValue(maskedValue);
4826
+ this.value = this.service.rawValue(value);
4821
4827
  }
4822
4828
  this.onChange(this.value);
4823
- this.valueChange.emit(this.value);
4824
4829
  }
4825
- updateInput(maskedValue = '', selection) {
4830
+ updateInput(maskedValue = '', selection, isFromOnChanges) {
4831
+ if (isFromOnChanges && maskedValue === this.maskedValue) {
4832
+ return;
4833
+ }
4826
4834
  this.maskedValue = maskedValue;
4827
4835
  const value = this.maskOnFocus && !this.focused && this.emptyMask ? '' : maskedValue;
4828
4836
  this.renderer.setProperty(this.input.nativeElement, "value", value);
@@ -4929,20 +4937,6 @@ __decorate([
4929
4937
  __metadata("design:type", String),
4930
4938
  __metadata("design:paramtypes", [String])
4931
4939
  ], MaskedTextBoxComponent.prototype, "fillMode", null);
4932
- __decorate([
4933
- HostBinding('attr.dir'),
4934
- __metadata("design:type", String)
4935
- ], MaskedTextBoxComponent.prototype, "direction", void 0);
4936
- __decorate([
4937
- HostBinding('class.k-input'),
4938
- HostBinding('class.k-maskedtextbox'),
4939
- __metadata("design:type", Boolean)
4940
- ], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
4941
- __decorate([
4942
- HostBinding('class.k-disabled'),
4943
- __metadata("design:type", Boolean),
4944
- __metadata("design:paramtypes", [])
4945
- ], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
4946
4940
  __decorate([
4947
4941
  Input(),
4948
4942
  __metadata("design:type", String)
@@ -4997,6 +4991,20 @@ __decorate([
4997
4991
  Output(),
4998
4992
  __metadata("design:type", EventEmitter)
4999
4993
  ], MaskedTextBoxComponent.prototype, "valueChange", void 0);
4994
+ __decorate([
4995
+ HostBinding('attr.dir'),
4996
+ __metadata("design:type", String)
4997
+ ], MaskedTextBoxComponent.prototype, "direction", void 0);
4998
+ __decorate([
4999
+ HostBinding('class.k-input'),
5000
+ HostBinding('class.k-maskedtextbox'),
5001
+ __metadata("design:type", Boolean)
5002
+ ], MaskedTextBoxComponent.prototype, "hostClasses", void 0);
5003
+ __decorate([
5004
+ HostBinding('class.k-disabled'),
5005
+ __metadata("design:type", Boolean),
5006
+ __metadata("design:paramtypes", [])
5007
+ ], MaskedTextBoxComponent.prototype, "hostDisabledClass", null);
5000
5008
  __decorate([
5001
5009
  ViewChild('input', { static: true }),
5002
5010
  __metadata("design:type", ElementRef)
@@ -5668,8 +5676,9 @@ MaskedTextBoxModule = __decorate([
5668
5676
  * Returns true if the used browser is Safari.
5669
5677
  */
5670
5678
  const isSafari = (userAgent) => {
5671
- return detectDesktopBrowser(userAgent).safari ||
5672
- (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
5679
+ const desktopBrowser = detectDesktopBrowser(userAgent);
5680
+ const mobileOS$$1 = detectMobileOS(userAgent);
5681
+ return (desktopBrowser && desktopBrowser.safari) || (mobileOS$$1 && mobileOS$$1.browser === 'mobilesafari');
5673
5682
  };
5674
5683
  /**
5675
5684
  * @hidden
@@ -5683,7 +5692,6 @@ const isJapanese = (input) => {
5683
5692
 
5684
5693
  /**
5685
5694
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
5686
- * @example
5687
5695
  * ```ts-no-run
5688
5696
  * _@Component({
5689
5697
  * selector: 'my-app',
@@ -7365,8 +7373,7 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
7365
7373
  ], TextAreaComponent);
7366
7374
 
7367
7375
  /**
7368
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
7369
- * @example
7376
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
7370
7377
  * ```ts-no-run
7371
7378
  * _@Component({
7372
7379
  * selector: 'my-app',
@@ -7383,8 +7390,7 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
7383
7390
  */
7384
7391
  let TextAreaSuffixComponent = class TextAreaSuffixComponent {
7385
7392
  /**
7386
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
7387
- * @example
7393
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
7388
7394
  * ```ts-no-run
7389
7395
  * _@Component({
7390
7396
  * selector: 'my-app',