@progress/kendo-angular-inputs 8.0.0-dev.202112161434 → 8.0.0-dev.202201121416

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

@@ -3,21 +3,23 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone } from '@angular/core';
+import { take } from 'rxjs/operators';
+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 { Subscription } from 'rxjs';
 import { FlatColorPickerComponent } from './flatcolorpicker.component';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, KendoInput } from '@progress/kendo-angular-common';
+import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
 import { ActiveColorClickEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
 import { parseColor } from './utils';
-import { isPresent } from '../common/utils';
+import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
 import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
-var serial = 0;
+var DOM_FOCUS_EVENTS = ['focus', 'blur'];
 /**
  * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
  *
@@ -25,17 +27,16 @@ var serial = 0;
  * 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;
+        this.renderer = renderer;
         this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.focusableId = "k-colorpicker-" + serial++;
+        this.role = 'listbox';
         /**
          * Specifies the views that will be rendered in the popup.
          * By default both the gradient and palette views will be rendered.
@@ -131,12 +132,21 @@ var ColorPickerComponent = /** @class */ (function () {
          * Used to provide a two-way binding for the `activeView` property.
          */
         this.activeViewChange = new EventEmitter();
+        /**
+         * Indicates whether the ColorPicker wrapper is focused.
+         */
+        this.isFocused = false;
         this._tabindex = 0;
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
         this._gradientSettings = { opacity: true, delay: 0 };
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        this.subscriptions = new Subscription();
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
+        this.domFocusListener = function (event) { return event.stopImmediatePropagation(); };
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
@@ -144,6 +154,54 @@ var ColorPickerComponent = /** @class */ (function () {
         });
     }
     ColorPickerComponent_1 = ColorPickerComponent;
+    Object.defineProperty(ColorPickerComponent.prototype, "focusedClass", {
+        get: function () {
+            return this.isFocused;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "disabledClass", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "ariaReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "ariaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "hostTabindex", {
+        get: function () {
+            return this.tabindex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    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;
@@ -213,6 +271,70 @@ 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.
@@ -250,6 +372,16 @@ 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);
+        });
+        this.setHostElementAriaLabel();
+        this.handleHostId();
+        this.initDomEvents();
+    };
     ColorPickerComponent.prototype.ngOnChanges = function (changes) {
         if (changes.format && changes.format.currentValue === 'name') {
             this.activeView = 'palette';
@@ -258,23 +390,18 @@ var ColorPickerComponent = /** @class */ (function () {
             this.format = 'rgba';
             this.value = parseColor(this.value, this.format, this.gradientSettings.opacity);
         }
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
     };
     ColorPickerComponent.prototype.ngOnDestroy = function () {
         this.closePopup();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
+        this.subscriptions.unsubscribe();
+        this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
     };
-    Object.defineProperty(ColorPickerComponent.prototype, "colorPickerAriaLabel", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
-        },
-        enumerable: true,
-        configurable: true
-    });
     /**
      * @hidden
      */
@@ -285,55 +412,74 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.togglePopup = function () {
-        this.toggleWithEvents(!this.isOpen);
         this.focus();
+        this.toggleWithEvents(!this.isOpen);
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleActiveColorClick = function () {
+    ColorPickerComponent.prototype.handleWrapperClick = function (event) {
+        var _this = this;
+        if (this.disabled) {
+            return;
+        }
         this.focus();
-        var event = new ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.togglePopup();
+        if (closest(event.target, function (element) { return element === _this.activeColor.nativeElement; })) {
+            var event_1 = new ActiveColorClickEvent(this.value);
+            this.activeColorClick.emit(event_1);
+            if (!event_1.isOpenPrevented() || this.isOpen) {
+                this.toggleWithEvents(!this.isOpen);
+            }
+            return;
         }
+        this.toggleWithEvents(!this.isOpen);
     };
     /**
      * Focuses the wrapper of the ColorPicker.
      */
     ColorPickerComponent.prototype.focus = function () {
-        if (this.disabled) {
-            return;
-        }
-        this.wrapper.nativeElement.focus();
+        this.isFocused = true;
+        this.host.nativeElement.focus();
     };
     /**
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperFocus = function () {
+        var _this = this;
         if (this.isFocused) {
             return;
         }
-        this.isFocused = true;
-        this.onFocus.emit();
+        this.ngZone.run(function () {
+            _this.focus();
+            _this.onFocus.emit();
+        });
     };
     /**
      * Blurs the ColorPicker.
      */
     ColorPickerComponent.prototype.blur = function () {
-        this.wrapper.nativeElement.blur();
+        this.isFocused = false;
+        this.host.nativeElement.blur();
+        this.notifyNgTouched();
     };
     /**
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperBlur = function () {
+        var _this = this;
         if (this.isOpen) {
             return;
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
+        this.ngZone.run(function () {
+            _this.onBlur.emit();
+            _this.isFocused = false;
+        });
+    };
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.arrowButtonMouseDown = function (ev) {
+        ev.preventDefault();
     };
     /**
      * Clears the value of the ColorPicker.
@@ -343,6 +489,7 @@ var ColorPickerComponent = /** @class */ (function () {
             return;
         }
         this._value = undefined;
+        this.setHostElementAriaLabel();
         this.notifyNgChanged(undefined);
     };
     /**
@@ -370,6 +517,7 @@ var ColorPickerComponent = /** @class */ (function () {
         if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
             this.notifyNgChanged(parsedColor);
         }
     };
@@ -414,9 +562,12 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperKeyDown = function (event) {
+        var _this = this;
         if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
             event.preventDefault();
-            this.toggleWithEvents(true);
+            this.ngZone.run(function () {
+                _this.toggleWithEvents(true);
+            });
         }
     };
     /**
@@ -425,14 +576,14 @@ var ColorPickerComponent = /** @class */ (function () {
     ColorPickerComponent.prototype.handlePopupKeyDown = function (event) {
         if (event.keyCode === Keys.Escape) {
             this.toggleWithEvents(false);
-            this.wrapper.nativeElement.focus();
+            this.host.nativeElement.focus();
         }
         if (event.keyCode === Keys.Tab) {
             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();
+                nextElement.focus();
             }
         }
     };
@@ -443,10 +594,25 @@ var ColorPickerComponent = /** @class */ (function () {
     ColorPickerComponent.prototype.isEmpty = function () {
         return false;
     };
+    ColorPickerComponent.prototype.setHostElementAriaLabel = function () {
+        var ariaLabelValue = "" + (this.value ? this.value : this.localizationService.get('colorPickerNoColor'));
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    };
+    ColorPickerComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.host.nativeElement;
+        var 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);
+        }
+    };
     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;
+        var _this = this;
+        var focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        var hostClicked = closest(ev.relatedTarget, function (element) { return element === _this.host.nativeElement; });
+        return hostClicked || focusInFlatColorPickerElement;
     };
     ColorPickerComponent.prototype.toggleWithEvents = function (open) {
         var sameState = this.isOpen === open;
@@ -471,12 +637,12 @@ var ColorPickerComponent = /** @class */ (function () {
     };
     ColorPickerComponent.prototype.focusFirstElement = function () {
         var _this = this;
-        this.ngZone.runOutsideAngular(function () {
-            setTimeout(function () {
+        this.ngZone.onStable.pipe(take(1)).subscribe(function () {
+            if (_this.flatColorPicker) {
                 var elementToFocus = _this.flatColorPicker.gradient ? _this.flatColorPicker.gradient.gradientDragHandle :
                     _this.flatColorPicker.palette.host;
                 elementToFocus.nativeElement.focus();
-            });
+            }
         });
     };
     ColorPickerComponent.prototype.openPopup = function () {
@@ -485,7 +651,7 @@ var ColorPickerComponent = /** @class */ (function () {
         var anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         var popupPosition = { horizontal: horizontalAlign, vertical: "top" };
         this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
+            anchor: this.activeColor,
             animate: this.popupSettings.animate,
             appendTo: this.popupSettings.appendTo,
             popupAlign: popupPosition,
@@ -497,7 +663,7 @@ var ColorPickerComponent = /** @class */ (function () {
         this.popupRef.popupAnchorViewportLeave.subscribe(function () {
             _this.toggleWithEvents(false);
             if (!_this.isOpen) {
-                _this.wrapper.nativeElement.focus({
+                _this.host.nativeElement.focus({
                     preventScroll: true
                 });
             }
@@ -533,23 +699,103 @@ var ColorPickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ColorPickerComponent.prototype.handleDomEvents = function (action, events) {
+        var _this = this;
+        var hostElement = this.host.nativeElement;
+        events.forEach(function (ev) { return hostElement[action + "EventListener"](ev, _this.domFocusListener, true); });
+    };
+    ColorPickerComponent.prototype.initDomEvents = function () {
+        var _this = this;
+        if (!this.host) {
+            return;
+        }
+        var hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(function () {
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusin', function () {
+                _this.handleWrapperFocus();
+            }));
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusout', function (event) {
+                var closestPopup = _this.popupRef ?
+                    closest(event.relatedTarget, function (element) { return element === _this.flatColorPicker.host.nativeElement; }) :
+                    false;
+                var closestWrapper = closest(event.relatedTarget, function (element) { return element === _this.host.nativeElement; });
+                if (!closestPopup && !closestWrapper) {
+                    _this.handleWrapperBlur();
+                }
+            }));
+            _this.handleDomEvents('add', DOM_FOCUS_EVENTS);
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'keydown', function (event) {
+                _this.handleWrapperKeyDown(event);
+            }));
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'click', function (event) {
+                _this.ngZone.run(function () {
+                    _this.handleWrapperClick(event);
+                });
+            }));
+        });
+    };
+    ColorPickerComponent.prototype.handleHostId = function () {
+        var hostElement = this.host.nativeElement;
+        var existingId = hostElement.getAttribute('id');
+        if (existingId) {
+            this.focusableId = existingId;
+        }
+        else {
+            var id = "k-" + guid();
+            hostElement.setAttribute('id', id);
+            this.focusableId = id;
+        }
+    };
     var ColorPickerComponent_1;
     tslib_1.__decorate([
         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([
+        HostBinding('class.k-focus'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "focusedClass", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-disabled'),
+        HostBinding('class.k-disabled'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "disabledClass", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-readonly'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "ariaReadonly", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-expanded'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "ariaExpanded", null);
+    tslib_1.__decorate([
+        HostBinding('attr.tabindex'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], ColorPickerComponent.prototype, "hostTabindex", null);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String)
     ], ColorPickerComponent.prototype, "direction", void 0);
     tslib_1.__decorate([
-        Input(),
+        HostBinding('attr.role'),
         tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "focusableId", void 0);
+    ], ColorPickerComponent.prototype, "role", 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)
@@ -611,6 +857,21 @@ var ColorPickerComponent = /** @class */ (function () {
         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)
@@ -648,9 +909,9 @@ var ColorPickerComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", ViewContainerRef)
     ], ColorPickerComponent.prototype, "container", void 0);
     tslib_1.__decorate([
-        ViewChild('wrapper', { static: true }),
+        ViewChild('activeColor', { static: true }),
         tslib_1.__metadata("design:type", ElementRef)
-    ], ColorPickerComponent.prototype, "wrapper", void 0);
+    ], ColorPickerComponent.prototype, "activeColor", void 0);
     tslib_1.__decorate([
         ViewChild('popupTemplate', { static: true }),
         tslib_1.__metadata("design:type", TemplateRef)
@@ -681,12 +942,14 @@ var ColorPickerComponent = /** @class */ (function () {
                     useValue: 'kendo.colorpicker'
                 }
             ],
-            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-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]=\"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 *ngIf=\"!iconStyles\" class=\"k-selected-color\" [style.background]=\"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)=\"togglePopup()\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\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    "
+            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 #activeColor class=\"k-input-inner\">\n            <span\n                class=\"k-value-icon k-color-preview\"\n                [ngClass]=\"{'k-icon-color-preview': iconStyles, 'k-no-color': !value}\">\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            #arrowButton\n            tabindex=\"-1\"\n            role=\"button\"\n            class=\"k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button\">\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                (cancel)=\"handleCancelEvent($event)\"\n                (focusout)=\"handlePopupBlur($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", [PopupService,
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            PopupService,
             ChangeDetectorRef,
             LocalizationService,
-            NgZone])
+            NgZone,
+            Renderer2])
     ], ColorPickerComponent);
     return ColorPickerComponent;
 }());

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

@@ -41,7 +41,7 @@ var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
     FlatColorPickerActionButtonsComponent = tslib_1.__decorate([
         Component({
             selector: '[kendoFlatColorPickerActionButtons]',
-            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n        >{{getText('applyButton')}}</button>\n    "
+            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n        >{{getText('applyButton')}}</button>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], FlatColorPickerActionButtonsComponent);

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

@@ -85,7 +85,7 @@ var FlatColorPickerHeaderComponent = /** @class */ (function () {
     FlatColorPickerHeaderComponent = tslib_1.__decorate([
         Component({
             selector: '[kendoFlatColorPickerHeader]',
-            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-icon-button k-flat\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                class=\"k-button k-icon-button k-flat k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
+            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], FlatColorPickerHeaderComponent);