@progress/kendo-angular-inputs 7.5.2-dev.202111191702 → 8.0.0-dev.202112251033

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

@@ -7,64 +7,94 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
+var flatcolorpicker_component_1 = require("./flatcolorpicker.component");
 var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
-var package_metadata_1 = require("../package-metadata");
-var models_1 = require("./models");
-var color_parser_1 = require("./utils/color-parser");
-var utils_1 = require("../common/utils");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
-var palette_presets_1 = require("./utils/palette-presets");
+var package_metadata_1 = require("../package-metadata");
+var models_1 = require("./models");
+var events_1 = require("./events");
+var utils_1 = require("./utils");
+var utils_2 = require("../common/utils");
 var colorpicker_localization_service_1 = require("./localization/colorpicker-localization.service");
-var color_gradient_component_1 = require("./color-gradient.component");
-var DEFAULT_PRESET = 'office';
-var DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+var constants_1 = require("./constants");
 var serial = 0;
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
- * Designed to replace the `<input type="color">` HTML5 tag which is not widely supported in browsers.
+ *
+ * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
+ * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 var ColorPickerComponent = /** @class */ (function () {
-    function ColorPickerComponent(popupService, cdr, localizationService, ngZone) {
+    function ColorPickerComponent(host, popupService, cdr, localizationService, ngZone, renderer) {
         var _this = this;
+        this.host = host;
         this.popupService = popupService;
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
-        /**
-         * @hidden
-         */
+        this.renderer = renderer;
         this.hostClasses = true;
         /**
          * @hidden
          */
         this.focusableId = "k-colorpicker-" + serial++;
         /**
-         * Sets what view the ColorPicker will render in the popup.
+         * Specifies the views that will be rendered in the popup.
+         * By default both the gradient and palette views will be rendered.
          */
-        this.view = 'gradient';
+        this.views = ['gradient', 'palette'];
         /**
          * Sets the read-only state of the ColorPicker.
+         *
+         * @default false
          */
         this.readonly = false;
         /**
          * Sets the disabled state of the ColorPicker.
+         *
+         * @default false
          */
         this.disabled = false;
         /**
          * Specifies the output format of the ColorPicker.
-         * The input value may be in a different format. However, it will be parsed into the output `format`
-         * after the component processes it.
          *
-         * If the `gradient` view is used with the `opacity` option set to true, this setting will be ignored and `rgba` will be used instead.
+         * If the input value is in a different format, it will be parsed into the specified output `format`.
          *
          * The supported values are:
          * * `rgba` (default)
          * * `hex`
-         * * [name](https://www.w3.org/wiki/CSS/Properties/color/keywords)
          */
         this.format = 'rgba';
+        /**
+         * Specifies whether the ColorPicker should display a 'Clear color' button.
+         *
+         * @default true
+         */
+        this.clearButton = true;
+        /**
+         * Displays `Apply` and `Cancel` action buttons and color preview panes.
+         *
+         * When enabled, the component value will not change immediately upon
+         * color selection, but only after the `Apply` button is clicked.
+         *
+         * The `Cancel` button reverts the current selection to its
+         * previous state i.e. to the current value.
+         *
+         * @default false
+         */
+        this.preview = false;
+        /**
+         * Configures the layout of the `Apply` and `Cancel` action buttons.
+         *
+         * The possible values are:
+         * * `start`
+         * * `center`
+         * * `end` (default)
+         * * `stretch`
+         */
+        this.actionsLayout = 'end';
         /**
          * Fires each time the value is changed.
          */
@@ -87,6 +117,12 @@ var ColorPickerComponent = /** @class */ (function () {
          * Fires each time the ColorPicker is blurred.
          */
         this.onBlur = new core_1.EventEmitter();
+        /**
+         * Fires when the user cancels the current color selection.
+         *
+         * Fires on preview pane or 'Cancel' button click.
+         */
+        this.cancel = new core_1.EventEmitter();
         /**
          * Fires each time the left side of the ColorPicker wrapper is clicked.
          * The event is triggered regardless of whether a ColorPicker icon is set or not.
@@ -94,10 +130,18 @@ var ColorPickerComponent = /** @class */ (function () {
          * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
          */
         this.activeColorClick = new core_1.EventEmitter();
+        /**
+         * Fires each time the view is about to change.
+         * Used to provide a two-way binding for the `activeView` property.
+         */
+        this.activeViewChange = new core_1.EventEmitter();
         this._tabindex = 0;
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
-        this._gradientSettings = { opacity: true, clearButton: false, delay: 0 };
+        this._gradientSettings = { opacity: true, delay: 0 };
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
         kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
@@ -107,6 +151,19 @@ var ColorPickerComponent = /** @class */ (function () {
         });
     }
     ColorPickerComponent_1 = ColorPickerComponent;
+    Object.defineProperty(ColorPickerComponent.prototype, "view", {
+        get: function () {
+            return (this.views && this.views.length > 0) ? this.views[0] : null;
+        },
+        /**
+         * @hidden
+         */
+        set: function (view) {
+            this.views = [view];
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ColorPickerComponent.prototype, "value", {
         get: function () {
             return this._value;
@@ -115,7 +172,7 @@ var ColorPickerComponent = /** @class */ (function () {
          * Specifies the value of the initially selected color.
          */
         set: function (value) {
-            this._value = color_parser_1.parseColor(value, this.format);
+            this._value = utils_1.parseColor(value, this.format, this.gradientSettings.opacity);
         },
         enumerable: true,
         configurable: true
@@ -165,6 +222,8 @@ var ColorPickerComponent = /** @class */ (function () {
         },
         /**
          * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         *
+         * @default 0
          */
         set: function (value) {
             var tabindex = Number(value);
@@ -174,12 +233,76 @@ var ColorPickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ColorPickerComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the font size and line height of the ColorPicker
+         * ([see example]({% slug appearance_colorpicker %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the ColorPicker
+         * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the ColorPicker
+         * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
+         *
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         */
+        set: function (fillMode) {
+            this.handleClasses(fillMode, 'fillMode');
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ColorPickerComponent.prototype, "isOpen", {
         /**
          * Indicates whether the ColorPicker popup is open.
          */
         get: function () {
-            return utils_1.isPresent(this.popupRef);
+            return utils_2.isPresent(this.popupRef);
         },
         enumerable: true,
         configurable: true
@@ -200,10 +323,10 @@ var ColorPickerComponent = /** @class */ (function () {
         configurable: true
     });
     ColorPickerComponent.prototype.ngOnInit = function () {
-        var defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        var defaultPreset = (this.format !== 'name') ? constants_1.DEFAULT_PRESET : constants_1.DEFAULT_ACCESSIBLE_PRESET;
         var settingsPalette = this._paletteSettings.palette;
-        var presetColumns = typeof settingsPalette === 'string' && palette_presets_1.PALETTEPRESETS[settingsPalette] ?
-            palette_presets_1.PALETTEPRESETS[settingsPalette].columns :
+        var presetColumns = typeof settingsPalette === 'string' && models_1.PALETTEPRESETS[settingsPalette] ?
+            models_1.PALETTEPRESETS[settingsPalette].columns :
             undefined;
         this._paletteSettings = {
             palette: settingsPalette || defaultPreset,
@@ -211,13 +334,20 @@ var ColorPickerComponent = /** @class */ (function () {
             columns: this._paletteSettings.columns || presetColumns || 10
         };
     };
+    ColorPickerComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
     ColorPickerComponent.prototype.ngOnChanges = function (changes) {
         if (changes.format && changes.format.currentValue === 'name') {
-            this.view = 'palette';
+            this.activeView = 'palette';
         }
-        if (this.view === 'gradient' && this.gradientSettings.opacity) {
+        if (this.activeView === 'gradient' && this.gradientSettings.opacity) {
             this.format = 'rgba';
-            this.value = color_parser_1.parseColor(this.value, this.format);
+            this.value = utils_1.parseColor(this.value, this.format, this.gradientSettings.opacity);
         }
     };
     ColorPickerComponent.prototype.ngOnDestroy = function () {
@@ -226,10 +356,26 @@ var ColorPickerComponent = /** @class */ (function () {
             this.dynamicRTLSubscription.unsubscribe();
         }
     };
+    Object.defineProperty(ColorPickerComponent.prototype, "colorPickerAriaLabel", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleWrapperClick = function () {
+    ColorPickerComponent.prototype.handleCancelEvent = function (ev) {
+        this.cancel.emit(ev);
+    };
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.togglePopup = function () {
         this.toggleWithEvents(!this.isOpen);
         this.focus();
     };
@@ -238,10 +384,10 @@ var ColorPickerComponent = /** @class */ (function () {
      */
     ColorPickerComponent.prototype.handleActiveColorClick = function () {
         this.focus();
-        var event = new models_1.ActiveColorClickEvent(this.value);
+        var event = new events_1.ActiveColorClickEvent(this.value);
         this.activeColorClick.emit(event);
         if (!event.isOpenPrevented() || this.isOpen) {
-            this.handleWrapperClick();
+            this.togglePopup();
         }
     };
     /**
@@ -257,9 +403,6 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperFocus = function () {
-        if (utils_1.isPresent(this.palette)) {
-            this.palette.nativeElement.focus();
-        }
         if (this.isFocused) {
             return;
         }
@@ -284,10 +427,10 @@ var ColorPickerComponent = /** @class */ (function () {
         this.notifyNgTouched();
     };
     /**
-     * Clears the color value of the ColorPicker.
+     * Clears the value of the ColorPicker.
      */
     ColorPickerComponent.prototype.reset = function () {
-        if (!utils_1.isPresent(this.value)) {
+        if (!utils_2.isPresent(this.value)) {
             return;
         }
         this._value = undefined;
@@ -304,7 +447,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return;
         }
         this.closePopup();
-        open = utils_1.isPresent(open) ? open : !this.isOpen;
+        open = utils_2.isPresent(open) ? open : !this.isOpen;
         if (open) {
             this.openPopup();
         }
@@ -312,13 +455,9 @@ var ColorPickerComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleValueChange = function (color, closePopup) {
-        var parsedColor = color_parser_1.parseColor(color, this.format);
+    ColorPickerComponent.prototype.handleValueChange = function (color) {
+        var parsedColor = utils_1.parseColor(color, this.format, this.gradientSettings.opacity);
         var valueChange = parsedColor !== this.value;
-        if (closePopup) {
-            this.toggleWithEvents(false);
-            this.focus();
-        }
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
@@ -329,9 +468,7 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handlePopupBlur = function (event) {
-        var focusInPopupElement = this.popupRef.popupElement.contains(event.relatedTarget);
-        var wrapperClicked = event.relatedTarget === this.wrapper.nativeElement;
-        if (!this.isFocused || wrapperClicked || focusInPopupElement) {
+        if (this.popupBlurInvalid(event)) {
             return;
         }
         this.isFocused = false;
@@ -382,53 +519,67 @@ var ColorPickerComponent = /** @class */ (function () {
             this.wrapper.nativeElement.focus();
         }
         if (event.keyCode === kendo_angular_common_1.Keys.Tab) {
-            var firstElement = this.colorGradient ? this.colorGradient.gradientDragHandle.nativeElement : this.palette.nativeElement;
-            var lastElement = this.palette ? this.palette.nativeElement :
-                this.colorGradient.inputs.opacityInput.nativeElement.childNodes[1].children[0];
-            if (event.shiftKey) {
-                if (event.target === firstElement) {
-                    event.preventDefault();
-                    lastElement.focus();
-                    return;
-                }
-            }
-            else {
-                if (event.target === lastElement) {
-                    event.preventDefault();
-                    firstElement.focus();
-                    return;
-                }
+            var currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
+            var nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
+            if (event.target === currentElement) {
+                event.preventDefault();
+                nextElement.nativeElement.focus();
             }
         }
     };
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     ColorPickerComponent.prototype.isEmpty = function () {
         return false;
     };
+    ColorPickerComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.host.nativeElement;
+        var classes = utils_2.getStylingClasses('picker', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
+    ColorPickerComponent.prototype.popupBlurInvalid = function (ev) {
+        var focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        var wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
+        return !this.isFocused || wrapperClicked || focusInPopupElement;
+    };
     ColorPickerComponent.prototype.toggleWithEvents = function (open) {
-        var _this = this;
         var sameState = this.isOpen === open;
         if (this.disabled || this.readonly || sameState) {
             return;
         }
-        var eventArgs = new models_1.PreventableEvent();
-        open ? this.open.emit(eventArgs) : this.close.emit(eventArgs);
+        var eventArgs;
+        if (open) {
+            eventArgs = new events_1.ColorPickerOpenEvent();
+            this.open.emit(eventArgs);
+        }
+        else {
+            eventArgs = new events_1.ColorPickerCloseEvent();
+            this.close.emit(eventArgs);
+        }
         if (!eventArgs.isDefaultPrevented()) {
             this.toggle(open);
         }
         if (open) {
-            this.ngZone.runOutsideAngular(function () {
-                setTimeout(function () {
-                    if (_this.colorGradient) {
-                        _this.colorGradient.gradientDragHandle.nativeElement.focus();
-                    }
-                });
-            });
+            this.focusFirstElement();
         }
     };
+    ColorPickerComponent.prototype.focusFirstElement = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            setTimeout(function () {
+                var elementToFocus = _this.flatColorPicker.gradient ? _this.flatColorPicker.gradient.gradientDragHandle :
+                    _this.flatColorPicker.palette.host;
+                elementToFocus.nativeElement.focus();
+            });
+        });
+    };
     ColorPickerComponent.prototype.openPopup = function () {
         var _this = this;
         var horizontalAlign = this.direction === "rtl" ? "right" : "left";
@@ -459,12 +610,35 @@ var ColorPickerComponent = /** @class */ (function () {
         }
         this.popupRef.close();
         this.popupRef = null;
-        this.palette = null;
     };
+    Object.defineProperty(ColorPickerComponent.prototype, "firstFocusableElement", {
+        get: function () {
+            if (!this.flatColorPicker.header || (this.views.length <= 1 && !this.flatColorPicker.clearButton)) {
+                return this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle : this.flatColorPicker.palette.host;
+            }
+            return this.views.length > 1 ? this.flatColorPicker.header.viewButtonsCollection.toArray()[0] : this.flatColorPicker.header.clearButtonElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "lastFocusableElement", {
+        get: function () {
+            if (this.preview) {
+                return this.flatColorPicker.footer.lastButton;
+            }
+            if (this.flatColorPicker.palette) {
+                return this.flatColorPicker.palette.host;
+            }
+            return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
+        },
+        enumerable: true,
+        configurable: true
+    });
     var ColorPickerComponent_1;
     tslib_1.__decorate([
-        core_1.HostBinding('class.k-widget'),
         core_1.HostBinding('class.k-colorpicker'),
+        core_1.HostBinding('class.k-icon-picker'),
+        core_1.HostBinding('class.k-picker'),
         tslib_1.__metadata("design:type", Boolean)
     ], ColorPickerComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
@@ -475,10 +649,19 @@ var ColorPickerComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerComponent.prototype, "focusableId", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], ColorPickerComponent.prototype, "views", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ColorPickerComponent.prototype, "view", null);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "view", void 0);
+    ], ColorPickerComponent.prototype, "activeView", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -519,11 +702,38 @@ var ColorPickerComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Object)
     ], ColorPickerComponent.prototype, "iconClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColorPickerComponent.prototype, "clearButton", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Number),
         tslib_1.__metadata("design:paramtypes", [Number])
     ], ColorPickerComponent.prototype, "tabindex", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], ColorPickerComponent.prototype, "preview", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ColorPickerComponent.prototype, "actionsLayout", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ColorPickerComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ColorPickerComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], ColorPickerComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -544,10 +754,18 @@ var ColorPickerComponent = /** @class */ (function () {
         core_1.Output('blur'),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], ColorPickerComponent.prototype, "onBlur", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], ColorPickerComponent.prototype, "cancel", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
     ], ColorPickerComponent.prototype, "activeColorClick", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], ColorPickerComponent.prototype, "activeViewChange", void 0);
     tslib_1.__decorate([
         core_1.ViewChild('container', { read: core_1.ViewContainerRef, static: true }),
         tslib_1.__metadata("design:type", core_1.ViewContainerRef)
@@ -561,15 +779,12 @@ var ColorPickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", core_1.TemplateRef)
     ], ColorPickerComponent.prototype, "popupTemplate", void 0);
     tslib_1.__decorate([
-        core_1.ViewChild('palette', { read: core_1.ElementRef, static: false }),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], ColorPickerComponent.prototype, "palette", void 0);
-    tslib_1.__decorate([
-        core_1.ViewChild('colorGradient', { static: false }),
-        tslib_1.__metadata("design:type", color_gradient_component_1.ColorGradientComponent)
-    ], ColorPickerComponent.prototype, "colorGradient", void 0);
+        core_1.ViewChild('flatColorPicker', { static: false }),
+        tslib_1.__metadata("design:type", flatcolorpicker_component_1.FlatColorPickerComponent)
+    ], ColorPickerComponent.prototype, "flatColorPicker", void 0);
     ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
         core_1.Component({
+            exportAs: 'kendoColorPicker',
             selector: 'kendo-colorpicker',
             providers: [{
                     multi: true,
@@ -589,12 +804,14 @@ var ColorPickerComponent = /** @class */ (function () {
                     useValue: 'kendo.colorpicker'
                 }
             ],
-            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorGradient=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradient=\"kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-hexInputPlaceholder=\"kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input.\"\n            hexInputPlaceholder=\"HEX Color\"\n            i18n-redInputPlaceholder=\"kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input.\"\n            redInputPlaceholder=\"Red\"\n            i18n-greenInputPlaceholder=\"kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input.\"\n            greenInputPlaceholder=\"Green\"\n            i18n-blueInputPlaceholder=\"kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input.\"\n            blueInputPlaceholder=\"Blue\"\n            i18n-alphaInputPlaceholder=\"kendo.colorpicker.alphaInputPlaceholder|The placeholder for the alpha input.\"\n            alphaInputPlaceholder=\"Alpha\">\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-picker-wrap': true,\n                'k-state-disabled': this.disabled,\n                'k-state-focused': this.isFocused\n            }\"\n            role=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-label]=\"value\"\n            [id]=\"focusableId\"\n            [attr.tabindex]=\"tabindex\"\n            (focus)=\"handleWrapperFocus()\"\n            (blur)=\"handleWrapperBlur()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown)=\"handleWrapperKeyDown($event)\"\n        >\n            <span *ngIf=\"!iconStyles\" class=\"k-selected-color\" [style.background-color]=\"value\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-icon k-i-line\" *ngIf=\"!value\"></span>\n            </span>\n            <span *ngIf=\"iconStyles\" class=\"k-tool-icon\" [ngClass]=\"iconStyles\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-selected-color\" [style.background-color]=\"value\"></span>\n            </span>\n            <span class=\"k-select\" (click)=\"handleWrapperClick()\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <kendo-colorgradient  #colorGradient\n                *ngIf=\"view === 'gradient' || view === 'combo'\"\n                [value]=\"value\"\n                [format]=\"format\"\n                [opacity]=\"gradientSettings.opacity\"\n                [clearButton]=\"gradientSettings.clearButton\"\n                [delay]=\"gradientSettings.delay\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (valueChange)=\"handleValueChange($event, false)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n            >\n            </kendo-colorgradient>\n            <kendo-colorpalette\n                #palette\n                *ngIf=\"view === 'palette' || view === 'combo'\"\n                kendoFocusOnDomReady\n                [palette]=\"paletteSettings.palette\"\n                [columns]=\"paletteSettings.columns\"\n                [tileSize]=\"paletteSettings.tileSize\"\n                [format]=\"format\"\n                [value]=\"value\"\n                (blur)=\"handlePopupBlur($event)\"\n                (cellSelection)=\"handleValueChange($event, true)\"\n                (mousedown)=\"$event.preventDefault()\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n            >\n            </kendo-colorpalette>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorPickerNoColor=\"kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty.\"\n            colorPickerNoColor=\"Colorpicker no color chosen\"\n            i18n-flatColorPickerNoColor=\"kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.colorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.colorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.colorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.colorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.colorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.colorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.colorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-input-inner': true,\n                'k-disabled': this.disabled,\n                'k-focus': this.isFocused\n            }\"\n            role=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-label]=\"colorPickerAriaLabel\"\n            [id]=\"focusableId\"\n            [attr.tabindex]=\"tabindex\"\n            (focus)=\"handleWrapperFocus()\"\n            (blur)=\"handleWrapperBlur()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown)=\"handleWrapperKeyDown($event)\"\n        >\n            <span\n                class=\"k-value-icon k-color-preview\"\n                [ngClass]=\"{'k-icon-color-preview': iconStyles, 'k-no-color': !value}\"\n                (click)=\"handleActiveColorClick()\">\n                <span *ngIf=\"iconClass || icon\" class=\"k-color-preview-icon k-icon\" [ngClass]=\"iconStyles\"></span>\n                <span class=\"k-color-preview-mask\" [style.background-color]=\"value\"></span>\n            </span>\n        </span>\n        <button\n            type=\"button\"\n            class=\"k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button\"\n            [attr.aria-label]=\"colorPickerAriaLabel\"\n            (click)=\"togglePopup()\">\n                <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
-        tslib_1.__metadata("design:paramtypes", [kendo_angular_popup_1.PopupService,
+        tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
+            kendo_angular_popup_1.PopupService,
             core_1.ChangeDetectorRef,
             kendo_angular_l10n_1.LocalizationService,
-            core_1.NgZone])
+            core_1.NgZone,
+            core_1.Renderer2])
     ], ColorPickerComponent);
     return ColorPickerComponent;
 }());