@progress/kendo-angular-inputs 8.0.9-dev.202203171224 → 8.0.9
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.
- package/dist/cdn/js/kendo-angular-inputs.js +1 -1
- package/dist/cdn/main.js +1 -1
- package/dist/es/maskedtextbox/maskedtextbox.component.js +48 -44
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/rangeslider/rangeslider.component.js +9 -5
- package/dist/es/textarea/textarea-suffix.component.js +1 -2
- package/dist/es/textbox/textbox-suffix.directive.js +0 -1
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/maskedtextbox/maskedtextbox.component.d.ts +5 -4
- package/dist/es2015/maskedtextbox/maskedtextbox.component.js +45 -41
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/rangeslider/rangeslider.component.js +9 -5
- package/dist/es2015/textarea/textarea-suffix.component.d.ts +1 -2
- package/dist/es2015/textarea/textarea-suffix.component.js +2 -4
- package/dist/es2015/textbox/textbox-suffix.directive.d.ts +0 -1
- package/dist/es2015/textbox/textbox-suffix.directive.js +0 -1
- package/dist/fesm2015/index.js +56 -51
- package/dist/fesm5/index.js +58 -52
- package/dist/npm/maskedtextbox/maskedtextbox.component.js +48 -44
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/rangeslider/rangeslider.component.js +9 -5
- package/dist/npm/textarea/textarea-suffix.component.js +1 -2
- package/dist/npm/textbox/textbox-suffix.directive.js +0 -1
- package/dist/systemjs/kendo-angular-inputs.js +1 -1
- 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
|
-
|
|
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.
|
|
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.
|
|
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
|
-
|
|
381
|
-
|
|
382
|
-
|
|
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.
|
|
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
|
-
|
|
453
|
-
|
|
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(
|
|
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:
|
|
12
|
+
publishDate: 1648211916,
|
|
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
|
|
221
|
-
|
|
222
|
-
|
|
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
|
-
|
|
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
|
}
|
|
@@ -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',
|
|
@@ -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',
|
package/dist/fesm2015/index.js
CHANGED
|
@@ -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:
|
|
484
|
+
publishDate: 1648211916,
|
|
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
|
|
1556
|
-
|
|
1557
|
-
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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
|
-
|
|
4744
|
-
|
|
4745
|
-
|
|
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.
|
|
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
|
-
|
|
4816
|
-
|
|
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(
|
|
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)
|
|
@@ -5684,7 +5692,6 @@ const isJapanese = (input) => {
|
|
|
5684
5692
|
|
|
5685
5693
|
/**
|
|
5686
5694
|
* Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
|
|
5687
|
-
* @example
|
|
5688
5695
|
* ```ts-no-run
|
|
5689
5696
|
* _@Component({
|
|
5690
5697
|
* selector: 'my-app',
|
|
@@ -7366,8 +7373,7 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
|
|
|
7366
7373
|
], TextAreaComponent);
|
|
7367
7374
|
|
|
7368
7375
|
/**
|
|
7369
|
-
* Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
|
|
7370
|
-
* @example
|
|
7376
|
+
* Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
|
|
7371
7377
|
* ```ts-no-run
|
|
7372
7378
|
* _@Component({
|
|
7373
7379
|
* selector: 'my-app',
|
|
@@ -7384,8 +7390,7 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
|
|
|
7384
7390
|
*/
|
|
7385
7391
|
let TextAreaSuffixComponent = class TextAreaSuffixComponent {
|
|
7386
7392
|
/**
|
|
7387
|
-
* Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %}).
|
|
7388
|
-
* @example
|
|
7393
|
+
* Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
|
|
7389
7394
|
* ```ts-no-run
|
|
7390
7395
|
* _@Component({
|
|
7391
7396
|
* selector: 'my-app',
|