@progress/kendo-angular-inputs 8.0.2-dev.202201241505 → 8.0.3-dev.202202071301

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: 1643036475,
+    publishDate: 1644238730,
     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/textarea/textarea-suffix.component.js

@@ -44,7 +44,7 @@ let TextAreaSuffixComponent = class TextAreaSuffixComponent {
     }
 };
 tslib_1.__decorate([
-    HostBinding('class.k-textarea-suffix'),
+    HostBinding('class.k-input-suffix'),
     tslib_1.__metadata("design:type", Boolean)
 ], TextAreaSuffixComponent.prototype, "hostClass", void 0);
 TextAreaSuffixComponent = tslib_1.__decorate([

package/dist/es2015/textarea/textarea.component.d.ts

@@ -210,4 +210,5 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
     private setSelection;
     private selectAll;
     private handleClasses;
+    private handleFlow;
 }

package/dist/es2015/textarea/textarea.component.js

@@ -268,6 +268,7 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
                     tabbing = false;
                 }
             }));
+            this.handleFlow();
         });
         const stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(input => {
@@ -291,6 +292,9 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
     ngOnChanges(changes) {
         const hostElement = this.hostElement.nativeElement;
         const element = this.input.nativeElement;
+        if (changes.flow) {
+            this.handleFlow();
+        }
         if (changes.resizable) {
             if (this.resizable === 'auto') {
                 this.initialHeight = element.offsetHeight;
@@ -444,6 +448,16 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
+    handleFlow() {
+        const isVertical = this.flow === 'vertical';
+        const hostElement = this.hostElement.nativeElement;
+        const element = this.input.nativeElement;
+        const suffix = hostElement.children[1];
+        this.renderer.setStyle(element, 'flex', isVertical ? 'none' : '1');
+        if (suffix) {
+            this.renderer.setStyle(suffix, 'align-items', isVertical ? 'center' : 'start');
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -455,12 +469,12 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean)
 ], TextAreaComponent.prototype, "hostClasses", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-flex-col'),
+    HostBinding('class.\!k-flex-col'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], TextAreaComponent.prototype, "flowCol", null);
 tslib_1.__decorate([
-    HostBinding('class.k-flex-row'),
+    HostBinding('class.\!k-flex-row'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], TextAreaComponent.prototype, "flowRow", null);
@@ -560,11 +574,8 @@ TextAreaComponent = TextAreaComponent_1 = tslib_1.__decorate([
             <ng-content select="kendo-textarea-suffix"></ng-content>
     `,
         styles: [`
-        :host(.k-flex-col) {
-            flex-direction: column !important;
-        }
-        :host(.k-flex-row) {
-            flex-direction: row !important;
+        :host {
+            display: inline-flex;
         }
     `]
     }),

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: 1643036475,
+    publishDate: 1644238730,
     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
@@ -7039,6 +7039,7 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
                     tabbing = false;
                 }
             }));
+            this.handleFlow();
         });
         const stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(input => {
@@ -7062,6 +7063,9 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
     ngOnChanges(changes) {
         const hostElement = this.hostElement.nativeElement;
         const element = this.input.nativeElement;
+        if (changes.flow) {
+            this.handleFlow();
+        }
         if (changes.resizable) {
             if (this.resizable === 'auto') {
                 this.initialHeight = element.offsetHeight;
@@ -7215,6 +7219,16 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
+    handleFlow() {
+        const isVertical = this.flow === 'vertical';
+        const hostElement = this.hostElement.nativeElement;
+        const element = this.input.nativeElement;
+        const suffix = hostElement.children[1];
+        this.renderer.setStyle(element, 'flex', isVertical ? 'none' : '1');
+        if (suffix) {
+            this.renderer.setStyle(suffix, 'align-items', isVertical ? 'center' : 'start');
+        }
+    }
 };
 __decorate([
     Input(),
@@ -7226,12 +7240,12 @@ __decorate([
     __metadata("design:type", Boolean)
 ], TextAreaComponent.prototype, "hostClasses", void 0);
 __decorate([
-    HostBinding('class.k-flex-col'),
+    HostBinding('class.\!k-flex-col'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], TextAreaComponent.prototype, "flowCol", null);
 __decorate([
-    HostBinding('class.k-flex-row'),
+    HostBinding('class.\!k-flex-row'),
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], TextAreaComponent.prototype, "flowRow", null);
@@ -7331,11 +7345,8 @@ TextAreaComponent = TextAreaComponent_1 = __decorate([
             <ng-content select="kendo-textarea-suffix"></ng-content>
     `,
         styles: [`
-        :host(.k-flex-col) {
-            flex-direction: column !important;
-        }
-        :host(.k-flex-row) {
-            flex-direction: row !important;
+        :host {
+            display: inline-flex;
         }
     `]
     }),
@@ -7387,7 +7398,7 @@ let TextAreaSuffixComponent = class TextAreaSuffixComponent {
     }
 };
 __decorate([
-    HostBinding('class.k-textarea-suffix'),
+    HostBinding('class.k-input-suffix'),
     __metadata("design:type", Boolean)
 ], TextAreaSuffixComponent.prototype, "hostClass", void 0);
 TextAreaSuffixComponent = __decorate([

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: 1643036475,
+    publishDate: 1644238730,
     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
@@ -7252,6 +7253,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
                     tabbing = false;
                 }
             }));
+            _this.handleFlow();
         });
         var stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(function (input) {
@@ -7277,6 +7279,9 @@ var TextAreaComponent = /** @class */ (function (_super) {
     TextAreaComponent.prototype.ngOnChanges = function (changes) {
         var hostElement = this.hostElement.nativeElement;
         var element = this.input.nativeElement;
+        if (changes.flow) {
+            this.handleFlow();
+        }
         if (changes.resizable) {
             if (this.resizable === 'auto') {
                 this.initialHeight = element.offsetHeight;
@@ -7440,6 +7445,16 @@ var TextAreaComponent = /** @class */ (function (_super) {
             this.renderer.addClass(elem, classes.toAdd);
         }
     };
+    TextAreaComponent.prototype.handleFlow = function () {
+        var isVertical = this.flow === 'vertical';
+        var hostElement = this.hostElement.nativeElement;
+        var element = this.input.nativeElement;
+        var suffix = hostElement.children[1];
+        this.renderer.setStyle(element, 'flex', isVertical ? 'none' : '1');
+        if (suffix) {
+            this.renderer.setStyle(suffix, 'align-items', isVertical ? 'center' : 'start');
+        }
+    };
     var TextAreaComponent_1;
     __decorate([
         Input(),
@@ -7451,12 +7466,12 @@ var TextAreaComponent = /** @class */ (function (_super) {
         __metadata("design:type", Boolean)
     ], TextAreaComponent.prototype, "hostClasses", void 0);
     __decorate([
-        HostBinding('class.k-flex-col'),
+        HostBinding('class.\!k-flex-col'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], TextAreaComponent.prototype, "flowCol", null);
     __decorate([
-        HostBinding('class.k-flex-row'),
+        HostBinding('class.\!k-flex-row'),
         __metadata("design:type", Boolean),
         __metadata("design:paramtypes", [])
     ], TextAreaComponent.prototype, "flowRow", null);
@@ -7531,7 +7546,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
             ],
             selector: 'kendo-textarea',
             template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input-inner\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    ",
-            styles: ["\n        :host(.k-flex-col) {\n            flex-direction: column !important;\n        }\n        :host(.k-flex-row) {\n            flex-direction: row !important;\n        }\n    "]
+            styles: ["\n        :host {\n            display: inline-flex;\n        }\n    "]
         }),
         __metadata("design:paramtypes", [LocalizationService,
             NgZone,
@@ -7565,7 +7580,7 @@ var TextAreaSuffixComponent = /** @class */ (function () {
         this.hostClass = true;
     }
     __decorate([
-        HostBinding('class.k-textarea-suffix'),
+        HostBinding('class.k-input-suffix'),
         __metadata("design:type", Boolean)
     ], TextAreaSuffixComponent.prototype, "hostClass", void 0);
     TextAreaSuffixComponent = __decorate([

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: 1643036475,
+    publishDate: 1644238730,
     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/textarea/textarea-suffix.component.js

@@ -28,7 +28,7 @@ var TextAreaSuffixComponent = /** @class */ (function () {
         this.hostClass = true;
     }
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-textarea-suffix'),
+        core_1.HostBinding('class.k-input-suffix'),
         tslib_1.__metadata("design:type", Boolean)
     ], TextAreaSuffixComponent.prototype, "hostClass", void 0);
     TextAreaSuffixComponent = tslib_1.__decorate([

package/dist/npm/textarea/textarea.component.js

@@ -297,6 +297,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
                     tabbing = false;
                 }
             }));
+            _this.handleFlow();
         });
         var stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(function (input) {
@@ -322,6 +323,9 @@ var TextAreaComponent = /** @class */ (function (_super) {
     TextAreaComponent.prototype.ngOnChanges = function (changes) {
         var hostElement = this.hostElement.nativeElement;
         var element = this.input.nativeElement;
+        if (changes.flow) {
+            this.handleFlow();
+        }
         if (changes.resizable) {
             if (this.resizable === 'auto') {
                 this.initialHeight = element.offsetHeight;
@@ -485,6 +489,16 @@ var TextAreaComponent = /** @class */ (function (_super) {
             this.renderer.addClass(elem, classes.toAdd);
         }
     };
+    TextAreaComponent.prototype.handleFlow = function () {
+        var isVertical = this.flow === 'vertical';
+        var hostElement = this.hostElement.nativeElement;
+        var element = this.input.nativeElement;
+        var suffix = hostElement.children[1];
+        this.renderer.setStyle(element, 'flex', isVertical ? 'none' : '1');
+        if (suffix) {
+            this.renderer.setStyle(suffix, 'align-items', isVertical ? 'center' : 'start');
+        }
+    };
     var TextAreaComponent_1;
     tslib_1.__decorate([
         core_1.Input(),
@@ -496,12 +510,12 @@ var TextAreaComponent = /** @class */ (function (_super) {
         tslib_1.__metadata("design:type", Boolean)
     ], TextAreaComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-flex-col'),
+        core_1.HostBinding('class.\!k-flex-col'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], TextAreaComponent.prototype, "flowCol", null);
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-flex-row'),
+        core_1.HostBinding('class.\!k-flex-row'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], TextAreaComponent.prototype, "flowRow", null);
@@ -576,7 +590,7 @@ var TextAreaComponent = /** @class */ (function (_super) {
             ],
             selector: 'kendo-textarea',
             template: "\n        <textarea\n            #input\n            [attr.aria-multiline]=\"true\"\n            [attr.aria-disabled]=\"disabled ? true : undefined\"\n            [attr.aria-readonly]=\"readonly ? true : undefined\"\n            class=\"k-input-inner\"\n            [ngClass]=\"resizableClass\"\n            [id]=\"focusableId\"\n            [value]=\"value\"\n            [attr.placeholder]=\"placeholder\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [attr.rows]=\"rows\"\n            [attr.cols]=\"cols\"\n            [attr.tabindex]=\"tabIndex\"\n            [attr.title]=\"title\"\n            [attr.maxlength]=\"maxlength\"\n            [kendoEventsOutsideAngular]=\"{\n                focus: handleInputFocus,\n                blur: handleInputBlur,\n                input: handleInput}\">\n            </textarea>\n            <ng-content select=\"kendo-textarea-suffix\"></ng-content>\n    ",
-            styles: ["\n        :host(.k-flex-col) {\n            flex-direction: column !important;\n        }\n        :host(.k-flex-row) {\n            flex-direction: row !important;\n        }\n    "]
+            styles: ["\n        :host {\n            display: inline-flex;\n        }\n    "]
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
             core_1.NgZone,

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