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

package/dist/fesm2015/index.js

@@ -5,12 +5,12 @@
 import { __decorate, __param, __metadata } from 'tslib';
 import { isDevMode, Directive, Optional, TemplateRef, EventEmitter, Input, Output, HostBinding, ViewChild, ElementRef, ContentChild, Component, forwardRef, Injector, Renderer2, NgZone, ChangeDetectorRef, Inject, Injectable, HostListener, ViewChildren, QueryList, NgModule, ViewContainerRef, ContentChildren } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor } from '@angular/forms';
-import { Subscription, fromEvent, interval, merge, Observable, Subject } from 'rxjs';
+import { Subscription, fromEvent, interval, merge, Observable, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages, MessageService } from '@progress/kendo-angular-l10n';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, PreventableEvent } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
-import { browser, mobileOS } from '@progress/kendo-common';
+import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { CommonModule } from '@angular/common';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
@@ -459,7 +459,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635411998,
+    publishDate: 1639665048,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -5576,6 +5576,25 @@ MaskedTextBoxModule = __decorate([
     })
 ], MaskedTextBoxModule);
 
+/**
+ * @hidden
+ *
+ * Returns true if the used browser is Safari.
+ */
+const isSafari = (userAgent) => {
+    return detectDesktopBrowser(userAgent).safari ||
+        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
+};
+/**
+ * @hidden
+ *
+ * Checks if input is Japanese IME
+ */
+const isJapanese = (input) => {
+    const japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
+    return japaneseRegex.test(input);
+};
+
 /**
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
  *  @example
@@ -5819,7 +5838,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
          * @hidden
          */
         this.handleInput = (ev) => {
-            let incomingValue = ev.target.value;
+            let incomingValue = isSafari(navigator.userAgent) && isJapanese(ev.target.value) ? ev.data : ev.target.value;
             this.updateValue(incomingValue);
         };
         this.ngChange = (_) => { };
