@progress/kendo-angular-inputs 18.1.0-develop.16 → 18.1.0-develop.17
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.
|
@@ -59,7 +59,7 @@ export class OTPInputComponent {
|
|
|
59
59
|
*/
|
|
60
60
|
spacing = true;
|
|
61
61
|
/**
|
|
62
|
-
*
|
|
62
|
+
* Specifies the separator between groups of input fields.
|
|
63
63
|
*
|
|
64
64
|
* > The configuration can only be applied when `groupLength` is set.
|
|
65
65
|
*/
|
|
@@ -107,7 +107,7 @@ export class OTPInputComponent {
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
this._groupLength = length;
|
|
110
|
-
this.
|
|
110
|
+
this.populateSeparatorPositions();
|
|
111
111
|
}
|
|
112
112
|
/**
|
|
113
113
|
* Configures the value of the component. Unfilled input fields are represented with space.
|
|
@@ -116,8 +116,8 @@ export class OTPInputComponent {
|
|
|
116
116
|
return this._value;
|
|
117
117
|
}
|
|
118
118
|
set value(input) {
|
|
119
|
-
|
|
120
|
-
|
|
119
|
+
const isInvalidInput = this.type === 'number' && isPresent(input) && !this.containsDigitsOrSpaces(input);
|
|
120
|
+
if (this._value === input || isInvalidInput) {
|
|
121
121
|
return;
|
|
122
122
|
}
|
|
123
123
|
if (!isPresent(input)) {
|
|
@@ -209,10 +209,6 @@ export class OTPInputComponent {
|
|
|
209
209
|
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
|
210
210
|
*/
|
|
211
211
|
valueChange = new EventEmitter();
|
|
212
|
-
/**
|
|
213
|
-
* Fires when the length of the trimmed value is equal to `length`.
|
|
214
|
-
*/
|
|
215
|
-
inputFinish = new EventEmitter();
|
|
216
212
|
/**
|
|
217
213
|
* Fires each time the user focuses the OTP Input.
|
|
218
214
|
*/
|
|
@@ -312,7 +308,7 @@ export class OTPInputComponent {
|
|
|
312
308
|
if (typeof this.groupLength === 'number') {
|
|
313
309
|
this.populateGroupArray(this.groupLength);
|
|
314
310
|
}
|
|
315
|
-
this.
|
|
311
|
+
this.populateSeparatorPositions();
|
|
316
312
|
}
|
|
317
313
|
if (changes.spacing) {
|
|
318
314
|
if (this.spacing === true) {
|
|
@@ -323,8 +319,12 @@ export class OTPInputComponent {
|
|
|
323
319
|
}
|
|
324
320
|
}
|
|
325
321
|
if (changes.type && this.type === 'number') {
|
|
326
|
-
if (isPresent(this.value) && !this.
|
|
322
|
+
if (isPresent(this.value) && !this.containsDigitsOrSpaces(this.value)) {
|
|
327
323
|
this.value = null;
|
|
324
|
+
this.zone.runOutsideAngular(() => setTimeout(() => this.zone.run(() => {
|
|
325
|
+
this.ngChange(null);
|
|
326
|
+
this.cdr.markForCheck();
|
|
327
|
+
})));
|
|
328
328
|
}
|
|
329
329
|
}
|
|
330
330
|
}
|
|
@@ -395,13 +395,13 @@ export class OTPInputComponent {
|
|
|
395
395
|
* @hidden
|
|
396
396
|
*/
|
|
397
397
|
showGroupSeparator(index) {
|
|
398
|
-
return this.
|
|
398
|
+
return this.groupLengthArray && index < this.groupLengthArray.length - 1;
|
|
399
399
|
}
|
|
400
400
|
/**
|
|
401
401
|
* @hidden
|
|
402
402
|
*/
|
|
403
403
|
showSeparator(index) {
|
|
404
|
-
return this.
|
|
404
|
+
return this.groupLength ? this.separatorPositions.has(index) : false;
|
|
405
405
|
}
|
|
406
406
|
/**
|
|
407
407
|
* @hidden
|
|
@@ -412,16 +412,16 @@ export class OTPInputComponent {
|
|
|
412
412
|
index = this.getIndexByGroup(groupIndex, index);
|
|
413
413
|
}
|
|
414
414
|
let newValue = '';
|
|
415
|
-
this.inputFields.forEach((input) => newValue = newValue.concat(input.value?.toString() ||
|
|
415
|
+
this.inputFields.forEach((input) => newValue = newValue.concat(input.value?.toString() || ' '));
|
|
416
416
|
if (!areSame(this.value, newValue)) {
|
|
417
|
-
this.
|
|
418
|
-
|
|
419
|
-
|
|
417
|
+
this.zone.run(() => {
|
|
418
|
+
this.value = newValue;
|
|
419
|
+
this.ngChange(newValue);
|
|
420
|
+
this.valueChange.emit(newValue);
|
|
421
|
+
this.cdr.markForCheck();
|
|
422
|
+
});
|
|
420
423
|
}
|
|
421
424
|
this.inputFieldValueChanged = false;
|
|
422
|
-
if (this.value && this.value.trim().length === this.length) {
|
|
423
|
-
this.inputFinish.emit(this.value);
|
|
424
|
-
}
|
|
425
425
|
if (isPresent(index) && isPresent(this.inputFields?.get(index).value)) {
|
|
426
426
|
this.focusNext();
|
|
427
427
|
}
|
|
@@ -444,7 +444,13 @@ export class OTPInputComponent {
|
|
|
444
444
|
handleInput(event, index, groupIndex) {
|
|
445
445
|
if (this.type === 'number' && !this.isValidNumber(event?.data)) {
|
|
446
446
|
const inputIndex = groupIndex ? this.getIndexByGroup(groupIndex, index) : index;
|
|
447
|
-
this.inputFields.get(inputIndex)
|
|
447
|
+
const textbox = this.inputFields.get(inputIndex);
|
|
448
|
+
if (this.value && this.isValidNumber(this.value[inputIndex])) {
|
|
449
|
+
textbox.value = this.value[inputIndex];
|
|
450
|
+
}
|
|
451
|
+
else {
|
|
452
|
+
textbox.value = null;
|
|
453
|
+
}
|
|
448
454
|
this.showInvalidInput(inputIndex);
|
|
449
455
|
return;
|
|
450
456
|
}
|
|
@@ -571,24 +577,35 @@ export class OTPInputComponent {
|
|
|
571
577
|
this.inputFields.get(this.focusedInput).focus();
|
|
572
578
|
}
|
|
573
579
|
handleKeydown(event) {
|
|
574
|
-
if (
|
|
575
|
-
event.
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
this.direction === 'ltr' ? this.focusPrevious() : this.focusNext();
|
|
581
|
-
}
|
|
582
|
-
if (event.keyCode === Keys.Backspace) {
|
|
583
|
-
event.preventDefault();
|
|
584
|
-
this.inputFields.get(this.focusedInput).value = null;
|
|
585
|
-
this.handleValueChange();
|
|
586
|
-
this.focusPrevious();
|
|
580
|
+
if (this.readonly) {
|
|
581
|
+
const isCopyCommand = (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyC;
|
|
582
|
+
if (!(event.keyCode === Keys.Tab || isCopyCommand)) {
|
|
583
|
+
event.preventDefault();
|
|
584
|
+
return;
|
|
585
|
+
}
|
|
587
586
|
}
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
587
|
+
switch (event.keyCode) {
|
|
588
|
+
case Keys.ArrowRight:
|
|
589
|
+
event.preventDefault();
|
|
590
|
+
this.direction === 'ltr' ? this.focusNext() : this.focusPrevious();
|
|
591
|
+
break;
|
|
592
|
+
case Keys.ArrowLeft:
|
|
593
|
+
event.preventDefault();
|
|
594
|
+
this.direction === 'ltr' ? this.focusPrevious() : this.focusNext();
|
|
595
|
+
break;
|
|
596
|
+
case Keys.Backspace:
|
|
597
|
+
event.preventDefault();
|
|
598
|
+
this.inputFields.get(this.focusedInput).value = null;
|
|
599
|
+
this.handleValueChange();
|
|
600
|
+
this.focusPrevious();
|
|
601
|
+
break;
|
|
602
|
+
case Keys.Delete:
|
|
603
|
+
event.preventDefault();
|
|
604
|
+
this.inputFields.get(this.focusedInput).value = null;
|
|
605
|
+
this.handleValueChange();
|
|
606
|
+
break;
|
|
607
|
+
default:
|
|
608
|
+
break;
|
|
592
609
|
}
|
|
593
610
|
}
|
|
594
611
|
isValidGroupArray(groups) {
|
|
@@ -611,7 +628,7 @@ export class OTPInputComponent {
|
|
|
611
628
|
this.adjacentGroups = [...this.groupLengthArray];
|
|
612
629
|
}
|
|
613
630
|
}
|
|
614
|
-
|
|
631
|
+
populateSeparatorPositions() {
|
|
615
632
|
let itemIndex = 0;
|
|
616
633
|
this.separatorPositions.clear();
|
|
617
634
|
if (!isPresent(this.groupLengthArray)) {
|
|
@@ -690,18 +707,33 @@ export class OTPInputComponent {
|
|
|
690
707
|
!isNaN(Number(trimmedValue));
|
|
691
708
|
}
|
|
692
709
|
showInvalidInput(index) {
|
|
693
|
-
const
|
|
694
|
-
this.
|
|
710
|
+
const textbox = this.inputFields.get(index);
|
|
711
|
+
const textboxElement = this.inputFields.get(index).hostElement.nativeElement;
|
|
712
|
+
const inputElement = textbox.input.nativeElement;
|
|
713
|
+
this.renderer.addClass(textboxElement, 'k-invalid');
|
|
714
|
+
if (textbox.value && this.isValidNumber(textbox.value)) {
|
|
715
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => inputElement.select());
|
|
716
|
+
}
|
|
695
717
|
this.zone.runOutsideAngular(() => {
|
|
696
718
|
setTimeout(() => {
|
|
697
|
-
if (!this.isControlInvalid &&
|
|
698
|
-
this.renderer.removeClass(
|
|
719
|
+
if (!this.isControlInvalid && textboxElement) {
|
|
720
|
+
this.renderer.removeClass(textboxElement, 'k-invalid');
|
|
699
721
|
}
|
|
700
722
|
}, 300);
|
|
701
723
|
});
|
|
702
724
|
}
|
|
725
|
+
containsDigitsOrSpaces(value) {
|
|
726
|
+
// @ts-expect-error TS does not allow comparing string with number
|
|
727
|
+
const isDigitOrSpace = (char) => (char == +char) || char === ' ';
|
|
728
|
+
for (let i = 0; i < value.length; i++) {
|
|
729
|
+
if (!isDigitOrSpace(value[i])) {
|
|
730
|
+
return false;
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
return true;
|
|
734
|
+
}
|
|
703
735
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
704
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange",
|
|
736
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-otp": "this.wrapperClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction", "attr.role": "this.role" } }, providers: [
|
|
705
737
|
LocalizationService,
|
|
706
738
|
{ provide: L10N_PREFIX, useValue: 'kendo.otpinput' },
|
|
707
739
|
{
|
|
@@ -871,8 +903,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
871
903
|
type: Input
|
|
872
904
|
}], valueChange: [{
|
|
873
905
|
type: Output
|
|
874
|
-
}], inputFinish: [{
|
|
875
|
-
type: Output
|
|
876
906
|
}], onFocus: [{
|
|
877
907
|
type: Output,
|
|
878
908
|
args: ['focus']
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '18.1.0-develop.
|
|
13
|
+
publishDate: 1738780374,
|
|
14
|
+
version: '18.1.0-develop.17',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -554,8 +554,8 @@ const packageMetadata = {
|
|
|
554
554
|
productName: 'Kendo UI for Angular',
|
|
555
555
|
productCode: 'KENDOUIANGULAR',
|
|
556
556
|
productCodes: ['KENDOUIANGULAR'],
|
|
557
|
-
publishDate:
|
|
558
|
-
version: '18.1.0-develop.
|
|
557
|
+
publishDate: 1738780374,
|
|
558
|
+
version: '18.1.0-develop.17',
|
|
559
559
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
560
560
|
};
|
|
561
561
|
|
|
@@ -18071,7 +18071,7 @@ class OTPInputComponent {
|
|
|
18071
18071
|
*/
|
|
18072
18072
|
spacing = true;
|
|
18073
18073
|
/**
|
|
18074
|
-
*
|
|
18074
|
+
* Specifies the separator between groups of input fields.
|
|
18075
18075
|
*
|
|
18076
18076
|
* > The configuration can only be applied when `groupLength` is set.
|
|
18077
18077
|
*/
|
|
@@ -18119,7 +18119,7 @@ class OTPInputComponent {
|
|
|
18119
18119
|
}
|
|
18120
18120
|
}
|
|
18121
18121
|
this._groupLength = length;
|
|
18122
|
-
this.
|
|
18122
|
+
this.populateSeparatorPositions();
|
|
18123
18123
|
}
|
|
18124
18124
|
/**
|
|
18125
18125
|
* Configures the value of the component. Unfilled input fields are represented with space.
|
|
@@ -18128,8 +18128,8 @@ class OTPInputComponent {
|
|
|
18128
18128
|
return this._value;
|
|
18129
18129
|
}
|
|
18130
18130
|
set value(input) {
|
|
18131
|
-
|
|
18132
|
-
|
|
18131
|
+
const isInvalidInput = this.type === 'number' && isPresent$1(input) && !this.containsDigitsOrSpaces(input);
|
|
18132
|
+
if (this._value === input || isInvalidInput) {
|
|
18133
18133
|
return;
|
|
18134
18134
|
}
|
|
18135
18135
|
if (!isPresent$1(input)) {
|
|
@@ -18221,10 +18221,6 @@ class OTPInputComponent {
|
|
|
18221
18221
|
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
|
18222
18222
|
*/
|
|
18223
18223
|
valueChange = new EventEmitter();
|
|
18224
|
-
/**
|
|
18225
|
-
* Fires when the length of the trimmed value is equal to `length`.
|
|
18226
|
-
*/
|
|
18227
|
-
inputFinish = new EventEmitter();
|
|
18228
18224
|
/**
|
|
18229
18225
|
* Fires each time the user focuses the OTP Input.
|
|
18230
18226
|
*/
|
|
@@ -18324,7 +18320,7 @@ class OTPInputComponent {
|
|
|
18324
18320
|
if (typeof this.groupLength === 'number') {
|
|
18325
18321
|
this.populateGroupArray(this.groupLength);
|
|
18326
18322
|
}
|
|
18327
|
-
this.
|
|
18323
|
+
this.populateSeparatorPositions();
|
|
18328
18324
|
}
|
|
18329
18325
|
if (changes.spacing) {
|
|
18330
18326
|
if (this.spacing === true) {
|
|
@@ -18335,8 +18331,12 @@ class OTPInputComponent {
|
|
|
18335
18331
|
}
|
|
18336
18332
|
}
|
|
18337
18333
|
if (changes.type && this.type === 'number') {
|
|
18338
|
-
if (isPresent$1(this.value) && !this.
|
|
18334
|
+
if (isPresent$1(this.value) && !this.containsDigitsOrSpaces(this.value)) {
|
|
18339
18335
|
this.value = null;
|
|
18336
|
+
this.zone.runOutsideAngular(() => setTimeout(() => this.zone.run(() => {
|
|
18337
|
+
this.ngChange(null);
|
|
18338
|
+
this.cdr.markForCheck();
|
|
18339
|
+
})));
|
|
18340
18340
|
}
|
|
18341
18341
|
}
|
|
18342
18342
|
}
|
|
@@ -18407,13 +18407,13 @@ class OTPInputComponent {
|
|
|
18407
18407
|
* @hidden
|
|
18408
18408
|
*/
|
|
18409
18409
|
showGroupSeparator(index) {
|
|
18410
|
-
return this.
|
|
18410
|
+
return this.groupLengthArray && index < this.groupLengthArray.length - 1;
|
|
18411
18411
|
}
|
|
18412
18412
|
/**
|
|
18413
18413
|
* @hidden
|
|
18414
18414
|
*/
|
|
18415
18415
|
showSeparator(index) {
|
|
18416
|
-
return this.
|
|
18416
|
+
return this.groupLength ? this.separatorPositions.has(index) : false;
|
|
18417
18417
|
}
|
|
18418
18418
|
/**
|
|
18419
18419
|
* @hidden
|
|
@@ -18424,16 +18424,16 @@ class OTPInputComponent {
|
|
|
18424
18424
|
index = this.getIndexByGroup(groupIndex, index);
|
|
18425
18425
|
}
|
|
18426
18426
|
let newValue = '';
|
|
18427
|
-
this.inputFields.forEach((input) => newValue = newValue.concat(input.value?.toString() ||
|
|
18427
|
+
this.inputFields.forEach((input) => newValue = newValue.concat(input.value?.toString() || ' '));
|
|
18428
18428
|
if (!areSame(this.value, newValue)) {
|
|
18429
|
-
this.
|
|
18430
|
-
|
|
18431
|
-
|
|
18429
|
+
this.zone.run(() => {
|
|
18430
|
+
this.value = newValue;
|
|
18431
|
+
this.ngChange(newValue);
|
|
18432
|
+
this.valueChange.emit(newValue);
|
|
18433
|
+
this.cdr.markForCheck();
|
|
18434
|
+
});
|
|
18432
18435
|
}
|
|
18433
18436
|
this.inputFieldValueChanged = false;
|
|
18434
|
-
if (this.value && this.value.trim().length === this.length) {
|
|
18435
|
-
this.inputFinish.emit(this.value);
|
|
18436
|
-
}
|
|
18437
18437
|
if (isPresent$1(index) && isPresent$1(this.inputFields?.get(index).value)) {
|
|
18438
18438
|
this.focusNext();
|
|
18439
18439
|
}
|
|
@@ -18456,7 +18456,13 @@ class OTPInputComponent {
|
|
|
18456
18456
|
handleInput(event, index, groupIndex) {
|
|
18457
18457
|
if (this.type === 'number' && !this.isValidNumber(event?.data)) {
|
|
18458
18458
|
const inputIndex = groupIndex ? this.getIndexByGroup(groupIndex, index) : index;
|
|
18459
|
-
this.inputFields.get(inputIndex)
|
|
18459
|
+
const textbox = this.inputFields.get(inputIndex);
|
|
18460
|
+
if (this.value && this.isValidNumber(this.value[inputIndex])) {
|
|
18461
|
+
textbox.value = this.value[inputIndex];
|
|
18462
|
+
}
|
|
18463
|
+
else {
|
|
18464
|
+
textbox.value = null;
|
|
18465
|
+
}
|
|
18460
18466
|
this.showInvalidInput(inputIndex);
|
|
18461
18467
|
return;
|
|
18462
18468
|
}
|
|
@@ -18583,24 +18589,35 @@ class OTPInputComponent {
|
|
|
18583
18589
|
this.inputFields.get(this.focusedInput).focus();
|
|
18584
18590
|
}
|
|
18585
18591
|
handleKeydown(event) {
|
|
18586
|
-
if (
|
|
18587
|
-
event.
|
|
18588
|
-
|
|
18589
|
-
|
|
18590
|
-
|
|
18591
|
-
|
|
18592
|
-
this.direction === 'ltr' ? this.focusPrevious() : this.focusNext();
|
|
18593
|
-
}
|
|
18594
|
-
if (event.keyCode === Keys.Backspace) {
|
|
18595
|
-
event.preventDefault();
|
|
18596
|
-
this.inputFields.get(this.focusedInput).value = null;
|
|
18597
|
-
this.handleValueChange();
|
|
18598
|
-
this.focusPrevious();
|
|
18592
|
+
if (this.readonly) {
|
|
18593
|
+
const isCopyCommand = (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyC;
|
|
18594
|
+
if (!(event.keyCode === Keys.Tab || isCopyCommand)) {
|
|
18595
|
+
event.preventDefault();
|
|
18596
|
+
return;
|
|
18597
|
+
}
|
|
18599
18598
|
}
|
|
18600
|
-
|
|
18601
|
-
|
|
18602
|
-
|
|
18603
|
-
|
|
18599
|
+
switch (event.keyCode) {
|
|
18600
|
+
case Keys.ArrowRight:
|
|
18601
|
+
event.preventDefault();
|
|
18602
|
+
this.direction === 'ltr' ? this.focusNext() : this.focusPrevious();
|
|
18603
|
+
break;
|
|
18604
|
+
case Keys.ArrowLeft:
|
|
18605
|
+
event.preventDefault();
|
|
18606
|
+
this.direction === 'ltr' ? this.focusPrevious() : this.focusNext();
|
|
18607
|
+
break;
|
|
18608
|
+
case Keys.Backspace:
|
|
18609
|
+
event.preventDefault();
|
|
18610
|
+
this.inputFields.get(this.focusedInput).value = null;
|
|
18611
|
+
this.handleValueChange();
|
|
18612
|
+
this.focusPrevious();
|
|
18613
|
+
break;
|
|
18614
|
+
case Keys.Delete:
|
|
18615
|
+
event.preventDefault();
|
|
18616
|
+
this.inputFields.get(this.focusedInput).value = null;
|
|
18617
|
+
this.handleValueChange();
|
|
18618
|
+
break;
|
|
18619
|
+
default:
|
|
18620
|
+
break;
|
|
18604
18621
|
}
|
|
18605
18622
|
}
|
|
18606
18623
|
isValidGroupArray(groups) {
|
|
@@ -18623,7 +18640,7 @@ class OTPInputComponent {
|
|
|
18623
18640
|
this.adjacentGroups = [...this.groupLengthArray];
|
|
18624
18641
|
}
|
|
18625
18642
|
}
|
|
18626
|
-
|
|
18643
|
+
populateSeparatorPositions() {
|
|
18627
18644
|
let itemIndex = 0;
|
|
18628
18645
|
this.separatorPositions.clear();
|
|
18629
18646
|
if (!isPresent$1(this.groupLengthArray)) {
|
|
@@ -18702,18 +18719,33 @@ class OTPInputComponent {
|
|
|
18702
18719
|
!isNaN(Number(trimmedValue));
|
|
18703
18720
|
}
|
|
18704
18721
|
showInvalidInput(index) {
|
|
18705
|
-
const
|
|
18706
|
-
this.
|
|
18722
|
+
const textbox = this.inputFields.get(index);
|
|
18723
|
+
const textboxElement = this.inputFields.get(index).hostElement.nativeElement;
|
|
18724
|
+
const inputElement = textbox.input.nativeElement;
|
|
18725
|
+
this.renderer.addClass(textboxElement, 'k-invalid');
|
|
18726
|
+
if (textbox.value && this.isValidNumber(textbox.value)) {
|
|
18727
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => inputElement.select());
|
|
18728
|
+
}
|
|
18707
18729
|
this.zone.runOutsideAngular(() => {
|
|
18708
18730
|
setTimeout(() => {
|
|
18709
|
-
if (!this.isControlInvalid &&
|
|
18710
|
-
this.renderer.removeClass(
|
|
18731
|
+
if (!this.isControlInvalid && textboxElement) {
|
|
18732
|
+
this.renderer.removeClass(textboxElement, 'k-invalid');
|
|
18711
18733
|
}
|
|
18712
18734
|
}, 300);
|
|
18713
18735
|
});
|
|
18714
18736
|
}
|
|
18737
|
+
containsDigitsOrSpaces(value) {
|
|
18738
|
+
// @ts-expect-error TS does not allow comparing string with number
|
|
18739
|
+
const isDigitOrSpace = (char) => (char == +char) || char === ' ';
|
|
18740
|
+
for (let i = 0; i < value.length; i++) {
|
|
18741
|
+
if (!isDigitOrSpace(value[i])) {
|
|
18742
|
+
return false;
|
|
18743
|
+
}
|
|
18744
|
+
}
|
|
18745
|
+
return true;
|
|
18746
|
+
}
|
|
18715
18747
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OTPInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
18716
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange",
|
|
18748
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OTPInputComponent, isStandalone: true, selector: "kendo-otpinput", inputs: { length: "length", type: "type", spacing: "spacing", separator: "separator", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", groupLength: "groupLength", value: "value", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-otp": "this.wrapperClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction", "attr.role": "this.role" } }, providers: [
|
|
18717
18749
|
LocalizationService,
|
|
18718
18750
|
{ provide: L10N_PREFIX, useValue: 'kendo.otpinput' },
|
|
18719
18751
|
{
|
|
@@ -18883,8 +18915,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
18883
18915
|
type: Input
|
|
18884
18916
|
}], valueChange: [{
|
|
18885
18917
|
type: Output
|
|
18886
|
-
}], inputFinish: [{
|
|
18887
|
-
type: Output
|
|
18888
18918
|
}], onFocus: [{
|
|
18889
18919
|
type: Output,
|
|
18890
18920
|
args: ['focus']
|
|
@@ -42,7 +42,7 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
42
42
|
*/
|
|
43
43
|
spacing: boolean;
|
|
44
44
|
/**
|
|
45
|
-
*
|
|
45
|
+
* Specifies the separator between groups of input fields.
|
|
46
46
|
*
|
|
47
47
|
* > The configuration can only be applied when `groupLength` is set.
|
|
48
48
|
*/
|
|
@@ -123,10 +123,6 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
123
123
|
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
|
124
124
|
*/
|
|
125
125
|
valueChange: EventEmitter<any>;
|
|
126
|
-
/**
|
|
127
|
-
* Fires when the length of the trimmed value is equal to `length`.
|
|
128
|
-
*/
|
|
129
|
-
inputFinish: EventEmitter<string>;
|
|
130
126
|
/**
|
|
131
127
|
* Fires each time the user focuses the OTP Input.
|
|
132
128
|
*/
|
|
@@ -272,7 +268,7 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
272
268
|
private handleKeydown;
|
|
273
269
|
private isValidGroupArray;
|
|
274
270
|
private populateGroupArray;
|
|
275
|
-
private
|
|
271
|
+
private populateSeparatorPositions;
|
|
276
272
|
private clearGroups;
|
|
277
273
|
private clearInputValues;
|
|
278
274
|
private handleInputChanges;
|
|
@@ -282,6 +278,7 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
282
278
|
private ariaLabel;
|
|
283
279
|
private isValidNumber;
|
|
284
280
|
private showInvalidInput;
|
|
281
|
+
private containsDigitsOrSpaces;
|
|
285
282
|
static ɵfac: i0.ɵɵFactoryDeclaration<OTPInputComponent, never>;
|
|
286
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<OTPInputComponent, "kendo-otpinput", ["kendoOTPInput"], { "length": { "alias": "length"; "required": false; }; "type": { "alias": "type"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "groupLength": { "alias": "groupLength"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "
|
|
283
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<OTPInputComponent, "kendo-otpinput", ["kendoOTPInput"], { "length": { "alias": "length"; "required": false; }; "type": { "alias": "type"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "groupLength": { "alias": "groupLength"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; }, never, never, true, never>;
|
|
287
284
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-inputs",
|
|
3
|
-
"version": "18.1.0-develop.
|
|
3
|
+
"version": "18.1.0-develop.17",
|
|
4
4
|
"description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"package": {
|
|
29
29
|
"productName": "Kendo UI for Angular",
|
|
30
30
|
"productCode": "KENDOUIANGULAR",
|
|
31
|
-
"publishDate":
|
|
31
|
+
"publishDate": 1738780374,
|
|
32
32
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
33
33
|
}
|
|
34
34
|
},
|
|
@@ -40,20 +40,20 @@
|
|
|
40
40
|
"@angular/platform-browser": "16 - 19",
|
|
41
41
|
"@progress/kendo-drawing": "^1.21.0",
|
|
42
42
|
"@progress/kendo-licensing": "^1.0.2",
|
|
43
|
-
"@progress/kendo-angular-buttons": "18.1.0-develop.
|
|
44
|
-
"@progress/kendo-angular-common": "18.1.0-develop.
|
|
45
|
-
"@progress/kendo-angular-utils": "18.1.0-develop.
|
|
46
|
-
"@progress/kendo-angular-navigation": "18.1.0-develop.
|
|
47
|
-
"@progress/kendo-angular-dialog": "18.1.0-develop.
|
|
48
|
-
"@progress/kendo-angular-intl": "18.1.0-develop.
|
|
49
|
-
"@progress/kendo-angular-l10n": "18.1.0-develop.
|
|
50
|
-
"@progress/kendo-angular-popup": "18.1.0-develop.
|
|
51
|
-
"@progress/kendo-angular-icons": "18.1.0-develop.
|
|
43
|
+
"@progress/kendo-angular-buttons": "18.1.0-develop.17",
|
|
44
|
+
"@progress/kendo-angular-common": "18.1.0-develop.17",
|
|
45
|
+
"@progress/kendo-angular-utils": "18.1.0-develop.17",
|
|
46
|
+
"@progress/kendo-angular-navigation": "18.1.0-develop.17",
|
|
47
|
+
"@progress/kendo-angular-dialog": "18.1.0-develop.17",
|
|
48
|
+
"@progress/kendo-angular-intl": "18.1.0-develop.17",
|
|
49
|
+
"@progress/kendo-angular-l10n": "18.1.0-develop.17",
|
|
50
|
+
"@progress/kendo-angular-popup": "18.1.0-develop.17",
|
|
51
|
+
"@progress/kendo-angular-icons": "18.1.0-develop.17",
|
|
52
52
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"tslib": "^2.3.1",
|
|
56
|
-
"@progress/kendo-angular-schematics": "18.1.0-develop.
|
|
56
|
+
"@progress/kendo-angular-schematics": "18.1.0-develop.17",
|
|
57
57
|
"@progress/kendo-common": "^1.0.1",
|
|
58
58
|
"@progress/kendo-draggable": "^3.0.0",
|
|
59
59
|
"@progress/kendo-inputs-common": "^3.1.0"
|