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

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

@@ -6,23 +6,24 @@ 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 { 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 { 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) {
@@ -30,39 +31,66 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
-        /**
-         * @hidden
-         */
         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 +113,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 +126,15 @@ 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.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
         validatePackage(packageMetadata);
@@ -107,7 +146,7 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
      * 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 +180,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);
@@ -181,11 +222,11 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     }
     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 +238,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 +262,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 +278,6 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
      * @hidden
      */
     handleWrapperFocus() {
-        if (isPresent(this.palette)) {
-            this.palette.nativeElement.focus();
-        }
         if (this.isFocused) {
             return;
         }
@@ -252,7 +302,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 +330,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 +343,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 +394,56 @@ 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;
     }
+    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,11 +473,24 @@ 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'),
     tslib_1.__metadata("design:type", Boolean)
 ], ColorPickerComponent.prototype, "hostClasses", void 0);
@@ -441,10 +502,14 @@ 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)
-], ColorPickerComponent.prototype, "view", void 0);
+], ColorPickerComponent.prototype, "activeView", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
@@ -485,11 +550,23 @@ 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([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -510,10 +587,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 +612,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 +639,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,16 +655,22 @@ 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
@@ -591,7 +683,7 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
             [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,44 +691,35 @@ 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 *ngIf="!iconStyles" class="k-selected-color" [style.background]="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-select" (click)="togglePopup()">
                 <span class="k-icon k-i-arrow-s"></span>
             </span>
         </span>
         <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>
     `

package/dist/es2015/colorpicker/constants.d.ts

@@ -23,3 +23,15 @@ export declare const AAA_RATIO = 7;
  * @hidden
  */
 export declare const AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_PRESET = "office";
+/**
+ * @hidden
+ */
+export declare const DEFAULT_ACCESSIBLE_PRESET = "accessible";
+/**
+ * @hidden
+ */
+export declare const STEP_COUNT = 16;

package/dist/es2015/colorpicker/constants.js

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

package/dist/es2015/colorpicker/contrast-validation.component.d.ts

@@ -9,8 +9,8 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 export declare class ContrastValidationComponent {
     private localization;
     type: string;
-    ratio: number;
     pass: boolean;
+    value: string;
     constructor(localization: LocalizationService);
     readonly passMessage: string;
     readonly failMessage: string;

package/dist/es2015/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';
 /**
@@ -19,34 +20,37 @@ let ContrastValidationComponent = class ContrastValidationComponent {
         return this.localization.get('failContrast');
     }
     get contrastText() {
-        return `${this.type}: ${this.ratio.toFixed(1)}`;
+        let ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
+        return `${this.type}: ${ratio.toFixed(1)}`;
     }
 };
 tslib_1.__decorate([
     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: `
         <span>{{contrastText}}</span>
-                <span class="k-contrast-validation k-text-success" *ngIf="pass">
-                    {{passMessage}}
-                    <span class="k-icon k-i-check"></span>
-                </span>
-                <span class="k-contrast-validation k-text-error" *ngIf="!pass">
-                    {{failMessage}}
+        <ng-container *ngIf="value">
+            <span class="k-contrast-validation k-text-success" *ngIf="pass">
+                {{passMessage}}
+                <span class="k-icon k-i-check"></span>
+            </span>
+            <span class="k-contrast-validation k-text-error" *ngIf="!pass">
+                {{failMessage}}
                 <span class="k-icon k-i-close"></span>
-        </span>
+            </span>
+        </ng-container>
     `
     }),
     tslib_1.__metadata("design:paramtypes", [LocalizationService])

package/dist/es2015/colorpicker/contrast.component.d.ts

@@ -10,11 +10,9 @@ export declare class ContrastComponent {
     private localization;
     value: string;
     ratio: string;
-    aaRatio: number;
-    aaaRatio: number;
     constructor(localization: LocalizationService);
     readonly formatedRatio: string;
-    readonly contrastRatioMessage: string;
+    readonly contrastRatioText: string;
     readonly satisfiesAACondition: boolean;
     readonly satisfiesAAACondition: boolean;
     readonly contrastRatio: number;