@progress/kendo-angular-inputs 8.0.5 → 8.0.7-dev.202202251414

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: 1645175564,
+    publishDate: 1645798303,
     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/fesm2015/index.js

@@ -481,7 +481,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645175564,
+    publishDate: 1645798303,
     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'
 };
@@ -8287,6 +8287,8 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.hsva = new BehaviorSubject({});
         this._tabindex = 0;
         this.listeners = [];
+        this.hueSliderTouched = false;
+        this.alphaSliderTouched = false;
         this.updateValues = new Subject();
         this.notifyNgChanged = () => { };
         this.notifyNgTouched = () => { };
@@ -8498,7 +8500,9 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         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
@@ -8508,6 +8512,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         hsva.a = alpha / 100;
         this.hsva.next(hsva);
         this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.alphaSliderTouched = true;
     }
     /**
      * @hidden
@@ -8599,19 +8604,6 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.setAlphaSliderBackground(getColorFromHSV(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;
@@ -8637,6 +8629,28 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         const parsed = parseColor$1(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) => {
@@ -8764,6 +8778,10 @@ __decorate([
     ViewChild('gradientWrapper', { static: false }),
     __metadata("design:type", ElementRef)
 ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
+__decorate([
+    ViewChild('hsvRectangle', { static: false }),
+    __metadata("design:type", ElementRef)
+], ColorGradientComponent.prototype, "hsvRectangle", void 0);
 ColorGradientComponent = ColorGradientComponent_1 = __decorate([
     Component({
         exportAs: 'kendoColorGradient',
@@ -8810,7 +8828,7 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
             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
@@ -8859,9 +8877,9 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
                     [vertical]="true"
                     [min]="0"
                     [max]="360"
+                    [value]="hsva.value.h"
                     [smallStep]="5"
                     [largeStep]="10"
-                    [value]="hsva.value.h"
                     (valueChange)="handleHueSliderChange($event)"
                 >
                 </kendo-slider>
@@ -8895,7 +8913,8 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
             (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">
@@ -9844,6 +9863,7 @@ let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPicke
     }
     ngOnChanges(changes) {
         if (isChanged('value', changes)) {
+            this.selection = this.value;
             this.setHostElementAriaLabel();
         }
         if (isChanged('paletteSettings', changes)) {
@@ -9929,15 +9949,7 @@ let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPicke
      * @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/dist/fesm5/index.js

@@ -514,7 +514,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645175564,
+    publishDate: 1645798303,
     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'
 };
@@ -8429,6 +8429,8 @@ var ColorGradientComponent = /** @class */ (function () {
         this.hsva = new BehaviorSubject({});
         this._tabindex = 0;
         this.listeners = [];
+        this.hueSliderTouched = false;
+        this.alphaSliderTouched = false;
         this.updateValues = new Subject();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
@@ -8688,7 +8690,9 @@ var ColorGradientComponent = /** @class */ (function () {
         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
@@ -8698,6 +8702,7 @@ var ColorGradientComponent = /** @class */ (function () {
         hsva.a = alpha / 100;
         this.hsva.next(hsva);
         this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.alphaSliderTouched = true;
     };
     /**
      * @hidden
@@ -8809,19 +8814,6 @@ var ColorGradientComponent = /** @class */ (function () {
         this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.setAlphaSliderBackground(getColorFromHSV(__assign({}, this.hsva.value, { a: 1 }), this.format, this.opacity));
     };
-    ColorGradientComponent.prototype.updateUI = function () {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
-        var gradientRect = this.gradientRect;
-        var top = (1 - this.hsva.value.v) * gradientRect.height;
-        var left = this.hsva.value.s * gradientRect.width;
-        this.setDragHandleElementPosition(top, left);
-        this.backgroundColor = getColorFromHue(this.hsva.value.h);
-        this.setAlphaSliderBackground(this.backgroundColor);
-        this.setHostElementAriaLabel();
-    };
     ColorGradientComponent.prototype.handleValueChange = function (color) {
         if (this.value === color) {
             return;
@@ -8847,6 +8839,28 @@ var ColorGradientComponent = /** @class */ (function () {
         var parsed = parseColor$1(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', "" + (this.value ? parsed : this.localizationService.get('colorGradientNoColor')));
     };
+    ColorGradientComponent.prototype.setBackgroundColor = function (color) {
+        this.renderer.setStyle(this.hsvRectangle.nativeElement, 'background', color);
+    };
+    ColorGradientComponent.prototype.updateUI = function () {
+        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 });
+        var gradientRect = this.gradientRect;
+        var top = (1 - this.hsva.value.v) * gradientRect.height;
+        var 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();
+    };
     ColorGradientComponent.prototype.addEventListeners = function () {
         var _this = this;
         this.ngZone.runOutsideAngular(function () {
@@ -8976,6 +8990,10 @@ var ColorGradientComponent = /** @class */ (function () {
         ViewChild('gradientWrapper', { static: false }),
         __metadata("design:type", ElementRef)
     ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
+    __decorate([
+        ViewChild('hsvRectangle', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], ColorGradientComponent.prototype, "hsvRectangle", void 0);
     ColorGradientComponent = ColorGradientComponent_1 = __decorate([
         Component({
             exportAs: 'kendoColorGradient',
@@ -9000,7 +9018,7 @@ var ColorGradientComponent = /** @class */ (function () {
                     useValue: 'kendo.colorgradient'
                 }
             ],
-            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [value]=\"hsva.value.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
+            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" #hsvRectangle>\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [value]=\"hsva.value.h\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\"\n            *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
             styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "]
         }),
         __metadata("design:paramtypes", [ElementRef,
@@ -9923,6 +9941,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
     };
     FlatColorPickerComponent.prototype.ngOnChanges = function (changes) {
         if (isChanged('value', changes)) {
+            this.selection = this.value;
             this.setHostElementAriaLabel();
         }
         if (isChanged('paletteSettings', changes)) {
@@ -10013,15 +10032,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     FlatColorPickerComponent.prototype.handleValueChange = function (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/dist/npm/colorpicker/color-gradient.component.js

@@ -96,6 +96,8 @@ var ColorGradientComponent = /** @class */ (function () {
         this.hsva = new rxjs_1.BehaviorSubject({});
         this._tabindex = 0;
         this.listeners = [];
+        this.hueSliderTouched = false;
+        this.alphaSliderTouched = false;
         this.updateValues = new rxjs_1.Subject();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
@@ -355,7 +357,9 @@ var ColorGradientComponent = /** @class */ (function () {
         this.hsva.next(hsva);
         this.handleValueChange(utils_1.getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.backgroundColor = utils_1.getColorFromHue(hue);
+        this.setBackgroundColor(this.backgroundColor);
         this.setAlphaSliderBackground(this.backgroundColor);
+        this.hueSliderTouched = true;
     };
     /**
      * @hidden
@@ -365,6 +369,7 @@ var ColorGradientComponent = /** @class */ (function () {
         hsva.a = alpha / 100;
         this.hsva.next(hsva);
         this.handleValueChange(utils_1.getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.alphaSliderTouched = true;
     };
     /**
      * @hidden
@@ -476,19 +481,6 @@ var ColorGradientComponent = /** @class */ (function () {
         this.updateValues.next(utils_1.getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.setAlphaSliderBackground(utils_1.getColorFromHSV(tslib_1.__assign({}, this.hsva.value, { a: 1 }), this.format, this.opacity));
     };
-    ColorGradientComponent.prototype.updateUI = function () {
-        if (!kendo_angular_common_1.isDocumentAvailable()) {
-            return;
-        }
-        this.hsva.next(this.value ? utils_1.getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
-        var gradientRect = this.gradientRect;
-        var top = (1 - this.hsva.value.v) * gradientRect.height;
-        var left = this.hsva.value.s * gradientRect.width;
-        this.setDragHandleElementPosition(top, left);
-        this.backgroundColor = utils_1.getColorFromHue(this.hsva.value.h);
-        this.setAlphaSliderBackground(this.backgroundColor);
-        this.setHostElementAriaLabel();
-    };
     ColorGradientComponent.prototype.handleValueChange = function (color) {
         if (this.value === color) {
             return;
@@ -514,6 +506,28 @@ var ColorGradientComponent = /** @class */ (function () {
         var parsed = utils_1.parseColor(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', "" + (this.value ? parsed : this.localizationService.get('colorGradientNoColor')));
     };
+    ColorGradientComponent.prototype.setBackgroundColor = function (color) {
+        this.renderer.setStyle(this.hsvRectangle.nativeElement, 'background', color);
+    };
+    ColorGradientComponent.prototype.updateUI = function () {
+        if (!kendo_angular_common_1.isDocumentAvailable()) {
+            return;
+        }
+        if (this.hueSliderTouched || this.alphaSliderTouched) {
+            this.hueSliderTouched = false;
+            this.alphaSliderTouched = false;
+            return;
+        }
+        this.hsva.next(this.value ? utils_1.getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
+        var gradientRect = this.gradientRect;
+        var top = (1 - this.hsva.value.v) * gradientRect.height;
+        var left = this.hsva.value.s * gradientRect.width;
+        this.setDragHandleElementPosition(top, left);
+        this.backgroundColor = utils_1.getColorFromHue(this.hsva.value.h);
+        this.setBackgroundColor(this.backgroundColor);
+        this.setAlphaSliderBackground(this.backgroundColor);
+        this.setHostElementAriaLabel();
+    };
     ColorGradientComponent.prototype.addEventListeners = function () {
         var _this = this;
         this.ngZone.runOutsideAngular(function () {
@@ -643,6 +657,10 @@ var ColorGradientComponent = /** @class */ (function () {
         core_1.ViewChild('gradientWrapper', { static: false }),
         tslib_1.__metadata("design:type", core_1.ElementRef)
     ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('hsvRectangle', { static: false }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], ColorGradientComponent.prototype, "hsvRectangle", void 0);
     ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
         core_1.Component({
             exportAs: 'kendoColorGradient',
@@ -667,7 +685,7 @@ var ColorGradientComponent = /** @class */ (function () {
                     useValue: 'kendo.colorgradient'
                 }
             ],
-            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [value]=\"hsva.value.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
+            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" #hsvRectangle>\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [value]=\"hsva.value.h\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\"\n            *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
             styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "]
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,

package/dist/npm/colorpicker/flatcolorpicker.component.js

@@ -210,6 +210,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
     };
     FlatColorPickerComponent.prototype.ngOnChanges = function (changes) {
         if (kendo_angular_common_1.isChanged('value', changes)) {
+            this.selection = this.value;
             this.setHostElementAriaLabel();
         }
         if (kendo_angular_common_1.isChanged('paletteSettings', changes)) {
@@ -300,15 +301,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     FlatColorPickerComponent.prototype.handleValueChange = function (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/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: 1645175564,
+    publishDate: 1645798303,
     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'
 };