@@ -7177,25 +7196,183 @@ TextAreaModule = __decorate([
 /**
  * @hidden
  */
-class PreventableEvent {
-    constructor() {
-        this.prevented = false;
+let ColorPickerLocalizationService = class ColorPickerLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl) {
+        super(prefix, messageService, _rtl);
     }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses the built-in behavior that follows the event.
-     */
-    preventDefault() {
-        this.prevented = true;
+};
+ColorPickerLocalizationService = __decorate([
+    __param(0, Inject(L10N_PREFIX)),
+    __param(1, Optional()),
+    __param(2, Optional()), __param(2, Inject(RTL)),
+    __metadata("design:paramtypes", [String, MessageService, Boolean])
+], ColorPickerLocalizationService);
+
+/**
+ * @hidden
+ */
+let FlatColorPickerLocalizationService = class FlatColorPickerLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl, colorPickerLocalization) {
+        super(prefix, messageService, _rtl);
+        this.colorPickerLocalization = colorPickerLocalization;
     }
-    /**
-     * If the event is prevented by any of its subscribers, returns `true`.
-     *
-     * @returns - `true` if the default action was prevented. Otherwise, returns `false`.
-     */
-    isDefaultPrevented() {
-        return this.prevented;
+    get(shortKey) {
+        if (this.colorPickerLocalization) {
+            return this.colorPickerLocalization.get(shortKey);
+        }
+        return super.get(shortKey);
+    }
+};
+FlatColorPickerLocalizationService = __decorate([
+    __param(0, Inject(L10N_PREFIX)),
+    __param(1, Optional()),
+    __param(2, Optional()), __param(2, Inject(RTL)),
+    __param(3, Optional()), __param(3, Inject(ColorPickerLocalizationService)),
+    __metadata("design:paramtypes", [String, MessageService, Boolean, ColorPickerLocalizationService])
+], FlatColorPickerLocalizationService);
+
+/**
+ * @hidden
+ */
+const DEFAULT_OUTPUT_FORMAT = 'rgba';
+/**
+ * @hidden
+ */
+const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
+/**
+ * @hidden
+ */
+const DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+const AAA_RATIO = 7.0;
+/**
+ * @hidden
+ */
+const AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+const DEFAULT_PRESET = 'office';
+/**
+ * @hidden
+ */
+const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+/**
+ * @hidden
+ */
+const STEP_COUNT = 16;
+
+// tslint:disable:max-line-length
+/**
+ * @hidden
+ */
+const PALETTEPRESETS = {
+    basic: {
+        colors: '000000,7f7f7f,880015,ed1c24,ff7f27,fff200,22b14c,00a2e8,3f48cc,a349a4,ffffff,c3c3c3,b97a57,ffaec9,ffc90e,efe4b0,b5e61d,99d9ea,7092be,c8bfe7',
+        columns: 10
+    },
+    office: {
+        colors: 'ffffff, 000000, e6e6e6, 435569, 4371c4, ed7e32, a5a4a5, febf04, 5a9bd5, 71ae48, f2f2f3, 7f7f7f, d1cece, d5dde3, dae1f4, fce5d4, deeded, fff2cc, deeaf6, e1efd9, d7d8d8, 585959, aeabab, adbaca, b4c5e7, f6caac, dbdbdb, ffe498, bcd6ee, c5e0b2, bfbfc0, 3f3f3f, 767070, 8595b1, 8fabdb, f5b183, c9c8c9, fed965, 9bc4e5, a8d08d, a5a5a6, 262625, 393939, 334050, 2e5496, c45a11, 7b7b7a, bf9000, 2f75b5, 548235, 7f7f7f, 0b0c0c, 161616, 222a34, 203764, 843d0b, 525252, 7f6000, 1d4d79, 375623',
+        columns: 10
+    },
+    apex: {
+        colors: 'ffffff, 000000, c9c2d1, 69676d, ceb966, 9cb084, 6bb1c9, 6585cf, 7e6bc9, a379bb, f2f2f2, 7f7f7f, f4f2f5, e0e0e2, f5f1e0, ebefe6, e1eff4, e0e6f5, e5e1f4, ece4f1, d8d8d8, 595959, e9e6ec, c2c1c5, ebe3c1, d7dfcd, c3dfe9, c1ceeb, cbc3e9, dac9e3, bfbfbf, 3f3f3f, dedae3, a4a3a8, e1d5a3, c3cfb5, a6d0de, a2b5e2, b1a6de, c7aed6, a5a5a5, 262626, 9688a5, 4e4d51, ae9638, 758c5a, 3d8da9, 365bb0, 533da9, 7d4d99, 7f7f7f, 0c0c0c, 635672, 343336, 746425, 4e5d3c, 295e70, 243c75, 372970, 533366',
+        columns: 10
+    },
+    austin: {
+        colors: 'ffffff, 000000, caf278, 3e3d2d, 94c600, 71685a, ff6700, 909465, 956b43, fea022, f2f2f2, 7f7f7f, f4fce4, dddcd0, efffc0, e3e1dc, ffe0cb, e8e9df, ece1d6, feecd2, d8d8d8, 595959, e9f9c9, bbb9a1, dfff82, c8c3ba, ffc299, d2d4c0, dac3ad, fed9a6, bfbfbf, 3f3f3f, dff7ae, ada598, cfff43, ada598, ffa365, bcbfa1, c8a585, fec67a, a5a5a5, 262626, a9ea25, 2e2d21, 6f9400, 544e43, bf4d00, 6c6f4b, 6f5032, d77b00, 7f7f7f, 0c0c0c, 74a50f, 1f1e16, 4a6300, 38342d, 7f3300, 484a32, 4a3521, 8f5200',
+        columns: 10
+    },
+    clarity: {
+        colors: 'ffffff, 292934, f3f2dc, d2533c, 93a299, ad8f67, 726056, 4c5a6a, 808da0, 79463d, f2f2f2, e7e7ec, e7e5b9, f6dcd8, e9ecea, eee8e0, e4dedb, d8dde3, e5e8ec, e9d6d3, d8d8d8, c4c4d1, d5d185, edbab1, d3d9d6, ded2c2, c9beb8, b2bcc8, ccd1d9, d3aea7, bfbfbf, 8a8aa3, aca73b, e4978a, bec7c1, cdbba3, af9e94, 8c9bac, b2bac6, bd857c, a5a5a5, 56566e, 56531d, a43925, 6b7c72, 866b48, 554840, 39434f, 5c697b, 5a342d, 7f7f7f, 3b3b4b, 22210b, 6d2619, 47534c, 594730, 39302b, 262d35, 3d4652, 3c231e',
+        columns: 10
+    },
+    slipstream: {
+        colors: 'ffffff, 000000, b4dcfa, 212745, 4e67c8, 5eccf3, a7ea52, 5dceaf, ff8021, f14124, f2f2f2, 7f7f7f, 8bc9f7, c7cce4, dbe0f4, def4fc, edfadc, def5ef, ffe5d2, fcd9d3, d8d8d8, 595959, 4facf3, 909aca, b8c2e9, beeafa, dbf6b9, beebdf, ffcca6, f9b3a7, bfbfbf, 3f3f3f, 0d78c9, 5967af, 94a3de, 9ee0f7, caf297, 9de1cf, ffb279, f68d7b, a5a5a5, 262626, 063c64, 181d33, 31479f, 11b2eb, 81d319, 34ac8b, d85c00, c3260c, 7f7f7f, 0c0c0c, 021828, 101322, 202f6a, 0b769c, 568c11, 22725c, 903d00, 821908',
+        columns: 10
+    },
+    metro: {
+        colors: 'ffffff, 000000, d6ecff, 4e5b6f, 7fd13b, ea157a, feb80a, 00addc, 738ac8, 1ab39f, f2f2f2, 7f7f7f, a7d6ff, d9dde4, e5f5d7, fad0e4, fef0cd, c5f2ff, e2e7f4, c9f7f1, d8d8d8, 595959, 60b5ff, b3bcca, cbecb0, f6a1c9, fee29c, 8be6ff, c7d0e9, 94efe3, bfbfbf, 3f3f3f, 007dea, 8d9baf, b2e389, f272af, fed46b, 51d9ff, aab8de, 5fe7d5, a5a5a5, 262626, 003e75, 3a4453, 5ea226, af0f5b, c58c00, 0081a5, 425ea9, 138677, 7f7f7f, 0c0c0c, 00192e, 272d37, 3f6c19, 750a3d, 835d00, 00566e, 2c3f71, 0c594f',
+        columns: 10
+    },
+    flow: {
+        colors: 'ffffff, 000000, dbf5f9, 04617b, 0f6fc6, 009dd9, 0bd0d9, 10cf9b, 7cca62, a5c249, f2f2f2, 7f7f7f, b2e9f2, b4ecfc, c7e2fa, c4eeff, c9fafc, c9faed, e4f4df, edf2da, d8d8d8, 595959, 76d9e8, 6adafa, 90c6f6, 89deff, 93f5f9, 94f6db, cae9c0, dbe6b6, bfbfbf, 3f3f3f, 21b2c8, 20c8f7, 59a9f2, 4fceff, 5df0f6, 5ff2ca, b0dfa0, c9da91, a5a5a5, 262626, 105964, 02485c, 0b5394, 0075a2, 089ca2, 0b9b74, 54a838, 7e9532, 7f7f7f, 0c0c0c, 062328, 01303d, 073763, 004e6c, 05686c, 07674d, 387025, 546321',
+        columns: 10
+    },
+    hardcover: {
+        colors: 'ffffff, 000000, ece9c6, 895d1d, 873624, d6862d, d0be40, 877f6c, 972109, aeb795, f2f2f2, 7f7f7f, e1dca5, f2e0c6, f0d0c9, f6e6d5, f5f2d8, e7e5e1, fbc7bc, eef0e9, d8d8d8, 595959, d0c974, e6c28d, e2a293, eeceaa, ece5b2, cfccc3, f78f7a, dee2d4, bfbfbf, 3f3f3f, a29a36, daa454, d4735e, e6b681, e2d88c, b7b2a5, f35838, ced3bf, a5a5a5, 262626, 514d1b, 664515, 65281a, a2641f, a39428, 655f50, 711806, 879464, 7f7f7f, 0c0c0c, 201e0a, 442e0e, 431b11, 6c4315, 6d621a, 433f35, 4b1004, 5a6243',
+        columns: 10
+    },
+    trek: {
+        colors: 'ffffff, 000000, fbeec9, 4e3b30, f0a22e, a5644e, b58b80, c3986d, a19574, c17529, f2f2f2, 7f7f7f, f7e09e, e1d6cf, fcecd5, eddfda, f0e7e5, f3eae1, ece9e3, f5e3d1, d8d8d8, 595959, f3cc5f, c4ad9f, f9d9ab, dcc0b6, e1d0cc, e7d5c4, d9d4c7, ebc7a3, bfbfbf, 3f3f3f, d29f0f, a78470, f6c781, cba092, d2b9b2, dbc1a7, c6bfab, e1ac76, a5a5a5, 262626, 694f07, 3a2c24, c87d0e, 7b4b3a, 926255, a17242, 7b7153, 90571e, 7f7f7f, 0c0c0c, 2a1f03, 271d18, 855309, 523226, 614138, 6b4c2c, 524b37, 603a14',
+        columns: 10
+    },
+    verve: {
+        colors: 'ffffff, 000000, d2d2d2, 666666, ff388c, e40059, 9c007f, 68007f, 005bd3, 00349e, f2f2f2, 7f7f7f, bdbdbd, e0e0e0, ffd7e8, ffc6dc, ffb8f1, f1b2ff, c3dcff, b8cfff, d8d8d8, 595959, 9d9d9d, c1c1c1, ffafd1, ff8eba, ff71e4, e365ff, 87baff, 72a0ff, bfbfbf, 3f3f3f, 696969, a3a3a3, ff87ba, ff5597, ff2ad7, d519ff, 4b98ff, 2b71ff, a5a5a5, 262626, 343434, 4c4c4c, e90062, ab0042, 75005f, 4e005f, 00449e, 002676, 7f7f7f, 0c0c0c, 151515, 333333, 9b0041, 72002c, 4e003f, 34003f, 002d69, 00194f',
+        columns: 10
+    },
+    monochrome: {
+        colors: '000000, 1a1a1a, 333333, 4d4d4d, 666666, 808080, 999999, b3b3b3, cccccc, e6e6e6, f2f2f2, ffffff',
+        columns: 12
+    },
+    accessible: {
+        colors: 'black, grey, darkred, red, darkorange, gold, green, blue, darkblue, purple, white, darkgrey, saddlebrown, pink, orange, yellow, lightgreen, lightskyblue, lightblue, mediumpurple',
+        columns: 10
+    }
+};
+
+/**
+ * @hidden
+ */
+let FlatColorPickerService = class FlatColorPickerService {
+    getPaletteSettings(settings, format) {
+        const defaultPreset = (format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        const settingsPalette = settings.palette;
+        const presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
+            PALETTEPRESETS[settingsPalette].columns :
+            undefined;
+        return {
+            palette: settingsPalette || defaultPreset,
+            tileSize: settings.tileSize || 24,
+            columns: settings.columns || presetColumns || 10
+        };
+    }
+    paletteTileLayout(tileSize) {
+        if (typeof tileSize === 'number') {
+            return { width: tileSize, height: tileSize };
+        }
+        return {
+            width: tileSize.width ? tileSize.width : tileSize.height,
+            height: tileSize.height ? tileSize.height : tileSize.width
+        };
     }
+};
+FlatColorPickerService = __decorate([
+    Injectable()
+], FlatColorPickerService);
+
+/**
+ * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
+ */
+class ColorPickerCancelEvent extends PreventableEvent {
+    constructor(originalEvent) {
+        super();
+        this.originalEvent = originalEvent;
+    }
+}
+
+/**
+ * Arguments for the `close` event of the ColorPicker component.
+ */
+class ColorPickerCloseEvent extends PreventableEvent {
+}
+
+/**
+ * Arguments for the `open` event of the ColorPicker component.
+ */
+class ColorPickerOpenEvent extends PreventableEvent {
 }
 
 /**
@@ -7258,7 +7435,7 @@ class ActiveColorClickEvent {
  *
  * Returns the hex or rgba string representation of the color.
  */
-const parseColor$1 = (value, format, safe = true) => {
+const parseColor$1 = (value, format, opacityEnabled = false, safe = true) => {
     const allowedFormats = ['hex', 'rgba', 'name'];
     if (allowedFormats.indexOf(format) === -1) {
         throw new Error(`Unsupported color output format '${format}'. The available options are 'hex', 'rgba' or 'name'.`);
@@ -7273,7 +7450,8 @@ const parseColor$1 = (value, format, safe = true) => {
     if (!isPresent(parsedColor)) {
         return;
     }
-    return format === 'hex' ? parsedColor.toCss() : parsedColor.toCssRgba();
+    const parsedColorResult = format === 'hex' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
+    return parsedColorResult;
 };
 /**
  * @hidden
@@ -7304,12 +7482,21 @@ const getRGBA = (value, safe = true) => {
  *
  * Returns the RGBA string representation of the color.
  */
-const getColorFromHSV = (hsva) => {
+const getColorFromHSV = (hsva, format = 'rgba', opacityEnabled = false) => {
     const hue = fitIntoBounds(hsva.h, 0, 359.9);
     const saturation = fitIntoBounds(hsva.s, 0, 1);
     const value = fitIntoBounds(hsva.v, 0, 1);
     const alpha = fitIntoBounds(hsva.a, 0, 1);
-    return Color.fromHSV(hue, saturation, value, alpha).toCssRgba();
+    const color = Color.fromHSV(hue, saturation, value, alpha);
+    return format === 'hex' ? getHexValue(color, opacityEnabled) : color.toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+const getHexValue = (color, opacity) => {
+    return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
 };
 /**
  * @hidden
@@ -7345,7 +7532,7 @@ function nameFormat(value, safe) {
     }
     const key = Object.keys(namedColors).find(key => namedColors[key] === value);
     if (!key && !safe) {
-        throw new Error(`The provided color ${value} is not supported for 'format="name"' property.To display ${value} color, the component 'format' property shoud be set to 'hex' or 'rgba' `);
+        throw new Error(`The provided color ${value} is not supported for 'format="name"' property.To display ${value} color, the component 'format' property should be set to 'hex' or 'rgba' `);
     }
     return key;
 }
@@ -7402,91 +7589,84 @@ const getContrastFromTwoRGBAs = (a, b) => {
     return getContrast(getLuminance(getRGBFromRGBA(a, b)), getLuminance(getRGBFromRGBA(b, { r: 0, g: 0, b: 0, a: 1 })));
 };
 
-// tslint:disable:max-line-length
 /**
  * @hidden
  */
-const PALETTEPRESETS = {
-    basic: {
-        colors: '000000,7f7f7f,880015,ed1c24,ff7f27,fff200,22b14c,00a2e8,3f48cc,a349a4,ffffff,c3c3c3,b97a57,ffaec9,ffc90e,efe4b0,b5e61d,99d9ea,7092be,c8bfe7',
-        columns: 10
-    },
-    office: {
-        colors: 'ffffff, 000000, e6e6e6, 435569, 4371c4, ed7e32, a5a4a5, febf04, 5a9bd5, 71ae48, f2f2f3, 7f7f7f, d1cece, d5dde3, dae1f4, fce5d4, deeded, fff2cc, deeaf6, e1efd9, d7d8d8, 585959, aeabab, adbaca, b4c5e7, f6caac, dbdbdb, ffe498, bcd6ee, c5e0b2, bfbfc0, 3f3f3f, 767070, 8595b1, 8fabdb, f5b183, c9c8c9, fed965, 9bc4e5, a8d08d, a5a5a6, 262625, 393939, 334050, 2e5496, c45a11, 7b7b7a, bf9000, 2f75b5, 548235, 7f7f7f, 0b0c0c, 161616, 222a34, 203764, 843d0b, 525252, 7f6000, 1d4d79, 375623',
-        columns: 10
-    },
-    apex: {
-        colors: 'ffffff, 000000, c9c2d1, 69676d, ceb966, 9cb084, 6bb1c9, 6585cf, 7e6bc9, a379bb, f2f2f2, 7f7f7f, f4f2f5, e0e0e2, f5f1e0, ebefe6, e1eff4, e0e6f5, e5e1f4, ece4f1, d8d8d8, 595959, e9e6ec, c2c1c5, ebe3c1, d7dfcd, c3dfe9, c1ceeb, cbc3e9, dac9e3, bfbfbf, 3f3f3f, dedae3, a4a3a8, e1d5a3, c3cfb5, a6d0de, a2b5e2, b1a6de, c7aed6, a5a5a5, 262626, 9688a5, 4e4d51, ae9638, 758c5a, 3d8da9, 365bb0, 533da9, 7d4d99, 7f7f7f, 0c0c0c, 635672, 343336, 746425, 4e5d3c, 295e70, 243c75, 372970, 533366',
-        columns: 10
-    },
-    austin: {
-        colors: 'ffffff, 000000, caf278, 3e3d2d, 94c600, 71685a, ff6700, 909465, 956b43, fea022, f2f2f2, 7f7f7f, f4fce4, dddcd0, efffc0, e3e1dc, ffe0cb, e8e9df, ece1d6, feecd2, d8d8d8, 595959, e9f9c9, bbb9a1, dfff82, c8c3ba, ffc299, d2d4c0, dac3ad, fed9a6, bfbfbf, 3f3f3f, dff7ae, ada598, cfff43, ada598, ffa365, bcbfa1, c8a585, fec67a, a5a5a5, 262626, a9ea25, 2e2d21, 6f9400, 544e43, bf4d00, 6c6f4b, 6f5032, d77b00, 7f7f7f, 0c0c0c, 74a50f, 1f1e16, 4a6300, 38342d, 7f3300, 484a32, 4a3521, 8f5200',
-        columns: 10
-    },
-    clarity: {
-        colors: 'ffffff, 292934, f3f2dc, d2533c, 93a299, ad8f67, 726056, 4c5a6a, 808da0, 79463d, f2f2f2, e7e7ec, e7e5b9, f6dcd8, e9ecea, eee8e0, e4dedb, d8dde3, e5e8ec, e9d6d3, d8d8d8, c4c4d1, d5d185, edbab1, d3d9d6, ded2c2, c9beb8, b2bcc8, ccd1d9, d3aea7, bfbfbf, 8a8aa3, aca73b, e4978a, bec7c1, cdbba3, af9e94, 8c9bac, b2bac6, bd857c, a5a5a5, 56566e, 56531d, a43925, 6b7c72, 866b48, 554840, 39434f, 5c697b, 5a342d, 7f7f7f, 3b3b4b, 22210b, 6d2619, 47534c, 594730, 39302b, 262d35, 3d4652, 3c231e',
-        columns: 10
-    },
-    slipstream: {
-        colors: 'ffffff, 000000, b4dcfa, 212745, 4e67c8, 5eccf3, a7ea52, 5dceaf, ff8021, f14124, f2f2f2, 7f7f7f, 8bc9f7, c7cce4, dbe0f4, def4fc, edfadc, def5ef, ffe5d2, fcd9d3, d8d8d8, 595959, 4facf3, 909aca, b8c2e9, beeafa, dbf6b9, beebdf, ffcca6, f9b3a7, bfbfbf, 3f3f3f, 0d78c9, 5967af, 94a3de, 9ee0f7, caf297, 9de1cf, ffb279, f68d7b, a5a5a5, 262626, 063c64, 181d33, 31479f, 11b2eb, 81d319, 34ac8b, d85c00, c3260c, 7f7f7f, 0c0c0c, 021828, 101322, 202f6a, 0b769c, 568c11, 22725c, 903d00, 821908',
-        columns: 10
-    },
-    metro: {
-        colors: 'ffffff, 000000, d6ecff, 4e5b6f, 7fd13b, ea157a, feb80a, 00addc, 738ac8, 1ab39f, f2f2f2, 7f7f7f, a7d6ff, d9dde4, e5f5d7, fad0e4, fef0cd, c5f2ff, e2e7f4, c9f7f1, d8d8d8, 595959, 60b5ff, b3bcca, cbecb0, f6a1c9, fee29c, 8be6ff, c7d0e9, 94efe3, bfbfbf, 3f3f3f, 007dea, 8d9baf, b2e389, f272af, fed46b, 51d9ff, aab8de, 5fe7d5, a5a5a5, 262626, 003e75, 3a4453, 5ea226, af0f5b, c58c00, 0081a5, 425ea9, 138677, 7f7f7f, 0c0c0c, 00192e, 272d37, 3f6c19, 750a3d, 835d00, 00566e, 2c3f71, 0c594f',
-        columns: 10
-    },
-    flow: {
-        colors: 'ffffff, 000000, dbf5f9, 04617b, 0f6fc6, 009dd9, 0bd0d9, 10cf9b, 7cca62, a5c249, f2f2f2, 7f7f7f, b2e9f2, b4ecfc, c7e2fa, c4eeff, c9fafc, c9faed, e4f4df, edf2da, d8d8d8, 595959, 76d9e8, 6adafa, 90c6f6, 89deff, 93f5f9, 94f6db, cae9c0, dbe6b6, bfbfbf, 3f3f3f, 21b2c8, 20c8f7, 59a9f2, 4fceff, 5df0f6, 5ff2ca, b0dfa0, c9da91, a5a5a5, 262626, 105964, 02485c, 0b5394, 0075a2, 089ca2, 0b9b74, 54a838, 7e9532, 7f7f7f, 0c0c0c, 062328, 01303d, 073763, 004e6c, 05686c, 07674d, 387025, 546321',
-        columns: 10
-    },
-    hardcover: {
-        colors: 'ffffff, 000000, ece9c6, 895d1d, 873624, d6862d, d0be40, 877f6c, 972109, aeb795, f2f2f2, 7f7f7f, e1dca5, f2e0c6, f0d0c9, f6e6d5, f5f2d8, e7e5e1, fbc7bc, eef0e9, d8d8d8, 595959, d0c974, e6c28d, e2a293, eeceaa, ece5b2, cfccc3, f78f7a, dee2d4, bfbfbf, 3f3f3f, a29a36, daa454, d4735e, e6b681, e2d88c, b7b2a5, f35838, ced3bf, a5a5a5, 262626, 514d1b, 664515, 65281a, a2641f, a39428, 655f50, 711806, 879464, 7f7f7f, 0c0c0c, 201e0a, 442e0e, 431b11, 6c4315, 6d621a, 433f35, 4b1004, 5a6243',
-        columns: 10
-    },
-    trek: {
-        colors: 'ffffff, 000000, fbeec9, 4e3b30, f0a22e, a5644e, b58b80, c3986d, a19574, c17529, f2f2f2, 7f7f7f, f7e09e, e1d6cf, fcecd5, eddfda, f0e7e5, f3eae1, ece9e3, f5e3d1, d8d8d8, 595959, f3cc5f, c4ad9f, f9d9ab, dcc0b6, e1d0cc, e7d5c4, d9d4c7, ebc7a3, bfbfbf, 3f3f3f, d29f0f, a78470, f6c781, cba092, d2b9b2, dbc1a7, c6bfab, e1ac76, a5a5a5, 262626, 694f07, 3a2c24, c87d0e, 7b4b3a, 926255, a17242, 7b7153, 90571e, 7f7f7f, 0c0c0c, 2a1f03, 271d18, 855309, 523226, 614138, 6b4c2c, 524b37, 603a14',
-        columns: 10
-    },
-    verve: {
-        colors: 'ffffff, 000000, d2d2d2, 666666, ff388c, e40059, 9c007f, 68007f, 005bd3, 00349e, f2f2f2, 7f7f7f, bdbdbd, e0e0e0, ffd7e8, ffc6dc, ffb8f1, f1b2ff, c3dcff, b8cfff, d8d8d8, 595959, 9d9d9d, c1c1c1, ffafd1, ff8eba, ff71e4, e365ff, 87baff, 72a0ff, bfbfbf, 3f3f3f, 696969, a3a3a3, ff87ba, ff5597, ff2ad7, d519ff, 4b98ff, 2b71ff, a5a5a5, 262626, 343434, 4c4c4c, e90062, ab0042, 75005f, 4e005f, 00449e, 002676, 7f7f7f, 0c0c0c, 151515, 333333, 9b0041, 72002c, 4e003f, 34003f, 002d69, 00194f',
-        columns: 10
-    },
-    monochrome: {
-        colors: '000000, 1a1a1a, 333333, 4d4d4d, 666666, 808080, 999999, b3b3b3, cccccc, e6e6e6, f2f2f2, ffffff',
-        columns: 12
-    },
-    accessible: {
-        colors: 'black, grey, darkred, red, darkorange, gold, green, blue, darkblue, purple, white, darkgrey, saddlebrown, pink, orange, yellow, lightgreen, lightskyblue, lightblue, mediumpurple',
-        columns: 10
-    }
+const bezierCommand = (controlPointCalc) => (point, i, a) => {
+    // start control point
+    const [cpsX, cpsY] = controlPointCalc(a[i - 1], a[i - 2], point);
+    // end control point
+    const [cpeX, cpeY] = controlPointCalc(point, a[i - 1], a[i + 1], true);
+    return `C ${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`;
 };
-
 /**
  * @hidden
  */
-let ColorPickerLocalizationService = class ColorPickerLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl) {
-        super(prefix, messageService, _rtl);
+const controlPoint = (lineCalc) => (current, previous, next, reverse) => {
+    // when 'current' is the first or last point of the array
+    // 'previous' and 'next' are undefined
+    // replace with 'current'
+    const p = previous || current;
+    const n = next || current;
+    const smooth = 0.1;
+    // properties of the line between previous and next
+    const l = lineCalc(p, n);
+    // If is end-control-point, add PI to the angle to go backward
+    const angle = l.angle + (reverse ? Math.PI : 0);
+    const length = l.length * smooth;
+    // The control point position is relative to the current point
+    const x = current[0] + Math.cos(angle) * length;
+    const y = current[1] + Math.sin(angle) * length;
+    return [x, y];
+};
+/**
+ * @hidden
+ */
+const line = (pointA, pointB) => {
+    const lengthX = pointB[0] - pointA[0];
+    const lengthY = pointB[1] - pointA[1];
+    return {
+        length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+        angle: Math.atan2(lengthY, lengthX)
+    };
+};
+/**
+ * @hidden
+ *
+ * Render the svg <path> element.
+ *
+ * @param points (array) Represents the points coordinates as an array of tuples.
+ * @param command (function) The command that is used (bezierCommand, lineCommand).
+ *      @param point (array) [x,y] Represents the current point coordinates.
+ *      @param i (integer) Represents the index of 'point' in the array 'a'.
+ *      @param a (array) Represents the complete array of points coordinates.
+ *      @output (string) a svg path command.
+ * @output (string) a Svg <path> element
+ */
+const svgPath = (points, command) => {
+    if (points.length === 0) {
+        return '';
     }
+    // build the d attributes by looping over the points
+    const d = points.reduce((acc, point, i, a) => i === 0 ?
+        // if first point
+        `M ${point[0]},${point[1]}` :
+        // else
+        `${acc} ${command(point, i, a)}`, '');
+    return d;
 };
-ColorPickerLocalizationService = __decorate([
-    __param(0, Inject(L10N_PREFIX)),
-    __param(1, Optional()),
-    __param(2, Optional()), __param(2, Inject(RTL)),
-    __metadata("design:paramtypes", [String, MessageService, Boolean])
-], ColorPickerLocalizationService);
 
 /**
  * @hidden
  */
 let ColorGradientLocalizationService = class ColorGradientLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl, colorPickerLocalization) {
+    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
         super(prefix, messageService, _rtl);
-        this.colorPickerLocalization = colorPickerLocalization;
+        this.flatColorPickerLocalization = flatColorPickerLocalization;
     }
     get(shortKey) {
-        if (this.colorPickerLocalization) {
-            return this.colorPickerLocalization.get(shortKey);
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
         }
         return super.get(shortKey);
     }
@@ -7495,18 +7675,22 @@ ColorGradientLocalizationService = __decorate([
     __param(0, Inject(L10N_PREFIX)),
     __param(1, Optional()),
     __param(2, Optional()), __param(2, Inject(RTL)),
-    __param(3, Optional()), __param(3, Inject(ColorPickerLocalizationService)),
-    __metadata("design:paramtypes", [String, MessageService, Boolean, ColorPickerLocalizationService])
+    __param(3, Optional()), __param(3, Inject(FlatColorPickerLocalizationService)),
+    __metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
 ], ColorGradientLocalizationService);
 
 /**
  * @hidden
  */
 let ColorInputComponent = class ColorInputComponent {
-    constructor(localization, host, renderer) {
-        this.localization = localization;
+    constructor(host, renderer, localizationService) {
         this.host = host;
         this.renderer = renderer;
+        this.localizationService = localizationService;
+        /**
+         * The id of the hex input.
+         */
+        this.focusableId = `k-${guid()}`;
         /**
          * Sets whether the alpha slider will be shown.
          */
@@ -7556,11 +7740,14 @@ let ColorInputComponent = class ColorInputComponent {
     }
     ngOnChanges(changes) {
         if (isPresent(changes.value) && !this.isFocused) {
-            this.hex = parseColor$1(this.value, 'hex');
+            this.hex = parseColor$1(this.value, 'hex', this.opacity);
             this.rgba = getRGBA(this.value);
-            this.rgba.a = parseColor$1(this.value, 'rgba') ? this.rgba.a : 1;
+            this.rgba.a = parseColor$1(this.value, 'rgba', this.opacity) ? this.rgba.a : 1;
         }
     }
+    get formatButtonTitle() {
+        return this.localizationService.get('formatButton');
+    }
     handleRgbaValueChange() {
         const color = getColorFromRGBA(this.rgba);
         if (!this.rgbaInputValid || color === this.value) {
@@ -7568,12 +7755,12 @@ let ColorInputComponent = class ColorInputComponent {
         }
         this.value = color;
         this.rgba = getRGBA(this.value);
-        this.hex = parseColor$1(color, 'hex');
+        this.hex = parseColor$1(color, 'hex', this.opacity);
         this.valueChange.emit(color);
     }
     handleHexValueChange(hex) {
         this.hex = hex;
-        const color = parseColor$1(hex, 'rgba');
+        const color = parseColor$1(hex, 'rgba', this.opacity);
         if (!isPresent(color) || color === this.value) {
             return;
         }
@@ -7587,10 +7774,7 @@ let ColorInputComponent = class ColorInputComponent {
         }
     }
     handleHexInputBlur() {
-        this.hex = parseColor$1(this.value, 'hex');
-    }
-    textFor(key) {
-        return this.localization.get(key);
+        this.hex = parseColor$1(this.value, 'hex', this.opacity);
     }
     toggleFormatView() {
         this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
@@ -7602,6 +7786,10 @@ let ColorInputComponent = class ColorInputComponent {
         this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', () => this.toggleFormatView()));
     }
 };
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorInputComponent.prototype, "focusableId", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -7632,9 +7820,17 @@ __decorate([
     __metadata("design:type", Boolean)
 ], ColorInputComponent.prototype, "colorInputClass", void 0);
 __decorate([
-    ViewChild('opacityInput', { read: ElementRef, static: false }),
-    __metadata("design:type", ElementRef)
+    ViewChild('opacityInput', { static: false }),
+    __metadata("design:type", NumericTextBoxComponent)
 ], ColorInputComponent.prototype, "opacityInput", void 0);
+__decorate([
+    ViewChild('hexInput', { read: ElementRef, static: false }),
+    __metadata("design:type", ElementRef)
+], ColorInputComponent.prototype, "hexInput", void 0);
+__decorate([
+    ViewChild('blueInput', { read: ElementRef, static: false }),
+    __metadata("design:type", ElementRef)
+], ColorInputComponent.prototype, "blueInput", void 0);
 __decorate([
     ViewChild('toggleFormatButton', { static: false }),
     __metadata("design:type", ElementRef)
@@ -7644,20 +7840,27 @@ ColorInputComponent = __decorate([
         selector: 'kendo-colorinput',
         template: `
         <div class="k-vstack">
-            <button class="k-colorgradient-toggle-mode k-button k-icon-button k-flat" #toggleFormatButton>
+            <button #toggleFormatButton
+                class="k-colorgradient-toggle-mode k-button k-icon-button k-flat"
+                [attr.aria-label]="formatButtonTitle"
+                [attr.title]="formatButtonTitle"
+            >
                 <span class="k-button-icon k-icon k-i-arrows-kpi"></span>
             </button>
         </div>
-        <input *ngIf="formatView === 'hex'"
-            #hexInput
-            class="k-textbox k-hex-value"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [value]="hex || ''"
-            [placeholder]="textFor('hexInputPlaceholder')"
-            (blur)="handleHexInputBlur()"
-            (input)="handleHexValueChange(hexInput.value)"
-        />
+        <div *ngIf="formatView === 'hex'" class="k-vstack">
+            <input
+                #hexInput
+                [id]="focusableId"
+                class="k-textbox k-hex-value"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [value]="hex || ''"
+                (blur)="handleHexInputBlur()"
+                (input)="handleHexValueChange(hexInput.value)"
+            />
+            <label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
+        </div>
         <ng-container *ngIf="formatView === 'rgba'">
             <div class="k-vstack">
                 <kendo-numerictextbox
@@ -7666,7 +7869,6 @@ ColorInputComponent = __decorate([
                     [readonly]="readonly"
                     [min]="0"
                     [max]="255"
-                    [placeholder]="textFor('redInputPlaceholder')"
                     [(value)]="rgba.r"
                     [autoCorrect]="true"
                     [spinners]="false"
@@ -7684,7 +7886,6 @@ ColorInputComponent = __decorate([
                     [readonly]="readonly"
                     [min]="0"
                     [max]="255"
-                    [placeholder]="textFor('greenInputPlaceholder')"
                     [(value)]="rgba.g"
                     [autoCorrect]="true"
                     [spinners]="false"
@@ -7702,7 +7903,6 @@ ColorInputComponent = __decorate([
                     [readonly]="readonly"
                     [min]="0"
                     [max]="255"
-                    [placeholder]="textFor('blueInputPlaceholder')"
                     [(value)]="rgba.b"
                     [autoCorrect]="true"
                     [spinners]="false"
@@ -7720,7 +7920,6 @@ ColorInputComponent = __decorate([
                     [readonly]="readonly"
                     [min]="0"
                     [max]="1"
-                    [placeholder]="textFor('alphaInputPlaceholder')"
                     [(value)]="rgba.a"
                     [autoCorrect]="true"
                     [spinners]="false"
@@ -7735,32 +7934,11 @@ ColorInputComponent = __decorate([
         </ng-container>
     `
     }),
-    __metadata("design:paramtypes", [LocalizationService,
-        ElementRef,
-        Renderer2])
+    __metadata("design:paramtypes", [ElementRef,
+        Renderer2,
+        LocalizationService])
 ], ColorInputComponent);
 
-/**
- * @hidden
- */
-const DEFAULT_OUTPUT_FORMAT = 'rgba';
-/**
- * @hidden
- */
-const DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
-/**
- * @hidden
- */
-const DRAGHANDLE_MOVE_SPEED = 5;
-/**
- * @hidden
- */
-const AAA_RATIO = 7.0;
-/**
- * @hidden
- */
-const AA_RATIO = 4.5;
-
 var ColorGradientComponent_1;
 let serial = 0;
 /**
@@ -7774,9 +7952,6 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.renderer = renderer;
         this.cdr = cdr;
         this.localizationService = localizationService;
-        /**
-         * @hidden
-         */
         this.hostClasses = true;
         /**
          * @hidden
@@ -7784,18 +7959,26 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.id = `k-colorgradient-${serial++}`;
         /**
          * Defines whether the alpha slider will be displayed.
+         *
+         * @default true
          */
         this.opacity = true;
         /**
          * Sets the disabled state of the ColorGradient.
+         *
+         * @default false
          */
         this.disabled = false;
         /**
          * Sets the read-only state of the ColorGradient.
+         *
+         * @default false
          */
         this.readonly = false;
         /**
          * Specifies whether the ColorGradient should display a 'Clear color' button.
+         *
+         * @default false
          */
         this.clearButton = false;
         /**
@@ -7804,6 +7987,16 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
          * @default 0
          */
         this.delay = 0;
+        /**
+         * Specifies the output format of the ColorGradientComponent.
+         * The input value may be in a different format, but it will be parsed into the output `format`
+         * after the component processes it.
+         *
+         * The supported values are:
+         * * (Default) `rgba`
+         * * `hex`
+         */
+        this.format = DEFAULT_OUTPUT_FORMAT;
         /**
          * Fires each time the user selects a new color.
          */
@@ -7819,17 +8012,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
          * The values are initially set in `ngOnInit` or in `ngOnChanges` and are
          * updated on moving the drag handle or the sliders.
          */
-        this.hsva = {};
-        /**
-         * Specifies the output format of the ColorGradientComponent.
-         * The input value may be in a different format. However, it will be parsed into the output `format`
-         * after the component processes it.
-         *
-         * The supported values are:
-         * * (Default) `rgba`
-         * * `hex`
-         */
-        this.format = DEFAULT_OUTPUT_FORMAT;
+        this.hsva = new BehaviorSubject({});
         this._tabindex = 0;
         this.listeners = [];
         this.updateValues = new Subject();
@@ -7839,46 +8022,51 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
-    /**
-     * @hidden
-     */
     get readonlyAttribute() {
         return this.readonly;
     }
-    /**
-     * @hidden
-     */
     get disabledClass() {
         return this.disabled;
     }
-    /**
-     * @hidden
-     */
-    get hostTabindex() {
-        return this.tabindex;
-    }
-    /**
-     * @hidden
-     */
     get gradientId() {
         return this.id;
     }
+    get hostTabindex() {
+        return this.tabindex;
+    }
     /**
      * Specifies the value of the initially selected color.
      */
     set value(value) {
-        this._value = parseColor$1(value, this.format);
+        this._value = parseColor$1(value, this.format, this.opacity);
     }
     get value() {
         return this._value;
     }
+    /**
+     * Enables the color contrast tool. Accepts the background color that will be compared to the selected value.
+     * The tool will calculate the contrast ratio between the two colors.
+     */
+    set contrastTool(value) {
+        this._contrastTool = parseColor$1(value, this.format, this.opacity);
+    }
+    get contrastTool() {
+        return this._contrastTool;
+    }
     /**
      * 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);
-        const defaultValue = 0;
-        this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+        if (isPresent(value)) {
+            const tabindex = Number(value);
+            this._tabindex = !isNaN(tabindex) ? tabindex : 0;
+        }
+        else {
+            // Allows removal of the tabindex attribute
+            this._tabindex = value;
+        }
     }
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
@@ -7897,10 +8085,10 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
      */
     get alphaSliderValue() {
         // setting the initial value to undefined to force the slider to recalculate the height of the slider track on the next cdr run
-        if (!(isPresent(this.hsva) && isPresent(this.hsva.a))) {
+        if (!(isPresent(this.hsva.value) && isPresent(this.hsva.value.a))) {
             return;
         }
-        return this.hsva.a * 100;
+        return this.hsva.value.a * 100;
     }
     get gradientRect() {
         return this.gradientWrapper.nativeElement.getBoundingClientRect();
@@ -7909,7 +8097,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
      * @hidden
      */
     get contrastToolVisible() {
-        return typeof this.contrastTool === 'string' && this.contrastTool !== '';
+        return this.contrastTool && this.contrastTool.length > 0;
     }
     ngAfterViewInit() {
         this.updateUI();
@@ -7940,7 +8128,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         if (this.disabled) {
             return;
         }
-        this.host.nativeElement.focus();
+        this.gradientDragHandle.nativeElement.focus();
     }
     /**
      * @hidden
@@ -7978,7 +8166,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             return;
         }
         this.renderer.removeClass(this.gradientWrapper.nativeElement, 'k-dragging');
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
     }
     /**
      * @hidden
@@ -8023,15 +8211,19 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             return;
         }
         this.gradientDragHandle.nativeElement.focus();
-        const newX = position.clientX - this.gradientRect.left;
-        const newY = position.clientY - this.gradientRect.top;
+        const gradientRect = this.gradientRect;
+        const newX = position.clientX - gradientRect.left;
+        const newY = position.clientY - gradientRect.top;
         this.ngZone.run(() => this.moveDragHandle(newX, newY));
     }
     /**
      * @hidden
      */
     handleHueSliderChange(hue) {
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        const hsva = this.hsva.value;
+        hsva.h = hue;
+        this.hsva.next(hsva);
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
         this.backgroundColor = getColorFromHue(hue);
         this.setAlphaSliderBackground(this.backgroundColor);
     }
@@ -8039,14 +8231,16 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
      * @hidden
      */
     handleAlphaSliderChange(alpha) {
-        this.hsva.a = alpha / 100;
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        const hsva = this.hsva.value;
+        hsva.a = alpha / 100;
+        this.hsva.next(hsva);
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
     }
     /**
      * @hidden
      */
     handleInputsValueChange(color) {
-        const parsed = parseColor$1(color, this.format);
+        const parsed = parseColor$1(color, this.format, this.opacity);
         if (this.value !== parsed) {
             this.handleValueChange(parsed);
             this.updateUI();
@@ -8090,7 +8284,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
      * @hidden
      */
     get colorGradientHandleAriaLabel() {
-        const parsed = parseColor$1(this.value, this.format);
+        const parsed = parseColor$1(this.value, this.format, this.opacity);
         return `${this.value ? parsed : this.localizationService.get('colorGradientHandle')}`;
     }
     /**
@@ -8113,29 +8307,35 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
     }
     /**
      * @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;
     }
     moveDragHandle(positionX, positionY) {
-        const top = fitIntoBounds(positionY, 0, this.gradientRect.height);
-        const left = fitIntoBounds(positionX, 0, this.gradientRect.width);
+        const gradientRect = this.gradientRect;
+        const gradientRectWidth = gradientRect.width;
+        const gradientRectHeight = gradientRect.height;
+        const top = fitIntoBounds(positionY, 0, gradientRectHeight);
+        const left = fitIntoBounds(positionX, 0, gradientRectWidth);
         this.setDragHandleElementPosition(top, left);
-        this.hsva.s = left / this.gradientRect.width;
-        this.hsva.v = 1 - top / this.gradientRect.height;
-        this.updateValues.next(getColorFromHSV(this.hsva));
-        this.setAlphaSliderBackground(getColorFromHSV(Object.assign({}, this.hsva, { a: 1 })));
+        const hsva = this.hsva.value;
+        hsva.s = left / gradientRectWidth;
+        hsva.v = 1 - top / gradientRectHeight;
+        this.hsva.next(hsva);
+        this.updateValues.next(getColorFromHSV(this.hsva.value, this.format, this.opacity));
+        this.setAlphaSliderBackground(getColorFromHSV(Object.assign({}, this.hsva.value, { a: 1 }), this.format, this.opacity));
     }
     updateUI() {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.hsva = this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 };
-        const top = (1 - this.hsva.v) * this.gradientRect.height;
-        const left = this.hsva.s * this.gradientRect.width;
+        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
+        const gradientRect = this.gradientRect;
+        const top = (1 - this.hsva.value.v) * gradientRect.height;
+        const left = this.hsva.value.s * gradientRect.width;
         this.setDragHandleElementPosition(top, left);
-        this.backgroundColor = getColorFromHue(this.hsva.h);
+        this.backgroundColor = getColorFromHue(this.hsva.value.h);
         this.setAlphaSliderBackground(this.backgroundColor);
         this.setHostElementAriaLabel();
     }
@@ -8161,7 +8361,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
         this.renderer.setStyle(sliderTrack, 'background', `linear-gradient(to top, transparent, ${backgroundColor})`);
     }
     setHostElementAriaLabel() {
-        const parsed = parseColor$1(this.value, this.format);
+        const parsed = parseColor$1(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorGradientNoColor')}`);
     }
     addEventListeners() {
@@ -8177,7 +8377,7 @@ let ColorGradientComponent = ColorGradientComponent_1 = class ColorGradientCompo
             const keyupListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'keyup', () => {
                 this.renderer.removeClass(this.gradientWrapper.nativeElement, 'k-dragging');
                 if (!this.readonly && !this.disabled) {
-                    this.ngZone.run(() => this.handleValueChange(getColorFromHSV(this.hsva)));
+                    this.ngZone.run(() => this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity)));
                 }
             });
             const dragHandleFocusInListener = this.renderer.listen(this.gradientDragHandle.nativeElement, 'focusin', () => {
@@ -8214,24 +8414,24 @@ __decorate([
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], ColorGradientComponent.prototype, "disabledClass", null);
-__decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [])
-], ColorGradientComponent.prototype, "hostTabindex", null);
 __decorate([
     HostBinding('attr.id'),
     __metadata("design:type", String),
     __metadata("design:paramtypes", [])
 ], ColorGradientComponent.prototype, "gradientId", null);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], ColorGradientComponent.prototype, "id", void 0);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
 ], ColorGradientComponent.prototype, "direction", void 0);
+__decorate([
+    HostBinding('attr.tabindex'),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [])
+], ColorGradientComponent.prototype, "hostTabindex", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorGradientComponent.prototype, "id", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
@@ -8259,21 +8459,22 @@ __decorate([
 ], ColorGradientComponent.prototype, "value", null);
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], ColorGradientComponent.prototype, "contrastTool", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ColorGradientComponent.prototype, "contrastTool", null);
 __decorate([
     Input(),
     __metadata("design:type", Number),
     __metadata("design:paramtypes", [Number])
 ], ColorGradientComponent.prototype, "tabindex", null);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ColorGradientComponent.prototype, "valueChange", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
 ], ColorGradientComponent.prototype, "format", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], ColorGradientComponent.prototype, "valueChange", void 0);
 __decorate([
     ViewChild('gradientDragHandle', { read: ElementRef, static: false }),
     __metadata("design:type", ElementRef)
@@ -8292,6 +8493,7 @@ __decorate([
 ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
 ColorGradientComponent = ColorGradientComponent_1 = __decorate([
     Component({
+        exportAs: 'kendoColorGradient',
         selector: 'kendo-colorgradient',
         providers: [
             {
@@ -8325,22 +8527,14 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
             hueSliderHandle="Set hue"
             i18n-opacitySliderHandle="kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle."
             opacitySliderHandle="Set opacity"
-            i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
-            hexInputPlaceholder="HEX Color"
-            i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
-            redInputPlaceholder="Red"
-            i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
-            greenInputPlaceholder="Green"
-            i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
-            blueInputPlaceholder="Blue"
-            i18n-alphaInputPlaceholder="kendo.colorgradient.alphaInputPlaceholder|The placeholder for the alpha input."
-            alphaInputPlaceholder="Alpha"
             i18n-passContrast="kendo.colorgradient.passContrast|The pass message for the contrast tool."
             passContrast="Pass"
             i18n-failContrast="kendo.colorgradient.failContrast|The fail message for the contrast tool."
             failContrast="Fail"
             i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
-            contrastRatio="Contrast ratio">
+            contrastRatio="Contrast ratio"
+            i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
+            formatButton="Change color format">
         </ng-container>
         <div class="k-colorgradient-canvas k-hstack">
             <div class="k-hsv-rectangle" [style.background]="backgroundColor">
@@ -8361,6 +8555,14 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
                     >
                     </div>
                 </div>
+                <svg kendoColorContrastSvg
+                    *ngIf="contrastToolVisible && gradientWrapper"
+                    class="k-color-contrast-svg"
+                    xmlns="http://www.w3.org/2000/svg"
+                    [wrapper]="gradientWrapper ? gradientWrapper : undefined"
+                    [hsva]="hsva"
+                    [backgroundColor]="contrastTool">
+                </svg>
             </div>
             <div class="k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}">
                 <span class="k-clear-color k-button k-flat k-button-icon"
@@ -8386,12 +8588,12 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
                     [max]="360"
                     [smallStep]="5"
                     [largeStep]="10"
-                    [(value)]="hsva.h"
+                    [value]="hsva.value.h"
                     (valueChange)="handleHueSliderChange($event)"
                 >
                 </kendo-slider>
                 <kendo-slider
-                    *ngIf="opacity && format === 'rgba'"
+                    *ngIf="opacity"
                     #alphaSlider
                     [ngClass]="{'k-align-self-end': clearButton}"
                     class="k-alpha-slider k-colorgradient-slider"
@@ -8429,12 +8631,21 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
         styles: [`
         .k-clear-color {
             position: absolute;
+            top: 0;
             left: 50%;
             transform: translateX(-50%);
         }
-        .k-align-self-end {
+        .k-colorgradient-slider.k-align-self-end {
             height: 140px;
         }
+
+        .k-color-contrast-svg {
+            position: absolute;
+            overflow: visible;
+            pointer-events: none;
+            left: 0px;
+            top: 0px;
+        }
     `]
     }),
     __metadata("design:paramtypes", [ElementRef,
@@ -8444,93 +8655,174 @@ ColorGradientComponent = ColorGradientComponent_1 = __decorate([
         LocalizationService])
 ], ColorGradientComponent);
 
-var ColorPickerComponent_1;
-const DEFAULT_PRESET = 'office';
-const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+/**
+ * @hidden
+ */
+let ColorPaletteService = class ColorPaletteService {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.colorRows = [];
+    }
+    setColorMatrix(palette, columns) {
+        this.colorRows = [];
+        if (!(isPresent(palette) && palette.length)) {
+            return;
+        }
+        columns = columns || palette.length;
+        for (let start = 0; start < palette.length; start += columns) {
+            const row = palette.slice(start, columns + start);
+            this.colorRows.push(row);
+        }
+    }
+    getCellCoordsFor(color) {
+        if (!isPresent(color)) {
+            return;
+        }
+        for (let row = 0; row < this.colorRows.length; row++) {
+            for (let col = 0; col < this.colorRows[row].length; col++) {
+                if (this.colorRows[row][col] === color) {
+                    return { row, col };
+                }
+            }
+        }
+    }
+    getColorAt(cellCoords) {
+        if (!(isPresent(cellCoords) && isPresent(this.colorRows[cellCoords.row]))) {
+            return;
+        }
+        return this.colorRows[cellCoords.row][cellCoords.col];
+    }
+    getNextCell(current, horizontalStep, verticalStep) {
+        if (!(isPresent(current) && isPresent(current.row) && isPresent(current.col))) {
+            return { row: 0, col: 0 };
+        }
+        const row = this.clampIndex(current.row + verticalStep, this.colorRows.length - 1);
+        const col = this.clampIndex(current.col + horizontalStep, this.colorRows[row].length - 1);
+        return { row, col };
+    }
+    clampIndex(index, max) {
+        const minArrayIndex = 0;
+        if (index < minArrayIndex) {
+            return minArrayIndex;
+        }
+        if (index > max) {
+            return max;
+        }
+        return index;
+    }
+};
+ColorPaletteService = __decorate([
+    Injectable()
+], ColorPaletteService);
+
+/**
+ * @hidden
+ */
+let ColorPaletteLocalizationService = class ColorPaletteLocalizationService extends LocalizationService {
+    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
+        super(prefix, messageService, _rtl);
+        this.flatColorPickerLocalization = flatColorPickerLocalization;
+    }
+    get(shortKey) {
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
+        }
+        return super.get(shortKey);
+    }
+};
+ColorPaletteLocalizationService = __decorate([
+    __param(0, Inject(L10N_PREFIX)),
+    __param(1, Optional()),
+    __param(2, Optional()), __param(2, Inject(RTL)),
+    __param(3, Optional()), __param(3, Inject(FlatColorPickerLocalizationService)),
+    __metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
+], ColorPaletteLocalizationService);
+
+var ColorPaletteComponent_1;
+const DEFAULT_TILE_SIZE = 24;
+const DEFAULT_COLUMNS_COUNT = 10;
+const DEFAULT_PRESET$1 = 'office';
+const DEFAULT_ACCESSIBLE_PRESET$1 = 'accessible';
 let serial$1 = 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 ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
+ * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
-let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
-    constructor(popupService, cdr, localizationService, ngZone) {
-        this.popupService = popupService;
+let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponent {
+    constructor(host, service, cdr, renderer, localizationService) {
+        this.host = host;
+        this.service = service;
         this.cdr = cdr;
+        this.renderer = renderer;
         this.localizationService = localizationService;
-        this.ngZone = ngZone;
         /**
          * @hidden
          */
-        this.hostClasses = true;
+        this.id = `k-colorpalette-${serial$1++}`;
         /**
-         * @hidden
+         * Specifies the output format of the ColorPaletteComponent.
+         * The input value may be in a different format. However, it will be parsed into the output `format`
+         * after the component processes it.
+         *
+         * The supported values are:
+         * * (Default) `hex`
+         * * `rgba`
+         * * `name`
          */
-        this.focusableId = `k-colorpicker-${serial$1++}`;
+        this.format = 'hex';
         /**
-         * Sets what view the ColorPicker will render in the popup.
+         * Sets the disabled state of the ColorPalette.
          */
-        this.view = 'gradient';
+        this.disabled = false;
         /**
-         * Sets the read-only state of the ColorPicker.
+         * Sets the read-only state of the ColorPalette.
          */
         this.readonly = false;
         /**
-         * Sets the disabled state of the ColorPicker.
+         * Specifies the size of a color cell.
+         *
+         * The possible values are:
+         * * (Default) `tileSize = 24`
+         * * `{ width: number, height: number }`
          */
-        this.disabled = false;
+        this.tileSize = { width: DEFAULT_TILE_SIZE, height: DEFAULT_TILE_SIZE };
         /**
-         * 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.
-         *
-         * The supported values are:
-         * * `rgba` (default)
-         * * `hex`
-         * * [name](https://www.w3.org/wiki/CSS/Properties/color/keywords)
+         * Fires each time the color selection is changed.
          */
-        this.format = 'rgba';
+        this.selectionChange = new EventEmitter();
         /**
          * Fires each time the value is changed.
          */
         this.valueChange = new EventEmitter();
         /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel it, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel it, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires each time ColorPicker is focused.
+         * Fires each time the user selects a cell with the mouse or presses `Enter`.
+         *
+         * @hidden
          */
-        this.onFocus = new EventEmitter();
+        this.cellSelection = new EventEmitter();
         /**
-         * Fires each time the ColorPicker is blurred.
+         * @hidden
          */
-        this.onBlur = new EventEmitter();
+        this.hostClasses = true;
         /**
-         * 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.
-         *
-         * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
+         * @hidden
          */
-        this.activeColorClick = new EventEmitter();
+        this.uniqueId = guid();
         this._tabindex = 0;
-        this._popupSettings = { animate: true };
-        this._paletteSettings = {};
-        this._gradientSettings = { opacity: true, clearButton: false, delay: 0 };
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
+    /**
+     * @hidden
+     */
+    get paletteId() {
+        return this.id;
+    }
     /**
      * Specifies the value of the initially selected color.
      */
@@ -8541,31 +8833,37 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         return this._value;
     }
     /**
-     * Configures the popup of the ColorPicker.
-     */
-    set popupSettings(value) {
-        this._popupSettings = Object.assign(this._popupSettings, value);
-    }
-    get popupSettings() {
-        return this._popupSettings;
-    }
-    /**
-     * Configures the palette that is displayed in the ColorPicker popup.
+     * Specifies the number of columns that will be displayed.
+     * Defaults to `10`.
      */
-    set paletteSettings(value) {
-        this._paletteSettings = Object.assign(this._paletteSettings, value);
+    set columns(value) {
+        const minColumnsCount = 1;
+        this._columns = value > minColumnsCount ? value : minColumnsCount;
     }
-    get paletteSettings() {
-        return this._paletteSettings;
+    get columns() {
+        return this._columns;
     }
     /**
-     * Configures the gradient that is displayed in the ColorPicker popup.
+     * The color palette that will be displayed.
+     *
+     * The supported values are:
+     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
+     * * A string with comma-separated colors.
+     * * A string array.
      */
-    set gradientSettings(value) {
-        this._gradientSettings = Object.assign(this._gradientSettings, value);
+    set palette(value) {
+        if (!isPresent(value)) {
+            value = DEFAULT_PRESET$1;
+        }
+        if (typeof value === 'string' && isPresent(PALETTEPRESETS[value])) {
+            this.columns = this.columns || PALETTEPRESETS[value].columns;
+            value = PALETTEPRESETS[value].colors;
+        }
+        const colors = (typeof value === 'string') ? value.split(',') : value;
+        this._palette = colors.map(color => parseColor$1(color, this.format, false, false));
     }
-    get gradientSettings() {
-        return this._gradientSettings;
+    get palette() {
+        return this._palette;
     }
     /**
      * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
@@ -8579,710 +8877,1265 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         return !this.disabled ? this._tabindex : undefined;
     }
     /**
-     * Indicates whether the ColorPicker popup is open.
+     * @hidden
      */
-    get isOpen() {
-        return isPresent(this.popupRef);
+    get tileLayout() {
+        if (typeof this.tileSize !== 'number') {
+            return this.tileSize;
+        }
+        return { width: this.tileSize, height: this.tileSize };
     }
     /**
      * @hidden
      */
-    get iconStyles() {
-        if (this.iconClass) {
-            return this.iconClass;
-        }
-        if (this.icon) {
-            return `k-icon k-i-${this.icon}`;
-        }
+    get colorRows() {
+        return this.service.colorRows;
     }
+    /**
+     * @hidden
+     */
+    get hostTabindex() { return this.tabindex; }
+    /**
+     * @hidden
+     */
+    get disabledClass() { return this.disabled; }
+    /**
+     * @hidden
+     */
+    get readonlyAttribute() { return this.readonly; }
     ngOnInit() {
-        const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
-        const settingsPalette = this._paletteSettings.palette;
-        const presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
-            PALETTEPRESETS[settingsPalette].columns :
-            undefined;
-        this._paletteSettings = {
-            palette: settingsPalette || defaultPreset,
-            tileSize: this._paletteSettings.tileSize || 24,
-            columns: this._paletteSettings.columns || presetColumns || 10
-        };
-    }
-    ngOnChanges(changes) {
-        if (changes.format && changes.format.currentValue === 'name') {
-            this.view = 'palette';
-        }
-        if (this.view === 'gradient' && this.gradientSettings.opacity) {
-            this.format = 'rgba';
-            this.value = parseColor$1(this.value, this.format);
+        if (this.colorRows.length === 0) {
+            const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET$1 : DEFAULT_ACCESSIBLE_PRESET$1;
+            this.palette = this.palette || defaultPreset;
+            this.setRows();
+            this.focusedCell = this.service.getCellCoordsFor(this.value);
         }
     }
+    ngAfterViewInit() {
+        this.setHostElementAriaLabel();
+    }
     ngOnDestroy() {
-        this.closePopup();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
     }
+    ngOnChanges(changes) {
+        if (changes.palette || changes.columns) {
+            this.setRows();
+        }
+        if (changes.palette || changes.value || changes.columns) {
+            this.focusedCell = this.service.getCellCoordsFor(this.value);
+            this.setHostElementAriaLabel();
+        }
+    }
     /**
      * @hidden
      */
-    handleWrapperClick() {
-        this.toggleWithEvents(!this.isOpen);
-        this.focus();
+    handleKeydown(event) {
+        const isRTL = this.direction === 'rtl';
+        switch (event.keyCode) {
+            case Keys.ArrowDown:
+                this.handleCellNavigation(0, 1);
+                break;
+            case Keys.ArrowUp:
+                this.handleCellNavigation(0, -1);
+                break;
+            case Keys.ArrowRight:
+                this.handleCellNavigation(isRTL ? -1 : 1, 0);
+                break;
+            case Keys.ArrowLeft:
+                this.handleCellNavigation(isRTL ? 1 : -1, 0);
+                break;
+            case Keys.Enter:
+                this.handleEnter();
+                break;
+            default: return;
+        }
+        event.preventDefault();
     }
     /**
      * @hidden
      */
-    handleActiveColorClick() {
-        this.focus();
-        const event = new ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.handleWrapperClick();
-        }
+    handleHostBlur() {
+        this.notifyNgTouched();
+        this.handleCellFocusOnBlur();
     }
     /**
-     * Focuses the wrapper of the ColorPicker.
+     * @hidden
      */
-    focus() {
-        if (this.disabled) {
+    handleCellSelection(value, focusedCell) {
+        if (this.readonly) {
             return;
         }
-        this.wrapper.nativeElement.focus();
+        this.selectedCell = focusedCell;
+        this.focusedCell = this.selectedCell;
+        this.focusInComponent = true;
+        const parsedColor = parseColor$1(value, this.format, false, false);
+        this.cellSelection.emit(parsedColor);
+        this.handleValueChange(parsedColor);
+        if (this.selection !== parsedColor) {
+            this.selection = parsedColor;
+            this.selectionChange.emit(parsedColor);
+        }
+        if (focusedCell) {
+            this.activeCellId = `k-${this.selectedCell.row}-${this.selectedCell.col}-${this.uniqueId}`;
+        }
     }
     /**
      * @hidden
      */
-    handleWrapperFocus() {
-        if (isPresent(this.palette)) {
-            this.palette.nativeElement.focus();
-        }
-        if (this.isFocused) {
-            return;
-        }
-        this.isFocused = true;
-        this.onFocus.emit();
+    writeValue(value) {
+        this.value = value;
+        this.focusedCell = this.service.getCellCoordsFor(this.value);
     }
     /**
-     * Blurs the ColorPicker.
+     * @hidden
      */
-    blur() {
-        this.wrapper.nativeElement.blur();
+    registerOnChange(fn) {
+        this.notifyNgChanged = fn;
     }
     /**
      * @hidden
      */
-    handleWrapperBlur() {
-        if (this.isOpen) {
-            return;
-        }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
+    registerOnTouched(fn) {
+        this.notifyNgTouched = fn;
     }
     /**
-     * Clears the color value of the ColorPicker.
+     * @hidden
      */
-    reset() {
-        if (!isPresent(this.value)) {
-            return;
-        }
-        this._value = undefined;
-        this.notifyNgChanged(undefined);
+    setDisabledState(isDisabled) {
+        this.cdr.markForCheck();
+        this.disabled = isDisabled;
     }
     /**
-     * Toggles the popup of the ColorPicker.
-     * Does not trigger the `open` and `close` events of the component.
-     *
-     * @param open An optional parameter. Specifies whether the popup will be opened or closed.
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
      */
-    toggle(open) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        this.closePopup();
-        open = isPresent(open) ? open : !this.isOpen;
-        if (open) {
-            this.openPopup();
-        }
+    isEmpty() {
+        return false;
     }
     /**
-     * @hidden
+     * Clears the color value of the ColorPalette.
      */
-    handleValueChange(color, closePopup) {
-        const parsedColor = parseColor$1(color, this.format);
-        const valueChange = parsedColor !== this.value;
-        if (closePopup) {
-            this.toggleWithEvents(false);
-            this.focus();
-        }
-        if (valueChange) {
-            this.value = parsedColor;
-            this.valueChange.emit(parsedColor);
-            this.notifyNgChanged(parsedColor);
+    reset() {
+        this.focusedCell = null;
+        if (isPresent(this.value)) {
+            this.handleValueChange(undefined);
         }
+        this.selectedCell = undefined;
     }
-    /**
-     * @hidden
-     */
-    handlePopupBlur(event) {
-        const focusInPopupElement = this.popupRef.popupElement.contains(event.relatedTarget);
-        const wrapperClicked = event.relatedTarget === this.wrapper.nativeElement;
-        if (!this.isFocused || wrapperClicked || focusInPopupElement) {
+    handleValueChange(color) {
+        if (this.value === color) {
             return;
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
-        this.toggleWithEvents(false);
-    }
-    /**
-     * @hidden
-     */
-    writeValue(value) {
-        this.value = value;
-    }
-    /**
-     * @hidden
-     */
-    registerOnChange(fn) {
-        this.notifyNgChanged = fn;
-    }
-    /**
-     * @hidden
-     */
-    registerOnTouched(fn) {
-        this.notifyNgTouched = fn;
-    }
-    /**
-     * @hidden
-     */
-    setDisabledState(isDisabled) {
-        this.cdr.markForCheck();
-        this.disabled = isDisabled;
+        this.value = color;
+        this.valueChange.emit(color);
+        this.notifyNgChanged(color);
+        this.setHostElementAriaLabel();
     }
-    /**
-     * @hidden
-     */
-    handleWrapperKeyDown(event) {
-        if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
-            event.preventDefault();
-            this.toggleWithEvents(true);
-        }
+    handleCellFocusOnBlur() {
+        this.focusInComponent = false;
+        this.focusedCell = this.selectedCell;
     }
-    /**
-     * @hidden
-     */
-    handlePopupKeyDown(event) {
-        if (event.keyCode === Keys.Escape) {
-            this.toggleWithEvents(false);
-            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;
-                }
-            }
+    setRows() {
+        if (!isPresent(this.palette)) {
+            return;
         }
+        this.columns = this.columns || DEFAULT_COLUMNS_COUNT;
+        this.service.setColorMatrix(this.palette, this.columns);
     }
-    /**
-     * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
-     */
-    isEmpty() {
-        return false;
-    }
-    toggleWithEvents(open) {
-        const sameState = this.isOpen === open;
-        if (this.disabled || this.readonly || sameState) {
+    handleCellNavigation(horizontalStep, verticalStep) {
+        if (this.readonly) {
             return;
         }
-        const eventArgs = new PreventableEvent();
-        open ? this.open.emit(eventArgs) : 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.focusedCell = this.service.getNextCell(this.focusedCell, horizontalStep, verticalStep);
+        this.focusInComponent = true;
     }
-    openPopup() {
-        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
-        const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
-        const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
-        this.popupRef = this.popupService.open({
-            anchor: this.wrapper,
-            animate: this.popupSettings.animate,
-            appendTo: this.popupSettings.appendTo,
-            popupAlign: popupPosition,
-            anchorAlign: anchorPosition,
-            popupClass: 'k-colorpicker-popup',
-            content: this.popupTemplate,
-            positionMode: 'absolute'
-        });
-        this.popupRef.popupAnchorViewportLeave.subscribe(() => {
-            this.toggleWithEvents(false);
-            if (!this.isOpen) {
-                this.wrapper.nativeElement.focus({
-                    preventScroll: true
-                });
-            }
-        });
+    setHostElementAriaLabel() {
+        const parsed = parseColor$1(this.value, this.format);
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorPaletteNoColor')}`);
     }
-    closePopup() {
-        if (!this.isOpen) {
+    handleEnter() {
+        if (!isPresent(this.focusedCell)) {
             return;
         }
-        this.popupRef.close();
-        this.popupRef = null;
-        this.palette = null;
+        const selectedColor = this.service.getColorAt(this.focusedCell);
+        this.handleCellSelection(selectedColor, this.focusedCell);
     }
 };
-__decorate([
-    HostBinding('class.k-widget'),
-    HostBinding('class.k-colorpicker'),
-    __metadata("design:type", Boolean)
-], ColorPickerComponent.prototype, "hostClasses", void 0);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
-], ColorPickerComponent.prototype, "direction", void 0);
+], ColorPaletteComponent.prototype, "direction", void 0);
 __decorate([
-    Input(),
-    __metadata("design:type", String)
-], ColorPickerComponent.prototype, "focusableId", void 0);
+    HostBinding('attr.id'),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [])
+], ColorPaletteComponent.prototype, "paletteId", null);
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ColorPickerComponent.prototype, "view", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ColorPickerComponent.prototype, "readonly", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], ColorPickerComponent.prototype, "disabled", void 0);
+], ColorPaletteComponent.prototype, "id", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ColorPickerComponent.prototype, "format", void 0);
+], ColorPaletteComponent.prototype, "format", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
-], ColorPickerComponent.prototype, "value", null);
+], ColorPaletteComponent.prototype, "value", null);
 __decorate([
     Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], ColorPickerComponent.prototype, "popupSettings", null);
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], ColorPaletteComponent.prototype, "columns", null);
 __decorate([
     Input(),
     __metadata("design:type", Object),
     __metadata("design:paramtypes", [Object])
-], ColorPickerComponent.prototype, "paletteSettings", null);
+], ColorPaletteComponent.prototype, "palette", null);
 __decorate([
     Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], ColorPickerComponent.prototype, "gradientSettings", null);
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], ColorPaletteComponent.prototype, "tabindex", null);
 __decorate([
     Input(),
-    __metadata("design:type", String)
-], ColorPickerComponent.prototype, "icon", void 0);
+    __metadata("design:type", Boolean)
+], ColorPaletteComponent.prototype, "disabled", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Object)
-], ColorPickerComponent.prototype, "iconClass", void 0);
+    __metadata("design:type", Boolean)
+], ColorPaletteComponent.prototype, "readonly", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], ColorPickerComponent.prototype, "tabindex", null);
+    __metadata("design:type", Object)
+], ColorPaletteComponent.prototype, "tileSize", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "valueChange", void 0);
+], ColorPaletteComponent.prototype, "selectionChange", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "open", void 0);
+], ColorPaletteComponent.prototype, "valueChange", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "close", void 0);
-__decorate([
-    Output('focus'),
-    __metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "onFocus", void 0);
-__decorate([
-    Output('blur'),
-    __metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "onBlur", void 0);
+], ColorPaletteComponent.prototype, "cellSelection", void 0);
 __decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], ColorPickerComponent.prototype, "activeColorClick", void 0);
+    HostBinding('attr.tabindex'),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [])
+], ColorPaletteComponent.prototype, "hostTabindex", null);
 __decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    __metadata("design:type", ViewContainerRef)
