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

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

@@ -4,65 +4,95 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var ColorPickerComponent_1;
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone } from '@angular/core';
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FlatColorPickerComponent } from './flatcolorpicker.component';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { validatePackage } from '@progress/kendo-licensing';
-import { packageMetadata } from '../package-metadata';
-import { PreventableEvent, ActiveColorClickEvent } from './models';
-import { parseColor } from './utils/color-parser';
-import { isPresent } from '../common/utils';
 import { Keys, KendoInput } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PALETTEPRESETS } from './utils/palette-presets';
+import { packageMetadata } from '../package-metadata';
+import { PALETTEPRESETS } from './models';
+import { ActiveColorClickEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
+import { parseColor } from './utils';
+import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
-import { ColorGradientComponent } from './color-gradient.component';
-const DEFAULT_PRESET = 'office';
-const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
 let 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.
  */
 let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
-    constructor(popupService, cdr, localizationService, ngZone) {
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer) {
+        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.
          */
@@ -85,6 +115,12 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
          * Fires each time the ColorPicker is blurred.
          */
         this.onBlur = new EventEmitter();
+        /**
+         * Fires when the user cancels the current color selection.
+         *
+         * Fires on preview pane or 'Cancel' button click.
+         */
+        this.cancel = new 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.
@@ -92,10 +128,18 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
          * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
          */
         this.activeColorClick = new EventEmitter();
+        /**
+         * Fires each time the view is about to change.
+         * Used to provide a two-way binding for the `activeView` property.
+         */
+        this.activeViewChange = new 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 = () => { };
         this.notifyNgChanged = () => { };
         validatePackage(packageMetadata);
@@ -103,11 +147,20 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
+    /**
+     * @hidden
+     */
+    set view(view) {
+        this.views = [view];
+    }
+    get view() {
+        return (this.views && this.views.length > 0) ? this.views[0] : null;
+    }
     /**
      * Specifies the value of the initially selected color.
      */
     set value(value) {
-        this._value = parseColor(value, this.format);
+        this._value = parseColor(value, this.format, this.gradientSettings.opacity);
     }
     get value() {
         return this._value;
@@ -141,6 +194,8 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
      */
     set tabindex(value) {
         const tabindex = Number(value);
@@ -150,6 +205,58 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * 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 size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * 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 rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * 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 fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * Indicates whether the ColorPicker popup is open.
      */
@@ -179,13 +286,19 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             columns: this._paletteSettings.columns || presetColumns || 10
         };
     }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
     ngOnChanges(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 = parseColor(this.value, this.format);
+            this.value = parseColor(this.value, this.format, this.gradientSettings.opacity);
         }
     }
     ngOnDestroy() {
@@ -197,7 +310,19 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     /**
      * @hidden
      */
-    handleWrapperClick() {
+    get colorPickerAriaLabel() {
+        return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
+    }
+    /**
+     * @hidden
+     */
+    handleCancelEvent(ev) {
+        this.cancel.emit(ev);
+    }
+    /**
+     * @hidden
+     */
+    togglePopup() {
         this.toggleWithEvents(!this.isOpen);
         this.focus();
     }
@@ -209,7 +334,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         const event = new ActiveColorClickEvent(this.value);
         this.activeColorClick.emit(event);
         if (!event.isOpenPrevented() || this.isOpen) {
-            this.handleWrapperClick();
+            this.togglePopup();
         }
     }
     /**
@@ -225,9 +350,6 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
      * @hidden
      */
     handleWrapperFocus() {
-        if (isPresent(this.palette)) {
-            this.palette.nativeElement.focus();
-        }
         if (this.isFocused) {
             return;
         }
@@ -252,7 +374,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         this.notifyNgTouched();
     }
     /**
-     * Clears the color value of the ColorPicker.
+     * Clears the value of the ColorPicker.
      */
     reset() {
         if (!isPresent(this.value)) {
@@ -280,13 +402,9 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     /**
      * @hidden
      */
-    handleValueChange(color, closePopup) {
-        const parsedColor = parseColor(color, this.format);
+    handleValueChange(color) {
+        const parsedColor = parseColor(color, this.format, this.gradientSettings.opacity);
         const valueChange = parsedColor !== this.value;
-        if (closePopup) {
-            this.toggleWithEvents(false);
-            this.focus();
-        }
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
@@ -297,9 +415,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
      * @hidden
      */
     handlePopupBlur(event) {
-        const focusInPopupElement = this.popupRef.popupElement.contains(event.relatedTarget);
-        const wrapperClicked = event.relatedTarget === this.wrapper.nativeElement;
-        if (!this.isFocused || wrapperClicked || focusInPopupElement) {
+        if (this.popupBlurInvalid(event)) {
             return;
         }
         this.isFocused = false;
@@ -350,52 +466,66 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             this.wrapper.nativeElement.focus();
         }
         if (event.keyCode === Keys.Tab) {
-            const firstElement = this.colorGradient ? this.colorGradient.gradientDragHandle.nativeElement : this.palette.nativeElement;
-            const 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;
-                }
+            const currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
+            const 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.
      */
     isEmpty() {
         return false;
     }
+    handleClasses(value, input) {
+        const elem = this.host.nativeElement;
+        const classes = getStylingClasses('picker', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    popupBlurInvalid(ev) {
+        const focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        const wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
+        return !this.isFocused || wrapperClicked || focusInPopupElement;
+    }
     toggleWithEvents(open) {
         const sameState = this.isOpen === open;
         if (this.disabled || this.readonly || sameState) {
             return;
         }
-        const eventArgs = new PreventableEvent();
-        open ? this.open.emit(eventArgs) : this.close.emit(eventArgs);
+        let eventArgs;
+        if (open) {
+            eventArgs = new ColorPickerOpenEvent();
+            this.open.emit(eventArgs);
+        }
+        else {
+            eventArgs = new ColorPickerCloseEvent();
+            this.close.emit(eventArgs);
+        }
         if (!eventArgs.isDefaultPrevented()) {
             this.toggle(open);
         }
         if (open) {
-            this.ngZone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    if (this.colorGradient) {
-                        this.colorGradient.gradientDragHandle.nativeElement.focus();
-                    }
-                });
-            });
+            this.focusFirstElement();
         }
     }
+    focusFirstElement() {
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const elementToFocus = this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle :
+                    this.flatColorPicker.palette.host;
+                elementToFocus.nativeElement.focus();
+            });
+        });
+    }
     openPopup() {
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
@@ -425,12 +555,27 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         }
         this.popupRef.close();
         this.popupRef = null;
-        this.palette = null;
+    }
+    get firstFocusableElement() {
+        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;
+    }
+    get lastFocusableElement() {
+        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;
     }
 };
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-colorpicker'),
+    HostBinding('class.k-icon-picker'),
+    HostBinding('class.k-picker'),
     tslib_1.__metadata("design:type", Boolean)
 ], ColorPickerComponent.prototype, "hostClasses", void 0);
 tslib_1.__decorate([
@@ -441,10 +586,19 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ColorPickerComponent.prototype, "focusableId", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], ColorPickerComponent.prototype, "views", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "view", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
-], ColorPickerComponent.prototype, "view", void 0);
+], ColorPickerComponent.prototype, "activeView", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
@@ -485,11 +639,38 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
 ], ColorPickerComponent.prototype, "iconClass", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], ColorPickerComponent.prototype, "clearButton", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number),
     tslib_1.__metadata("design:paramtypes", [Number])
 ], ColorPickerComponent.prototype, "tabindex", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], ColorPickerComponent.prototype, "preview", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ColorPickerComponent.prototype, "actionsLayout", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -510,10 +691,18 @@ tslib_1.__decorate([
     Output('blur'),
     tslib_1.__metadata("design:type", EventEmitter)
 ], ColorPickerComponent.prototype, "onBlur", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], ColorPickerComponent.prototype, "cancel", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], ColorPickerComponent.prototype, "activeColorClick", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], ColorPickerComponent.prototype, "activeViewChange", void 0);
 tslib_1.__decorate([
     ViewChild('container', { read: ViewContainerRef, static: true }),
     tslib_1.__metadata("design:type", ViewContainerRef)
@@ -527,15 +716,12 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", TemplateRef)
 ], ColorPickerComponent.prototype, "popupTemplate", void 0);
 tslib_1.__decorate([
-    ViewChild('palette', { read: ElementRef, static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ColorPickerComponent.prototype, "palette", void 0);
-tslib_1.__decorate([
-    ViewChild('colorGradient', { static: false }),
-    tslib_1.__metadata("design:type", ColorGradientComponent)
-], ColorPickerComponent.prototype, "colorGradient", void 0);
+    ViewChild('flatColorPicker', { static: false }),
+    tslib_1.__metadata("design:type", FlatColorPickerComponent)
+], ColorPickerComponent.prototype, "flatColorPicker", void 0);
 ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
     Component({
+        exportAs: 'kendoColorPicker',
         selector: 'kendo-colorpicker',
         providers: [{
                 multi: true,
@@ -557,9 +743,13 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
         ],
         template: `
         <ng-container kendoColorPickerLocalizedMessages
-            i18n-colorGradient="kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
+            colorPickerNoColor="Colorpicker no color chosen"
+            i18n-flatColorPickerNoColor="kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
+            flatColorPickerNoColor="Flatcolorpicker no color chosen"
+            i18n-colorGradientNoColor="kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
             colorGradientNoColor="Colorgradient no color chosen"
-            i18n-colorGradient="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
+            i18n-colorPaletteNoColor="kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
             colorPaletteNoColor="Colorpalette no color chosen"
             i18n-colorGradientHandle="kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
             colorGradientHandle="Choose color"
@@ -569,29 +759,35 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
             hueSliderHandle="Set hue"
             i18n-opacitySliderHandle="kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle."
             opacitySliderHandle="Set opacity"
-            i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
-            hexInputPlaceholder="HEX Color"
-            i18n-redInputPlaceholder="kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input."
-            redInputPlaceholder="Red"
-            i18n-greenInputPlaceholder="kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input."
-            greenInputPlaceholder="Green"
-            i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
-            blueInputPlaceholder="Blue"
-            i18n-alphaInputPlaceholder="kendo.colorpicker.alphaInputPlaceholder|The placeholder for the alpha input."
-            alphaInputPlaceholder="Alpha">
+            i18n-contrastRatio="kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio"
+            i18n-previewColor="kendo.colorpicker.previewColor|The message for the color preview pane."
+            previewColor="Color preview"
+            i18n-revertSelection="kendo.colorpicker.revertSelection|The message for the selected color pane."
+            revertSelection="Revert selection"
+            i18n-gradientView="kendo.colorpicker.gradientView|The message for the gradient view button."
+            gradientView="Gradient view"
+            i18n-paletteView="kendo.colorpicker.paletteView|The message for the palette view button."
+            paletteView="Palette view"
+            i18n-formatButton="kendo.colorpicker.formatButton|The message for the input format toggle button."
+            formatButton="Change color format"
+            i18n-applyButton="kendo.colorpicker.applyButton|The message for the Apply action button."
+            applyButton="Apply"
+            i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
+            cancelButton="Cancel">
         </ng-container>
         <span
             #wrapper
             [ngClass]="{
-                'k-picker-wrap': true,
-                'k-state-disabled': this.disabled,
-                'k-state-focused': this.isFocused
+                'k-input-inner': true,
+                'k-disabled': this.disabled,
+                'k-focus': this.isFocused
             }"
             role="listbox"
             [attr.aria-expanded]="isOpen"
             [attr.aria-readonly]="readonly"
             [attr.aria-disabled]="disabled"
-            [attr.aria-label]="value"
+            [attr.aria-label]="colorPickerAriaLabel"
             [id]="focusableId"
             [attr.tabindex]="tabindex"
             (focus)="handleWrapperFocus()"
@@ -599,51 +795,49 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
             (mousedown)="$event.preventDefault()"
             (keydown)="handleWrapperKeyDown($event)"
         >
-            <span *ngIf="!iconStyles" class="k-selected-color" [style.background-color]="value" (click)="handleActiveColorClick()">
-                <span class="k-icon k-i-line" *ngIf="!value"></span>
-            </span>
-            <span *ngIf="iconStyles" class="k-tool-icon" [ngClass]="iconStyles" (click)="handleActiveColorClick()">
-                <span class="k-selected-color" [style.background-color]="value"></span>
-            </span>
-            <span class="k-select" (click)="handleWrapperClick()">
-                <span class="k-icon k-i-arrow-s"></span>
+            <span
+                class="k-value-icon k-color-preview"
+                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}"
+                (click)="handleActiveColorClick()">
+                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
         </span>
+        <button
+            type="button"
+            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button"
+            [attr.aria-label]="colorPickerAriaLabel"
+            (click)="togglePopup()">
+                <span class="k-button-icon k-icon k-i-arrow-s"></span>
+        </button>
         <ng-template #popupTemplate>
-            <kendo-colorgradient  #colorGradient
-                *ngIf="view === 'gradient' || view === 'combo'"
+            <kendo-flatcolorpicker
+                #flatColorPicker
                 [value]="value"
                 [format]="format"
-                [opacity]="gradientSettings.opacity"
-                [clearButton]="gradientSettings.clearButton"
-                [delay]="gradientSettings.delay"
+                [views]="views"
+                [activeView]="activeView"
+                [actionsLayout]="actionsLayout"
+                [preview]="preview"
+                [gradientSettings]="gradientSettings"
+                [paletteSettings]="paletteSettings"
+                [clearButton]="clearButton"
                 (focusout)="handlePopupBlur($event)"
-                (valueChange)="handleValueChange($event, false)"
-                (keydown)="handlePopupKeyDown($event)"
-            >
-            </kendo-colorgradient>
-            <kendo-colorpalette
-                #palette
-                *ngIf="view === 'palette' || view === 'combo'"
-                kendoFocusOnDomReady
-                [palette]="paletteSettings.palette"
-                [columns]="paletteSettings.columns"
-                [tileSize]="paletteSettings.tileSize"
-                [format]="format"
-                [value]="value"
-                (blur)="handlePopupBlur($event)"
-                (cellSelection)="handleValueChange($event, true)"
-                (mousedown)="$event.preventDefault()"
+                (cancel)="handleCancelEvent($event)"
+                (valueChange)="handleValueChange($event)"
                 (keydown)="handlePopupKeyDown($event)"
-            >
-            </kendo-colorpalette>
+                (activeViewChange)="activeViewChange.emit($event)"
+                (actionButtonClick)="togglePopup()">
+            </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
     `
     }),
-    tslib_1.__metadata("design:paramtypes", [PopupService,
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        PopupService,
         ChangeDetectorRef,
         LocalizationService,
-        NgZone])
+        NgZone,
+        Renderer2])
 ], ColorPickerComponent);
 export { ColorPickerComponent };