@progress/kendo-angular-inputs 8.0.2 → 8.0.4-dev.202202101712

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1643126640,
+    publishDate: 1644512961,
     version: '',
     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'
 };

package/dist/es2015/shared/textarea.directive.js

@@ -10,7 +10,7 @@ import { hasObservers, KendoInput, isDocumentAvailable } from '@progress/kendo-a
 import { requiresZoneOnBlur } from '../common/utils';
 import { RTL } from '@progress/kendo-angular-l10n';
 import { fromEvent } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, take } from 'rxjs/operators';
 /**
  * Represents the [Kendo UI TextArea directive for the Inputs components for Angular]({% slug overview_textarea %}).
  * Provides floating labels to `textarea` elements.
@@ -137,7 +137,7 @@ let TextAreaDirective = TextAreaDirective_1 = class TextAreaDirective {
                 element.style.height = `${this.initialHeight}px`;
             }
         }
-        this.resize();
+        this.zone.onStable.pipe(take(1)).subscribe(() => this.resize());
     }
     ngOnDestroy() {
         this.listeners.forEach(listener => listener());

package/dist/es2015/textbox/textbox.component.js

@@ -464,7 +464,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     get successIconClasses() {
         return this.successIcon
             ? `${this.successIcon}`
-            : `k-validation-icon k-icon k-i-check`;
+            : `k-input-validation-icon k-icon k-i-check`;
     }
     /**
      * @hidden
@@ -472,7 +472,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     get errorIconClasses() {
         return this.errorIcon
             ? `${this.errorIcon}`
-            : `k-validation-icon k-icon k-i-warning`;
+            : `k-input-validation-icon k-icon k-i-warning`;
     }
     /**
      * @hidden

package/dist/fesm2015/index.js

@@ -481,7 +481,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1643126640,
+    publishDate: 1644512961,
     version: '',
     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'
 };
@@ -2607,7 +2607,7 @@ let TextAreaDirective = TextAreaDirective_1 = class TextAreaDirective {
                 element.style.height = `${this.initialHeight}px`;
             }
         }
-        this.resize();
+        this.zone.onStable.pipe(take(1)).subscribe(() => this.resize());
     }
     ngOnDestroy() {
         this.listeners.forEach(listener => listener());
@@ -6183,7 +6183,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     get successIconClasses() {
         return this.successIcon
             ? `${this.successIcon}`
-            : `k-validation-icon k-icon k-i-check`;
+            : `k-input-validation-icon k-icon k-i-check`;
     }
     /**
      * @hidden
@@ -6191,7 +6191,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     get errorIconClasses() {
         return this.errorIcon
             ? `${this.errorIcon}`
-            : `k-validation-icon k-icon k-i-warning`;
+            : `k-input-validation-icon k-icon k-i-warning`;
     }
     /**
      * @hidden
@@ -9018,12 +9018,13 @@ let serial$1 = 0;
  * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponent {
-    constructor(host, service, cdr, renderer, localizationService) {
+    constructor(host, service, cdr, renderer, localizationService, ngZone) {
         this.host = host;
         this.service = service;
         this.cdr = cdr;
         this.renderer = renderer;
         this.localizationService = localizationService;
+        this.ngZone = ngZone;
         /**
          * @hidden
          */
@@ -9176,11 +9177,15 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
             const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET$1 : DEFAULT_ACCESSIBLE_PRESET$1;
             this.palette = this.palette || defaultPreset;
             this.setRows();
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
         }
     }
     ngAfterViewInit() {
         this.setHostElementAriaLabel();
+        if (this.value) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.selectCell(this.value);
+            });
+        }
     }
     ngOnDestroy() {
         if (this.dynamicRTLSubscription) {
@@ -9192,7 +9197,7 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
             this.setRows();
         }
         if (changes.palette || changes.value || changes.columns) {
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
+            this.selectCell(this.value);
             this.setHostElementAriaLabel();
         }
     }