-], ColorPickerComponent.prototype, "container", void 0);
+    HostBinding('class.k-colorpalette'),
+    __metadata("design:type", Boolean)
+], ColorPaletteComponent.prototype, "hostClasses", void 0);
 __decorate([
-    ViewChild('wrapper', { static: true }),
-    __metadata("design:type", ElementRef)
-], ColorPickerComponent.prototype, "wrapper", void 0);
+    HostBinding('attr.aria-disabled'),
+    HostBinding('class.k-state-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPaletteComponent.prototype, "disabledClass", null);
 __decorate([
-    ViewChild('popupTemplate', { static: true }),
-    __metadata("design:type", TemplateRef)
-], ColorPickerComponent.prototype, "popupTemplate", void 0);
+    HostBinding('attr.aria-readonly'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], ColorPaletteComponent.prototype, "readonlyAttribute", null);
 __decorate([
-    ViewChild('palette', { read: ElementRef, static: false }),
-    __metadata("design:type", ElementRef)
-], ColorPickerComponent.prototype, "palette", void 0);
+    HostListener('keydown', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], ColorPaletteComponent.prototype, "handleKeydown", null);
 __decorate([
-    ViewChild('colorGradient', { static: false }),
-    __metadata("design:type", ColorGradientComponent)
-], ColorPickerComponent.prototype, "colorGradient", void 0);
-ColorPickerComponent = ColorPickerComponent_1 = __decorate([
-    Component({
-        selector: 'kendo-colorpicker',
-        providers: [{
-                multi: true,
+    HostListener('blur'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ColorPaletteComponent.prototype, "handleHostBlur", null);
+ColorPaletteComponent = ColorPaletteComponent_1 = __decorate([
+    Component({
+        exportAs: 'kendoColorPalette',
+        selector: 'kendo-colorpalette',
+        providers: [
+            {
+                multi: true,
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ColorPickerComponent_1)
+                useExisting: forwardRef(() => ColorPaletteComponent_1) // tslint:disable-line:no-forward-ref
             }, {
                 provide: KendoInput,
-                useExisting: forwardRef(() => ColorPickerComponent_1)
+                useExisting: forwardRef(() => ColorPaletteComponent_1)
             },
-            ColorPickerLocalizationService,
+            ColorPaletteService,
+            ColorPaletteLocalizationService,
             {
                 provide: LocalizationService,
-                useExisting: ColorPickerLocalizationService
+                useExisting: ColorPaletteLocalizationService
             },
             {
                 provide: L10N_PREFIX,
-                useValue: 'kendo.colorpicker'
+                useValue: 'kendo.colorpalette'
             }
         ],
         template: `
-        <ng-container kendoColorPickerLocalizedMessages
-            i18n-colorGradient="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."
-            colorPaletteNoColor="Colorpalette no color chosen"
-            i18n-colorGradientHandle="kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
-            colorGradientHandle="Choose color"
-            i18n-clearButton="kendo.colorpicker.clearButton|The title for the clear button."
-            clearButton="Clear value"
-            i18n-hueSliderHandle="kendo.colorpicker.hueSliderHandle|The title for the hue slider handle."
-            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">
+        <ng-container kendoColorPaletteLocalizedMessages
+            i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
+            colorPaletteNoColor="Colorpalette no color chosen">
         </ng-container>
-        <span
-            #wrapper
-            [ngClass]="{
-                'k-picker-wrap': true,
-                'k-state-disabled': this.disabled,
-                'k-state-focused': this.isFocused
-            }"
-            role="listbox"
-            [attr.aria-expanded]="isOpen"
-            [attr.aria-readonly]="readonly"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-label]="value"
-            [id]="focusableId"
-            [attr.tabindex]="tabindex"
-            (focus)="handleWrapperFocus()"
-            (blur)="handleWrapperBlur()"
-            (mousedown)="$event.preventDefault()"
-            (keydown)="handleWrapperKeyDown($event)"
-        >
-            <span *ngIf="!iconStyles" class="k-selected-color" [style.background-color]="value" (click)="handleActiveColorClick()">
-                <span class="k-icon k-i-line" *ngIf="!value"></span>
-            </span>
-            <span *ngIf="iconStyles" class="k-tool-icon" [ngClass]="iconStyles" (click)="handleActiveColorClick()">
-                <span class="k-selected-color" [style.background-color]="value"></span>
-            </span>
-            <span class="k-select" (click)="handleWrapperClick()">
-                <span class="k-icon k-i-arrow-s"></span>
-            </span>
-        </span>
-        <ng-template #popupTemplate>
-            <kendo-colorgradient  #colorGradient
-                *ngIf="view === 'gradient' || view === 'combo'"
-                [value]="value"
-                [format]="format"
-                [opacity]="gradientSettings.opacity"
-                [clearButton]="gradientSettings.clearButton"
-                [delay]="gradientSettings.delay"
-                (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()"
-                (keydown)="handlePopupKeyDown($event)"
-            >
-            </kendo-colorpalette>
-        </ng-template>
-        <ng-container #container></ng-container>
+        <div role="listbox" class="k-colorpalette-table-wrap"
+            [attr.aria-activedescendant]="activeCellId">
+            <table class="k-colorpalette-table k-palette">
+                <tbody>
+                    <tr *ngFor="let row of colorRows; let rowIndex = index">
+                        <td *ngFor="let color of row; let colIndex = index"
+                            role="option"
+                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
+                            [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
+                            [attr.aria-label]="color"
+                            class="k-colorpalette-tile"
+                            [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
+                            [attr.value]="color"
+                            (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
+                            [ngStyle]="{
+                                backgroundColor: color,
+                                width: tileLayout.width + 'px',
+                                height: tileLayout.height + 'px',
+                                minWidth: tileLayout.width + 'px'
+                            }">
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     `
     }),
-    __metadata("design:paramtypes", [PopupService,
+    __metadata("design:paramtypes", [ElementRef,
+        ColorPaletteService,
         ChangeDetectorRef,
-        LocalizationService,
-        NgZone])
-], ColorPickerComponent);
+        Renderer2,
+        LocalizationService])
+], ColorPaletteComponent);
 
 /**
  * @hidden
  */
-let ColorPaletteService = class ColorPaletteService {
-    /**
-     * @hidden
-     */
-    constructor() {
-        this.colorRows = [];
-    }
-    setColorMatrix(palette, columns) {
-        this.colorRows = [];
-        if (!(isPresent(palette) && palette.length)) {
-            return;
-        }
-        columns = columns || palette.length;
-        for (let start = 0; start < palette.length; start += columns) {
-            const row = palette.slice(start, columns + start);
-            this.colorRows.push(row);
-        }
+let FlatColorPickerHeaderComponent = class FlatColorPickerHeaderComponent {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClasses = true;
+        this.viewChange = new EventEmitter();
+        this.valuePaneClick = new EventEmitter();
+        this.clearButtonClick = new EventEmitter();
     }
-    getCellCoordsFor(color) {
-        if (!isPresent(color)) {
-            return;
-        }
-        for (let row = 0; row < this.colorRows.length; row++) {
-            for (let col = 0; col < this.colorRows[row].length; col++) {
-                if (this.colorRows[row][col] === color) {
-                    return { row, col };
-                }
-            }
-        }
+    onViewButtonClick(view) {
+        this.activeView = view;
+        this.viewChange.emit(view);
     }
-    getColorAt(cellCoords) {
-        if (!(isPresent(cellCoords) && isPresent(this.colorRows[cellCoords.row]))) {
-            return;
-        }
-        return this.colorRows[cellCoords.row][cellCoords.col];
+    get viewButtons() {
+        return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
     }
-    getNextCell(current, horizontalStep, verticalStep) {
-        if (!(isPresent(current) && isPresent(current.row) && isPresent(current.col))) {
-            return { row: 0, col: 0 };
-        }
-        const row = this.clampIndex(current.row + verticalStep, this.colorRows.length - 1);
-        const col = this.clampIndex(current.col + horizontalStep, this.colorRows[row].length - 1);
-        return { row, col };
+    getViewButtonIcon(view) {
+        return view === 'gradient' ? 'k-i-color-canvas' : 'k-i-palette';
     }
-    clampIndex(index, max) {
-        const minArrayIndex = 0;
-        if (index < minArrayIndex) {
-            return minArrayIndex;
-        }
-        if (index > max) {
-            return max;
-        }
-        return index;
+    getText(text) {
+        return this.localizationService.get(text);
     }
 };
-ColorPaletteService = __decorate([
-    Injectable()
-], ColorPaletteService);
+__decorate([
+    HostBinding('class.k-coloreditor-header'),
+    HostBinding('class.k-hstack'),
+    __metadata("design:type", Boolean)
+], FlatColorPickerHeaderComponent.prototype, "hostClasses", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FlatColorPickerHeaderComponent.prototype, "clearButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FlatColorPickerHeaderComponent.prototype, "activeView", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FlatColorPickerHeaderComponent.prototype, "views", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FlatColorPickerHeaderComponent.prototype, "preview", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FlatColorPickerHeaderComponent.prototype, "value", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FlatColorPickerHeaderComponent.prototype, "selection", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], FlatColorPickerHeaderComponent.prototype, "viewChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], FlatColorPickerHeaderComponent.prototype, "valuePaneClick", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], FlatColorPickerHeaderComponent.prototype, "clearButtonClick", void 0);
+__decorate([
+    ViewChildren('viewButtons', { read: ElementRef }),
+    __metadata("design:type", QueryList)
+], FlatColorPickerHeaderComponent.prototype, "viewButtonsCollection", void 0);
+__decorate([
+    ViewChild('clearButton', { read: ElementRef, static: false }),
+    __metadata("design:type", ElementRef)
+], FlatColorPickerHeaderComponent.prototype, "clearButtonElement", void 0);
+FlatColorPickerHeaderComponent = __decorate([
+    Component({
+        selector: '[kendoFlatColorPickerHeader]',
+        template: `
+        <div class="k-coloreditor-header-actions k-hstack">
+            <div *ngIf="viewButtons" class="k-button-group k-button-group-flat">
+                <button *ngFor="let view of views"
+                    #viewButtons
+                    (click)="onViewButtonClick(view)"
+                    class="k-button k-icon-button k-flat"
+                    [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
+                    [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
+                    [attr.aria-pressed]="activeView === view"
+                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                >
+                    <span
+                        class="k-button-icon k-icon"
+                        [ngClass]="getViewButtonIcon(view)">
+                    </span>
+                </button>
+            </div>
+        </div>
+        <div class="k-spacer"></div>
+        <div class="k-coloreditor-header-actions k-hstack">
+            <button *ngIf="clearButton"
+                #clearButton
+                class="k-button k-icon-button k-flat k-coloreditor-reset"
+                [attr.aria-label]="getText('clearButton')"
+                [attr.title]="getText('clearButton')"
+                (click)="clearButtonClick.emit()">
+                    <span class="k-button-icon k-icon k-i-reset-color"></span>
+            </button>
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
+                <span
+                    class="k-coloreditor-preview-color k-color-preview"
+                    [attr.title]="getText('previewColor')"
+                    [style.background-color]="selection">
+                </span>
+                <span class="k-coloreditor-current-color k-color-preview"
+                    [style.background-color]="value"
+                    [attr.title]="getText('revertSelection')"
+                    (click)="valuePaneClick.emit($event)">
+                </span>
+            </div>
+        </div>
+    `
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
+], FlatColorPickerHeaderComponent);
 
 /**
  * @hidden
  */
-let ColorPaletteLocalizationService = class ColorPaletteLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl, colorPickerLocalization) {
-        super(prefix, messageService, _rtl);
-        this.colorPickerLocalization = colorPickerLocalization;
+let FlatColorPickerActionButtonsComponent = class FlatColorPickerActionButtonsComponent {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClasses = true;
+        this.actionButtonClick = new EventEmitter();
     }
-    get(shortKey) {
-        if (this.colorPickerLocalization) {
-            return this.colorPickerLocalization.get(shortKey);
-        }
-        return super.get(shortKey);
+    getText(text) {
+        return this.localizationService.get(text);
+    }
+    onActionButtonClick(type, ev) {
+        let args = {
+            target: type,
+            originalEvent: ev
+        };
+        this.actionButtonClick.emit(args);
     }
 };
-ColorPaletteLocalizationService = __decorate([
-    __param(0, Inject(L10N_PREFIX)),
-    __param(1, Optional()),
-    __param(2, Optional()), __param(2, Inject(RTL)),
-    __param(3, Optional()), __param(3, Inject(ColorPickerLocalizationService)),
-    __metadata("design:paramtypes", [String, MessageService, Boolean, ColorPickerLocalizationService])
-], ColorPaletteLocalizationService);
+__decorate([
+    HostBinding('class.k-coloreditor-footer'),
+    HostBinding('class.k-actions'),
+    HostBinding('class.k-hstack'),
+    __metadata("design:type", Boolean)
+], FlatColorPickerActionButtonsComponent.prototype, "hostClasses", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], FlatColorPickerActionButtonsComponent.prototype, "actionButtonClick", void 0);
+__decorate([
+    ViewChild('last', { read: ElementRef, static: false }),
+    __metadata("design:type", ElementRef)
+], FlatColorPickerActionButtonsComponent.prototype, "lastButton", void 0);
+FlatColorPickerActionButtonsComponent = __decorate([
+    Component({
+        selector: '[kendoFlatColorPickerActionButtons]',
+        template: `
+        <button
+            class="k-coloreditor-cancel k-button"
+            [attr.title]="getText('cancelButton')"
+            (click)="onActionButtonClick('cancel', $event)"
+        >{{getText('cancelButton')}}</button>
+        <button #last
+            class="k-coloreditor-apply k-button k-primary"
+            [attr.title]="getText('applyButton')"
+            (click)="onActionButtonClick('apply', $event)"
+        >{{getText('applyButton')}}</button>
+    `
+    }),
+    __metadata("design:paramtypes", [LocalizationService])
+], FlatColorPickerActionButtonsComponent);
+
+var FlatColorPickerComponent_1;
+/**
+ * Represents the [Kendo UI FlatColorPicker component for Angular]({% slug overview_flatcolorpicker %}).
+ *
+ * The FlatColorPicker is a powerful tool which allows the user to choose colors through palettes with predefined sets of colors and
+ * through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
+ */
+let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPickerComponent {
+    constructor(service, host, localizationService, cdr, renderer, ngZone) {
+        this.service = service;
+        this.host = host;
+        this.localizationService = localizationService;
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.hostClasses = true;
+        /**
+         * Sets the read-only state of the FlatColorPicker.
+         *
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Sets the disabled state of the FlatColorPicker.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Specifies the output format of the FlatColorPicker.
+         *
+         * 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`
+         */
+        this.format = 'rgba';
+        /**
+         * Specifies whether the FlatColorPicker should display a 'Clear color' button.
+         *
+         * @default true
+         */
+        this.clearButton = true;
+        /**
+         * Displays `Apply` and `Cancel` action buttons and a color preview pane.
+         *
+         * 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
+         * initial state i.e. to the current value.
+         *
+         * @default true
+         */
+        this.preview = true;
+        /**
+         * Configures the layout of the `Apply` and `Cancel` action buttons.
+         * * `start`
+         * * `center`
+         * * `end` (default)
+         * * `stretch`
+         */
+        this.actionsLayout = 'end';
+        /**
+         * Specifies the views that will be rendered. Default value is gradient and palette.
+         */
+        this.views = ['gradient', 'palette'];
+        /**
+         * Fires each time the component value is changed.
+         */
+        this.valueChange = new EventEmitter();
+        /**
+         * Fires when the user cancels the current color selection.
+         *
+         * The event is emitted on preview pane or on 'Cancel' button click.
+         */
+        this.cancel = 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();
+        /**
+         * @hidden
+         */
+        this.actionButtonClick = new EventEmitter();
+        this._tabindex = 0;
+        this._gradientSettings = { opacity: true, delay: 0 };
+        this._paletteSettings = {};
+        this.subscriptions = new Subscription();
+        this.notifyNgChanged = () => { };
+        this.notifyNgTouched = () => { };
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    get ariaReadonly() {
+        return this.readonly;
+    }
+    get hostTabindex() {
+        return this.tabindex;
+    }
+    /**
+     * Specifies the initially selected color.
+     */
+    set value(value) {
+        this._value = parseColor$1(value, this.format, this.gradientSettings.opacity);
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * 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);
+        const defaultValue = 0;
+        this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+    }
+    get tabindex() {
+        return !this.disabled ? this._tabindex : undefined;
+    }
+    /**
+     * Configures the gradient view.
+     */
+    set gradientSettings(value) {
+        Object.assign(this._gradientSettings, value);
+    }
+    get gradientSettings() {
+        return this._gradientSettings;
+    }
+    /**
+     * Configures the palette view.
+     */
+    set paletteSettings(value) {
+        Object.assign(this._paletteSettings, value);
+    }
+    get paletteSettings() {
+        return this._paletteSettings;
+    }
+    ngOnInit() {
+        this.selection = this.value;
+        this._paletteSettings = this.service.getPaletteSettings(this._paletteSettings, this.format);
+        this.setActiveView();
+    }
+    ngAfterViewInit() {
+        this.setHostElementAriaLabel();
+        this.initDomEvents();
+        this.setSizingVariables();
+    }
+    ngOnChanges(changes) {
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
+        if (isChanged('paletteSettings', changes)) {
+            this.setSizingVariables();
+        }
+    }
+    ngOnDestroy() {
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    get headerHasContent() {
+        return this.preview || this.views.length > 1 || this.clearButton;
+    }
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty() {
+        return false;
+    }
+    /**
+     * Focuses the wrapper of the FlatColorPicker.
+     */
+    focus() {
+        if (this.disabled && this.focused) {
+            return;
+        }
+        this.host.nativeElement.focus();
+        this.focused = true;
+    }
+    /**
+     * Blurs the wrapper of the FlatColorPicker.
+     */
+    blur() {
+        if (!this.focused) {
+            return;
+        }
+        this.notifyNgTouched();
+        this.host.nativeElement.blur();
+        this.focused = false;
+    }
+    /**
+     * Clears the value of the FlatColorPicker.
+     */
+    reset() {
+        if (!isPresent(this.value)) {
+            return;
+        }
+        this.value = undefined;
+        this.notifyNgChanged(undefined);
+        this.setHostElementAriaLabel();
+    }
+    /**
+     * @hidden
+     */
+    onViewChange(view) {
+        if (this.activeView === view) {
+            return;
+        }
+        this.activeView = view;
+        this.activeViewChange.emit(view);
+        if (this.activeView === 'gradient') {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.gradient.gradientDragHandle.nativeElement.focus();
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    onClearButtonClick() {
+        this.resetInnerComponentValue();
+        this.host.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    handleValueChange(color) {
+        if (this.value === color) {
+            return;
+        }
+        if (this.preview) {
+            this.changeCurrentValue(color);
+        }
+        else {
+            this.setFlatColorPickerValue(color);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onAction(ev) {
+        ev.target === 'apply' ? this.setFlatColorPickerValue(this.selection) : this.resetSelection(ev.originalEvent);
+        this.actionButtonClick.emit();
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.notifyNgChanged = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.notifyNgTouched = fn;
+    }
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled) {
+        this.cdr.markForCheck();
+        this.disabled = isDisabled;
+    }
+    /**
+     * @hidden
+     */
+    resetSelection(ev) {
+        const eventArgs = new ColorPickerCancelEvent(ev);
+        this.cancel.emit(eventArgs);
+        if (!eventArgs.isDefaultPrevented()) {
+            this.selection = this.value;
+        }
+        this.notifyNgTouched();
+    }
+    setHostElementAriaLabel() {
+        const parsed = parseColor$1(this.value, this.format, this.gradientSettings.opacity);
+        const ariaLabelValue = `${this.value ? parsed : this.localizationService.get('flatColorPickerNoColor')}`;
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    }
+    setSizingVariables() {
+        const paletteTileSize = this.service.paletteTileLayout(this.paletteSettings.tileSize);
+        const value = `--kendo-color-preview-columns: ${this.paletteSettings.columns};
+            --kendo-color-preview-width: ${paletteTileSize.width}px;
+            --kendo-color-preview-height: ${paletteTileSize.height}px;`;
+        this.host.nativeElement.querySelector('.k-coloreditor-views.k-vstack').setAttribute('style', value);
+    }
+    changeCurrentValue(color) {
+        this.selection = color;
+        this.notifyNgTouched();
+    }
+    resetInnerComponentValue() {
+        this.selection = null;
+        if (this.gradient) {
+            this.gradient.reset();
+            return;
+        }
+        this.palette.reset();
+    }
+    setFlatColorPickerValue(color) {
+        if (this.value === color) {
+            return;
+        }
+        this.value = color;
+        this.valueChange.emit(color);
+        this.notifyNgChanged(color);
+        this.setHostElementAriaLabel();
+    }
+    setActiveView() {
+        if (!isPresent(this.activeView)) {
+            this.activeView = this.views[0];
+            return;
+        }
+        if (isDevMode() && this.views.indexOf(this.activeView) === -1) {
+            throw new Error("Invalid configuration: The current activeView is not present in the views collection");
+        }
+    }
+    initDomEvents() {
+        if (!this.host) {
+            return;
+        }
+        let hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focus', () => {
+                this.focused = true;
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'blur', () => {
+                this.focused = false;
+                this.notifyNgTouched();
+            }));
+        });
+    }
+};
+__decorate([
+    HostBinding('class.k-flatcolorpicker'),
+    HostBinding('class.k-coloreditor'),
+    __metadata("design:type", Boolean)
+], FlatColorPickerComponent.prototype, "hostClasses", void 0);
+__decorate([
+    HostBinding('class.k-state-disabled'),
+    HostBinding('attr.aria-disabled'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FlatColorPickerComponent.prototype, "disabledClass", null);
+__decorate([
+    HostBinding('attr.aria-readonly'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], FlatColorPickerComponent.prototype, "ariaReadonly", null);
+__decorate([
+    HostBinding('attr.dir'),
+    __metadata("design:type", String)
+], FlatColorPickerComponent.prototype, "direction", void 0);
+__decorate([
+    HostBinding('attr.tabindex'),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [])
+], FlatColorPickerComponent.prototype, "hostTabindex", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FlatColorPickerComponent.prototype, "readonly", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FlatColorPickerComponent.prototype, "disabled", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FlatColorPickerComponent.prototype, "format", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], FlatColorPickerComponent.prototype, "value", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], FlatColorPickerComponent.prototype, "tabindex", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FlatColorPickerComponent.prototype, "clearButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], FlatColorPickerComponent.prototype, "preview", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FlatColorPickerComponent.prototype, "actionsLayout", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], FlatColorPickerComponent.prototype, "activeView", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], FlatColorPickerComponent.prototype, "views", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], FlatColorPickerComponent.prototype, "gradientSettings", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], FlatColorPickerComponent.prototype, "paletteSettings", null);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], FlatColorPickerComponent.prototype, "valueChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], FlatColorPickerComponent.prototype, "cancel", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], FlatColorPickerComponent.prototype, "activeViewChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", EventEmitter)
+], FlatColorPickerComponent.prototype, "actionButtonClick", void 0);
+__decorate([
+    ViewChild('header', { static: false }),
+    __metadata("design:type", FlatColorPickerHeaderComponent)
+], FlatColorPickerComponent.prototype, "header", void 0);
+__decorate([
+    ViewChild('gradient', { static: false }),
+    __metadata("design:type", ColorGradientComponent)
+], FlatColorPickerComponent.prototype, "gradient", void 0);
+__decorate([
+    ViewChild('palette', { static: false }),
+    __metadata("design:type", ColorPaletteComponent)
+], FlatColorPickerComponent.prototype, "palette", void 0);
+__decorate([
+    ViewChild('footer', { static: false }),
+    __metadata("design:type", FlatColorPickerActionButtonsComponent)
+], FlatColorPickerComponent.prototype, "footer", void 0);
+FlatColorPickerComponent = FlatColorPickerComponent_1 = __decorate([
+    Component({
+        exportAs: 'kendoFlatColorPicker',
+        selector: 'kendo-flatcolorpicker',
+        providers: [
+            {
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FlatColorPickerComponent_1)
+            },
+            {
+                provide: KendoInput,
+                useExisting: forwardRef(() => FlatColorPickerComponent_1)
+            },
+            FlatColorPickerService,
+            FlatColorPickerLocalizationService,
+            {
+                provide: LocalizationService,
+                useExisting: FlatColorPickerLocalizationService
+            },
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.flatcolorpicker'
+            }
+        ],
+        template: `
+        <ng-container kendoFlatColorPickerLocalizedMessages
+            i18n-flatColorPickerNoColor="kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
+            flatColorPickerNoColor="Flatcolorpicker no color chosen"
+            i18n-colorGradientNoColor="kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            colorGradientNoColor="Colorgradient no color chosen"
+            i18n-colorPaletteNoColor="kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
+            colorPaletteNoColor="Colorpalette no color chosen"
+            i18n-colorGradientHandle="kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
+            colorGradientHandle="Choose color"
+            i18n-clearButton="kendo.flatcolorpicker.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            i18n-contrastRatio="kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio"
+            i18n-previewColor="kendo.flatcolorpicker.previewColor|The message for the color preview pane."
+            previewColor="Color preview"
+            i18n-revertSelection="kendo.flatcolorpicker.revertSelection|The message for the selected color pane."
+            revertSelection="Revert selection"
+            i18n-gradientView="kendo.flatcolorpicker.gradientView|The message for the gradient view button."
+            gradientView="Gradient view"
+            i18n-paletteView="kendo.flatcolorpicker.paletteView|The message for the palette view button."
+            paletteView="Palette view"
+            i18n-formatButton="kendo.flatcolorpicker.formatButton|The message for the input format toggle button."
+            formatButton="Change color format"
+            i18n-applyButton="kendo.flatcolorpicker.applyButton|The message for the Apply action button."
+            applyButton="Apply"
+            i18n-cancelButton="kendo.flatcolorpicker.cancelButton|The message for the Cancel action button."
+            cancelButton="Cancel">
+        </ng-container>
+        <div kendoFlatColorPickerHeader
+            *ngIf="headerHasContent"
+            #header
+            [clearButton]="clearButton"
+            [activeView]="activeView"
+            [views]="views"
+            [value]="value"
+            [selection]="selection"
+            [preview]="preview"
+            (clearButtonClick)="onClearButtonClick()"
+            (viewChange)="onViewChange($event)"
+            (valuePaneClick)="resetSelection($event)">
+        </div>
+        <div class="k-coloreditor-views k-vstack">
+            <kendo-colorgradient #gradient
+                *ngIf="activeView === 'gradient'"
+                [tabindex]="null"
+                [value]="selection"
+                [format]="format"
+                [opacity]="gradientSettings.opacity"
+                [delay]="gradientSettings.delay"
+                [contrastTool]="gradientSettings.contrastTool"
+                [readonly]="readonly"
+                (valueChange)="handleValueChange($event)"
+            >
+            </kendo-colorgradient>
+            <kendo-colorpalette #palette
+                *ngIf="activeView === 'palette'"
+                kendoFocusOnDomReady
+                [palette]="paletteSettings.palette"
+                [columns]="paletteSettings.columns"
+                [tileSize]="paletteSettings.tileSize"
+                [format]="format"
+                [value]="selection"
+                (valueChange)="handleValueChange($event)"
+            >
+            </kendo-colorpalette>
+        </div>
+        <div kendoFlatColorPickerActionButtons *ngIf="preview"
+            #footer
+            [ngClass]="'k-justify-content-' + actionsLayout"
+            (actionButtonClick)="onAction($event)">
+        </div>
+`
+    }),
+    __metadata("design:paramtypes", [FlatColorPickerService,
+        ElementRef,
+        LocalizationService,
+        ChangeDetectorRef,
+        Renderer2,
+        NgZone])
+], FlatColorPickerComponent);
 
-var ColorPaletteComponent_1;
-const DEFAULT_TILE_SIZE = 24;
-const DEFAULT_COLUMNS_COUNT = 10;
-const DEFAULT_PRESET$1 = 'office';
-const DEFAULT_ACCESSIBLE_PRESET$1 = 'accessible';
+var ColorPickerComponent_1;
 let serial$2 = 0;
 /**
- * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
- * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
+ * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
+ *
+ * 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 ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponent {
-    constructor(host, service, cdr, renderer, localizationService) {
-        this.host = host;
-        this.service = service;
+let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
+    constructor(popupService, cdr, localizationService, ngZone) {
+        this.popupService = popupService;
         this.cdr = cdr;
-        this.renderer = renderer;
         this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        this.hostClasses = true;
         /**
          * @hidden
          */
-        this.id = `k-colorpalette-${serial$2++}`;
+        this.focusableId = `k-colorpicker-${serial$2++}`;
         /**
-         * Specifies the output format of the ColorPaletteComponent.
-         * The input value may be in a different format. However, it will be parsed into the output `format`
-         * after the component processes it.
+         * Specifies the views that will be rendered in the popup.
+         * By default both the gradient and palette views will be rendered.
+         */
+        this.views = ['gradient', 'palette'];
+        /**
+         * Sets the read-only state of the ColorPicker.
          *
-         * The supported values are:
-         * * (Default) `hex`
-         * * `rgba`
-         * * `name`
+         * @default false
          */
-        this.format = 'hex';
+        this.readonly = false;
         /**
-         * Sets the disabled state of the ColorPalette.
+         * Sets the disabled state of the ColorPicker.
+         *
+         * @default false
          */
         this.disabled = false;
         /**
-         * Sets the read-only state of the ColorPalette.
+         * Specifies the output format of the ColorPicker.
+         *
+         * 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`
          */
-        this.readonly = false;
+        this.format = 'rgba';
         /**
-         * Specifies the size of a color cell.
+         * Specifies whether the ColorPicker should display a 'Clear color' button.
          *
-         * The possible values are:
-         * * (Default) `tileSize = 24`
-         * * `{ width: number, height: number }`
+         * @default true
          */
-        this.tileSize = { width: DEFAULT_TILE_SIZE, height: DEFAULT_TILE_SIZE };
+        this.clearButton = true;
         /**
-         * Fires each time the color selection is changed.
+         * 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.selectionChange = new EventEmitter();
+        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.
          */
         this.valueChange = new EventEmitter();
         /**
-         * Fires each time the user selects a cell with the mouse or presses `Enter`.
+         * Fires each time the popup is about to open.
+         * This event is preventable. If you cancel it, the popup will remain closed.
+         */
+        this.open = new EventEmitter();
+        /**
+         * Fires each time the popup is about to close.
+         * This event is preventable. If you cancel it, the popup will remain open.
+         */
+        this.close = new EventEmitter();
+        /**
+         * Fires each time ColorPicker is focused.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the ColorPicker is blurred.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires when the user cancels the current color selection.
          *
-         * @hidden
+         * Fires on preview pane or 'Cancel' button click.
          */
-        this.cellSelection = new EventEmitter();
+        this.cancel = new EventEmitter();
         /**
-         * @hidden
+         * 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.
+         *
+         * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
          */
-        this.hostClasses = true;
+        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, delay: 0 };
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
-        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
-    /**
-     * @hidden
-     */
-    get paletteId() {
-        return this.id;
-    }
     /**
      * Specifies the value of the initially selected color.
      */
     set value(value) {
-        this._value = parseColor$1(value, this.format);
+        this._value = parseColor$1(value, this.format, this.gradientSettings.opacity);
     }
     get value() {
         return this._value;
     }
     /**
-     * Specifies the number of columns that will be displayed.
-     * Defaults to `10`.
+     * Configures the popup of the ColorPicker.
      */
-    set columns(value) {
-        const minColumnsCount = 1;
-        this._columns = value > minColumnsCount ? value : minColumnsCount;
+    set popupSettings(value) {
+        this._popupSettings = Object.assign(this._popupSettings, value);
     }
-    get columns() {
-        return this._columns;
+    get popupSettings() {
+        return this._popupSettings;
     }
     /**
-     * The color palette that will be displayed.
-     *
-     * The supported values are:
-     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
-     * * A string with comma-separated colors.
-     * * A string array.
+     * Configures the palette that is displayed in the ColorPicker popup.
      */
-    set palette(value) {
-        if (!isPresent(value)) {
-            value = DEFAULT_PRESET$1;
-        }
-        if (typeof value === 'string' && isPresent(PALETTEPRESETS[value])) {
-            this.columns = this.columns || PALETTEPRESETS[value].columns;
-            value = PALETTEPRESETS[value].colors;
-        }
-        const colors = (typeof value === 'string') ? value.split(',') : value;
-        this._palette = colors.map(color => parseColor$1(color, this.format, false));
+    set paletteSettings(value) {
+        this._paletteSettings = Object.assign(this._paletteSettings, value);
     }
-    get palette() {
-        return this._palette;
+    get paletteSettings() {
+        return this._paletteSettings;
+    }
+    /**
+     * Configures the gradient that is displayed in the ColorPicker popup.
+     */
+    set gradientSettings(value) {
+        this._gradientSettings = Object.assign(this._gradientSettings, value);
+    }
+    get gradientSettings() {
+        return this._gradientSettings;
     }
     /**
      * 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);
@@ -9292,122 +10145,171 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * Indicates whether the ColorPicker popup is open.
+     */
+    get isOpen() {
+        return isPresent(this.popupRef);
+    }
     /**
      * @hidden
      */
-    get tileLayout() {
-        if (typeof this.tileSize !== 'number') {
-            return this.tileSize;
+    get iconStyles() {
+        if (this.iconClass) {
+            return this.iconClass;
+        }
+        if (this.icon) {
+            return `k-icon k-i-${this.icon}`;
+        }
+    }
+    ngOnInit() {
+        const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        const settingsPalette = this._paletteSettings.palette;
+        const presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
+            PALETTEPRESETS[settingsPalette].columns :
+            undefined;
+        this._paletteSettings = {
+            palette: settingsPalette || defaultPreset,
+            tileSize: this._paletteSettings.tileSize || 24,
+            columns: this._paletteSettings.columns || presetColumns || 10
+        };
+    }
+    ngOnChanges(changes) {
+        if (changes.format && changes.format.currentValue === 'name') {
+            this.activeView = 'palette';
+        }
+        if (this.activeView === 'gradient' && this.gradientSettings.opacity) {
+            this.format = 'rgba';
+            this.value = parseColor$1(this.value, this.format, this.gradientSettings.opacity);
+        }
+    }
+    ngOnDestroy() {
+        this.closePopup();
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
         }
-        return { width: this.tileSize, height: this.tileSize };
     }
     /**
      * @hidden
      */
-    get colorRows() {
-        return this.service.colorRows;
+    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();
+    }
+    /**
+     * @hidden
+     */
+    handleActiveColorClick() {
+        this.focus();
+        const event = new ActiveColorClickEvent(this.value);
+        this.activeColorClick.emit(event);
+        if (!event.isOpenPrevented() || this.isOpen) {
+            this.togglePopup();
+        }
+    }
+    /**
+     * Focuses the wrapper of the ColorPicker.
+     */
+    focus() {
+        if (this.disabled) {
+            return;
+        }
+        this.wrapper.nativeElement.focus();
     }
     /**
      * @hidden
      */
-    get hostTabindex() { return this.tabindex; }
+    handleWrapperFocus() {
+        if (this.isFocused) {
+            return;
+        }
+        this.isFocused = true;
+        this.onFocus.emit();
+    }
     /**
-     * @hidden
+     * Blurs the ColorPicker.
      */
-    get disabledClass() { return this.disabled; }
+    blur() {
+        this.wrapper.nativeElement.blur();
+    }
     /**
      * @hidden
      */
-    get readonlyAttribute() { return this.readonly; }
-    ngOnInit() {
-        if (this.colorRows.length === 0) {
-            const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET$1 : DEFAULT_ACCESSIBLE_PRESET$1;
-            this.palette = this.palette || defaultPreset;
-            this.setRows();
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
-        }
-    }
-    ngAfterViewInit() {
-        this.setHostElementAriaLabel();
-    }
-    ngOnDestroy() {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.palette || changes.columns) {
-            this.setRows();
-        }
-        if (changes.palette || changes.value || changes.columns) {
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
-            this.setHostElementAriaLabel();
+    handleWrapperBlur() {
+        if (this.isOpen) {
+            return;
         }
+        this.isFocused = false;
+        this.onBlur.emit();
+        this.notifyNgTouched();
     }
     /**
-     * @hidden
+     * Clears the value of the ColorPicker.
      */
-    handleKeydown(event) {
-        const isRTL = this.direction === 'rtl';
-        switch (event.keyCode) {
-            case Keys.ArrowDown:
-                this.handleCellNavigation(0, 1);
-                break;
-            case Keys.ArrowUp:
-                this.handleCellNavigation(0, -1);
-                break;
-            case Keys.ArrowRight:
-                this.handleCellNavigation(isRTL ? -1 : 1, 0);
-                break;
-            case Keys.ArrowLeft:
-                this.handleCellNavigation(isRTL ? 1 : -1, 0);
-                break;
-            case Keys.Enter:
-                this.handleEnter();
-                break;
-            default: return;
+    reset() {
+        if (!isPresent(this.value)) {
+            return;
         }
-        event.preventDefault();
+        this._value = undefined;
+        this.notifyNgChanged(undefined);
     }
     /**
-     * @hidden
+     * Toggles the popup of the ColorPicker.
+     * Does not trigger the `open` and `close` events of the component.
+     *
+     * @param open An optional parameter. Specifies whether the popup will be opened or closed.
      */
-    handleHostBlur() {
-        this.notifyNgTouched();
-        this.handleCellFocusOnBlur();
+    toggle(open) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.closePopup();
+        open = isPresent(open) ? open : !this.isOpen;
+        if (open) {
+            this.openPopup();
+        }
     }
     /**
      * @hidden
      */
-    handleCellSelection(value, cell) {
-        if (this.readonly) {
-            return;
-        }
-        this.selectedCell = cell;
-        this.focusedCell = this.selectedCell;
-        this.focusInComponent = true;
-        const parsedColor = parseColor$1(value, this.format, false);
-        this.cellSelection.emit(parsedColor);
-        if (this.value !== parsedColor) {
+    handleValueChange(color) {
+        const parsedColor = parseColor$1(color, this.format, this.gradientSettings.opacity);
+        const valueChange = parsedColor !== this.value;
+        if (valueChange) {
             this.value = parsedColor;
             this.valueChange.emit(parsedColor);
             this.notifyNgChanged(parsedColor);
-            this.setHostElementAriaLabel();
-        }
-        if (this.selection !== parsedColor) {
-            this.selection = parsedColor;
-            this.selectionChange.emit(parsedColor);
         }
-        if (cell) {
-            this.activeCellId = `${this.selectedCell.row}-${this.selectedCell.col}`;
+    }
+    /**
+     * @hidden
+     */
+    handlePopupBlur(event) {
+        if (this.popupBlurInvalid(event)) {
+            return;
         }
+        this.isFocused = false;
+        this.onBlur.emit();
+        this.notifyNgTouched();
+        this.toggleWithEvents(false);
     }
     /**
      * @hidden
      */
     writeValue(value) {
         this.value = value;
-        this.focusedCell = this.service.getCellCoordsFor(this.value);
     }
     /**
      * @hidden
@@ -9430,206 +10332,357 @@ let ColorPaletteComponent = ColorPaletteComponent_1 = class ColorPaletteComponen
     }
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
      */
-    isEmpty() {
-        return false;
+    handleWrapperKeyDown(event) {
+        if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
+            event.preventDefault();
+            this.toggleWithEvents(true);
+        }
     }
     /**
-     * Clears the color value of the ColorPalette.
+     * @hidden
      */
-    reset() {
-        this.focusedCell = null;
-        if (isPresent(this.value)) {
-            this._value = undefined;
-            this.notifyNgChanged(undefined);
+    handlePopupKeyDown(event) {
+        if (event.keyCode === Keys.Escape) {
+            this.toggleWithEvents(false);
+            this.wrapper.nativeElement.focus();
+        }
+        if (event.keyCode === Keys.Tab) {
+            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();
+            }
         }
     }
-    handleCellFocusOnBlur() {
-        this.focusInComponent = false;
-        this.focusedCell = this.selectedCell;
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty() {
+        return false;
     }
-    setRows() {
-        if (!isPresent(this.palette)) {
+    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;
         }
-        this.columns = this.columns || DEFAULT_COLUMNS_COUNT;
-        this.service.setColorMatrix(this.palette, this.columns);
+        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.focusFirstElement();
+        }
     }
-    handleCellNavigation(horizontalStep, verticalStep) {
-        if (this.readonly) {
+    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" };
+        const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
+        this.popupRef = this.popupService.open({
+            anchor: this.wrapper,
+            animate: this.popupSettings.animate,
+            appendTo: this.popupSettings.appendTo,
+            popupAlign: popupPosition,
+            anchorAlign: anchorPosition,
+            popupClass: 'k-colorpicker-popup',
+            content: this.popupTemplate,
+            positionMode: 'absolute'
+        });
+        this.popupRef.popupAnchorViewportLeave.subscribe(() => {
+            this.toggleWithEvents(false);
+            if (!this.isOpen) {
+                this.wrapper.nativeElement.focus({
+                    preventScroll: true
+                });
+            }
+        });
+    }
+    closePopup() {
+        if (!this.isOpen) {
             return;
         }
-        this.focusedCell = this.service.getNextCell(this.focusedCell, horizontalStep, verticalStep);
-        this.focusInComponent = true;
+        this.popupRef.close();
+        this.popupRef = null;
     }
-    setHostElementAriaLabel() {
-        const parsed = parseColor$1(this.value, this.format);
-        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', `${this.value ? parsed : this.localizationService.get('colorPaletteNoColor')}`);
+    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;
     }
-    handleEnter() {
-        if (!isPresent(this.focusedCell)) {
-            return;
+    get lastFocusableElement() {
+        if (this.preview) {
+            return this.flatColorPicker.footer.lastButton;
         }
-        const selectedColor = this.service.getColorAt(this.focusedCell);
-        this.handleCellSelection(selectedColor, this.focusedCell);
+        if (this.flatColorPicker.palette) {
+            return this.flatColorPicker.palette.host;
+        }
+        return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
     }
 };
+__decorate([
+    HostBinding('class.k-colorpicker'),
+    __metadata("design:type", Boolean)
+], ColorPickerComponent.prototype, "hostClasses", void 0);
 __decorate([
     HostBinding('attr.dir'),
     __metadata("design:type", String)
-], ColorPaletteComponent.prototype, "direction", void 0);
+], ColorPickerComponent.prototype, "direction", void 0);
 __decorate([
-    HostBinding('attr.id'),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [])
-], ColorPaletteComponent.prototype, "paletteId", null);
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerComponent.prototype, "focusableId", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], ColorPickerComponent.prototype, "views", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ColorPaletteComponent.prototype, "id", void 0);
+], ColorPickerComponent.prototype, "activeView", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ColorPickerComponent.prototype, "readonly", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ColorPickerComponent.prototype, "disabled", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
-], ColorPaletteComponent.prototype, "format", void 0);
+], ColorPickerComponent.prototype, "format", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
-], ColorPaletteComponent.prototype, "value", null);
+], ColorPickerComponent.prototype, "value", null);
 __decorate([
     Input(),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], ColorPaletteComponent.prototype, "columns", null);
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], ColorPickerComponent.prototype, "popupSettings", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], ColorPickerComponent.prototype, "paletteSettings", null);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], ColorPickerComponent.prototype, "gradientSettings", null);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerComponent.prototype, "icon", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], ColorPickerComponent.prototype, "iconClass", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], ColorPaletteComponent.prototype, "palette", null);
+    __metadata("design:type", Boolean)
+], ColorPickerComponent.prototype, "clearButton", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Number),
     __metadata("design:paramtypes", [Number])
