@progress/kendo-angular-inputs 9.0.4-dev.202208010852 → 9.0.5-dev.202209120703

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 (22) hide show
  1. package/bundles/kendo-angular-inputs.umd.js +1 -1
  2. package/colorpicker/colorpicker.component.d.ts +1 -1
  3. package/esm2015/colorpicker/color-gradient.component.js +2 -2
  4. package/esm2015/colorpicker/color-input.component.js +2 -2
  5. package/esm2015/colorpicker/colorpicker.component.js +2 -2
  6. package/esm2015/colorpicker/contrast-validation.component.js +2 -2
  7. package/esm2015/colorpicker/contrast.component.js +2 -2
  8. package/esm2015/colorpicker/flatcolorpicker-header.component.js +2 -2
  9. package/esm2015/maskedtextbox/maskedtextbox.component.js +10 -0
  10. package/esm2015/numerictextbox/numerictextbox.component.js +60 -52
  11. package/esm2015/package-metadata.js +1 -1
  12. package/esm2015/slider/slider.component.js +8 -8
  13. package/esm2015/switch/switch.component.js +10 -0
  14. package/esm2015/textarea/textarea.component.js +8 -0
  15. package/esm2015/textbox/textbox.component.js +9 -1
  16. package/fesm2015/kendo-angular-inputs.js +118 -74
  17. package/maskedtextbox/maskedtextbox.component.d.ts +4 -0
  18. package/numerictextbox/numerictextbox.component.d.ts +4 -0
  19. package/package.json +1 -1
  20. package/switch/switch.component.d.ts +4 -0
  21. package/textarea/textarea.component.d.ts +4 -0
  22. package/textbox/textbox.component.d.ts +4 -0
package/colorpicker/colorpicker.component.d.ts CHANGED
@@ -99,7 +99,7 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
99
99
  * Defines the name of an [existing icon in the Kendo UI theme]({% slug icons %}).
100
100
  * Provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
101
101
  *
102
- * For example, `edit-tools` will be parsed to `k-icon k-i-edit-tools`.
102
+ * For example, `pencil-tools` will be parsed to `k-icon k-i-pencil-tools`.
103
103
  */
104
104
  icon: string;
