@progress/kendo-angular-inputs 8.0.0-dev.202112251033 → 8.0.0-dev.202201101634

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 (19) 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/colorpicker/color-input.component.js +1 -1
  4. package/dist/es/package-metadata.js +1 -1
  5. package/dist/es/slider/slider.component.js +1 -1
  6. package/dist/es/textbox/textbox.component.js +1 -1
  7. package/dist/es2015/colorpicker/color-input.component.js +1 -1
  8. package/dist/es2015/index.metadata.json +1 -1
  9. package/dist/es2015/package-metadata.js +1 -1
  10. package/dist/es2015/slider/slider.component.js +18 -23
  11. package/dist/es2015/textbox/textbox.component.js +18 -19
  12. package/dist/fesm2015/index.js +38 -44
  13. package/dist/fesm5/index.js +4 -4
  14. package/dist/npm/colorpicker/color-input.component.js +1 -1
  15. package/dist/npm/package-metadata.js +1 -1
  16. package/dist/npm/slider/slider.component.js +1 -1
  17. package/dist/npm/textbox/textbox.component.js +1 -1
  18. package/dist/systemjs/kendo-angular-inputs.js +1 -1
  19. package/package.json +2 -2
package/dist/es2015/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: 1640428155,
12
+ publishDate: 1641832234,
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/dist/es2015/slider/slider.component.js CHANGED
@@ -446,33 +446,28 @@ SliderComponent = SliderComponent_1 = tslib_1.__decorate([
446
446
  [class.k-slider-bottomright]="tickPlacement === 'after'"
447
447
  [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
448
448
  >
449
- <span
450
- #decreaseButton
451
- *ngIf="showButtons"
452
- class="k-button k-button-decrease"
449
+ <button *ngIf="showButtons" type="button" #decreaseButton
450
+ class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
453
451
  [title]="decrementMessage"
454
- role="presentation"
455
- >
456
- <span class="k-icon"
457
- [class.k-i-arrow-w]="!vertical"
458
- [class.k-i-arrow-s]="vertical"
459
- >
460
- </span>
461
- </span>
462
- <span
463
- *ngIf="showButtons"
464
- #increaseButton
465
- class="k-button k-button-increase"
452
+ [attr.tabindex]="-1"
453
+ role="presentation">
454
+ <span class="k-button-icon k-icon"
455
+ [class.k-i-arrow-w]="!vertical"
456
+ [class.k-i-arrow-s]="vertical">
457
+ </span>
458
+ </button>
459
+ <button *ngIf="showButtons" type="button" #increaseButton
460
+ class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
466
461
  [title]="incrementMessage"
467
462
  (click)="$event.preventDefault()"
463
+ [attr.tabindex]="-1"
468
464
  [attr.aria-label]="currentValue"
469
- >
470
- <span class="k-icon"
471
- [class.k-i-arrow-e]="!vertical"
472
- [class.k-i-arrow-n]="vertical"
473
- >
474
- </span>
475
- </span>
465
+ role="presentation">
466
+ <span class="k-button-icon k-icon"
467
+ [class.k-i-arrow-e]="!vertical"
468
+ [class.k-i-arrow-n]="vertical">
469
+ </span>
470
+ </button>
476
471
  <ul kendoSliderTicks
477
472
  #ticks
478
473
  *ngIf="tickPlacement !== 'none'"
package/dist/es2015/textbox/textbox.component.js CHANGED
@@ -704,9 +704,8 @@ TextBoxComponent = TextBoxComponent_1 = tslib_1.__decorate([
704
704
  [ngTemplateOutlet]="prefixTemplate?.templateRef">
705
705
  </ng-template>
706
706
  </span>
707
- <input
707
+ <input #input
708
708
  class="k-input-inner"
709
- #input
710
709
  [id]="focusableId"
711
710
  [disabled]="disabled"
712
711
  [readonly]="readonly"
@@ -718,24 +717,24 @@ TextBoxComponent = TextBoxComponent_1 = tslib_1.__decorate([
718
717
  [kendoEventsOutsideAngular]="{
719
718
  focus: handleInputFocus,
720
719
  blur: handleInputBlur,
721
- input: handleInput}"/>
722
- <span class="k-input-suffix">
723
- <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
724
- <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
725
- <span
726
- role="button"
727
- class="k-clear-value"
728
- *ngIf="showClearButton"
729
- (click)="clearValue()"
730
- (mousedown)="$event.preventDefault()"
731
- [tabindex]="tabIndex"
732
- [attr.aria-label]="clearTitle()"
733
- [title]="clearTitle()"
734
- (keydown.enter)="clearValue($event)"
735
- (keydown.space)="clearValue($event)"
736
- >
720
+ input: handleInput}"
721
+ />
722
+ <span
723
+ role="button"
724
+ class="k-clear-value"
725
+ *ngIf="showClearButton"
726
+ (click)="clearValue()"
727
+ (mousedown)="$event.preventDefault()"
728
+ [tabindex]="tabIndex"
729
+ [attr.aria-label]="clearTitle()"
730
+ [title]="clearTitle()"
731
+ (keydown.enter)="clearValue($event)"
732
+ (keydown.space)="clearValue($event)">
737
733
  <span [ngClass]="clearButtonClasses"></span>
738
- </span>
734
+ </span>
735
+ <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
736
+ <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
737
+ <span class="k-input-suffix">
739
738
  <ng-template
740
739
  *ngIf="suffixTemplate"
741
740
  [ngTemplateOutlet]="suffixTemplate?.templateRef">
package/dist/fesm2015/index.js CHANGED
@@ -496,7 +496,7 @@ const packageMetadata = {
496
496
  name: '@progress/kendo-angular-inputs',
497
497
  productName: 'Kendo UI for Angular',
498
498
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
499
- publishDate: 1640428155,
499
+ publishDate: 1641832234,
500
500
  version: '',
501
501
  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'
502
502
  };
@@ -1246,33 +1246,28 @@ SliderComponent = SliderComponent_1 = __decorate([
1246
1246
  [class.k-slider-bottomright]="tickPlacement === 'after'"
1247
1247
  [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
1248
1248
  >
1249
- <span
1250
- #decreaseButton
1251
- *ngIf="showButtons"
1252
- class="k-button k-button-decrease"
1249
+ <button *ngIf="showButtons" type="button" #decreaseButton
1250
+ class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
1253
1251
  [title]="decrementMessage"
1254
- role="presentation"
1255
- >
1256
- <span class="k-icon"
1257
- [class.k-i-arrow-w]="!vertical"
1258
- [class.k-i-arrow-s]="vertical"
1259
- >
1260
- </span>
1261
- </span>
1262
- <span
1263
- *ngIf="showButtons"
1264
- #increaseButton
1265
- class="k-button k-button-increase"
1252
+ [attr.tabindex]="-1"
1253
+ role="presentation">
1254
+ <span class="k-button-icon k-icon"
1255
+ [class.k-i-arrow-w]="!vertical"
1256
+ [class.k-i-arrow-s]="vertical">
1257
+ </span>
1258
+ </button>
1259
+ <button *ngIf="showButtons" type="button" #increaseButton
1260
+ class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
1266
1261
  [title]="incrementMessage"
1267
1262
  (click)="$event.preventDefault()"
1263
+ [attr.tabindex]="-1"
1268
1264
  [attr.aria-label]="currentValue"
1269
- >
1270
- <span class="k-icon"
1271
- [class.k-i-arrow-e]="!vertical"
1272
- [class.k-i-arrow-n]="vertical"
1273
- >
1274
- </span>
1275
- </span>
1265
+ role="presentation">
1266
+ <span class="k-button-icon k-icon"
1267
+ [class.k-i-arrow-e]="!vertical"
1268
+ [class.k-i-arrow-n]="vertical">
1269
+ </span>
1270
+ </button>
1276
1271
  <ul kendoSliderTicks
1277
1272
  #ticks
1278
1273
  *ngIf="tickPlacement !== 'none'"
@@ -6446,9 +6441,8 @@ TextBoxComponent = TextBoxComponent_1 = __decorate([
6446
6441
  [ngTemplateOutlet]="prefixTemplate?.templateRef">
6447
6442
  </ng-template>
6448
6443
  </span>
6449
- <input
6444
+ <input #input
6450
6445
  class="k-input-inner"
6451
- #input
6452
6446
  [id]="focusableId"
6453
6447
  [disabled]="disabled"
6454
6448
  [readonly]="readonly"
@@ -6460,24 +6454,24 @@ TextBoxComponent = TextBoxComponent_1 = __decorate([
6460
6454
  [kendoEventsOutsideAngular]="{
6461
6455
  focus: handleInputFocus,
6462
6456
  blur: handleInputBlur,
6463
- input: handleInput}"/>
6464
- <span class="k-input-suffix">
6465
- <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
6466
- <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
6467
- <span
6468
- role="button"
6469
- class="k-clear-value"
6470
- *ngIf="showClearButton"
6471
- (click)="clearValue()"
6472
- (mousedown)="$event.preventDefault()"
6473
- [tabindex]="tabIndex"
6474
- [attr.aria-label]="clearTitle()"
6475
- [title]="clearTitle()"
6476
- (keydown.enter)="clearValue($event)"
6477
- (keydown.space)="clearValue($event)"
6478
- >
6457
+ input: handleInput}"
6458
+ />
6459
+ <span
6460
+ role="button"
6461
+ class="k-clear-value"
6462
+ *ngIf="showClearButton"
6463
+ (click)="clearValue()"
6464
+ (mousedown)="$event.preventDefault()"
6465
+ [tabindex]="tabIndex"
6466
+ [attr.aria-label]="clearTitle()"
6467
+ [title]="clearTitle()"
6468
+ (keydown.enter)="clearValue($event)"
6469
+ (keydown.space)="clearValue($event)">
6479
6470
  <span [ngClass]="clearButtonClasses"></span>
6480
- </span>
6471
+ </span>
6472
+ <span *ngIf="hasErrors" [ngClass]="errorIconClasses"></span>
6473
+ <span *ngIf="isSuccessful" [ngClass]="successIconClasses"></span>
6474
+ <span class="k-input-suffix">
6481
6475
  <ng-template
6482
6476
  *ngIf="suffixTemplate"
6483
6477
  [ngTemplateOutlet]="suffixTemplate?.templateRef">
@@ -8122,7 +8116,7 @@ ColorInputComponent = __decorate([
8122
8116
  <input
8123
8117
  #hexInput
8124
8118
  [id]="focusableId"
8125
- class="k-textbox k-hex-value"
8119
+ class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
8126
8120
  [disabled]="disabled"
8127
8121
  [readonly]="readonly"
8128
8122
  [value]="hex || ''"
package/dist/fesm5/index.js CHANGED
@@ -530,7 +530,7 @@ var packageMetadata = {
530
530
  name: '@progress/kendo-angular-inputs',
531
531
  productName: 'Kendo UI for Angular',
532
532
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
533
- publishDate: 1640428155,
533
+ publishDate: 1641832234,
534
534
  version: '',
535
535
  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'
536
536
  };
@@ -1339,7 +1339,7 @@ var SliderComponent = /** @class */ (function (_super) {
1339
1339
  { provide: KendoInput, useExisting: forwardRef(function () { return SliderComponent_1; }) }
1340
1340
  ],
1341
1341
  selector: 'kendo-slider',
1342
- template: "\n <ng-container kendoSliderLocalizedMessages\n i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n increment=\"increment\"\n i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n decrement=\"decrement\"\n i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n dragHandle=\"Drag\"\n >\n <div class=\"k-slider-wrap\" #wrap\n [class.k-slider-buttons]=\"showButtons\"\n [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n >\n <span\n #decreaseButton\n *ngIf=\"showButtons\"\n class=\"k-button k-button-decrease\"\n [title]=\"decrementMessage\"\n role=\"presentation\"\n >\n <span class=\"k-icon\"\n [class.k-i-arrow-w]=\"!vertical\"\n [class.k-i-arrow-s]=\"vertical\"\n >\n </span>\n </span>\n <span\n *ngIf=\"showButtons\"\n #increaseButton\n class=\"k-button k-button-increase\"\n [title]=\"incrementMessage\"\n (click)=\"$event.preventDefault()\"\n [attr.aria-label]=\"currentValue\"\n >\n <span class=\"k-icon\"\n [class.k-i-arrow-e]=\"!vertical\"\n [class.k-i-arrow-n]=\"vertical\"\n >\n </span>\n </span>\n <ul kendoSliderTicks\n #ticks\n *ngIf=\"tickPlacement !== 'none'\"\n [tickTitle]=\"title\"\n [vertical]=\"vertical\"\n [step]=\"smallStep\"\n [largeStep]=\"largeStep\"\n [min]=\"min\"\n [max]=\"max\"\n [labelTemplate]=\"labelTemplate?.templateRef\"\n [attr.aria-hidden]=\"true\"\n >\n </ul>\n <div #track class=\"k-slider-track\">\n <div #sliderSelection class=\"k-slider-selection\">\n </div>\n <a #draghandle\n role=\"slider\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"currentValue\"\n [attr.aria-valuetext]=\"currentValue\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n [style.touch-action]=\"isDisabled ? '' : 'none'\"\n class=\"k-draghandle\"\n [title]=\"dragHandleMessage\"\n [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n [id]=\"focusableId\"\n kendoDraggable\n (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n ></a>\n </div>\n <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n </div>\n "
1342
+ template: "\n <ng-container kendoSliderLocalizedMessages\n i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n increment=\"increment\"\n i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n decrement=\"decrement\"\n i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n dragHandle=\"Drag\"\n >\n <div class=\"k-slider-wrap\" #wrap\n [class.k-slider-buttons]=\"showButtons\"\n [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n >\n <button *ngIf=\"showButtons\" type=\"button\" #decreaseButton\n class=\"k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n [title]=\"decrementMessage\"\n [attr.tabindex]=\"-1\"\n role=\"presentation\">\n <span class=\"k-button-icon k-icon\"\n [class.k-i-arrow-w]=\"!vertical\"\n [class.k-i-arrow-s]=\"vertical\">\n </span>\n </button>\n <button *ngIf=\"showButtons\" type=\"button\" #increaseButton\n class=\"k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n [title]=\"incrementMessage\"\n (click)=\"$event.preventDefault()\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"currentValue\"\n role=\"presentation\">\n <span class=\"k-button-icon k-icon\"\n [class.k-i-arrow-e]=\"!vertical\"\n [class.k-i-arrow-n]=\"vertical\">\n </span>\n </button>\n <ul kendoSliderTicks\n #ticks\n *ngIf=\"tickPlacement !== 'none'\"\n [tickTitle]=\"title\"\n [vertical]=\"vertical\"\n [step]=\"smallStep\"\n [largeStep]=\"largeStep\"\n [min]=\"min\"\n [max]=\"max\"\n [labelTemplate]=\"labelTemplate?.templateRef\"\n [attr.aria-hidden]=\"true\"\n >\n </ul>\n <div #track class=\"k-slider-track\">\n <div #sliderSelection class=\"k-slider-selection\">\n </div>\n <a #draghandle\n role=\"slider\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"currentValue\"\n [attr.aria-valuetext]=\"currentValue\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n [style.touch-action]=\"isDisabled ? '' : 'none'\"\n class=\"k-draghandle\"\n [title]=\"dragHandleMessage\"\n [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n [id]=\"focusableId\"\n kendoDraggable\n (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n ></a>\n </div>\n <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n </div>\n "
1343
1343
  }),
1344
1344
  __metadata("design:paramtypes", [LocalizationService,
1345
1345
  Injector,
@@ -6656,7 +6656,7 @@ var TextBoxComponent = /** @class */ (function () {
6656
6656
  { provide: KendoInput, useExisting: forwardRef(function () { return TextBoxComponent_1; }) }
6657
6657
  ],
6658
6658
  selector: 'kendo-textbox',
6659
- template: "\n <ng-container kendoTextBoxLocalizedMessages\n i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n clear=\"Clear\">\n </ng-container>\n <span class=\"k-input-prefix\">\n <ng-template\n *ngIf=\"prefixTemplate\"\n [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n </ng-template>\n </span>\n <input\n class=\"k-input-inner\"\n #input\n [id]=\"focusableId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\"/>\n <span class=\"k-input-suffix\">\n <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n <span\n role=\"button\"\n class=\"k-clear-value\"\n *ngIf=\"showClearButton\"\n (click)=\"clearValue()\"\n (mousedown)=\"$event.preventDefault()\"\n [tabindex]=\"tabIndex\"\n [attr.aria-label]=\"clearTitle()\"\n [title]=\"clearTitle()\"\n (keydown.enter)=\"clearValue($event)\"\n (keydown.space)=\"clearValue($event)\"\n >\n <span [ngClass]=\"clearButtonClasses\"></span>\n </span>\n <ng-template\n *ngIf=\"suffixTemplate\"\n [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n </ng-template>\n </span>\n "
6659
+ template: "\n <ng-container kendoTextBoxLocalizedMessages\n i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n clear=\"Clear\">\n </ng-container>\n <span class=\"k-input-prefix\">\n <ng-template\n *ngIf=\"prefixTemplate\"\n [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n </ng-template>\n </span>\n <input #input\n class=\"k-input-inner\"\n [id]=\"focusableId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\"\n />\n <span\n role=\"button\"\n class=\"k-clear-value\"\n *ngIf=\"showClearButton\"\n (click)=\"clearValue()\"\n (mousedown)=\"$event.preventDefault()\"\n [tabindex]=\"tabIndex\"\n [attr.aria-label]=\"clearTitle()\"\n [title]=\"clearTitle()\"\n (keydown.enter)=\"clearValue($event)\"\n (keydown.space)=\"clearValue($event)\">\n <span [ngClass]=\"clearButtonClasses\"></span>\n </span>\n <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n <span class=\"k-input-suffix\">\n <ng-template\n *ngIf=\"suffixTemplate\"\n [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n </ng-template>\n </span>\n "
6660
6660
  }),
6661
6661
  __metadata("design:paramtypes", [LocalizationService,
6662
6662
  NgZone,
@@ -8347,7 +8347,7 @@ var ColorInputComponent = /** @class */ (function () {
8347
8347
  ColorInputComponent = __decorate([
8348
8348
  Component({
8349
8349
  selector: 'kendo-colorinput',
8350
- template: "\n <div class=\"k-vstack\">\n <button #toggleFormatButton\n class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n [attr.aria-label]=\"formatButtonTitle\"\n [attr.title]=\"formatButtonTitle\"\n >\n <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n </button>\n </div>\n <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n <input\n #hexInput\n [id]=\"focusableId\"\n class=\"k-textbox k-hex-value\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hex || ''\"\n (blur)=\"handleHexInputBlur()\"\n (input)=\"handleHexValueChange(hexInput.value)\"\n />\n <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n </div>\n <ng-container *ngIf=\"formatView === 'rgba'\">\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #red\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.r\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n </div>\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #green\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.g\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n </div>\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #blue\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.b\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n </div>\n <div class=\"k-vstack\" *ngIf=\"opacity\">\n <kendo-numerictextbox #opacityInput\n #alpha\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"1\"\n [(value)]=\"rgba.a\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [step]=\"0.01\"\n [format]=\"'n2'\"\n [decimals]=\"2\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n </div>\n </ng-container>\n "
8350
+ template: "\n <div class=\"k-vstack\">\n <button #toggleFormatButton\n class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n [attr.aria-label]=\"formatButtonTitle\"\n [attr.title]=\"formatButtonTitle\"\n >\n <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n </button>\n </div>\n <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n <input\n #hexInput\n [id]=\"focusableId\"\n class=\"k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hex || ''\"\n (blur)=\"handleHexInputBlur()\"\n (input)=\"handleHexValueChange(hexInput.value)\"\n />\n <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n </div>\n <ng-container *ngIf=\"formatView === 'rgba'\">\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #red\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.r\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n </div>\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #green\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.g\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n </div>\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #blue\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.b\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n </div>\n <div class=\"k-vstack\" *ngIf=\"opacity\">\n <kendo-numerictextbox #opacityInput\n #alpha\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"1\"\n [(value)]=\"rgba.a\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [step]=\"0.01\"\n [format]=\"'n2'\"\n [decimals]=\"2\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n </div>\n </ng-container>\n "
8351
8351
  }),
8352
8352
  __metadata("design:paramtypes", [ElementRef,
8353
8353
  Renderer2,
package/dist/npm/colorpicker/color-input.component.js CHANGED
@@ -184,7 +184,7 @@ var ColorInputComponent = /** @class */ (function () {
184
184
  ColorInputComponent = tslib_1.__decorate([
185
185
  core_1.Component({
186
186
  selector: 'kendo-colorinput',
187
- template: "\n <div class=\"k-vstack\">\n <button #toggleFormatButton\n class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n [attr.aria-label]=\"formatButtonTitle\"\n [attr.title]=\"formatButtonTitle\"\n >\n <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n </button>\n </div>\n <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n <input\n #hexInput\n [id]=\"focusableId\"\n class=\"k-textbox k-hex-value\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hex || ''\"\n (blur)=\"handleHexInputBlur()\"\n (input)=\"handleHexValueChange(hexInput.value)\"\n />\n <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n </div>\n <ng-container *ngIf=\"formatView === 'rgba'\">\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #red\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.r\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n </div>\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #green\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.g\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n </div>\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #blue\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.b\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n </div>\n <div class=\"k-vstack\" *ngIf=\"opacity\">\n <kendo-numerictextbox #opacityInput\n #alpha\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"1\"\n [(value)]=\"rgba.a\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [step]=\"0.01\"\n [format]=\"'n2'\"\n [decimals]=\"2\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n </div>\n </ng-container>\n "
187
+ template: "\n <div class=\"k-vstack\">\n <button #toggleFormatButton\n class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n [attr.aria-label]=\"formatButtonTitle\"\n [attr.title]=\"formatButtonTitle\"\n >\n <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n </button>\n </div>\n <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n <input\n #hexInput\n [id]=\"focusableId\"\n class=\"k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"hex || ''\"\n (blur)=\"handleHexInputBlur()\"\n (input)=\"handleHexValueChange(hexInput.value)\"\n />\n <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n </div>\n <ng-container *ngIf=\"formatView === 'rgba'\">\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #red\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.r\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n </div>\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #green\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.g\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n </div>\n <div class=\"k-vstack\">\n <kendo-numerictextbox\n #blue\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"255\"\n [(value)]=\"rgba.b\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [format]=\"'n'\"\n [decimals]=\"0\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n </div>\n <div class=\"k-vstack\" *ngIf=\"opacity\">\n <kendo-numerictextbox #opacityInput\n #alpha\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [min]=\"0\"\n [max]=\"1\"\n [(value)]=\"rgba.a\"\n [autoCorrect]=\"true\"\n [spinners]=\"false\"\n [step]=\"0.01\"\n [format]=\"'n2'\"\n [decimals]=\"2\"\n (blur)=\"handleRgbaInputBlur()\"\n (valueChange)=\"handleRgbaValueChange()\">\n </kendo-numerictextbox>\n <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n </div>\n </ng-container>\n "
188
188
  }),
189
189
  tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
190
190
  core_1.Renderer2,
package/dist/npm/package-metadata.js CHANGED
@@ -11,7 +11,7 @@ exports.packageMetadata = {
11
11
  name: '@progress/kendo-angular-inputs',
12
12
  productName: 'Kendo UI for Angular',
13
13
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
14
- publishDate: 1640428155,
14
+ publishDate: 1641832234,
15
15
  version: '',
16
16
  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'
17
17
  };
package/dist/npm/slider/slider.component.js CHANGED
@@ -470,7 +470,7 @@ var SliderComponent = /** @class */ (function (_super) {
470
470
  { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return SliderComponent_1; }) }
471
471
  ],
472
472
  selector: 'kendo-slider',
473
- template: "\n <ng-container kendoSliderLocalizedMessages\n i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n increment=\"increment\"\n i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n decrement=\"decrement\"\n i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n dragHandle=\"Drag\"\n >\n <div class=\"k-slider-wrap\" #wrap\n [class.k-slider-buttons]=\"showButtons\"\n [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n >\n <span\n #decreaseButton\n *ngIf=\"showButtons\"\n class=\"k-button k-button-decrease\"\n [title]=\"decrementMessage\"\n role=\"presentation\"\n >\n <span class=\"k-icon\"\n [class.k-i-arrow-w]=\"!vertical\"\n [class.k-i-arrow-s]=\"vertical\"\n >\n </span>\n </span>\n <span\n *ngIf=\"showButtons\"\n #increaseButton\n class=\"k-button k-button-increase\"\n [title]=\"incrementMessage\"\n (click)=\"$event.preventDefault()\"\n [attr.aria-label]=\"currentValue\"\n >\n <span class=\"k-icon\"\n [class.k-i-arrow-e]=\"!vertical\"\n [class.k-i-arrow-n]=\"vertical\"\n >\n </span>\n </span>\n <ul kendoSliderTicks\n #ticks\n *ngIf=\"tickPlacement !== 'none'\"\n [tickTitle]=\"title\"\n [vertical]=\"vertical\"\n [step]=\"smallStep\"\n [largeStep]=\"largeStep\"\n [min]=\"min\"\n [max]=\"max\"\n [labelTemplate]=\"labelTemplate?.templateRef\"\n [attr.aria-hidden]=\"true\"\n >\n </ul>\n <div #track class=\"k-slider-track\">\n <div #sliderSelection class=\"k-slider-selection\">\n </div>\n <a #draghandle\n role=\"slider\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"currentValue\"\n [attr.aria-valuetext]=\"currentValue\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n [style.touch-action]=\"isDisabled ? '' : 'none'\"\n class=\"k-draghandle\"\n [title]=\"dragHandleMessage\"\n [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n [id]=\"focusableId\"\n kendoDraggable\n (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n ></a>\n </div>\n <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n </div>\n "
473
+ template: "\n <ng-container kendoSliderLocalizedMessages\n i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n increment=\"increment\"\n i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n decrement=\"decrement\"\n i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n dragHandle=\"Drag\"\n >\n <div class=\"k-slider-wrap\" #wrap\n [class.k-slider-buttons]=\"showButtons\"\n [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n >\n <button *ngIf=\"showButtons\" type=\"button\" #decreaseButton\n class=\"k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n [title]=\"decrementMessage\"\n [attr.tabindex]=\"-1\"\n role=\"presentation\">\n <span class=\"k-button-icon k-icon\"\n [class.k-i-arrow-w]=\"!vertical\"\n [class.k-i-arrow-s]=\"vertical\">\n </span>\n </button>\n <button *ngIf=\"showButtons\" type=\"button\" #increaseButton\n class=\"k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button\"\n [title]=\"incrementMessage\"\n (click)=\"$event.preventDefault()\"\n [attr.tabindex]=\"-1\"\n [attr.aria-label]=\"currentValue\"\n role=\"presentation\">\n <span class=\"k-button-icon k-icon\"\n [class.k-i-arrow-e]=\"!vertical\"\n [class.k-i-arrow-n]=\"vertical\">\n </span>\n </button>\n <ul kendoSliderTicks\n #ticks\n *ngIf=\"tickPlacement !== 'none'\"\n [tickTitle]=\"title\"\n [vertical]=\"vertical\"\n [step]=\"smallStep\"\n [largeStep]=\"largeStep\"\n [min]=\"min\"\n [max]=\"max\"\n [labelTemplate]=\"labelTemplate?.templateRef\"\n [attr.aria-hidden]=\"true\"\n >\n </ul>\n <div #track class=\"k-slider-track\">\n <div #sliderSelection class=\"k-slider-selection\">\n </div>\n <a #draghandle\n role=\"slider\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-valuenow]=\"currentValue\"\n [attr.aria-valuetext]=\"currentValue\"\n [attr.aria-disabled]=\"disabled ? true : undefined\"\n [attr.aria-readonly]=\"readonly ? true : undefined\"\n [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n [style.touch-action]=\"isDisabled ? '' : 'none'\"\n class=\"k-draghandle\"\n [title]=\"dragHandleMessage\"\n [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n [id]=\"focusableId\"\n kendoDraggable\n (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n ></a>\n </div>\n <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n </div>\n "
474
474
  }),
475
475
  tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
476
476
  core_1.Injector,
package/dist/npm/textbox/textbox.component.js CHANGED
@@ -745,7 +745,7 @@ var TextBoxComponent = /** @class */ (function () {
745
745
  { provide: kendo_angular_common_1.KendoInput, useExisting: core_1.forwardRef(function () { return TextBoxComponent_1; }) }
746
746
  ],
747
747
  selector: 'kendo-textbox',
748
- template: "\n <ng-container kendoTextBoxLocalizedMessages\n i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n clear=\"Clear\">\n </ng-container>\n <span class=\"k-input-prefix\">\n <ng-template\n *ngIf=\"prefixTemplate\"\n [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n </ng-template>\n </span>\n <input\n class=\"k-input-inner\"\n #input\n [id]=\"focusableId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\"/>\n <span class=\"k-input-suffix\">\n <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n <span\n role=\"button\"\n class=\"k-clear-value\"\n *ngIf=\"showClearButton\"\n (click)=\"clearValue()\"\n (mousedown)=\"$event.preventDefault()\"\n [tabindex]=\"tabIndex\"\n [attr.aria-label]=\"clearTitle()\"\n [title]=\"clearTitle()\"\n (keydown.enter)=\"clearValue($event)\"\n (keydown.space)=\"clearValue($event)\"\n >\n <span [ngClass]=\"clearButtonClasses\"></span>\n </span>\n <ng-template\n *ngIf=\"suffixTemplate\"\n [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n </ng-template>\n </span>\n "
748
+ template: "\n <ng-container kendoTextBoxLocalizedMessages\n i18n-clear=\"kendo.textbox.clear|The title for the **Clear** button in the TextBox.\"\n clear=\"Clear\">\n </ng-container>\n <span class=\"k-input-prefix\">\n <ng-template\n *ngIf=\"prefixTemplate\"\n [ngTemplateOutlet]=\"prefixTemplate?.templateRef\">\n </ng-template>\n </span>\n <input #input\n class=\"k-input-inner\"\n [id]=\"focusableId\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.tabindex]=\"disabled ? undefined : tabindex\"\n [value]=\"value\"\n [attr.placeholder]=\"placeholder\"\n [attr.title]=\"title\"\n [attr.maxlength]=\"maxlength\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleInputFocus,\n blur: handleInputBlur,\n input: handleInput}\"\n />\n <span\n role=\"button\"\n class=\"k-clear-value\"\n *ngIf=\"showClearButton\"\n (click)=\"clearValue()\"\n (mousedown)=\"$event.preventDefault()\"\n [tabindex]=\"tabIndex\"\n [attr.aria-label]=\"clearTitle()\"\n [title]=\"clearTitle()\"\n (keydown.enter)=\"clearValue($event)\"\n (keydown.space)=\"clearValue($event)\">\n <span [ngClass]=\"clearButtonClasses\"></span>\n </span>\n <span *ngIf=\"hasErrors\" [ngClass]=\"errorIconClasses\"></span>\n <span *ngIf=\"isSuccessful\" [ngClass]=\"successIconClasses\"></span>\n <span class=\"k-input-suffix\">\n <ng-template\n *ngIf=\"suffixTemplate\"\n [ngTemplateOutlet]=\"suffixTemplate?.templateRef\">\n </ng-template>\n </span>\n "
749
749
  }),
750
750
  tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
751
751
  core_1.NgZone,