@progress/kendo-angular-inputs 9.0.2 → 9.0.4-dev.202207281411

package/esm2015/colorpicker/color-gradient.component.js

@@ -480,10 +480,10 @@ export class ColorGradientComponent {
                 }
             });
             const dragHandleFocusInListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusin', () => {
-                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-state-focus');
+                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-focus');
             });
             const dragHandleFocusOutListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusout', () => {
-                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-state-focus');
+                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-focus');
             });
             this.listeners.push(focusOutListener, keydownListener, keyupListener, dragHandleFocusInListener, dragHandleFocusOutListener);
         });
@@ -500,7 +500,7 @@ export class ColorGradientComponent {
     }
 }
 ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-state-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -800,7 +800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.aria-readonly']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], gradientId: [{
                 type: HostBinding,
                 args: ['attr.id']

package/esm2015/colorpicker/color-palette.component.js

@@ -352,7 +352,7 @@ export class ColorPaletteComponent {
     }
 }
 ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -383,8 +383,8 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
@@ -440,8 +440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
@@ -502,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.aria-disabled']
             }, {
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], readonlyAttribute: [{
                 type: HostBinding,
                 args: ['attr.aria-readonly']

package/esm2015/colorpicker/flatcolorpicker-header.component.js

@@ -43,7 +43,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                    [ngClass]="activeView === view ? 'k-selected' : ''"
                 >
                     <span
                         class="k-button-icon k-icon"
@@ -93,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                    [ngClass]="activeView === view ? 'k-selected' : ''"
                 >
                     <span
                         class="k-button-icon k-icon"

package/esm2015/colorpicker/flatcolorpicker.component.js

@@ -374,7 +374,7 @@ export class FlatColorPickerComponent {
     }
 }
 FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FlatColorPickerService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-state-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -583,7 +583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-coloreditor']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }, {
                 type: HostBinding,
                 args: ['attr.aria-disabled']

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1654098210,
+    publishDate: 1659017434,
     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/esm2015/sliders-common/slider-base.js

@@ -181,7 +181,7 @@ export class SliderBase {
     }
 }
 SliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-state-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
+SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, decorators: [{
             type: Component,
             args: [{
@@ -232,7 +232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-slider']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], wrapper: [{
                 type: ViewChild,
                 args: ['wrap', { static: true }]

package/esm2015/textarea/textarea.component.js

@@ -321,15 +321,16 @@ export class TextAreaComponent extends TextFieldsBase {
                 this.renderer.removeStyle(hostElement, 'width');
             }
         }
-    }
-    ngAfterViewChecked() {
-        this.resize();
+        if (changes.value) {
+            this.resize();
+        }
     }
     /**
      * @hidden
      */
     writeValue(value) {
         this.value = value;
+        this.resize();
     }
     /**
      * @hidden
@@ -405,12 +406,20 @@ export class TextAreaComponent extends TextFieldsBase {
         if (this.resizable !== 'auto') {
             return;
         }
-        const element = this.input.nativeElement;
-        this.renderer.setStyle(element, 'height', `${this.initialHeight}px`);
-        const scrollHeight = element.scrollHeight;
-        if (scrollHeight > this.initialHeight) {
-            element.style.height = `${scrollHeight}px`;
-        }
+        // The logic of the resize method, does not depend on Angular and thus moving it outisde of it
+        // We need to ensure that the resizing logic runs after the value is updated thus the setTimout
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const hostElement = this.hostElement.nativeElement;
+                const element = this.input.nativeElement;
+                this.renderer.setStyle(element, 'height', `${this.initialHeight}px`);
+                const scrollHeight = element.scrollHeight;
+                this.renderer.setStyle(hostElement, 'min-height', `${scrollHeight}px`);
+                if (scrollHeight > this.initialHeight) {
+                    this.renderer.setStyle(element, 'height', `${scrollHeight}px`);
+                }
+            }, 0);
+        });
     }
     get isFocused() {
         return this._isFocused;

package/fesm2015/kendo-angular-inputs.js

@@ -519,7 +519,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1654098210,
+    publishDate: 1659017434,
     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'
 };
@@ -733,7 +733,7 @@ class SliderBase {
     }
 }
 SliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-state-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
+SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SliderBase, decorators: [{
             type: Component,
             args: [{
@@ -784,7 +784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-slider']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], wrapper: [{
                 type: ViewChild,
                 args: ['wrap', { static: true }]
@@ -7410,15 +7410,16 @@ class TextAreaComponent extends TextFieldsBase {
                 this.renderer.removeStyle(hostElement, 'width');
             }
         }
-    }
-    ngAfterViewChecked() {
-        this.resize();
+        if (changes.value) {
+            this.resize();
+        }
     }
     /**
      * @hidden
      */
     writeValue(value) {
         this.value = value;
+        this.resize();
     }
     /**
      * @hidden
@@ -7494,12 +7495,20 @@ class TextAreaComponent extends TextFieldsBase {
         if (this.resizable !== 'auto') {
             return;
         }
-        const element = this.input.nativeElement;
-        this.renderer.setStyle(element, 'height', `${this.initialHeight}px`);
-        const scrollHeight = element.scrollHeight;
-        if (scrollHeight > this.initialHeight) {
-            element.style.height = `${scrollHeight}px`;
-        }
+        // The logic of the resize method, does not depend on Angular and thus moving it outisde of it
+        // We need to ensure that the resizing logic runs after the value is updated thus the setTimout
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const hostElement = this.hostElement.nativeElement;
+                const element = this.input.nativeElement;
+                this.renderer.setStyle(element, 'height', `${this.initialHeight}px`);
+                const scrollHeight = element.scrollHeight;
+                this.renderer.setStyle(hostElement, 'min-height', `${scrollHeight}px`);
+                if (scrollHeight > this.initialHeight) {
+                    this.renderer.setStyle(element, 'height', `${scrollHeight}px`);
+                }
+            }, 0);
+        });
     }
     get isFocused() {
         return this._isFocused;
@@ -8307,7 +8316,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                    [ngClass]="activeView === view ? 'k-selected' : ''"
                 >
                     <span
                         class="k-button-icon k-icon"
@@ -8357,7 +8366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
                     [attr.aria-pressed]="activeView === view"
-                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                    [ngClass]="activeView === view ? 'k-selected' : ''"
                 >
                     <span
                         class="k-button-icon k-icon"
@@ -9572,10 +9581,10 @@ class ColorGradientComponent {
                 }
             });
             const dragHandleFocusInListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusin', () => {
-                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-state-focus');
+                this.renderer.addClass(this.gradientDragHandle.nativeElement, 'k-focus');
             });
             const dragHandleFocusOutListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusout', () => {
-                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-state-focus');
+                this.renderer.removeClass(this.gradientDragHandle.nativeElement, 'k-focus');
             });
             this.listeners.push(focusOutListener, keydownListener, keyupListener, dragHandleFocusInListener, dragHandleFocusOutListener);
         });
@@ -9592,7 +9601,7 @@ class ColorGradientComponent {
     }
 }
 ColorGradientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-state-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: { id: "id", opacity: "opacity", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -9892,7 +9901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.aria-readonly']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], gradientId: [{
                 type: HostBinding,
                 args: ['attr.id']
@@ -10371,7 +10380,7 @@ class ColorPaletteComponent {
     }
 }
 ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { listeners: { "keydown": "handleKeydown($event)", "blur": "handleHostBlur()" }, properties: { "attr.dir": "this.direction", "attr.id": "this.paletteId", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -10402,8 +10411,8 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
@@ -10459,8 +10468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <tr *ngFor="let row of colorRows; let rowIndex = index">
                         <td *ngFor="let color of row; let colIndex = index"
                             role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
                             [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
                             [attr.aria-label]="color"
                             class="k-colorpalette-tile"
@@ -10521,7 +10530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.aria-disabled']
             }, {
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }], readonlyAttribute: [{
                 type: HostBinding,
                 args: ['attr.aria-readonly']
@@ -10978,7 +10987,7 @@ class FlatColorPickerComponent {
     }
 }
 FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: FlatColorPickerService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-state-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
+FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex" } }, providers: [
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -11187,7 +11196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-coloreditor']
             }], disabledClass: [{
                 type: HostBinding,
-                args: ['class.k-state-disabled']
+                args: ['class.k-disabled']
             }, {
                 type: HostBinding,
                 args: ['attr.aria-disabled']

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "9.0.2",
-  "description": "Inputs Package for Angular",
+  "version": "9.0.4-dev.202207281411",
+  "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
   "homepage": "https://www.telerik.com/kendo-angular-ui/components/",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@progress/kendo-common": "^0.2.1",
     "@progress/kendo-schematics": "^3.0.0",
-    "@telerik/kendo-draggable": "^2.0.0",
+    "@progress/kendo-draggable": "^3.0.0",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
@@ -81,11 +81,11 @@
     "fallbackTags": {
       "dev": "latest"
     },
-    "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits",
+    "analyzeCommits": "@progress/semantic-prerelease/analyzeCommits",
     "generateNotes": "@progress/kendo-angular-tasks/lib/generateNotes",
-    "getLastRelease": "@telerik/semantic-prerelease/getLastRelease",
-    "verifyConditions": "@telerik/semantic-prerelease/verifyConditions",
-    "verifyRelease": "@telerik/semantic-prerelease/verifyRelease"
+    "getLastRelease": "@progress/semantic-prerelease/getLastRelease",
+    "verifyConditions": "@progress/semantic-prerelease/verifyConditions",
+    "verifyRelease": "@progress/semantic-prerelease/verifyRelease"
   },
   "main": "bundles/kendo-angular-inputs.umd.js",
   "module": "fesm2015/kendo-angular-inputs.js",

package/textarea/textarea.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, NgZone, Renderer2, ChangeDetectorRef, Injector, AfterViewChecked } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, Renderer2, ChangeDetectorRef, Injector } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { TextFieldsBase } from '../text-fields-common/text-fields-base';
@@ -13,7 +13,7 @@ import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
  */
-export declare class TextAreaComponent extends TextFieldsBase implements ControlValueAccessor, AfterViewChecked {
+export declare class TextAreaComponent extends TextFieldsBase implements ControlValueAccessor {
     protected localizationService: LocalizationService;
     protected ngZone: NgZone;
     protected changeDetector: ChangeDetectorRef;
@@ -162,7 +162,6 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
     ngAfterViewInit(): void;
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
-    ngAfterViewChecked(): void;
     /**
      * @hidden
      */