105
105
  /**
package/esm2015/colorpicker/color-gradient.component.js CHANGED
@@ -577,7 +577,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
577
577
  [attr.aria-label]="clearButtonTitle"
578
578
  [attr.title]="clearButtonTitle"
579
579
  tabindex="0">
580
- <span class="k-icon k-i-reset-color"></span>
580
+ <span class="k-icon k-i-droplet-slash"></span>
581
581
  </span>
582
582
  <kendo-slider
583
583
  [ngClass]="{'k-align-self-end': clearButton}"
@@ -716,7 +716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
716
716
  [attr.aria-label]="clearButtonTitle"
717
717
  [attr.title]="clearButtonTitle"
718
718
  tabindex="0">
719
- <span class="k-icon k-i-reset-color"></span>
719
+ <span class="k-icon k-i-droplet-slash"></span>
720
720
  </span>
721
721
  <kendo-slider
722
722
  [ngClass]="{'k-align-self-end': clearButton}"
package/esm2015/colorpicker/color-input.component.js CHANGED
@@ -127,7 +127,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
127
127
  [attr.title]="formatButtonTitle"
128
128
  type="button"
129
129
  >
130
- <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
130
+ <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
131
131
  </button>
132
132
  </div>
133
133
  <div *ngIf="formatView === 'hex'" class="k-vstack">
@@ -227,7 +227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
227
227
  [attr.title]="formatButtonTitle"
228
228
  type="button"
229
229
  >
230
- <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
230
+ <span class="k-button-icon k-icon k-i-caret-alt-expand"></span>
231
231
  </button>
232
232
  </div>
233
233
  <div *ngIf="formatView === 'hex'" class="k-vstack">
package/esm2015/colorpicker/colorpicker.component.js CHANGED
@@ -738,7 +738,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
738
738
  tabindex="-1"
739
739
  type="button"
740
740
  class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
741
- <span class="k-button-icon k-icon k-i-arrow-s"></span>
741
+ <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
742
742
  </button>
743
743
  <ng-template #popupTemplate>
744
744
  <kendo-flatcolorpicker
@@ -831,7 +831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
831
831
  tabindex="-1"
832
832
  type="button"
833
833
  class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
834
- <span class="k-button-icon k-icon k-i-arrow-s"></span>
834
+ <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
835
835
  </button>
836
836
  <ng-template #popupTemplate>
837
837
  <kendo-flatcolorpicker
package/esm2015/colorpicker/contrast-validation.component.js CHANGED
@@ -35,7 +35,7 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
35
35
  </span>
36
36
  <span class="k-contrast-validation k-text-error" *ngIf="!pass">
37
37
  {{failMessage}}
38
- <span class="k-icon k-i-close"></span>
38
+ <span class="k-icon k-i-x"></span>
39
39
  </span>
40
40
  </ng-container>
41
41
  `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
53
53
  </span>
54
54
  <span class="k-contrast-validation k-text-error" *ngIf="!pass">
55
55
  {{failMessage}}
56
- <span class="k-icon k-i-close"></span>
56
+ <span class="k-icon k-i-x"></span>
57
57
  </span>
58
58
  </ng-container>
59
59
  `
package/esm2015/colorpicker/contrast.component.js CHANGED
@@ -43,7 +43,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
43
43
  <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
44
44
  </span>
45
45
  <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
46
- <span class="k-icon k-i-close"></span>
46
+ <span class="k-icon k-i-x"></span>
47
47
  </span>
48
48
  </ng-container>
49
49
  </div>
@@ -72,7 +72,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
72
72
  <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
73
73
  </span>
74
74
  <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
75
- <span class="k-icon k-i-close"></span>
75
+ <span class="k-icon k-i-x"></span>
76
76
  </span>
77
77
  </ng-container>
78
78
  </div>
package/esm2015/colorpicker/flatcolorpicker-header.component.js CHANGED
@@ -61,7 +61,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
61
61
  [attr.aria-label]="getText('clearButton')"
62
62
  [attr.title]="getText('clearButton')"
63
63
  (click)="clearButtonClick.emit()">
64
- <span class="k-button-icon k-icon k-i-reset-color"></span>
64
+ <span class="k-button-icon k-icon k-i-droplet-slash"></span>
65
65
  </button>
66
66
  <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
67
67
  <span
@@ -111,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
111
111
  [attr.aria-label]="getText('clearButton')"
112
112
  [attr.title]="getText('clearButton')"
113
113
  (click)="clearButtonClick.emit()">
114
- <span class="k-button-icon k-icon k-i-reset-color"></span>
114
+ <span class="k-button-icon k-icon k-i-droplet-slash"></span>
115
115
  </button>
116
116
  <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
117
117
  <span
package/esm2015/maskedtextbox/maskedtextbox.component.js CHANGED
@@ -449,6 +449,12 @@ export class MaskedTextBoxComponent {
449
449
  }
450
450
  return null;
451
451
  }
452
+ /**
453
+ * @hidden
454
+ */
455
+ get isControlInvalid() {
456
+ return this.control && this.control.touched && !this.control.valid;
457
+ }
452
458
  /**
453
459
  * @hidden
454
460
  */
@@ -574,6 +580,8 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
574
580
  [id]="focusableId"
575
581
  [tabindex]="tabIndex"
576
582
  [attr.title]="title"
583
+ [attr.aria-placeholder]="mask"
584
+ [attr.aria-invalid]="isControlInvalid"
577
585
  [disabled]="disabled"
578
586
  [readonly]="readonly"
579
587
  [kendoEventsOutsideAngular]="{
@@ -618,6 +626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
618
626
  [id]="focusableId"
619
627
  [tabindex]="tabIndex"
620
628
  [attr.title]="title"
629
+ [attr.aria-placeholder]="mask"
630
+ [attr.aria-invalid]="isControlInvalid"
621
631
  [disabled]="disabled"
622
632
  [readonly]="readonly"
623
633
  [kendoEventsOutsideAngular]="{
