@progress/kendo-angular-inputs 7.5.1 → 8.0.0-dev.202112211528

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

@@ -3,66 +3,96 @@
 * 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 { 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';
-var DEFAULT_PRESET = 'office';
-var DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './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.
          */
@@ -85,6 +115,12 @@ var ColorPickerComponent = /** @class */ (function () {
          * 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 @@ var ColorPickerComponent = /** @class */ (function () {
          * 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 = function () { };
         this.notifyNgChanged = function () { };
         validatePackage(packageMetadata);
@@ -113,7 +157,7 @@ var ColorPickerComponent = /** @class */ (function () {
          * Specifies the value of the initially selected color.
          */
         set: function (value) {
-            this._value = parseColor(value, this.format);
+            this._value = parseColor(value, this.format, this.gradientSettings.opacity);
         },
         enumerable: true,
         configurable: true
@@ -163,6 +207,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);
@@ -172,6 +218,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.
@@ -209,13 +319,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 = parseColor(this.value, this.format);
+            this.value = parseColor(this.value, this.format, this.gradientSettings.opacity);
         }
     };
     ColorPickerComponent.prototype.ngOnDestroy = function () {
@@ -224,10 +341,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.handleCancelEvent = function (ev) {
+        this.cancel.emit(ev);
+    };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleWrapperClick = function () {
+    ColorPickerComponent.prototype.togglePopup = function () {
         this.toggleWithEvents(!this.isOpen);
         this.focus();
     };
@@ -239,7 +372,7 @@ var ColorPickerComponent = /** @class */ (function () {
         var event = new ActiveColorClickEvent(this.value);
         this.activeColorClick.emit(event);
         if (!event.isOpenPrevented() || this.isOpen) {
-            this.handleWrapperClick();
+            this.togglePopup();
         }
     };
     /**
@@ -255,9 +388,6 @@ var ColorPickerComponent = /** @class */ (function () {
      * @hidden
      */
     ColorPickerComponent.prototype.handleWrapperFocus = function () {
-        if (isPresent(this.palette)) {
-            this.palette.nativeElement.focus();
-        }
         if (this.isFocused) {
             return;
         }
@@ -282,7 +412,7 @@ var ColorPickerComponent = /** @class */ (function () {
         this.notifyNgTouched();
     };
     /**
-     * Clears the color value of the ColorPicker.
+     * Clears the value of the ColorPicker.
      */
     ColorPickerComponent.prototype.reset = function () {
         if (!isPresent(this.value)) {
@@ -310,13 +440,9 @@ var ColorPickerComponent = /** @class */ (function () {
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleValueChange = function (color, closePopup) {
-        var parsedColor = parseColor(color, this.format);
+    ColorPickerComponent.prototype.handleValueChange = function (color) {
+        var parsedColor = 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);
@@ -327,9 +453,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;
@@ -380,53 +504,67 @@ var ColorPickerComponent = /** @class */ (function () {
             this.wrapper.nativeElement.focus();
         }
         if (event.keyCode === 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 = 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 PreventableEvent();
-        open ? this.open.emit(eventArgs) : this.close.emit(eventArgs);
+        var 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(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";
@@ -457,12 +595,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([
-        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([
@@ -473,10 +634,14 @@ var ColorPickerComponent = /** @class */ (function () {
         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)
-    ], ColorPickerComponent.prototype, "view", void 0);
+    ], ColorPickerComponent.prototype, "activeView", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -517,11 +682,38 @@ var ColorPickerComponent = /** @class */ (function () {
         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)
@@ -542,10 +734,18 @@ var ColorPickerComponent = /** @class */ (function () {
         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)
@@ -559,15 +759,12 @@ var ColorPickerComponent = /** @class */ (function () {
         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,
@@ -587,12 +784,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", [PopupService,
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            PopupService,
             ChangeDetectorRef,
             LocalizationService,
-            NgZone])
+            NgZone,
+            Renderer2])
     ], ColorPickerComponent);
     return ColorPickerComponent;
 }());

package/dist/es/colorpicker/constants.js

@@ -22,3 +22,15 @@ export var AAA_RATIO = 7.0;
  * @hidden
  */
 export var AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+export var DEFAULT_PRESET = 'office';
+/**
+ * @hidden
+ */
+export var DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+/**
+ * @hidden
+ */
+export var STEP_COUNT = 16;

package/dist/es/colorpicker/contrast-validation.component.js

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
+import { AA_RATIO, AAA_RATIO } from './constants';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Component, Input } from '@angular/core';
 /**
@@ -28,7 +29,8 @@ var ContrastValidationComponent = /** @class */ (function () {
     });
     Object.defineProperty(ContrastValidationComponent.prototype, "contrastText", {
         get: function () {
-            return this.type + ": " + this.ratio.toFixed(1);
+            var ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
+            return this.type + ": " + ratio.toFixed(1);
         },
         enumerable: true,
         configurable: true
@@ -37,18 +39,18 @@ var ContrastValidationComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], ContrastValidationComponent.prototype, "type", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], ContrastValidationComponent.prototype, "ratio", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ContrastValidationComponent.prototype, "pass", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ContrastValidationComponent.prototype, "value", void 0);
     ContrastValidationComponent = tslib_1.__decorate([
         Component({
             selector: '[kendoContrastValidation]',
-            template: "\n        <span>{{contrastText}}</span>\n                <span class=\"k-contrast-validation k-text-success\" *ngIf=\"pass\">\n                    {{passMessage}}\n                    <span class=\"k-icon k-i-check\"></span>\n                </span>\n                <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!pass\">\n                    {{failMessage}}\n                <span class=\"k-icon k-i-close\"></span>\n        </span>\n    "
+            template: "\n        <span>{{contrastText}}</span>\n        <ng-container *ngIf=\"value\">\n            <span class=\"k-contrast-validation k-text-success\" *ngIf=\"pass\">\n                {{passMessage}}\n                <span class=\"k-icon k-i-check\"></span>\n            </span>\n            <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!pass\">\n                {{failMessage}}\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], ContrastValidationComponent);