@@ -9254,7 +9259,7 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
      */
     writeValue(value) {
         this.value = value;
-        this.focusedCell = this.service.getCellCoordsFor(this.value);
+        this.selectCell(value);
     }
     /**
      * @hidden
@@ -9305,6 +9310,10 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
         this.focusInComponent = false;
         this.focusedCell = this.selectedCell;
     }
+    selectCell(value) {
+        this.selectedCell = this.service.getCellCoordsFor(value);
+        this.focusedCell = this.selectedCell;
+    }
     setRows() {
         if (!isPresent(this.palette)) {
             return;
@@ -9485,7 +9494,8 @@ ColorPaletteComponent = ColorPaletteComponent_1 = __decorate([
         ColorPaletteService,
         ChangeDetectorRef,
         Renderer2,
-        LocalizationService])
+        LocalizationService,
+        NgZone])
 ], ColorPaletteComponent);
 
 /**

package/dist/fesm5/index.js

@@ -514,7 +514,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1643126640,
+    publishDate: 1644512961,
     version: '',
     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'
 };
@@ -2626,6 +2626,7 @@ var TextAreaDirective = /** @class */ (function () {
         this.control = this.injector.get(NgControl, null);
     };
     TextAreaDirective.prototype.ngOnChanges = function (changes) {
+        var _this = this;
         var element = this.element.nativeElement;
         if (changes.value) {
             this.elementValue = this.value;
@@ -2641,7 +2642,7 @@ var TextAreaDirective = /** @class */ (function () {
                 element.style.height = this.initialHeight + "px";
             }
         }
-        this.resize();
+        this.zone.onStable.pipe(take(1)).subscribe(function () { return _this.resize(); });
     };
     TextAreaDirective.prototype.ngOnDestroy = function () {
         this.listeners.forEach(function (listener) { return listener(); });
@@ -6377,7 +6378,7 @@ var TextBoxComponent = /** @class */ (function () {
         get: function () {
             return this.successIcon
                 ? "" + this.successIcon
-                : "k-validation-icon k-icon k-i-check";
+                : "k-input-validation-icon k-icon k-i-check";
         },
         enumerable: true,
         configurable: true
@@ -6389,7 +6390,7 @@ var TextBoxComponent = /** @class */ (function () {
         get: function () {
             return this.errorIcon
                 ? "" + this.errorIcon
-                : "k-validation-icon k-icon k-i-warning";
+                : "k-input-validation-icon k-icon k-i-warning";
         },
         enumerable: true,
         configurable: true
@@ -9101,13 +9102,14 @@ var serial$1 = 0;
  * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 var ColorPaletteComponent = /** @class */ (function () {
-    function ColorPaletteComponent(host, service, cdr, renderer, localizationService) {
+    function ColorPaletteComponent(host, service, cdr, renderer, localizationService, ngZone) {
         var _this = this;
         this.host = host;
         this.service = service;
         this.cdr = cdr;
         this.renderer = renderer;
         this.localizationService = localizationService;
+        this.ngZone = ngZone;
         /**
          * @hidden
          */
@@ -9303,11 +9305,16 @@ var ColorPaletteComponent = /** @class */ (function () {
             var defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET$1 : DEFAULT_ACCESSIBLE_PRESET$1;
             this.palette = this.palette || defaultPreset;
             this.setRows();
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
         }
     };
     ColorPaletteComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
         this.setHostElementAriaLabel();
+        if (this.value) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(function () {
+                _this.selectCell(_this.value);
+            });
+        }
     };
     ColorPaletteComponent.prototype.ngOnDestroy = function () {
         if (this.dynamicRTLSubscription) {
@@ -9319,7 +9326,7 @@ var ColorPaletteComponent = /** @class */ (function () {
             this.setRows();
         }
         if (changes.palette || changes.value || changes.columns) {
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
+            this.selectCell(this.value);
             this.setHostElementAriaLabel();
         }
     };
@@ -9381,7 +9388,7 @@ var ColorPaletteComponent = /** @class */ (function () {
      */
     ColorPaletteComponent.prototype.writeValue = function (value) {
         this.value = value;
-        this.focusedCell = this.service.getCellCoordsFor(this.value);
+        this.selectCell(value);
     };
     /**
      * @hidden
@@ -9432,6 +9439,10 @@ var ColorPaletteComponent = /** @class */ (function () {
         this.focusInComponent = false;
         this.focusedCell = this.selectedCell;
     };
+    ColorPaletteComponent.prototype.selectCell = function (value) {
+        this.selectedCell = this.service.getCellCoordsFor(value);
+        this.focusedCell = this.selectedCell;
+    };
     ColorPaletteComponent.prototype.setRows = function () {
         if (!isPresent(this.palette)) {
             return;
@@ -9581,7 +9592,8 @@ var ColorPaletteComponent = /** @class */ (function () {
             ColorPaletteService,
             ChangeDetectorRef,
             Renderer2,
-            LocalizationService])
+            LocalizationService,
+            NgZone])
     ], ColorPaletteComponent);
     return ColorPaletteComponent;
 }());

package/dist/npm/colorpicker/color-palette.component.js

@@ -10,6 +10,7 @@ var forms_1 = require("@angular/forms");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
+var operators_1 = require("rxjs/operators");
 var colorpalette_localization_service_1 = require("./localization/colorpalette-localization.service");
 var package_metadata_1 = require("../package-metadata");
 var models_1 = require("./models");
@@ -26,13 +27,14 @@ var serial = 0;
  * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 var ColorPaletteComponent = /** @class */ (function () {
-    function ColorPaletteComponent(host, service, cdr, renderer, localizationService) {
+    function ColorPaletteComponent(host, service, cdr, renderer, localizationService, ngZone) {
         var _this = this;
         this.host = host;
         this.service = service;
         this.cdr = cdr;
         this.renderer = renderer;
         this.localizationService = localizationService;
+        this.ngZone = ngZone;
         /**
          * @hidden
          */
@@ -228,11 +230,16 @@ var ColorPaletteComponent = /** @class */ (function () {
             var defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
             this.palette = this.palette || defaultPreset;
             this.setRows();
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
         }
     };
     ColorPaletteComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
         this.setHostElementAriaLabel();
+        if (this.value) {
+            this.ngZone.onStable.pipe(operators_1.take(1)).subscribe(function () {
+                _this.selectCell(_this.value);
+            });
+        }
     };
     ColorPaletteComponent.prototype.ngOnDestroy = function () {
         if (this.dynamicRTLSubscription) {
@@ -244,7 +251,7 @@ var ColorPaletteComponent = /** @class */ (function () {
             this.setRows();
         }
         if (changes.palette || changes.value || changes.columns) {
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
+            this.selectCell(this.value);
             this.setHostElementAriaLabel();
         }
     };
@@ -306,7 +313,7 @@ var ColorPaletteComponent = /** @class */ (function () {
      */
     ColorPaletteComponent.prototype.writeValue = function (value) {
         this.value = value;
-        this.focusedCell = this.service.getCellCoordsFor(this.value);
+        this.selectCell(value);
     };
     /**
      * @hidden
@@ -357,6 +364,10 @@ var ColorPaletteComponent = /** @class */ (function () {
         this.focusInComponent = false;
         this.focusedCell = this.selectedCell;
     };
+    ColorPaletteComponent.prototype.selectCell = function (value) {
+        this.selectedCell = this.service.getCellCoordsFor(value);
+        this.focusedCell = this.selectedCell;
+    };
     ColorPaletteComponent.prototype.setRows = function () {
         if (!utils_2.isPresent(this.palette)) {
             return;
@@ -506,7 +517,8 @@ var ColorPaletteComponent = /** @class */ (function () {
             color_palette_service_1.ColorPaletteService,
             core_1.ChangeDetectorRef,
             core_1.Renderer2,
-            kendo_angular_l10n_1.LocalizationService])
+            kendo_angular_l10n_1.LocalizationService,
+            core_1.NgZone])
     ], ColorPaletteComponent);
     return ColorPaletteComponent;
 }());

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1643126640,
+    publishDate: 1644512961,
     version: '',
     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'
 };

package/dist/npm/shared/textarea.directive.js

@@ -129,6 +129,7 @@ var TextAreaDirective = /** @class */ (function () {
         this.control = this.injector.get(forms_1.NgControl, null);
     };
     TextAreaDirective.prototype.ngOnChanges = function (changes) {
+        var _this = this;
         var element = this.element.nativeElement;
         if (changes.value) {
             this.elementValue = this.value;
@@ -144,7 +145,7 @@ var TextAreaDirective = /** @class */ (function () {
                 element.style.height = this.initialHeight + "px";
             }
         }
-        this.resize();
+        this.zone.onStable.pipe(operators_1.take(1)).subscribe(function () { return _this.resize(); });
     };
     TextAreaDirective.prototype.ngOnDestroy = function () {
         this.listeners.forEach(function (listener) { return listener(); });

package/dist/npm/textbox/textbox.component.js

@@ -491,7 +491,7 @@ var TextBoxComponent = /** @class */ (function () {
         get: function () {
             return this.successIcon
                 ? "" + this.successIcon
-                : "k-validation-icon k-icon k-i-check";
+                : "k-input-validation-icon k-icon k-i-check";
         },
         enumerable: true,
         configurable: true
@@ -503,7 +503,7 @@ var TextBoxComponent = /** @class */ (function () {
         get: function () {
             return this.errorIcon
                 ? "" + this.errorIcon
-                : "k-validation-icon k-icon k-i-warning";
+                : "k-input-validation-icon k-icon k-i-warning";
         },
         enumerable: true,
         configurable: true