package/esm2015/numerictextbox/numerictextbox.component.js CHANGED
@@ -524,6 +524,12 @@ export class NumericTextBoxComponent {
524
524
  get decrementTitle() {
525
525
  return this.localizationService.get('decrement');
526
526
  }
527
+ /**
528
+ * @hidden
529
+ */
530
+ get isControlInvalid() {
531
+ return this.control && this.control.touched && !this.control.valid;
532
+ }
527
533
  get decimalSeparator() {
528
534
  const numberSymbols = this.intl.numberSymbols();
529
535
  return numberSymbols.decimal;
@@ -865,30 +871,31 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
865
871
  >
866
872
  </ng-container>
867
873
  <input
868
- role="spinbutton"
869
- class="k-input-inner"
870
- autocomplete="off"
871
- autocorrect="off"
872
- [id]="focusableId"
873
- [attr.aria-valuemin]="min"
874
- [attr.aria-valuemax]="max"
875
- [attr.aria-valuenow]="value"
876
- [attr.title]="title"
877
- [attr.placeholder]="placeholder"
878
- [attr.maxLength]="maxlength"
879
- [tabindex]="tabIndex"
880
- [disabled]="disabled"
881
- [readonly]="readonly"
882
- [kendoEventsOutsideAngular]="{
883
- mousedown: handleMouseDown,
884
- dragenter: handleDragEnter,
885
- keydown: handleKeyDown,
886
- input: handleInput,
887
- focus: handleFocus,
888
- blur: handleBlur,
889
- paste: handlePaste
890
- }"
891
- #numericInput />
874
+ role="spinbutton"
875
+ class="k-input-inner"
876
+ autocomplete="off"
877
+ autocorrect="off"
878
+ [id]="focusableId"
879
+ [attr.aria-valuemin]="min"
880
+ [attr.aria-valuemax]="max"
881
+ [attr.aria-valuenow]="value"
882
+ [attr.title]="title"
883
+ [attr.placeholder]="placeholder"
884
+ [attr.maxLength]="maxlength"
885
+ [attr.aria-invalid]="isControlInvalid"
886
+ [tabindex]="tabIndex"
887
+ [disabled]="disabled"
888
+ [readonly]="readonly"
889
+ [kendoEventsOutsideAngular]="{
890
+ mousedown: handleMouseDown,
891
+ dragenter: handleDragEnter,
892
+ keydown: handleKeyDown,
893
+ input: handleInput,
894
+ focus: handleFocus,
895
+ blur: handleBlur,
896
+ paste: handlePaste
897
+ }"
898
+ #numericInput />
892
899
  <span
893
900
  class="k-input-spinner k-spin-button" *ngIf="spinners"