-], ColorPaletteComponent.prototype, "tabindex", null);
+], ColorPickerComponent.prototype, "tabindex", null);
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
-], ColorPaletteComponent.prototype, "disabled", void 0);
+], ColorPickerComponent.prototype, "preview", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", Boolean)
-], ColorPaletteComponent.prototype, "readonly", void 0);
+    __metadata("design:type", String)
+], ColorPickerComponent.prototype, "actionsLayout", void 0);
 __decorate([
-    Input(),
-    __metadata("design:type", Object)
-], ColorPaletteComponent.prototype, "tileSize", void 0);
+    Output(),
+    __metadata("design:type", EventEmitter)
+], ColorPickerComponent.prototype, "valueChange", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
-], ColorPaletteComponent.prototype, "selectionChange", void 0);
+], ColorPickerComponent.prototype, "open", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
-], ColorPaletteComponent.prototype, "valueChange", void 0);
+], ColorPickerComponent.prototype, "close", void 0);
+__decorate([
+    Output('focus'),
+    __metadata("design:type", EventEmitter)
+], ColorPickerComponent.prototype, "onFocus", void 0);
+__decorate([
+    Output('blur'),
+    __metadata("design:type", EventEmitter)
+], ColorPickerComponent.prototype, "onBlur", void 0);
 __decorate([
     Output(),
     __metadata("design:type", EventEmitter)
-], ColorPaletteComponent.prototype, "cellSelection", void 0);
+], ColorPickerComponent.prototype, "cancel", void 0);
 __decorate([
-    HostBinding('attr.tabindex'),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [])
-], ColorPaletteComponent.prototype, "hostTabindex", null);
+    Output(),
+    __metadata("design:type", EventEmitter)
+], ColorPickerComponent.prototype, "activeColorClick", void 0);
 __decorate([
-    HostBinding('class.k-colorpalette'),
-    __metadata("design:type", Boolean)
-], ColorPaletteComponent.prototype, "hostClasses", void 0);
+    Output(),
+    __metadata("design:type", EventEmitter)
+], ColorPickerComponent.prototype, "activeViewChange", void 0);
 __decorate([
-    HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-state-disabled'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ColorPaletteComponent.prototype, "disabledClass", null);
+    ViewChild('container', { read: ViewContainerRef, static: true }),
+    __metadata("design:type", ViewContainerRef)
+], ColorPickerComponent.prototype, "container", void 0);
 __decorate([
-    HostBinding('attr.aria-readonly'),
-    __metadata("design:type", Boolean),
-    __metadata("design:paramtypes", [])
-], ColorPaletteComponent.prototype, "readonlyAttribute", null);
+    ViewChild('wrapper', { static: true }),
+    __metadata("design:type", ElementRef)
+], ColorPickerComponent.prototype, "wrapper", void 0);
 __decorate([
-    HostListener('keydown', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ColorPaletteComponent.prototype, "handleKeydown", null);
+    ViewChild('popupTemplate', { static: true }),
+    __metadata("design:type", TemplateRef)
+], ColorPickerComponent.prototype, "popupTemplate", void 0);
 __decorate([
-    HostListener('blur'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], ColorPaletteComponent.prototype, "handleHostBlur", null);
-ColorPaletteComponent = ColorPaletteComponent_1 = __decorate([
+    ViewChild('flatColorPicker', { static: false }),
+    __metadata("design:type", FlatColorPickerComponent)
+], ColorPickerComponent.prototype, "flatColorPicker", void 0);
+ColorPickerComponent = ColorPickerComponent_1 = __decorate([
     Component({
-        selector: 'kendo-colorpalette',
-        providers: [
-            {
+        exportAs: 'kendoColorPicker',
+        selector: 'kendo-colorpicker',
+        providers: [{
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ColorPaletteComponent_1) // tslint:disable-line:no-forward-ref
+                useExisting: forwardRef(() => ColorPickerComponent_1)
             }, {
                 provide: KendoInput,
-                useExisting: forwardRef(() => ColorPaletteComponent_1)
+                useExisting: forwardRef(() => ColorPickerComponent_1)
             },
-            ColorPaletteService,
-            ColorPaletteLocalizationService,
+            ColorPickerLocalizationService,
             {
                 provide: LocalizationService,
-                useExisting: ColorPaletteLocalizationService
+                useExisting: ColorPickerLocalizationService
             },
             {
                 provide: L10N_PREFIX,
-                useValue: 'kendo.colorpalette'
+                useValue: 'kendo.colorpicker'
             }
         ],
         template: `
-        <ng-container kendoColorPaletteLocalizedMessages
-            i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
-            colorPaletteNoColor="Colorpalette no color chosen">
+        <ng-container kendoColorPickerLocalizedMessages
+            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-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"
+            i18n-clearButton="kendo.colorpicker.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.colorpicker.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            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>
-        <div role="listbox" class="k-colorpalette-table-wrap"
-            [attr.aria-activedescendant]="activeCellId">
-            <table class="k-colorpalette-table k-palette">
-                <tbody>
-                    <tr *ngFor="let row of colorRows; let rowIndex = index">
-                        <td *ngFor="let color of row; let colIndex = index"
-                            role="option"
-                            [class.k-state-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [class.k-state-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
-                            [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
-                            [attr.aria-label]="color"
-                            class="k-colorpalette-tile"
-                            [id]="rowIndex + '-' + colIndex"
-                            [attr.value]="color"
-                            (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
-                            [ngStyle]="{
-                                backgroundColor: color,
-                                width: tileLayout.width + 'px',
-                                height: tileLayout.height + 'px',
-                                minWidth: tileLayout.width + 'px'
-                            }">
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <span
+            #wrapper
+            [ngClass]="{
+                'k-picker-wrap': true,
+                'k-state-disabled': this.disabled,
+                'k-state-focused': this.isFocused
+            }"
+            role="listbox"
+            [attr.aria-expanded]="isOpen"
+            [attr.aria-readonly]="readonly"
+            [attr.aria-disabled]="disabled"
+            [attr.aria-label]="colorPickerAriaLabel"
+            [id]="focusableId"
+            [attr.tabindex]="tabindex"
+            (focus)="handleWrapperFocus()"
+            (blur)="handleWrapperBlur()"
+            (mousedown)="$event.preventDefault()"
+            (keydown)="handleWrapperKeyDown($event)"
+        >
+            <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)="togglePopup()">
+                <span class="k-icon k-i-arrow-s"></span>
+            </span>
+        </span>
+        <ng-template #popupTemplate>
+            <kendo-flatcolorpicker
+                #flatColorPicker
+                [value]="value"
+                [format]="format"
+                [views]="views"
+                [activeView]="activeView"
+                [actionsLayout]="actionsLayout"
+                [preview]="preview"
+                [gradientSettings]="gradientSettings"
+                [paletteSettings]="paletteSettings"
+                [clearButton]="clearButton"
+                (focusout)="handlePopupBlur($event)"
+                (cancel)="handleCancelEvent($event)"
+                (valueChange)="handleValueChange($event)"
+                (keydown)="handlePopupKeyDown($event)"
+                (activeViewChange)="activeViewChange.emit($event)"
+                (actionButtonClick)="togglePopup()">
+            </kendo-flatcolorpicker>
+        </ng-template>
+        <ng-container #container></ng-container>
     `
     }),
-    __metadata("design:paramtypes", [ElementRef,
-        ColorPaletteService,
+    __metadata("design:paramtypes", [PopupService,
         ChangeDetectorRef,
-        Renderer2,
-        LocalizationService])
-], ColorPaletteComponent);
+        LocalizationService,
+        NgZone])
+], ColorPickerComponent);
 
 /**
  * @hidden
@@ -9644,6 +10697,14 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], ColorPickerMessages.prototype, "colorGradientNoColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "flatColorPickerNoColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "colorPickerNoColor", void 0);
 __decorate([
     Input(),
     __metadata("design:type", String)
@@ -9692,6 +10753,34 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], ColorPickerMessages.prototype, "contrastRatio", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "previewColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "revertSelection", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "gradientView", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "paletteView", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "formatButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "applyButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorPickerMessages.prototype, "cancelButton", void 0);
 
 var ColorPickerCustomMessagesComponent_1;
 /**
@@ -9714,7 +10803,7 @@ ColorPickerCustomMessagesComponent = ColorPickerCustomMessagesComponent_1 = __de
                 useExisting: forwardRef(() => ColorPickerCustomMessagesComponent_1) // tslint:disable-line:no-forward-ref
             }
         ],
-        selector: 'kendo-colorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages',
+        selector: 'kendo-colorpicker-messages, kendo-flatcolorpicker-messages, kendo-colorgradient-messages, kendo-colorpalette-messages',
         template: ``
     }),
     __metadata("design:paramtypes", [LocalizationService])
@@ -9738,7 +10827,7 @@ LocalizedColorPickerMessagesDirective = LocalizedColorPickerMessagesDirective_1
                 useExisting: forwardRef(() => LocalizedColorPickerMessagesDirective_1) // tslint:disable-line:no-forward-ref
             }
         ],
-        selector: '[kendoColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
+        selector: '[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
     }),
     __metadata("design:paramtypes", [LocalizationService])
 ], LocalizedColorPickerMessagesDirective);
@@ -9780,34 +10869,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)}`;
     }
 };
 __decorate([
     Input(),
     __metadata("design:type", String)
 ], ContrastValidationComponent.prototype, "type", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], ContrastValidationComponent.prototype, "ratio", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
 ], ContrastValidationComponent.prototype, "pass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ContrastValidationComponent.prototype, "value", void 0);
 ContrastValidationComponent = __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>
     `
     }),
     __metadata("design:paramtypes", [LocalizationService])
@@ -9819,20 +10911,18 @@ ContrastValidationComponent = __decorate([
 let ContrastComponent = class ContrastComponent {
     constructor(localization) {
         this.localization = localization;
-        this.aaRatio = AA_RATIO;
-        this.aaaRatio = AAA_RATIO;
     }
     get formatedRatio() {
         return this.contrastRatio.toFixed(2);
     }
-    get contrastRatioMessage() {
-        return this.localization.get('contrastRatio');
+    get contrastRatioText() {
+        return `${this.localization.get('contrastRatio')}: ${this.value ? this.formatedRatio : 'n/a'}`;
     }
     get satisfiesAACondition() {
-        return this.contrastRatio >= this.aaRatio;
+        return this.contrastRatio >= AA_RATIO;
     }
     get satisfiesAAACondition() {
-        return this.contrastRatio >= this.aaaRatio;
+        return this.contrastRatio >= AAA_RATIO;
     }
     get contrastRatio() {
         let contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
@@ -9852,23 +10942,25 @@ ContrastComponent = __decorate([
         selector: '[kendoContrastTool]',
         template: `
         <div class="k-contrast-ratio">
-            <span class="k-contrast-ratio-text">{{contrastRatioMessage}}: {{formatedRatio}}</span>
-            <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
-                <span class="k-icon k-i-check"></span>
-                <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
-            </span>
-            <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
-                <span class="k-icon k-i-close"></span>
-            </span>
+            <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
+            <ng-container *ngIf="value">
+                <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
+                    <span class="k-icon k-i-check"></span>
+                    <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
+                </span>
+                <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
+                    <span class="k-icon k-i-close"></span>
+                </span>
+            </ng-container>
         </div>
         <div kendoContrastValidation
             type="AA"
-            [ratio]="aaaRatio"
+            [value]="value"
             [pass]="satisfiesAACondition">
         </div>
         <div kendoContrastValidation
             type="AAA"
-            [ratio]="aaaRatio"
+            [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
     `
@@ -9876,10 +10968,98 @@ ContrastComponent = __decorate([
     __metadata("design:paramtypes", [LocalizationService])
 ], ContrastComponent);
 
+/**
+ * @hidden
+ */
+let ColorContrastSvgComponent = class ColorContrastSvgComponent {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.hostClass = true;
+    }
+    ngAfterViewInit() {
+        this.metrics = this.wrapper.getBoundingClientRect();
+        this.oldA = this.hsva.value.a;
+        this.oldH = this.hsva.value.h;
+        this.hsva.subscribe((value) => {
+            if (value.h !== this.oldH || value.a !== this.oldA) {
+                this.oldH = value.h;
+                this.oldA = value.a;
+                this.setPaths();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (isPresent(changes.backgroundColor) && this.metrics) {
+            this.setPaths();
+        }
+    }
+    setPaths() {
+        const bezierCommandCalc = bezierCommand(controlPoint(line));
+        this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
+            svgPath(this.getPaths(AA_RATIO, STEP_COUNT, true), bezierCommandCalc),
+            svgPath(this.getPaths(AAA_RATIO, STEP_COUNT), bezierCommandCalc),
+            svgPath(this.getPaths(AAA_RATIO, STEP_COUNT, true), bezierCommandCalc)];
+    }
+    findValue(contrast, saturation, low, high, comparer) {
+        const mid = (low + high) / 2;
+        const hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
+        const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.backgroundColor || ''));
+        if (low + 0.5 > high) {
+            if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
+                return mid;
+            }
+            else {
+                return null;
+            }
+        }
+        if (comparer(currentContrast, contrast)) {
+            return this.findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
+        }
+        return this.findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
+    }
+    getPaths(contrast, stepCount, reversed = false) {
+        const points = [];
+        for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
+            const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
+            if (value !== null) {
+                points.push([i, value]);
+            }
+        }
+        return points;
+    }
+};
+__decorate([
+    HostBinding('class.k-color-contrast-svg'),
+    __metadata("design:type", Boolean)
+], ColorContrastSvgComponent.prototype, "hostClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], ColorContrastSvgComponent.prototype, "wrapper", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", BehaviorSubject)
+], ColorContrastSvgComponent.prototype, "hsva", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ColorContrastSvgComponent.prototype, "backgroundColor", void 0);
+ColorContrastSvgComponent = __decorate([
+    Component({
+        selector: '[kendoColorContrastSvg]',
+        template: `
+        <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
+    `
+    })
+], ColorContrastSvgComponent);
+
 const PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
     ColorPaletteComponent,
     ColorGradientComponent,
