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

package/dist/es/colorpicker/color-gradient.component.js

@@ -94,6 +94,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 () { };
@@ -353,7 +355,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
@@ -363,6 +367,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
@@ -474,19 +479,6 @@ var ColorGradientComponent = /** @class */ (function () {
         this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.setAlphaSliderBackground(getColorFromHSV(tslib_1.__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;
@@ -512,6 +504,28 @@ var ColorGradientComponent = /** @class */ (function () {
         var parsed = 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 (!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 () {
@@ -641,6 +655,10 @@ var ColorGradientComponent = /** @class */ (function () {
         ViewChild('gradientWrapper', { static: false }),
         tslib_1.__metadata("design:type", ElementRef)
     ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
+    tslib_1.__decorate([
+        ViewChild('hsvRectangle', { static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], ColorGradientComponent.prototype, "hsvRectangle", void 0);
     ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
         Component({
             exportAs: 'kendoColorGradient',
@@ -665,7 +683,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", [ElementRef,

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

@@ -208,6 +208,7 @@ var FlatColorPickerComponent = /** @class */ (function () {
     };
     FlatColorPickerComponent.prototype.ngOnChanges = function (changes) {
         if (isChanged('value', changes)) {
+            this.selection = this.value;
             this.setHostElementAriaLabel();
         }
         if (isChanged('paletteSettings', changes)) {
@@ -298,15 +299,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/es/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

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

@@ -112,10 +112,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;
@@ -212,11 +215,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/dist/es2015/colorpicker/color-gradient.component.js

@@ -94,6 +94,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 = () => { };
@@ -305,7 +307,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
@@ -315,6 +319,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
@@ -406,19 +411,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;
@@ -444,6 +436,28 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         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) => {
@@ -571,6 +585,10 @@ tslib_1.__decorate([
     ViewChild('gradientWrapper', { static: false }),
     tslib_1.__metadata("design:type", ElementRef)
 ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
+tslib_1.__decorate([
+    ViewChild('hsvRectangle', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], ColorGradientComponent.prototype, "hsvRectangle", void 0);
 ColorGradientComponent = ColorGradientComponent_1 = tslib_1.__decorate([
     Component({
         exportAs: 'kendoColorGradient',
@@ -617,7 +635,7 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_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
@@ -666,9 +684,9 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_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>
@@ -702,7 +720,8 @@ ColorGradientComponent = ColorGradientComponent_1 = tslib_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">

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

@@ -178,6 +178,7 @@ let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPicke
     }
     ngOnChanges(changes) {
         if (isChanged('value', changes)) {
+            this.selection = this.value;
             this.setHostElementAriaLabel();
         }
         if (isChanged('paletteSettings', changes)) {
@@ -263,15 +264,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