894
901
  [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
@@ -903,7 +910,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
903
910
  class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
904
911
  tabindex="-1"
905
912
  >
906
- <span class="k-button-icon k-icon k-i-arrow-n"></span>
913
+ <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
907
914
  </button>
908
915
  <button
909
916
  type="button"
@@ -915,7 +922,7 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
915
922
  class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
916
923
  tabindex="-1"
917
924
  >
918
- <span class="k-button-icon k-icon k-i-arrow-s"></span>
925
+ <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
919
926
  </button>
920
927
  </span>
921
928
  `, isInline: true, directives: [{ type: i3.LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -940,30 +947,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
940
947
  >
941
948
  </ng-container>
942
949
  <input
943
- role="spinbutton"
944
- class="k-input-inner"
945
- autocomplete="off"
946
- autocorrect="off"
947
- [id]="focusableId"
948
- [attr.aria-valuemin]="min"
949
- [attr.aria-valuemax]="max"
950
- [attr.aria-valuenow]="value"
951
- [attr.title]="title"
952
- [attr.placeholder]="placeholder"
953
- [attr.maxLength]="maxlength"
954
- [tabindex]="tabIndex"
955
- [disabled]="disabled"
956
- [readonly]="readonly"
957
- [kendoEventsOutsideAngular]="{
958
- mousedown: handleMouseDown,
959
- dragenter: handleDragEnter,
960
- keydown: handleKeyDown,
961
- input: handleInput,
962
- focus: handleFocus,
963
- blur: handleBlur,
964
- paste: handlePaste
965
- }"
966
- #numericInput />
950
+ role="spinbutton"
951
+ class="k-input-inner"
952
+ autocomplete="off"
953
+ autocorrect="off"
954
+ [id]="focusableId"
955
+ [attr.aria-valuemin]="min"
956
+ [attr.aria-valuemax]="max"
957
+ [attr.aria-valuenow]="value"
958
+ [attr.title]="title"
959
+ [attr.placeholder]="placeholder"
960
+ [attr.maxLength]="maxlength"
961
+ [attr.aria-invalid]="isControlInvalid"
962
+ [tabindex]="tabIndex"
963
+ [disabled]="disabled"
964
+ [readonly]="readonly"
965
+ [kendoEventsOutsideAngular]="{
966
+ mousedown: handleMouseDown,
967
+ dragenter: handleDragEnter,
968
+ keydown: handleKeyDown,
969
+ input: handleInput,
970
+ focus: handleFocus,
971
+ blur: handleBlur,
972
+ paste: handlePaste
973
+ }"
974
+ #numericInput />
967
975
  <span
968
976
  class="k-input-spinner k-spin-button" *ngIf="spinners"
969
977
  [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
@@ -978,7 +986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
978
986
  class="k-spinner-increase k-button k-icon-button k-button-solid k-button-solid-base"
979
987
  tabindex="-1"
980
988
  >
981
- <span class="k-button-icon k-icon k-i-arrow-n"></span>
989
+ <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
982
990
  </button>
983
991
  <button
984
992
  type="button"
@@ -990,7 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
990
998
  class="k-spinner-decrease k-button k-icon-button k-button-solid k-button-solid-base"
991
999
  tabindex="-1"
992
1000
  >
993
- <span class="k-button-icon k-icon k-i-arrow-s"></span>
1001
+ <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
994
1002
  </button>
995
1003
  </span>
996
1004
  `
package/esm2015/package-metadata.js CHANGED
@@ -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: 1659343915,
12
+ publishDate: 1662966139,
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
  };
package/esm2015/slider/slider.component.js CHANGED
@@ -407,8 +407,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
407
407
  [attr.tabindex]="-1"
408
408
  role="presentation">
409
409
  <span class="k-button-icon k-icon"
410
- [class.k-i-arrow-w]="!vertical"
411
- [class.k-i-arrow-s]="vertical">
410
+ [class.k-i-caret-alt-left]="!vertical"
411
+ [class.k-i-caret-alt-down]="vertical">
412
412
  </span>
413
413
  </button>
414
414
  <div class="k-slider-track-wrap">
@@ -457,8 +457,8 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
457
457
  [attr.aria-label]="currentValue"
458
458
  role="presentation">
459
459
  <span class="k-button-icon k-icon"
460
- [class.k-i-arrow-e]="!vertical"
461
- [class.k-i-arrow-n]="vertical">
460
+ [class.k-i-caret-alt-right]="!vertical"
461
+ [class.k-i-caret-alt-up]="vertical">
462
462
  </span>
463
463
  </button>
464
464
  <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
@@ -496,8 +496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
496
496
  [attr.tabindex]="-1"
497
497
  role="presentation">
498
498
  <span class="k-button-icon k-icon"
499
- [class.k-i-arrow-w]="!vertical"
500
- [class.k-i-arrow-s]="vertical">
499
+ [class.k-i-caret-alt-left]="!vertical"
500
+ [class.k-i-caret-alt-down]="vertical">
501
501
  </span>
502
502
  </button>
503
503
  <div class="k-slider-track-wrap">
@@ -546,8 +546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
546
546
  [attr.aria-label]="currentValue"
547
547
  role="presentation">
548
548
  <span class="k-button-icon k-icon"
549
- [class.k-i-arrow-e]="!vertical"
550
- [class.k-i-arrow-n]="vertical">
549
+ [class.k-i-caret-alt-right]="!vertical"
550
+ [class.k-i-caret-alt-up]="vertical">
551
551
  </span>
552
552
  </button>
553
553
  <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
package/esm2015/switch/switch.component.js CHANGED
@@ -277,6 +277,12 @@ export class SwitchComponent {
277
277
  this.disabled = isDisabled;
278
278
  this.changeDetector.markForCheck();
279
279
  }
