@progress/kendo-angular-inputs 9.0.0-next.202202161022 → 9.0.0-next.202203101134

package/colorpicker/color-gradient.component.d.ts

@@ -116,10 +116,13 @@ export declare class ColorGradientComponent implements OnChanges, OnDestroy, Con
     inputs: ColorInputComponent;
     private alphaSlider;
     private gradientWrapper;
+    private hsvRectangle;
     private _value;
     private _tabindex;
     private _contrastTool;
     private listeners;
+    private hueSliderTouched;
+    private alphaSliderTouched;
     private updateValues;
     private changeRequestsSubscription;
     private dynamicRTLSubscription;
@@ -216,11 +219,12 @@ export declare class ColorGradientComponent implements OnChanges, OnDestroy, Con
     private notifyNgChanged;
     private notifyNgTouched;
     private moveDragHandle;
-    private updateUI;
     private handleValueChange;
     private setDragHandleElementPosition;
     private setAlphaSliderBackground;
     private setHostElementAriaLabel;
+    private setBackgroundColor;
+    private updateUI;
     private addEventListeners;
     private subscribeChanges;
     private unsubscribeChanges;

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

@@ -99,6 +99,8 @@ export class ColorGradientComponent {
         this.hsva = new BehaviorSubject({});
         this._tabindex = 0;
         this.listeners = [];
+        this.hueSliderTouched = false;
+        this.alphaSliderTouched = false;
         this.updateValues = new Subject();
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
@@ -310,7 +312,9 @@ export class ColorGradientComponent {
         this.hsva.next(hsva);
         this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.backgroundColor = getColorFromHue(hue);
+        this.setBackgroundColor(this.backgroundColor);
         this.setAlphaSliderBackground(this.backgroundColor);
+        this.hueSliderTouched = true;
     }
     /**
      * @hidden
@@ -320,6 +324,7 @@ export class ColorGradientComponent {
         hsva.a = alpha / 100;
         this.hsva.next(hsva);
         this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.alphaSliderTouched = true;
     }
     /**
      * @hidden
@@ -411,19 +416,6 @@ export class ColorGradientComponent {
         this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.setAlphaSliderBackground(getColorFromHSV(Object.assign(Object.assign({}, this.hsva.value), { a: 1 }), this.format, this.opacity));
     }
-    updateUI() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
-        const gradientRect = this.gradientRect;
-        const top = (1 - this.hsva.value.v) * gradientRect.height;
-        const left = this.hsva.value.s * gradientRect.width;
-        this.setDragHandleElementPosition(top, left);
-        this.backgroundColor = getColorFromHue(this.hsva.value.h);
-        this.setAlphaSliderBackground(this.backgroundColor);
-        this.setHostElementAriaLabel();
-    }
     handleValueChange(color) {
         if (this.value === color) {
             return;
@@ -449,6 +441,28 @@ export class ColorGradientComponent {
         const parsed = parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
     }
+    setBackgroundColor(color) {
+        this.renderer.setStyle(this.hsvRectangle.nativeElement, 'background', color);
+    }
+    updateUI() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (this.hueSliderTouched || this.alphaSliderTouched) {
+            this.hueSliderTouched = false;
+            this.alphaSliderTouched = false;
+            return;
+        }
+        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
+        const gradientRect = this.gradientRect;
+        const top = (1 - this.hsva.value.v) * gradientRect.height;
+        const left = this.hsva.value.s * gradientRect.width;
+        this.setDragHandleElementPosition(top, left);
+        this.backgroundColor = getColorFromHue(this.hsva.value.h);
+        this.setBackgroundColor(this.backgroundColor);
+        this.setAlphaSliderBackground(this.backgroundColor);
+        this.setHostElementAriaLabel();
+    }
     addEventListeners() {
         this.ngZone.runOutsideAngular(() => {
             const focusOutListener = this.renderer.listen(this.host.nativeElement, 'focusout', (event) => {
@@ -505,7 +519,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: L10N_PREFIX,
             useValue: 'kendo.colorgradient'
         }
-    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true, read: ElementRef }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true, read: ElementRef }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorGradientLocalizedMessages
             i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
             colorGradientNoColor="Colorgradient no color chosen"
@@ -527,7 +541,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             formatButton="Change color format">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
-            <div class="k-hsv-rectangle" [style.background]="backgroundColor">
+            <div class="k-hsv-rectangle" #hsvRectangle>
                 <div
                     #gradientWrapper
                     kendoDraggable
@@ -576,9 +590,9 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
+                    [value]="hsva.value.h"
                     [smallStep]="5"
                     [largeStep]="10"
-                    [value]="hsva.value.h"
                     (valueChange)="handleHueSliderChange($event)"
                 >
                 </kendo-slider>
@@ -612,7 +626,8 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             (valueChange)="handleInputsValueChange($event)"
         >
         </kendo-colorinput>
-        <div class="k-colorgradient-color-contrast k-vbox" *ngIf="contrastToolVisible"
+        <div class="k-colorgradient-color-contrast k-vbox"
+            *ngIf="contrastToolVisible"
             kendoContrastTool
             [value]="value"
             [ratio]="contrastTool">
@@ -665,7 +680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             formatButton="Change color format">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
-            <div class="k-hsv-rectangle" [style.background]="backgroundColor">
+            <div class="k-hsv-rectangle" #hsvRectangle>
                 <div
                     #gradientWrapper
                     kendoDraggable
@@ -714,9 +729,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
+                    [value]="hsva.value.h"
                     [smallStep]="5"
                     [largeStep]="10"
-                    [value]="hsva.value.h"
                     (valueChange)="handleHueSliderChange($event)"
                 >
                 </kendo-slider>
@@ -750,7 +765,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (valueChange)="handleInputsValueChange($event)"
         >
         </kendo-colorinput>
-        <div class="k-colorgradient-color-contrast k-vbox" *ngIf="contrastToolVisible"
+        <div class="k-colorgradient-color-contrast k-vbox"
+            *ngIf="contrastToolVisible"
             kendoContrastTool
             [value]="value"
             [ratio]="contrastTool">
@@ -828,4 +844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], gradientWrapper: [{
                 type: ViewChild,
                 args: ['gradientWrapper', { static: false }]
+            }], hsvRectangle: [{
+                type: ViewChild,
+                args: ['hsvRectangle', { static: false }]
             }] } });

package/esm2015/colorpicker/flatcolorpicker.component.js

@@ -182,6 +182,7 @@ export class FlatColorPickerComponent {
     }
     ngOnChanges(changes) {
         if (isChanged('value', changes)) {
+            this.selection = this.value;
             this.setHostElementAriaLabel();
         }
         if (isChanged('paletteSettings', changes)) {
@@ -267,15 +268,7 @@ export class FlatColorPickerComponent {
      * @hidden
      */
     handleValueChange(color) {
-        if (this.value === color) {
-            return;
-        }
-        if (this.preview) {
-            this.changeCurrentValue(color);
-        }
-        else {
-            this.setFlatColorPickerValue(color);
-        }
+        this.preview ? this.changeCurrentValue(color) : this.setFlatColorPickerValue(color);
     }
     /**
      * @hidden

package/esm2015/main.js

@@ -29,7 +29,6 @@ export { ColorGradientComponent } from './colorpicker/color-gradient.component';
 export { ColorPickerModule } from './colorpicker.module';
 export * from './colorpicker/events';
 export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
-export { ColorPickerCancelEvent } from './colorpicker/events';
 export { CheckBoxDirective } from './checkbox/checkbox.directive';
 export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
 export { HintComponent } from './formfield/hint.component';

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: 1645006768,
+    publishDate: 1646911953,
     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/shared/textarea.directive.js

@@ -204,7 +204,7 @@ export class TextAreaDirective {
     }
 }
 TextAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TextAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.elementClasses", "class.k-input": "this.elementClasses", "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
+TextAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.elementClasses", "class.k-input": "this.elementClasses", "class.k-input-md": "this.elementClasses", "class.k-rounded-md": "this.elementClasses", "class.k-input-solid": "this.elementClasses", "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TextAreaDirective),
             multi: true
@@ -236,6 +236,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-input']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-rounded-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input-solid']
             }], autofillClass: [{
                 type: HostBinding,
                 args: ['class.k-autofill']

package/esm2015/textarea/textarea.component.js

@@ -299,11 +299,11 @@ export class TextAreaComponent extends TextFieldsBase {
         }
         if (changes.resizable) {
             if (this.resizable === 'auto') {
+                this.renderer.removeClass(element, '\!k-overflow-y-auto');
                 this.initialHeight = element.offsetHeight;
             }
             else {
-                this.renderer.setStyle(element, 'overflow-y', 'auto');
-                this.renderer.setStyle(element, 'resize', 'both');
+                this.renderer.addClass(element, '\!k-overflow-y-auto');
                 element.style.height = `${this.initialHeight}px`;
             }
         }
@@ -400,7 +400,6 @@ export class TextAreaComponent extends TextFieldsBase {
             return;
         }
         const element = this.input.nativeElement;
-        this.renderer.setStyle(element, 'overflow-y', 'hidden');
         this.renderer.setStyle(element, 'height', `${this.initialHeight}px`);
         const scrollHeight = element.scrollHeight;
         if (scrollHeight > this.initialHeight) {
@@ -455,9 +454,9 @@ export class TextAreaComponent extends TextFieldsBase {
         const hostElement = this.hostElement.nativeElement;
         const element = this.input.nativeElement;
         const suffix = hostElement.children[1];
-        this.renderer.setStyle(element, 'flex', isVertical ? 'none' : '1');
+        this.renderer[isVertical ? 'addClass' : 'removeClass'](element, '\!k-flex-none');
         if (suffix) {
-            this.renderer.setStyle(suffix, 'align-items', isVertical ? 'center' : 'start');
+            this.renderer[isVertical ? 'removeClass' : 'addClass'](suffix, '\!k-align-items-start');
         }
     }
 }
@@ -495,7 +494,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 input: handleInput}">
             </textarea>
             <ng-content select="kendo-textarea-suffix"></ng-content>
-    `, isInline: true, styles: ["\n        :host {\n            display: inline-flex;\n        }\n    "], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{
@@ -535,12 +534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 input: handleInput}">
             </textarea>
             <ng-content select="kendo-textarea-suffix"></ng-content>
-    `,
-                    styles: [`
-        :host {
-            display: inline-flex;
-        }
-    `]
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
                 type: Input

package/esm2015/textbox/textbox.directive.js

@@ -88,7 +88,7 @@ export class TextBoxDirective {
     }
 }
 TextBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-TextBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses" } }, providers: [{
+TextBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-input-md": "this.hostClasses", "class.k-rounded-md": "this.hostClasses", "class.k-input-solid": "this.hostClasses" } }, providers: [{
             provide: KendoInput,
             useExisting: forwardRef(() => TextBoxDirective)
         }], ngImport: i0 });
@@ -107,6 +107,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-input']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-rounded-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input-solid']
             }], value: [{
                 type: Input
             }] } });

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: 1645006768,
+    publishDate: 1646911953,
     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'
 };
@@ -2854,7 +2854,7 @@ class TextBoxDirective {
     }
 }
 TextBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-TextBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses" } }, providers: [{
+TextBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextBoxDirective, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-input-md": "this.hostClasses", "class.k-rounded-md": "this.hostClasses", "class.k-input-solid": "this.hostClasses" } }, providers: [{
             provide: KendoInput,
             useExisting: forwardRef(() => TextBoxDirective)
         }], ngImport: i0 });
@@ -2873,6 +2873,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-input']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-rounded-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input-solid']
             }], value: [{
                 type: Input
             }] } });
@@ -3071,7 +3080,7 @@ class TextAreaDirective {
     }
 }
 TextAreaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TextAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.elementClasses", "class.k-input": "this.elementClasses", "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
+TextAreaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TextAreaDirective, selector: "textarea[kendoTextArea]", inputs: { autoSize: "autoSize", value: "value" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.elementClasses", "class.k-input": "this.elementClasses", "class.k-input-md": "this.elementClasses", "class.k-rounded-md": "this.elementClasses", "class.k-input-solid": "this.elementClasses", "class.k-autofill": "this.autofillClass", "attr.dir": "this.direction" } }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TextAreaDirective),
             multi: true
@@ -3103,6 +3112,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-input']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-rounded-md']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input-solid']
             }], autofillClass: [{
                 type: HostBinding,
                 args: ['class.k-autofill']
@@ -7323,11 +7341,11 @@ class TextAreaComponent extends TextFieldsBase {
         }
         if (changes.resizable) {
             if (this.resizable === 'auto') {
+                this.renderer.removeClass(element, '\!k-overflow-y-auto');
                 this.initialHeight = element.offsetHeight;
             }
             else {
-                this.renderer.setStyle(element, 'overflow-y', 'auto');
-                this.renderer.setStyle(element, 'resize', 'both');
+                this.renderer.addClass(element, '\!k-overflow-y-auto');
                 element.style.height = `${this.initialHeight}px`;
             }
         }
@@ -7424,7 +7442,6 @@ class TextAreaComponent extends TextFieldsBase {
             return;
         }
         const element = this.input.nativeElement;
-        this.renderer.setStyle(element, 'overflow-y', 'hidden');
         this.renderer.setStyle(element, 'height', `${this.initialHeight}px`);
         const scrollHeight = element.scrollHeight;
         if (scrollHeight > this.initialHeight) {
@@ -7479,9 +7496,9 @@ class TextAreaComponent extends TextFieldsBase {
         const hostElement = this.hostElement.nativeElement;
         const element = this.input.nativeElement;
         const suffix = hostElement.children[1];
-        this.renderer.setStyle(element, 'flex', isVertical ? 'none' : '1');
+        this.renderer[isVertical ? 'addClass' : 'removeClass'](element, '\!k-flex-none');
         if (suffix) {
-            this.renderer.setStyle(suffix, 'align-items', isVertical ? 'center' : 'start');
+            this.renderer[isVertical ? 'removeClass' : 'addClass'](suffix, '\!k-align-items-start');
         }
     }
 }
@@ -7519,7 +7536,7 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 input: handleInput}">
             </textarea>
             <ng-content select="kendo-textarea-suffix"></ng-content>
-    `, isInline: true, styles: ["\n        :host {\n            display: inline-flex;\n        }\n    "], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{
@@ -7559,12 +7576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 input: handleInput}">
             </textarea>
             <ng-content select="kendo-textarea-suffix"></ng-content>
-    `,
-                    styles: [`
-        :host {
-            display: inline-flex;
-        }
-    `]
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
                 type: Input
@@ -9120,6 +9132,8 @@ class ColorGradientComponent {
         this.hsva = new BehaviorSubject({});
         this._tabindex = 0;
         this.listeners = [];
+        this.hueSliderTouched = false;
+        this.alphaSliderTouched = false;
         this.updateValues = new Subject();
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
@@ -9331,7 +9345,9 @@ class ColorGradientComponent {
         this.hsva.next(hsva);
         this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.backgroundColor = getColorFromHue(hue);
+        this.setBackgroundColor(this.backgroundColor);
         this.setAlphaSliderBackground(this.backgroundColor);
+        this.hueSliderTouched = true;
     }
     /**
      * @hidden
@@ -9341,6 +9357,7 @@ class ColorGradientComponent {
         hsva.a = alpha / 100;
         this.hsva.next(hsva);
         this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.alphaSliderTouched = true;
     }
     /**
      * @hidden
@@ -9432,19 +9449,6 @@ class ColorGradientComponent {
         this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.setAlphaSliderBackground(getColorFromHSV(Object.assign(Object.assign({}, this.hsva.value), { a: 1 }), this.format, this.opacity));
     }
-    updateUI() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
-        const gradientRect = this.gradientRect;
-        const top = (1 - this.hsva.value.v) * gradientRect.height;
-        const left = this.hsva.value.s * gradientRect.width;
-        this.setDragHandleElementPosition(top, left);
-        this.backgroundColor = getColorFromHue(this.hsva.value.h);
-        this.setAlphaSliderBackground(this.backgroundColor);
-        this.setHostElementAriaLabel();
-    }
     handleValueChange(color) {
         if (this.value === color) {
             return;
@@ -9470,6 +9474,28 @@ class ColorGradientComponent {
         const parsed = parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
     }
+    setBackgroundColor(color) {
+        this.renderer.setStyle(this.hsvRectangle.nativeElement, 'background', color);
+    }
+    updateUI() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (this.hueSliderTouched || this.alphaSliderTouched) {
+            this.hueSliderTouched = false;
+            this.alphaSliderTouched = false;
+            return;
+        }
+        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
+        const gradientRect = this.gradientRect;
+        const top = (1 - this.hsva.value.v) * gradientRect.height;
+        const left = this.hsva.value.s * gradientRect.width;
+        this.setDragHandleElementPosition(top, left);
+        this.backgroundColor = getColorFromHue(this.hsva.value.h);
+        this.setBackgroundColor(this.backgroundColor);
+        this.setAlphaSliderBackground(this.backgroundColor);
+        this.setHostElementAriaLabel();
+    }
     addEventListeners() {
         this.ngZone.runOutsideAngular(() => {
             const focusOutListener = this.renderer.listen(this.host.nativeElement, 'focusout', (event) => {
@@ -9526,7 +9552,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: L10N_PREFIX,
             useValue: 'kendo.colorgradient'
         }
-    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true, read: ElementRef }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
+    ], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true, read: ElementRef }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorGradientLocalizedMessages
             i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
             colorGradientNoColor="Colorgradient no color chosen"
@@ -9548,7 +9574,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             formatButton="Change color format">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
-            <div class="k-hsv-rectangle" [style.background]="backgroundColor">
+            <div class="k-hsv-rectangle" #hsvRectangle>
                 <div
                     #gradientWrapper
                     kendoDraggable
@@ -9597,9 +9623,9 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
+                    [value]="hsva.value.h"
                     [smallStep]="5"
                     [largeStep]="10"
-                    [value]="hsva.value.h"
                     (valueChange)="handleHueSliderChange($event)"
                 >
                 </kendo-slider>
@@ -9633,7 +9659,8 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             (valueChange)="handleInputsValueChange($event)"
         >
         </kendo-colorinput>
-        <div class="k-colorgradient-color-contrast k-vbox" *ngIf="contrastToolVisible"
+        <div class="k-colorgradient-color-contrast k-vbox"
+            *ngIf="contrastToolVisible"
             kendoContrastTool
             [value]="value"
             [ratio]="contrastTool">
@@ -9686,7 +9713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             formatButton="Change color format">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
-            <div class="k-hsv-rectangle" [style.background]="backgroundColor">
+            <div class="k-hsv-rectangle" #hsvRectangle>
                 <div
                     #gradientWrapper
                     kendoDraggable
@@ -9735,9 +9762,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
+                    [value]="hsva.value.h"
                     [smallStep]="5"
                     [largeStep]="10"
-                    [value]="hsva.value.h"
                     (valueChange)="handleHueSliderChange($event)"
                 >
                 </kendo-slider>
@@ -9771,7 +9798,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             (valueChange)="handleInputsValueChange($event)"
         >
         </kendo-colorinput>
-        <div class="k-colorgradient-color-contrast k-vbox" *ngIf="contrastToolVisible"
+        <div class="k-colorgradient-color-contrast k-vbox"
+            *ngIf="contrastToolVisible"
             kendoContrastTool
             [value]="value"
             [ratio]="contrastTool">
@@ -9849,6 +9877,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], gradientWrapper: [{
                 type: ViewChild,
                 args: ['gradientWrapper', { static: false }]
+            }], hsvRectangle: [{
+                type: ViewChild,
+                args: ['hsvRectangle', { static: false }]
             }] } });
 
 /**
@@ -10695,6 +10726,7 @@ class FlatColorPickerComponent {
     }
     ngOnChanges(changes) {
         if (isChanged('value', changes)) {
+            this.selection = this.value;
             this.setHostElementAriaLabel();
         }
         if (isChanged('paletteSettings', changes)) {
@@ -10780,15 +10812,7 @@ class FlatColorPickerComponent {
      * @hidden
      */
     handleValueChange(color) {
-        if (this.value === color) {
-            return;
-        }
-        if (this.preview) {
-            this.changeCurrentValue(color);
-        }
-        else {
-            this.setFlatColorPickerValue(color);
-        }
+        this.preview ? this.changeCurrentValue(color) : this.setFlatColorPickerValue(color);
     }
     /**
      * @hidden

package/main.d.ts

@@ -37,7 +37,6 @@ export { ColorPickerView } from './colorpicker/models';
 export { GradientSettings } from './colorpicker/models';
 export { FlatColorPickerComponent } from './colorpicker/flatcolorpicker.component';
 export { ColorPickerActionsLayout } from './colorpicker/models/actions-layout';
-export { ColorPickerCancelEvent } from './colorpicker/events';
 export { CheckBoxDirective } from './checkbox/checkbox.directive';
 export { RadioButtonDirective } from './radiobutton/radiobutton.directive';
 export { HintComponent } from './formfield/hint.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-inputs",
-  "version": "9.0.0-next.202202161022",
+  "version": "9.0.0-next.202203101134",
   "description": "Inputs Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",