+    FlatColorPickerComponent,
     LocalizedColorPickerMessagesDirective,
     ColorPickerCustomMessagesComponent
 ];
@@ -9887,7 +11067,10 @@ const INTERNAL_DIRECTIVES = [
     ColorInputComponent,
     FocusOnDomReadyDirective,
     ContrastComponent,
-    ContrastValidationComponent
+    ContrastValidationComponent,
+    FlatColorPickerHeaderComponent,
+    FlatColorPickerActionButtonsComponent,
+    ColorContrastSvgComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -10554,4 +11737,4 @@ InputsModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { CheckBoxModule, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, ColorPickerMessages, ColorPaletteService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxContainerComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, ActiveColorClickEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective };
+export { CheckBoxModule, ColorContrastSvgComponent, ColorInputComponent, ContrastValidationComponent, ContrastComponent, FlatColorPickerActionButtonsComponent, FlatColorPickerHeaderComponent, FocusOnDomReadyDirective, ColorGradientLocalizationService, ColorPaletteLocalizationService, ColorPickerLocalizationService, ColorPickerCustomMessagesComponent, FlatColorPickerLocalizationService, ColorPickerMessages, ColorPaletteService, FlatColorPickerService, MaskingService, NumericTextBoxMessages, RadioButtonModule, RangeSliderCustomMessagesComponent, RangeSliderMessages, SHARED_DIRECTIVES, SliderCustomMessagesComponent, SliderMessages, SliderBase, SlidersCommonModule, SwitchCustomMessagesComponent, Messages, TextFieldsBase, TextBoxCustomMessagesComponent, TextBoxMessages, SliderComponent, RangeSliderComponent, LabelTemplateDirective, SwitchComponent, TextBoxContainerComponent, TextBoxDirective, TextAreaDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, MaskedTextBoxComponent, InputsModule, SliderTicksComponent, SliderModule, RangeSliderModule, SwitchModule, NumericTextBoxModule, MaskedTextBoxModule, TextBoxModule, TextAreaModule, ColorPickerComponent, ColorPaletteComponent, ColorGradientComponent, ColorPickerModule, FlatColorPickerComponent, ColorPickerCancelEvent, CheckBoxDirective, RadioButtonDirective, HintComponent, ErrorComponent, FormFieldComponent, FormFieldModule, TextBoxComponent, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective, TextAreaComponent, TextAreaSuffixComponent, InputSeparatorComponent, SharedModule, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedTextBoxMessagesDirective, LocalizedSliderMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSwitchMessagesDirective, ColorPickerCloseEvent, ColorPickerOpenEvent, ActiveColorClickEvent };