280
+ /**
281
+ * @hidden
282
+ */
283
+ get isControlInvalid() {
284
+ return this.control && this.control.touched && !this.control.valid;
285
+ }
280
286
  /**
281
287
  * @hidden
282
288
  */
@@ -430,6 +436,8 @@ SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
430
436
  [style.transitionDuration]="initialized ? '200ms' : '0ms'"
431
437
  [attr.aria-checked]="checked"
432
438
  [attr.tabindex]="(disabled ? undefined : tabIndex)"
439
+ [attr.aria-disabled]="disabled"
440
+ [attr.aria-invalid]="isControlInvalid"
433
441
  [kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
434
442
  >
435
443
  <span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
@@ -480,6 +488,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
480
488
  [style.transitionDuration]="initialized ? '200ms' : '0ms'"
481
489
  [attr.aria-checked]="checked"
482
490
  [attr.tabindex]="(disabled ? undefined : tabIndex)"
491
+ [attr.aria-disabled]="disabled"
492
+ [attr.aria-invalid]="isControlInvalid"
483
493
  [kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
484
494
  >
485
495
  <span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
package/esm2015/textarea/textarea.component.js CHANGED
@@ -366,6 +366,12 @@ export class TextAreaComponent extends TextFieldsBase {
366
366
  get resizableClass() {
367
367
  return resizeClasses[this.resizable];
368
368
  }
369
+ /**
370
+ * @hidden
371
+ */
372
+ get isControlInvalid() {
373
+ return this.control && this.control.touched && !this.control.valid;
374
+ }
369
375
  /**
370
376
  * Focuses the TextArea component.
371
377
  *
@@ -503,6 +509,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
503
509
  [attr.tabindex]="tabIndex"
504
510
  [attr.title]="title"
505
511
  [attr.maxlength]="maxlength"
512
+ [attr.aria-invalid]="isControlInvalid"
506
513
  [kendoEventsOutsideAngular]="{
507
514
  focus: handleInputFocus,
508
515
  blur: handleInputBlur,
@@ -543,6 +550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
543
550
  [attr.tabindex]="tabIndex"
544
551
  [attr.title]="title"
545
552
  [attr.maxlength]="maxlength"
553
+ [attr.aria-invalid]="isControlInvalid"
546
554
  [kendoEventsOutsideAngular]="{
547
555
  focus: handleInputFocus,
548
556
  blur: handleInputBlur,
package/esm2015/textbox/textbox.component.js CHANGED
@@ -473,6 +473,12 @@ export class TextBoxComponent {
473
473
  const { valid, dirty, touched } = this.control;
474
474
  return valid && (dirty || touched);
475
475
  }
476
+ /**
477
+ * @hidden
478
+ */
479
+ get isControlInvalid() {
480
+ return this.control && this.control.touched && !this.control.valid;
481
+ }
476
482
  /**
477
483
  * @hidden
478
484
  */
@@ -487,7 +493,7 @@ export class TextBoxComponent {
487
493
  get errorIconClasses() {
488
494
  return this.errorIcon
489
495
  ? `${this.errorIcon}`
490
- : `k-input-validation-icon k-icon k-i-warning`;
496
+ : `k-input-validation-icon k-icon k-i-exclamation-circle`;
491
497
  }
492
498
  /**
493
499
  * @hidden
@@ -599,6 +605,7 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
599
605
  [attr.placeholder]="placeholder"
600
606
  [attr.title]="title"
601
607
  [attr.maxlength]="maxlength"
608
+ [attr.aria-invalid]="isControlInvalid"
602
609
  [kendoEventsOutsideAngular]="{
603
610
  focus: handleInputFocus,
604
611
  blur: handleInputBlur,
@@ -662,6 +669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
662
669
  [attr.placeholder]="placeholder"
663
670
  [attr.title]="title"
664
671
  [attr.maxlength]="maxlength"
672
+ [attr.aria-invalid]="isControlInvalid"
665
673
  [kendoEventsOutsideAngular]="{
666
674
  focus: handleInputFocus,
667
675
  blur: handleInputBlur,