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

package/dist/fesm5/index.js

@@ -5,10 +5,10 @@
 import { __extends, __decorate, __param, __metadata, __assign } from 'tslib';
 import { isDevMode, Directive, Optional, TemplateRef, Input, Output, EventEmitter, 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, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -493,7 +493,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637576485,
+    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'
 };
@@ -7354,28 +7354,206 @@ var TextAreaModule = /** @class */ (function () {
 /**
  * @hidden
  */
-var PreventableEvent = /** @class */ (function () {
-    function PreventableEvent() {
-        this.prevented = false;
+var ColorPickerLocalizationService = /** @class */ (function (_super) {
+    __extends(ColorPickerLocalizationService, _super);
+    function ColorPickerLocalizationService(prefix, messageService, _rtl) {
+        return _super.call(this, prefix, messageService, _rtl) || this;
     }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses the built-in behavior that follows the event.
-     */
-    PreventableEvent.prototype.preventDefault = function () {
-        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);
+    return ColorPickerLocalizationService;
+}(LocalizationService));
+
+/**
+ * @hidden
+ */
+var FlatColorPickerLocalizationService = /** @class */ (function (_super) {
+    __extends(FlatColorPickerLocalizationService, _super);
+    function FlatColorPickerLocalizationService(prefix, messageService, _rtl, colorPickerLocalization) {
+        var _this = _super.call(this, prefix, messageService, _rtl) || this;
+        _this.colorPickerLocalization = colorPickerLocalization;
+        return _this;
+    }
+    FlatColorPickerLocalizationService.prototype.get = function (shortKey) {
+        if (this.colorPickerLocalization) {
+            return this.colorPickerLocalization.get(shortKey);
+        }
+        return _super.prototype.get.call(this, shortKey);
     };
-    /**
-     * If the event is prevented by any of its subscribers, returns `true`.
-     *
-     * @returns - `true` if the default action was prevented. Otherwise, returns `false`.
-     */
-    PreventableEvent.prototype.isDefaultPrevented = function () {
-        return this.prevented;
+    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);
+    return FlatColorPickerLocalizationService;
+}(LocalizationService));
+
+/**
+ * @hidden
+ */
+var DEFAULT_OUTPUT_FORMAT = 'rgba';
+/**
+ * @hidden
+ */
+var DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
+/**
+ * @hidden
+ */
+var DRAGHANDLE_MOVE_SPEED = 5;
+/**
+ * @hidden
+ */
+var AAA_RATIO = 7.0;
+/**
+ * @hidden
+ */
+var AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+var DEFAULT_PRESET = 'office';
+/**
+ * @hidden
+ */
+var DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+/**
+ * @hidden
+ */
+var STEP_COUNT = 16;
+
+// tslint:disable:max-line-length
+/**
+ * @hidden
+ */
+var 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
+ */
+var FlatColorPickerService = /** @class */ (function () {
+    function FlatColorPickerService() {
+    }
+    FlatColorPickerService.prototype.getPaletteSettings = function (settings, format) {
+        var defaultPreset = (format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        var settingsPalette = settings.palette;
+        var presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
+            PALETTEPRESETS[settingsPalette].columns :
+            undefined;
+        return {
+            palette: settingsPalette || defaultPreset,
+            tileSize: settings.tileSize || 24,
+            columns: settings.columns || presetColumns || 10
+        };
+    };
+    FlatColorPickerService.prototype.paletteTileLayout = function (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
+        };
     };
-    return PreventableEvent;
+    FlatColorPickerService = __decorate([
+        Injectable()
+    ], FlatColorPickerService);
+    return FlatColorPickerService;
 }());
 
+/**
+ * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
+ */
+var ColorPickerCancelEvent = /** @class */ (function (_super) {
+    __extends(ColorPickerCancelEvent, _super);
+    function ColorPickerCancelEvent(originalEvent) {
+        var _this = _super.call(this) || this;
+        _this.originalEvent = originalEvent;
+        return _this;
+    }
+    return ColorPickerCancelEvent;
+}(PreventableEvent));
+
+/**
+ * Arguments for the `close` event of the ColorPicker component.
+ */
+var ColorPickerCloseEvent = /** @class */ (function (_super) {
+    __extends(ColorPickerCloseEvent, _super);
+    function ColorPickerCloseEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return ColorPickerCloseEvent;
+}(PreventableEvent));
+
+/**
+ * Arguments for the `open` event of the ColorPicker component.
+ */
+var ColorPickerOpenEvent = /** @class */ (function (_super) {
+    __extends(ColorPickerOpenEvent, _super);
+    function ColorPickerOpenEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return ColorPickerOpenEvent;
+}(PreventableEvent));
+
 /**
  * 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.
@@ -7437,7 +7615,8 @@ var ActiveColorClickEvent = /** @class */ (function () {
  *
  * Returns the hex or rgba string representation of the color.
  */
-var parseColor$1 = function (value, format, safe) {
+var parseColor$1 = function (value, format, opacityEnabled, safe) {
+    if (opacityEnabled === void 0) { opacityEnabled = false; }
     if (safe === void 0) { safe = true; }
     var allowedFormats = ['hex', 'rgba', 'name'];
     if (allowedFormats.indexOf(format) === -1) {
@@ -7453,7 +7632,8 @@ var parseColor$1 = function (value, format, safe) {
     if (!isPresent(parsedColor)) {
         return;
     }
-    return format === 'hex' ? parsedColor.toCss() : parsedColor.toCssRgba();
+    var parsedColorResult = format === 'hex' ? getHexValue(parsedColor, opacityEnabled) : parsedColor.toCssRgba();
+    return parsedColorResult;
 };
 /**
  * @hidden
@@ -7486,12 +7666,23 @@ var getRGBA = function (value, safe) {
  *
  * Returns the RGBA string representation of the color.
  */
-var getColorFromHSV = function (hsva) {
+var getColorFromHSV = function (hsva, format, opacityEnabled) {
+    if (format === void 0) { format = 'rgba'; }
+    if (opacityEnabled === void 0) { opacityEnabled = false; }
     var hue = fitIntoBounds(hsva.h, 0, 359.9);
     var saturation = fitIntoBounds(hsva.s, 0, 1);
     var value = fitIntoBounds(hsva.v, 0, 1);
     var alpha = fitIntoBounds(hsva.a, 0, 1);
-    return Color.fromHSV(hue, saturation, value, alpha).toCssRgba();
+    var color = Color.fromHSV(hue, saturation, value, alpha);
+    return format === 'hex' ? getHexValue(color, opacityEnabled) : color.toCssRgba();
+};
+/**
+ * @hidden
+ *
+ * Returns the HEX value.
+ */
+var getHexValue = function (color, opacity) {
+    return opacity && color.a < 1 ? color.toCss({ alpha: true }) : color.toCss();
 };
 /**
  * @hidden
@@ -7527,7 +7718,7 @@ function nameFormat(value, safe) {
     }
     var key = Object.keys(namedColors).find(function (key) { return 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;
 }
@@ -7584,95 +7775,90 @@ var getContrastFromTwoRGBAs = function (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
  */
-var 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
-    }
+var bezierCommand = function (controlPointCalc) { return function (point, i, a) {
+    // start control point
+    var _a = controlPointCalc(a[i - 1], a[i - 2], point), cpsX = _a[0], cpsY = _a[1];
+    // end control point
+    var _b = controlPointCalc(point, a[i - 1], a[i + 1], true), cpeX = _b[0], cpeY = _b[1];
+    return "C " + cpsX + "," + cpsY + " " + cpeX + "," + cpeY + " " + point[0] + "," + point[1];
+}; };
+/**
+ * @hidden
+ */
+var controlPoint = function (lineCalc) {
+    return function (current, previous, next, reverse) {
+        // when 'current' is the first or last point of the array
+        // 'previous' and 'next' are undefined
+        // replace with 'current'
+        var p = previous || current;
+        var n = next || current;
+        var smooth = 0.1;
+        // properties of the line between previous and next
+        var l = lineCalc(p, n);
+        // If is end-control-point, add PI to the angle to go backward
+        var angle = l.angle + (reverse ? Math.PI : 0);
+        var length = l.length * smooth;
+        // The control point position is relative to the current point
+        var x = current[0] + Math.cos(angle) * length;
+        var y = current[1] + Math.sin(angle) * length;
+        return [x, y];
+    };
 };
-
 /**
  * @hidden
  */
-var ColorPickerLocalizationService = /** @class */ (function (_super) {
-    __extends(ColorPickerLocalizationService, _super);
-    function ColorPickerLocalizationService(prefix, messageService, _rtl) {
-        return _super.call(this, prefix, messageService, _rtl) || this;
+var line = function (pointA, pointB) {
+    var lengthX = pointB[0] - pointA[0];
+    var 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
+ */
+var svgPath = function (points, command) {
+    if (points.length === 0) {
+        return '';
     }
-    ColorPickerLocalizationService = __decorate([
-        __param(0, Inject(L10N_PREFIX)),
-        __param(1, Optional()),
-        __param(2, Optional()), __param(2, Inject(RTL)),
-        __metadata("design:paramtypes", [String, MessageService, Boolean])
-    ], ColorPickerLocalizationService);
-    return ColorPickerLocalizationService;
-}(LocalizationService));
+    // build the d attributes by looping over the points
+    var d = points.reduce(function (acc, point, i, a) {
+        return i === 0 ?
+            // if first point
+            "M " + point[0] + "," + point[1] :
+            // else
+            acc + " " + command(point, i, a);
+    }, '');
+    return d;
+};
 
 /**
  * @hidden
  */
 var ColorGradientLocalizationService = /** @class */ (function (_super) {
     __extends(ColorGradientLocalizationService, _super);
-    function ColorGradientLocalizationService(prefix, messageService, _rtl, colorPickerLocalization) {
+    function ColorGradientLocalizationService(prefix, messageService, _rtl, flatColorPickerLocalization) {
         var _this = _super.call(this, prefix, messageService, _rtl) || this;
-        _this.colorPickerLocalization = colorPickerLocalization;
+        _this.flatColorPickerLocalization = flatColorPickerLocalization;
         return _this;
     }
     ColorGradientLocalizationService.prototype.get = function (shortKey) {
-        if (this.colorPickerLocalization) {
-            return this.colorPickerLocalization.get(shortKey);
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
         }
         return _super.prototype.get.call(this, shortKey);
     };
@@ -7680,8 +7866,8 @@ var ColorGradientLocalizationService = /** @class */ (function (_super) {
         __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);
     return ColorGradientLocalizationService;
 }(LocalizationService));
@@ -7690,10 +7876,14 @@ var ColorGradientLocalizationService = /** @class */ (function (_super) {
  * @hidden
  */
 var ColorInputComponent = /** @class */ (function () {
-    function ColorInputComponent(localization, host, renderer) {
-        this.localization = localization;
+    function ColorInputComponent(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.
          */
@@ -7752,24 +7942,31 @@ var ColorInputComponent = /** @class */ (function () {
     };
     ColorInputComponent.prototype.ngOnChanges = function (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;
         }
     };
-    ColorInputComponent.prototype.handleRgbaValueChange = function () {
-        var color = getColorFromRGBA(this.rgba);
-        if (!this.rgbaInputValid || color === this.value) {
-            return;
+    Object.defineProperty(ColorInputComponent.prototype, "formatButtonTitle", {
+        get: function () {
+            return this.localizationService.get('formatButton');
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ColorInputComponent.prototype.handleRgbaValueChange = function () {
+        var color = getColorFromRGBA(this.rgba);
+        if (!this.rgbaInputValid || color === this.value) {
+            return;
         }
         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);
     };
     ColorInputComponent.prototype.handleHexValueChange = function (hex) {
         this.hex = hex;
-        var color = parseColor$1(hex, 'rgba');
+        var color = parseColor$1(hex, 'rgba', this.opacity);
         if (!isPresent(color) || color === this.value) {
             return;
         }
@@ -7783,10 +7980,7 @@ var ColorInputComponent = /** @class */ (function () {
         }
     };
     ColorInputComponent.prototype.handleHexInputBlur = function () {
-        this.hex = parseColor$1(this.value, 'hex');
-    };
-    ColorInputComponent.prototype.textFor = function (key) {
-        return this.localization.get(key);
+        this.hex = parseColor$1(this.value, 'hex', this.opacity);
     };
     ColorInputComponent.prototype.toggleFormatView = function () {
         this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
@@ -7798,6 +7992,10 @@ var ColorInputComponent = /** @class */ (function () {
         }
         this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', function () { return _this.toggleFormatView(); }));
     };
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ColorInputComponent.prototype, "focusableId", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -7828,9 +8026,17 @@ var ColorInputComponent = /** @class */ (function () {
         __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)
@@ -7838,36 +8044,15 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = __decorate([
         Component({
             selector: 'kendo-colorinput',
-            template: "\n        <div class=\"k-vstack\">\n            <button class=\"k-colorgradient-toggle-mode k-button k-icon-button k-flat\" #toggleFormatButton>\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <input *ngIf=\"formatView === 'hex'\"\n            #hexInput\n            class=\"k-textbox k-hex-value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            [value]=\"hex || ''\"\n            [placeholder]=\"textFor('hexInputPlaceholder')\"\n            (blur)=\"handleHexInputBlur()\"\n            (input)=\"handleHexValueChange(hexInput.value)\"\n        />\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [placeholder]=\"textFor('redInputPlaceholder')\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [placeholder]=\"textFor('greenInputPlaceholder')\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [placeholder]=\"textFor('blueInputPlaceholder')\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [placeholder]=\"textFor('alphaInputPlaceholder')\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
+            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-icon-button k-flat\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-textbox k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
         }),
-        __metadata("design:paramtypes", [LocalizationService,
-            ElementRef,
-            Renderer2])
+        __metadata("design:paramtypes", [ElementRef,
+            Renderer2,
+            LocalizationService])
     ], ColorInputComponent);
     return ColorInputComponent;
 }());
 
-/**
- * @hidden
- */
-var DEFAULT_OUTPUT_FORMAT = 'rgba';
-/**
- * @hidden
- */
-var DEFAULT_GRADIENT_BACKGROUND_COLOR = 'rgba(255, 0, 0, 1)';
-/**
- * @hidden
- */
-var DRAGHANDLE_MOVE_SPEED = 5;
-/**
- * @hidden
- */
-var AAA_RATIO = 7.0;
-/**
- * @hidden
- */
-var AA_RATIO = 4.5;
-
 var serial = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -7881,9 +8066,6 @@ var ColorGradientComponent = /** @class */ (function () {
         this.renderer = renderer;
         this.cdr = cdr;
         this.localizationService = localizationService;
-        /**
-         * @hidden
-         */
         this.hostClasses = true;
         /**
          * @hidden
@@ -7891,18 +8073,26 @@ var ColorGradientComponent = /** @class */ (function () {
         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;
         /**
@@ -7911,6 +8101,16 @@ var ColorGradientComponent = /** @class */ (function () {
          * @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.
          */
@@ -7926,17 +8126,7 @@ var ColorGradientComponent = /** @class */ (function () {
          * 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();
@@ -7949,9 +8139,6 @@ var ColorGradientComponent = /** @class */ (function () {
     }
     ColorGradientComponent_1 = ColorGradientComponent;
     Object.defineProperty(ColorGradientComponent.prototype, "readonlyAttribute", {
-        /**
-         * @hidden
-         */
         get: function () {
             return this.readonly;
         },
@@ -7959,31 +8146,22 @@ var ColorGradientComponent = /** @class */ (function () {
         configurable: true
     });
     Object.defineProperty(ColorGradientComponent.prototype, "disabledClass", {
-        /**
-         * @hidden
-         */
         get: function () {
             return this.disabled;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorGradientComponent.prototype, "hostTabindex", {
-        /**
-         * @hidden
-         */
+    Object.defineProperty(ColorGradientComponent.prototype, "gradientId", {
         get: function () {
-            return this.tabindex;
+            return this.id;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorGradientComponent.prototype, "gradientId", {
-        /**
-         * @hidden
-         */
+    Object.defineProperty(ColorGradientComponent.prototype, "hostTabindex", {
         get: function () {
-            return this.id;
+            return this.tabindex;
         },
         enumerable: true,
         configurable: true
@@ -7996,7 +8174,21 @@ var ColorGradientComponent = /** @class */ (function () {
          * Specifies the value of the initially selected color.
          */
         set: function (value) {
-            this._value = parseColor$1(value, this.format);
+            this._value = parseColor$1(value, this.format, this.opacity);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorGradientComponent.prototype, "contrastTool", {
+        get: function () {
+            return this._contrastTool;
+        },
+        /**
+         * 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: function (value) {
+            this._contrastTool = parseColor$1(value, this.format, this.opacity);
         },
         enumerable: true,
         configurable: true
@@ -8007,11 +8199,18 @@ var ColorGradientComponent = /** @class */ (function () {
         },
         /**
          * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         *
+         * @default 0
          */
         set: function (value) {
-            var tabindex = Number(value);
-            var defaultValue = 0;
-            this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+            if (isPresent(value)) {
+                var tabindex = Number(value);
+                this._tabindex = !isNaN(tabindex) ? tabindex : 0;
+            }
+            else {
+                // Allows removal of the tabindex attribute
+                this._tabindex = value;
+            }
         },
         enumerable: true,
         configurable: true
@@ -8035,10 +8234,10 @@ var ColorGradientComponent = /** @class */ (function () {
          */
         get: function () {
             // 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;
         },
         enumerable: true,
         configurable: true
@@ -8055,7 +8254,7 @@ var ColorGradientComponent = /** @class */ (function () {
          * @hidden
          */
         get: function () {
-            return typeof this.contrastTool === 'string' && this.contrastTool !== '';
+            return this.contrastTool && this.contrastTool.length > 0;
         },
         enumerable: true,
         configurable: true
@@ -8089,7 +8288,7 @@ var ColorGradientComponent = /** @class */ (function () {
         if (this.disabled) {
             return;
         }
-        this.host.nativeElement.focus();
+        this.gradientDragHandle.nativeElement.focus();
     };
     /**
      * @hidden
@@ -8127,7 +8326,7 @@ var ColorGradientComponent = /** @class */ (function () {
             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
@@ -8174,15 +8373,19 @@ var ColorGradientComponent = /** @class */ (function () {
             return;
         }
         this.gradientDragHandle.nativeElement.focus();
-        var newX = position.clientX - this.gradientRect.left;
-        var newY = position.clientY - this.gradientRect.top;
+        var gradientRect = this.gradientRect;
+        var newX = position.clientX - gradientRect.left;
+        var newY = position.clientY - gradientRect.top;
         this.ngZone.run(function () { return _this.moveDragHandle(newX, newY); });
     };
     /**
      * @hidden
      */
     ColorGradientComponent.prototype.handleHueSliderChange = function (hue) {
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        var 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);
     };
@@ -8190,14 +8393,16 @@ var ColorGradientComponent = /** @class */ (function () {
      * @hidden
      */
     ColorGradientComponent.prototype.handleAlphaSliderChange = function (alpha) {
-        this.hsva.a = alpha / 100;
-        this.handleValueChange(getColorFromHSV(this.hsva));
+        var hsva = this.hsva.value;
+        hsva.a = alpha / 100;
+        this.hsva.next(hsva);
+        this.handleValueChange(getColorFromHSV(this.hsva.value, this.format, this.opacity));
     };
     /**
      * @hidden
      */
     ColorGradientComponent.prototype.handleInputsValueChange = function (color) {
-        var parsed = parseColor$1(color, this.format);
+        var parsed = parseColor$1(color, this.format, this.opacity);
         if (this.value !== parsed) {
             this.handleValueChange(parsed);
             this.updateUI();
@@ -8246,7 +8451,7 @@ var ColorGradientComponent = /** @class */ (function () {
          * @hidden
          */
         get: function () {
-            var parsed = parseColor$1(this.value, this.format);
+            var parsed = parseColor$1(this.value, this.format, this.opacity);
             return "" + (this.value ? parsed : this.localizationService.get('colorGradientHandle'));
         },
         enumerable: true,
@@ -8284,29 +8489,35 @@ var ColorGradientComponent = /** @class */ (function () {
     });
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
+     * Used by the FloatingLabel to determine if the component is empty.
      */
     ColorGradientComponent.prototype.isEmpty = function () {
         return false;
     };
     ColorGradientComponent.prototype.moveDragHandle = function (positionX, positionY) {
-        var top = fitIntoBounds(positionY, 0, this.gradientRect.height);
-        var left = fitIntoBounds(positionX, 0, this.gradientRect.width);
+        var gradientRect = this.gradientRect;
+        var gradientRectWidth = gradientRect.width;
+        var gradientRectHeight = gradientRect.height;
+        var top = fitIntoBounds(positionY, 0, gradientRectHeight);
+        var 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(__assign({}, this.hsva, { a: 1 })));
+        var 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(__assign({}, this.hsva.value, { a: 1 }), this.format, this.opacity));
     };
     ColorGradientComponent.prototype.updateUI = function () {
         if (!isDocumentAvailable()) {
             return;
         }
-        this.hsva = this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 };
-        var top = (1 - this.hsva.v) * this.gradientRect.height;
-        var left = this.hsva.s * this.gradientRect.width;
+        this.hsva.next(this.value ? getHSV(this.value) : { h: 0, s: 0, v: 1, a: 1 });
+        var gradientRect = this.gradientRect;
+        var top = (1 - this.hsva.value.v) * gradientRect.height;
+        var 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();
     };
@@ -8332,7 +8543,7 @@ var ColorGradientComponent = /** @class */ (function () {
         this.renderer.setStyle(sliderTrack, 'background', "linear-gradient(to top, transparent, " + backgroundColor + ")");
     };
     ColorGradientComponent.prototype.setHostElementAriaLabel = function () {
-        var parsed = parseColor$1(this.value, this.format);
+        var parsed = parseColor$1(this.value, this.format, this.opacity);
         this.renderer.setAttribute(this.host.nativeElement, 'aria-label', "" + (this.value ? parsed : this.localizationService.get('colorGradientNoColor')));
     };
     ColorGradientComponent.prototype.addEventListeners = function () {
@@ -8349,7 +8560,7 @@ var ColorGradientComponent = /** @class */ (function () {
             var keyupListener = _this.renderer.listen(_this.gradientDragHandle.nativeElement, 'keyup', function () {
                 _this.renderer.removeClass(_this.gradientWrapper.nativeElement, 'k-dragging');
                 if (!_this.readonly && !_this.disabled) {
-                    _this.ngZone.run(function () { return _this.handleValueChange(getColorFromHSV(_this.hsva)); });
+                    _this.ngZone.run(function () { return _this.handleValueChange(getColorFromHSV(_this.hsva.value, _this.format, _this.opacity)); });
                 }
             });
             var dragHandleFocusInListener = _this.renderer.listen(_this.gradientDragHandle.nativeElement, 'focusin', function () {
@@ -8387,24 +8598,24 @@ var ColorGradientComponent = /** @class */ (function () {
         __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)
@@ -8432,21 +8643,22 @@ var ColorGradientComponent = /** @class */ (function () {
     ], 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)
@@ -8465,6 +8677,7 @@ var ColorGradientComponent = /** @class */ (function () {
     ], ColorGradientComponent.prototype, "gradientWrapper", void 0);
     ColorGradientComponent = ColorGradientComponent_1 = __decorate([
         Component({
+            exportAs: 'kendoColorGradient',
             selector: 'kendo-colorgradient',
             providers: [
                 {
@@ -8486,8 +8699,8 @@ var ColorGradientComponent = /** @class */ (function () {
                     useValue: 'kendo.colorgradient'
                 }
             ],
-            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-hexInputPlaceholder=\"kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input.\"\n            hexInputPlaceholder=\"HEX Color\"\n            i18n-redInputPlaceholder=\"kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input.\"\n            redInputPlaceholder=\"Red\"\n            i18n-greenInputPlaceholder=\"kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input.\"\n            greenInputPlaceholder=\"Green\"\n            i18n-blueInputPlaceholder=\"kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input.\"\n            blueInputPlaceholder=\"Blue\"\n            i18n-alphaInputPlaceholder=\"kendo.colorgradient.alphaInputPlaceholder|The placeholder for the alpha input.\"\n            alphaInputPlaceholder=\"Alpha\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-flat k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [(value)]=\"hsva.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity && format === 'rgba'\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
-            styles: ["\n        .k-clear-color {\n            position: absolute;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-align-self-end {\n            height: 140px;\n        }\n    "]
+            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-flat k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [value]=\"hsva.value.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
+            styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "]
         }),
         __metadata("design:paramtypes", [ElementRef,
             NgZone,
@@ -8498,148 +8711,237 @@ var ColorGradientComponent = /** @class */ (function () {
     return ColorGradientComponent;
 }());
 
-var DEFAULT_PRESET = 'office';
-var DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+/**
+ * @hidden
+ */
+var ColorPaletteService = /** @class */ (function () {
+    function ColorPaletteService() {
+        this.colorRows = [];
+    }
+    ColorPaletteService.prototype.setColorMatrix = function (palette, columns) {
+        this.colorRows = [];
+        if (!(isPresent(palette) && palette.length)) {
+            return;
+        }
+        columns = columns || palette.length;
+        for (var start = 0; start < palette.length; start += columns) {
+            var row = palette.slice(start, columns + start);
+            this.colorRows.push(row);
+        }
+    };
+    ColorPaletteService.prototype.getCellCoordsFor = function (color) {
+        if (!isPresent(color)) {
+            return;
+        }
+        for (var row = 0; row < this.colorRows.length; row++) {
+            for (var col = 0; col < this.colorRows[row].length; col++) {
+                if (this.colorRows[row][col] === color) {
+                    return { row: row, col: col };
+                }
+            }
+        }
+    };
+    ColorPaletteService.prototype.getColorAt = function (cellCoords) {
+        if (!(isPresent(cellCoords) && isPresent(this.colorRows[cellCoords.row]))) {
+            return;
+        }
+        return this.colorRows[cellCoords.row][cellCoords.col];
+    };
+    ColorPaletteService.prototype.getNextCell = function (current, horizontalStep, verticalStep) {
+        if (!(isPresent(current) && isPresent(current.row) && isPresent(current.col))) {
+            return { row: 0, col: 0 };
+        }
+        var row = this.clampIndex(current.row + verticalStep, this.colorRows.length - 1);
+        var col = this.clampIndex(current.col + horizontalStep, this.colorRows[row].length - 1);
+        return { row: row, col: col };
+    };
+    ColorPaletteService.prototype.clampIndex = function (index, max) {
+        var minArrayIndex = 0;
+        if (index < minArrayIndex) {
+            return minArrayIndex;
+        }
+        if (index > max) {
+            return max;
+        }
+        return index;
+    };
+    ColorPaletteService = __decorate([
+        Injectable()
+    ], ColorPaletteService);
+    return ColorPaletteService;
+}());
+
+/**
+ * @hidden
+ */
+var ColorPaletteLocalizationService = /** @class */ (function (_super) {
+    __extends(ColorPaletteLocalizationService, _super);
+    function ColorPaletteLocalizationService(prefix, messageService, _rtl, flatColorPickerLocalization) {
+        var _this = _super.call(this, prefix, messageService, _rtl) || this;
+        _this.flatColorPickerLocalization = flatColorPickerLocalization;
+        return _this;
+    }
+    ColorPaletteLocalizationService.prototype.get = function (shortKey) {
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
+        }
+        return _super.prototype.get.call(this, 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);
+    return ColorPaletteLocalizationService;
+}(LocalizationService));
+
+var DEFAULT_TILE_SIZE = 24;
+var DEFAULT_COLUMNS_COUNT = 10;
+var DEFAULT_PRESET$1 = 'office';
+var DEFAULT_ACCESSIBLE_PRESET$1 = 'accessible';
 var 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.
  */
-var ColorPickerComponent = /** @class */ (function () {
-    function ColorPickerComponent(popupService, cdr, localizationService, ngZone) {
+var ColorPaletteComponent = /** @class */ (function () {
+    function ColorPaletteComponent(host, service, cdr, renderer, localizationService) {
         var _this = this;
-        this.popupService = popupService;
+        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 = function () { };
         this.notifyNgChanged = function () { };
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
+        this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
-    ColorPickerComponent_1 = ColorPickerComponent;
-    Object.defineProperty(ColorPickerComponent.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
+    ColorPaletteComponent_1 = ColorPaletteComponent;
+    Object.defineProperty(ColorPaletteComponent.prototype, "paletteId", {
         /**
-         * Specifies the value of the initially selected color.
+         * @hidden
          */
-        set: function (value) {
-            this._value = parseColor$1(value, this.format);
+        get: function () {
+            return this.id;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPickerComponent.prototype, "popupSettings", {
+    Object.defineProperty(ColorPaletteComponent.prototype, "value", {
         get: function () {
-            return this._popupSettings;
+            return this._value;
         },
         /**
-         * Configures the popup of the ColorPicker.
+         * Specifies the value of the initially selected color.
          */
         set: function (value) {
-            this._popupSettings = Object.assign(this._popupSettings, value);
+            this._value = parseColor$1(value, this.format);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPickerComponent.prototype, "paletteSettings", {
+    Object.defineProperty(ColorPaletteComponent.prototype, "columns", {
         get: function () {
-            return this._paletteSettings;
+            return this._columns;
         },
         /**
-         * Configures the palette that is displayed in the ColorPicker popup.
+         * Specifies the number of columns that will be displayed.
+         * Defaults to `10`.
          */
         set: function (value) {
-            this._paletteSettings = Object.assign(this._paletteSettings, value);
+            var minColumnsCount = 1;
+            this._columns = value > minColumnsCount ? value : minColumnsCount;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPickerComponent.prototype, "gradientSettings", {
+    Object.defineProperty(ColorPaletteComponent.prototype, "palette", {
         get: function () {
-            return this._gradientSettings;
+            return this._palette;
         },
         /**
-         * 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: function (value) {
-            this._gradientSettings = Object.assign(this._gradientSettings, value);
+            var _this = this;
+            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;
+            }
+            var colors = (typeof value === 'string') ? value.split(',') : value;
+            this._palette = colors.map(function (color) { return parseColor$1(color, _this.format, false, false); });
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPickerComponent.prototype, "tabindex", {
+    Object.defineProperty(ColorPaletteComponent.prototype, "tabindex", {
         get: function () {
             return !this.disabled ? this._tabindex : undefined;
         },
@@ -8654,603 +8956,1133 @@ var ColorPickerComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPickerComponent.prototype, "isOpen", {
+    Object.defineProperty(ColorPaletteComponent.prototype, "tileLayout", {
         /**
-         * Indicates whether the ColorPicker popup is open.
+         * @hidden
          */
         get: function () {
-            return isPresent(this.popupRef);
+            if (typeof this.tileSize !== 'number') {
+                return this.tileSize;
+            }
+            return { width: this.tileSize, height: this.tileSize };
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPickerComponent.prototype, "iconStyles", {
+    Object.defineProperty(ColorPaletteComponent.prototype, "colorRows", {
         /**
          * @hidden
          */
         get: function () {
-            if (this.iconClass) {
-                return this.iconClass;
-            }
-            if (this.icon) {
-                return "k-icon k-i-" + this.icon;
-            }
+            return this.service.colorRows;
         },
         enumerable: true,
         configurable: true
     });
-    ColorPickerComponent.prototype.ngOnInit = function () {
-        var defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
-        var settingsPalette = this._paletteSettings.palette;
-        var 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
-        };
-    };
-    ColorPickerComponent.prototype.ngOnChanges = function (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);
+    Object.defineProperty(ColorPaletteComponent.prototype, "hostTabindex", {
+        /**
+         * @hidden
+         */
+        get: function () { return this.tabindex; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPaletteComponent.prototype, "disabledClass", {
+        /**
+         * @hidden
+         */
+        get: function () { return this.disabled; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPaletteComponent.prototype, "readonlyAttribute", {
+        /**
+         * @hidden
+         */
+        get: function () { return this.readonly; },
+        enumerable: true,
+        configurable: true
+    });
+    ColorPaletteComponent.prototype.ngOnInit = function () {
+        if (this.colorRows.length === 0) {
+            var 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);
         }
     };
-    ColorPickerComponent.prototype.ngOnDestroy = function () {
-        this.closePopup();
+    ColorPaletteComponent.prototype.ngAfterViewInit = function () {
+        this.setHostElementAriaLabel();
+    };
+    ColorPaletteComponent.prototype.ngOnDestroy = function () {
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
     };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handleWrapperClick = function () {
-        this.toggleWithEvents(!this.isOpen);
-        this.focus();
+    ColorPaletteComponent.prototype.ngOnChanges = function (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
      */
-    ColorPickerComponent.prototype.handleActiveColorClick = function () {
-        this.focus();
-        var event = new ActiveColorClickEvent(this.value);
-        this.activeColorClick.emit(event);
-        if (!event.isOpenPrevented() || this.isOpen) {
-            this.handleWrapperClick();
+    ColorPaletteComponent.prototype.handleKeydown = function (event) {
+        var 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();
     };
     /**
-     * Focuses the wrapper of the ColorPicker.
+     * @hidden
      */
-    ColorPickerComponent.prototype.focus = function () {
-        if (this.disabled) {
-            return;
-        }
-        this.wrapper.nativeElement.focus();
+    ColorPaletteComponent.prototype.handleHostBlur = function () {
+        this.notifyNgTouched();
+        this.handleCellFocusOnBlur();
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleWrapperFocus = function () {
-        if (isPresent(this.palette)) {
-            this.palette.nativeElement.focus();
-        }
-        if (this.isFocused) {
+    ColorPaletteComponent.prototype.handleCellSelection = function (value, focusedCell) {
+        if (this.readonly) {
             return;
         }
-        this.isFocused = true;
-        this.onFocus.emit();
+        this.selectedCell = focusedCell;
+        this.focusedCell = this.selectedCell;
+        this.focusInComponent = true;
+        var 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;
+        }
     };
     /**
-     * Blurs the ColorPicker.
+     * @hidden
      */
-    ColorPickerComponent.prototype.blur = function () {
-        this.wrapper.nativeElement.blur();
+    ColorPaletteComponent.prototype.writeValue = function (value) {
+        this.value = value;
+        this.focusedCell = this.service.getCellCoordsFor(this.value);
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleWrapperBlur = function () {
-        if (this.isOpen) {
-            return;
-        }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
+    ColorPaletteComponent.prototype.registerOnChange = function (fn) {
+        this.notifyNgChanged = fn;
     };
     /**
-     * Clears the color value of the ColorPicker.
+     * @hidden
+     */
+    ColorPaletteComponent.prototype.registerOnTouched = function (fn) {
+        this.notifyNgTouched = fn;
+    };
+    /**
+     * @hidden
+     */
+    ColorPaletteComponent.prototype.setDisabledState = function (isDisabled) {
+        this.cdr.markForCheck();
+        this.disabled = isDisabled;
+    };
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    ColorPaletteComponent.prototype.isEmpty = function () {
+        return false;
+    };
+    /**
+     * Clears the color value of the ColorPalette.
+     */
+    ColorPaletteComponent.prototype.reset = function () {
+        this.focusedCell = null;
+        if (isPresent(this.value)) {
+            this.handleValueChange(undefined);
+        }
+        this.selectedCell = undefined;
+    };
+    ColorPaletteComponent.prototype.handleValueChange = function (color) {
+        if (this.value === color) {
+            return;
+        }
+        this.value = color;
+        this.valueChange.emit(color);
+        this.notifyNgChanged(color);
+        this.setHostElementAriaLabel();
+    };
+    ColorPaletteComponent.prototype.handleCellFocusOnBlur = function () {
+        this.focusInComponent = false;
+        this.focusedCell = this.selectedCell;
+    };
+    ColorPaletteComponent.prototype.setRows = function () {
+        if (!isPresent(this.palette)) {
+            return;
+        }
+        this.columns = this.columns || DEFAULT_COLUMNS_COUNT;
+        this.service.setColorMatrix(this.palette, this.columns);
+    };
+    ColorPaletteComponent.prototype.handleCellNavigation = function (horizontalStep, verticalStep) {
+        if (this.readonly) {
+            return;
+        }
+        this.focusedCell = this.service.getNextCell(this.focusedCell, horizontalStep, verticalStep);
+        this.focusInComponent = true;
+    };
+    ColorPaletteComponent.prototype.setHostElementAriaLabel = function () {
+        var parsed = parseColor$1(this.value, this.format);
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', "" + (this.value ? parsed : this.localizationService.get('colorPaletteNoColor')));
+    };
+    ColorPaletteComponent.prototype.handleEnter = function () {
+        if (!isPresent(this.focusedCell)) {
+            return;
+        }
+        var selectedColor = this.service.getColorAt(this.focusedCell);
+        this.handleCellSelection(selectedColor, this.focusedCell);
+    };
+    var ColorPaletteComponent_1;
+    __decorate([
+        HostBinding('attr.dir'),
+        __metadata("design:type", String)
+    ], ColorPaletteComponent.prototype, "direction", void 0);
+    __decorate([
+        HostBinding('attr.id'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], ColorPaletteComponent.prototype, "paletteId", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ColorPaletteComponent.prototype, "id", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ColorPaletteComponent.prototype, "format", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ColorPaletteComponent.prototype, "value", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], ColorPaletteComponent.prototype, "columns", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], ColorPaletteComponent.prototype, "palette", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], ColorPaletteComponent.prototype, "tabindex", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], ColorPaletteComponent.prototype, "disabled", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], ColorPaletteComponent.prototype, "readonly", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], ColorPaletteComponent.prototype, "tileSize", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ColorPaletteComponent.prototype, "selectionChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ColorPaletteComponent.prototype, "valueChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ColorPaletteComponent.prototype, "cellSelection", void 0);
+    __decorate([
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [])
+    ], ColorPaletteComponent.prototype, "hostTabindex", null);
+    __decorate([
+        HostBinding('class.k-colorpalette'),
+        __metadata("design:type", Boolean)
+    ], ColorPaletteComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('attr.aria-disabled'),
+        HostBinding('class.k-state-disabled'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], ColorPaletteComponent.prototype, "disabledClass", null);
+    __decorate([
+        HostBinding('attr.aria-readonly'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], ColorPaletteComponent.prototype, "readonlyAttribute", null);
+    __decorate([
+        HostListener('keydown', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ColorPaletteComponent.prototype, "handleKeydown", null);
+    __decorate([
+        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(function () { return ColorPaletteComponent_1; }) // tslint:disable-line:no-forward-ref
+                }, {
+                    provide: KendoInput,
+                    useExisting: forwardRef(function () { return ColorPaletteComponent_1; })
+                },
+                ColorPaletteService,
+                ColorPaletteLocalizationService,
+                {
+                    provide: LocalizationService,
+                    useExisting: ColorPaletteLocalizationService
+                },
+                {
+                    provide: L10N_PREFIX,
+                    useValue: 'kendo.colorpalette'
+                }
+            ],
+            template: "\n        <ng-container kendoColorPaletteLocalizedMessages\n            i18n-colorPaletteNoColor=\"kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\">\n        </ng-container>\n        <div role=\"listbox\" class=\"k-colorpalette-table-wrap\"\n            [attr.aria-activedescendant]=\"activeCellId\">\n            <table class=\"k-colorpalette-table k-palette\">\n                <tbody>\n                    <tr *ngFor=\"let row of colorRows; let rowIndex = index\">\n                        <td *ngFor=\"let color of row; let colIndex = index\"\n                            role=\"option\"\n                            [class.k-state-selected]=\"selectedCell?.row === rowIndex && selectedCell?.col === colIndex\"\n                            [class.k-state-focus]=\"focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex\"\n                            [attr.aria-selected]=\"selectedCell?.row === rowIndex && selectedCell?.col === colIndex\"\n                            [attr.aria-label]=\"color\"\n                            class=\"k-colorpalette-tile\"\n                            [id]=\"'k-' + rowIndex + '-' + colIndex + '-' + uniqueId\"\n                            [attr.value]=\"color\"\n                            (click)=\"handleCellSelection(color, { row: rowIndex, col: colIndex })\"\n                            [ngStyle]=\"{\n                                backgroundColor: color,\n                                width: tileLayout.width + 'px',\n                                height: tileLayout.height + 'px',\n                                minWidth: tileLayout.width + 'px'\n                            }\">\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    "
+        }),
+        __metadata("design:paramtypes", [ElementRef,
+            ColorPaletteService,
+            ChangeDetectorRef,
+            Renderer2,
+            LocalizationService])
+    ], ColorPaletteComponent);
+    return ColorPaletteComponent;
+}());
+
+/**
+ * @hidden
+ */
+var FlatColorPickerHeaderComponent = /** @class */ (function () {
+    function FlatColorPickerHeaderComponent(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClasses = true;
+        this.viewChange = new EventEmitter();
+        this.valuePaneClick = new EventEmitter();
+        this.clearButtonClick = new EventEmitter();
+    }
+    FlatColorPickerHeaderComponent.prototype.onViewButtonClick = function (view) {
+        this.activeView = view;
+        this.viewChange.emit(view);
+    };
+    Object.defineProperty(FlatColorPickerHeaderComponent.prototype, "viewButtons", {
+        get: function () {
+            return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FlatColorPickerHeaderComponent.prototype.getViewButtonIcon = function (view) {
+        return view === 'gradient' ? 'k-i-color-canvas' : 'k-i-palette';
+    };
+    FlatColorPickerHeaderComponent.prototype.getText = function (text) {
+        return this.localizationService.get(text);
+    };
+    __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: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-icon-button k-flat\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                class=\"k-button k-icon-button k-flat k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
+        }),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], FlatColorPickerHeaderComponent);
+    return FlatColorPickerHeaderComponent;
+}());
+
+/**
+ * @hidden
+ */
+var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
+    function FlatColorPickerActionButtonsComponent(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClasses = true;
+        this.actionButtonClick = new EventEmitter();
+    }
+    FlatColorPickerActionButtonsComponent.prototype.getText = function (text) {
+        return this.localizationService.get(text);
+    };
+    FlatColorPickerActionButtonsComponent.prototype.onActionButtonClick = function (type, ev) {
+        var args = {
+            target: type,
+            originalEvent: ev
+        };
+        this.actionButtonClick.emit(args);
+    };
+    __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: "\n        <button\n            class=\"k-coloreditor-cancel k-button\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n        >{{getText('applyButton')}}</button>\n    "
+        }),
+        __metadata("design:paramtypes", [LocalizationService])
+    ], FlatColorPickerActionButtonsComponent);
+    return FlatColorPickerActionButtonsComponent;
+}());
+
+/**
+ * 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.
+ */
+var FlatColorPickerComponent = /** @class */ (function () {
+    function FlatColorPickerComponent(service, host, localizationService, cdr, renderer, ngZone) {
+        var _this = this;
+        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 = function () { };
+        this.notifyNgTouched = function () { };
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
+            var rtl = _a.rtl;
+            _this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    FlatColorPickerComponent_1 = FlatColorPickerComponent;
+    Object.defineProperty(FlatColorPickerComponent.prototype, "disabledClass", {
+        get: function () {
+            return this.disabled;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FlatColorPickerComponent.prototype, "ariaReadonly", {
+        get: function () {
+            return this.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FlatColorPickerComponent.prototype, "hostTabindex", {
+        get: function () {
+            return this.tabindex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FlatColorPickerComponent.prototype, "value", {
+        get: function () {
+            return this._value;
+        },
+        /**
+         * Specifies the initially selected color.
+         */
+        set: function (value) {
+            this._value = parseColor$1(value, this.format, this.gradientSettings.opacity);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FlatColorPickerComponent.prototype, "tabindex", {
+        get: function () {
+            return !this.disabled ? this._tabindex : undefined;
+        },
+        /**
+         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         *
+         * @default 0
+         */
+        set: function (value) {
+            var tabindex = Number(value);
+            var defaultValue = 0;
+            this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FlatColorPickerComponent.prototype, "gradientSettings", {
+        get: function () {
+            return this._gradientSettings;
+        },
+        /**
+         * Configures the gradient view.
+         */
+        set: function (value) {
+            Object.assign(this._gradientSettings, value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FlatColorPickerComponent.prototype, "paletteSettings", {
+        get: function () {
+            return this._paletteSettings;
+        },
+        /**
+         * Configures the palette view.
+         */
+        set: function (value) {
+            Object.assign(this._paletteSettings, value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FlatColorPickerComponent.prototype.ngOnInit = function () {
+        this.selection = this.value;
+        this._paletteSettings = this.service.getPaletteSettings(this._paletteSettings, this.format);
+        this.setActiveView();
+    };
+    FlatColorPickerComponent.prototype.ngAfterViewInit = function () {
+        this.setHostElementAriaLabel();
+        this.initDomEvents();
+        this.setSizingVariables();
+    };
+    FlatColorPickerComponent.prototype.ngOnChanges = function (changes) {
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
+        if (isChanged('paletteSettings', changes)) {
+            this.setSizingVariables();
+        }
+    };
+    FlatColorPickerComponent.prototype.ngOnDestroy = function () {
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+        this.subscriptions.unsubscribe();
+    };
+    Object.defineProperty(FlatColorPickerComponent.prototype, "headerHasContent", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.preview || this.views.length > 1 || this.clearButton;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
      */
-    ColorPickerComponent.prototype.reset = function () {
-        if (!isPresent(this.value)) {
+    FlatColorPickerComponent.prototype.isEmpty = function () {
+        return false;
+    };
+    /**
+     * Focuses the wrapper of the FlatColorPicker.
+     */
+    FlatColorPickerComponent.prototype.focus = function () {
+        if (this.disabled && this.focused) {
             return;
         }
-        this._value = undefined;
-        this.notifyNgChanged(undefined);
+        this.host.nativeElement.focus();
+        this.focused = true;
     };
     /**
-     * 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.
+     * Blurs the wrapper of the FlatColorPicker.
      */
-    ColorPickerComponent.prototype.toggle = function (open) {
-        if (this.disabled || this.readonly) {
+    FlatColorPickerComponent.prototype.blur = function () {
+        if (!this.focused) {
             return;
         }
-        this.closePopup();
-        open = isPresent(open) ? open : !this.isOpen;
-        if (open) {
-            this.openPopup();
+        this.notifyNgTouched();
+        this.host.nativeElement.blur();
+        this.focused = false;
+    };
+    /**
+     * Clears the value of the FlatColorPicker.
+     */
+    FlatColorPickerComponent.prototype.reset = function () {
+        if (!isPresent(this.value)) {
+            return;
         }
+        this.value = undefined;
+        this.notifyNgChanged(undefined);
+        this.setHostElementAriaLabel();
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleValueChange = function (color, closePopup) {
-        var parsedColor = parseColor$1(color, this.format);
-        var valueChange = parsedColor !== this.value;
-        if (closePopup) {
-            this.toggleWithEvents(false);
-            this.focus();
+    FlatColorPickerComponent.prototype.onViewChange = function (view) {
+        var _this = this;
+        if (this.activeView === view) {
+            return;
         }
-        if (valueChange) {
-            this.value = parsedColor;
-            this.valueChange.emit(parsedColor);
-            this.notifyNgChanged(parsedColor);
+        this.activeView = view;
+        this.activeViewChange.emit(view);
+        if (this.activeView === 'gradient') {
+            this.ngZone.runOutsideAngular(function () {
+                setTimeout(function () {
+                    _this.gradient.gradientDragHandle.nativeElement.focus();
+                });
+            });
         }
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handlePopupBlur = function (event) {
-        var focusInPopupElement = this.popupRef.popupElement.contains(event.relatedTarget);
-        var wrapperClicked = event.relatedTarget === this.wrapper.nativeElement;
-        if (!this.isFocused || wrapperClicked || focusInPopupElement) {
+    FlatColorPickerComponent.prototype.onClearButtonClick = function () {
+        this.resetInnerComponentValue();
+        this.host.nativeElement.focus();
+    };
+    /**
+     * @hidden
+     */
+    FlatColorPickerComponent.prototype.handleValueChange = function (color) {
+        if (this.value === color) {
             return;
         }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
-        this.toggleWithEvents(false);
+        if (this.preview) {
+            this.changeCurrentValue(color);
+        }
+        else {
+            this.setFlatColorPickerValue(color);
+        }
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.writeValue = function (value) {
+    FlatColorPickerComponent.prototype.onAction = function (ev) {
+        ev.target === 'apply' ? this.setFlatColorPickerValue(this.selection) : this.resetSelection(ev.originalEvent);
+        this.actionButtonClick.emit();
+    };
+    /**
+     * @hidden
+     */
+    FlatColorPickerComponent.prototype.writeValue = function (value) {
         this.value = value;
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.registerOnChange = function (fn) {
+    FlatColorPickerComponent.prototype.registerOnChange = function (fn) {
         this.notifyNgChanged = fn;
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.registerOnTouched = function (fn) {
+    FlatColorPickerComponent.prototype.registerOnTouched = function (fn) {
         this.notifyNgTouched = fn;
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.setDisabledState = function (isDisabled) {
+    FlatColorPickerComponent.prototype.setDisabledState = function (isDisabled) {
         this.cdr.markForCheck();
         this.disabled = isDisabled;
     };
     /**
      * @hidden
      */
-    ColorPickerComponent.prototype.handleWrapperKeyDown = function (event) {
-        if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
-            event.preventDefault();
-            this.toggleWithEvents(true);
+    FlatColorPickerComponent.prototype.resetSelection = function (ev) {
+        var eventArgs = new ColorPickerCancelEvent(ev);
+        this.cancel.emit(eventArgs);
+        if (!eventArgs.isDefaultPrevented()) {
+            this.selection = this.value;
         }
+        this.notifyNgTouched();
     };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handlePopupKeyDown = function (event) {
-        if (event.keyCode === Keys.Escape) {
-            this.toggleWithEvents(false);
-            this.wrapper.nativeElement.focus();
-        }
-        if (event.keyCode === Keys.Tab) {
-            var firstElement = this.colorGradient ? this.colorGradient.gradientDragHandle.nativeElement : this.palette.nativeElement;
-            var lastElement = this.palette ? this.palette.nativeElement :
-                this.colorGradient.inputs.opacityInput.nativeElement.childNodes[1].children[0];
-            if (event.shiftKey) {
-                if (event.target === firstElement) {
-                    event.preventDefault();
-                    lastElement.focus();
-                    return;
-                }
-            }
-            else {
-                if (event.target === lastElement) {
-                    event.preventDefault();
-                    firstElement.focus();
-                    return;
-                }
-            }
-        }
+    FlatColorPickerComponent.prototype.setHostElementAriaLabel = function () {
+        var parsed = parseColor$1(this.value, this.format, this.gradientSettings.opacity);
+        var ariaLabelValue = "" + (this.value ? parsed : this.localizationService.get('flatColorPickerNoColor'));
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
     };
-    /**
-     * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
-     */
-    ColorPickerComponent.prototype.isEmpty = function () {
-        return false;
+    FlatColorPickerComponent.prototype.setSizingVariables = function () {
+        var paletteTileSize = this.service.paletteTileLayout(this.paletteSettings.tileSize);
+        var value = "--kendo-color-preview-columns: " + this.paletteSettings.columns + ";\n            --kendo-color-preview-width: " + paletteTileSize.width + "px;\n            --kendo-color-preview-height: " + paletteTileSize.height + "px;";
+        this.host.nativeElement.querySelector('.k-coloreditor-views.k-vstack').setAttribute('style', value);
     };
-    ColorPickerComponent.prototype.toggleWithEvents = function (open) {
-        var _this = this;
-        var sameState = this.isOpen === open;
-        if (this.disabled || this.readonly || sameState) {
+    FlatColorPickerComponent.prototype.changeCurrentValue = function (color) {
+        this.selection = color;
+        this.notifyNgTouched();
+    };
+    FlatColorPickerComponent.prototype.resetInnerComponentValue = function () {
+        this.selection = null;
+        if (this.gradient) {
+            this.gradient.reset();
             return;
         }
-        var eventArgs = new PreventableEvent();
-        open ? this.open.emit(eventArgs) : this.close.emit(eventArgs);
-        if (!eventArgs.isDefaultPrevented()) {
-            this.toggle(open);
+        this.palette.reset();
+    };
+    FlatColorPickerComponent.prototype.setFlatColorPickerValue = function (color) {
+        if (this.value === color) {
+            return;
         }
-        if (open) {
-            this.ngZone.runOutsideAngular(function () {
-                setTimeout(function () {
-                    if (_this.colorGradient) {
-                        _this.colorGradient.gradientDragHandle.nativeElement.focus();
-                    }
-                });
-            });
+        this.value = color;
+        this.valueChange.emit(color);
+        this.notifyNgChanged(color);
+        this.setHostElementAriaLabel();
+    };
+    FlatColorPickerComponent.prototype.setActiveView = function () {
+        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");
         }
     };
-    ColorPickerComponent.prototype.openPopup = function () {
+    FlatColorPickerComponent.prototype.initDomEvents = function () {
         var _this = this;
-        var horizontalAlign = this.direction === "rtl" ? "right" : "left";
-        var anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
-        var 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(function () {
-            _this.toggleWithEvents(false);
-            if (!_this.isOpen) {
-                _this.wrapper.nativeElement.focus({
-                    preventScroll: true
-                });
-            }
-        });
-    };
-    ColorPickerComponent.prototype.closePopup = function () {
-        if (!this.isOpen) {
+        if (!this.host) {
             return;
         }
-        this.popupRef.close();
-        this.popupRef = null;
-        this.palette = null;
+        var hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(function () {
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focus', function () {
+                _this.focused = true;
+            }));
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'blur', function () {
+                _this.focused = false;
+                _this.notifyNgTouched();
+            }));
+        });
     };
-    var ColorPickerComponent_1;
+    var FlatColorPickerComponent_1;
     __decorate([
-        HostBinding('class.k-widget'),
-        HostBinding('class.k-colorpicker'),
+        HostBinding('class.k-flatcolorpicker'),
+        HostBinding('class.k-coloreditor'),
         __metadata("design:type", Boolean)
-    ], ColorPickerComponent.prototype, "hostClasses", void 0);
+    ], FlatColorPickerComponent.prototype, "hostClasses", void 0);
     __decorate([
-        HostBinding('attr.dir'),
-        __metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "direction", void 0);
+        HostBinding('class.k-state-disabled'),
+        HostBinding('attr.aria-disabled'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], FlatColorPickerComponent.prototype, "disabledClass", null);
     __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "focusableId", void 0);
+        HostBinding('attr.aria-readonly'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], FlatColorPickerComponent.prototype, "ariaReadonly", null);
     __decorate([
-        Input(),
+        HostBinding('attr.dir'),
         __metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "view", void 0);
+    ], 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)
-    ], ColorPickerComponent.prototype, "readonly", void 0);
+    ], FlatColorPickerComponent.prototype, "readonly", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
-    ], ColorPickerComponent.prototype, "disabled", void 0);
+    ], FlatColorPickerComponent.prototype, "disabled", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "format", void 0);
+    ], FlatColorPickerComponent.prototype, "format", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String),
         __metadata("design:paramtypes", [String])
-    ], ColorPickerComponent.prototype, "value", null);
+    ], FlatColorPickerComponent.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])
+    ], FlatColorPickerComponent.prototype, "tabindex", null);
     __decorate([
         Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], ColorPickerComponent.prototype, "paletteSettings", null);
+        __metadata("design:type", Boolean)
+    ], FlatColorPickerComponent.prototype, "clearButton", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", Object),
-        __metadata("design:paramtypes", [Object])
-    ], ColorPickerComponent.prototype, "gradientSettings", null);
+        __metadata("design:type", Boolean)
+    ], FlatColorPickerComponent.prototype, "preview", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "icon", void 0);
+    ], FlatColorPickerComponent.prototype, "actionsLayout", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", Object)
-    ], ColorPickerComponent.prototype, "iconClass", void 0);
+        __metadata("design:type", String)
+    ], FlatColorPickerComponent.prototype, "activeView", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [Number])
-    ], ColorPickerComponent.prototype, "tabindex", null);
+        __metadata("design:type", Array)
+    ], FlatColorPickerComponent.prototype, "views", void 0);
     __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "valueChange", void 0);
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], FlatColorPickerComponent.prototype, "gradientSettings", null);
     __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "open", void 0);
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], FlatColorPickerComponent.prototype, "paletteSettings", null);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "close", void 0);
+    ], FlatColorPickerComponent.prototype, "valueChange", void 0);
     __decorate([
-        Output('focus'),
+        Output(),
         __metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "onFocus", void 0);
+    ], FlatColorPickerComponent.prototype, "cancel", void 0);
     __decorate([
-        Output('blur'),
+        Output(),
         __metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "onBlur", void 0);
+    ], FlatColorPickerComponent.prototype, "activeViewChange", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "activeColorClick", void 0);
-    __decorate([
-        ViewChild('container', { read: ViewContainerRef, static: true }),
-        __metadata("design:type", ViewContainerRef)
-    ], ColorPickerComponent.prototype, "container", void 0);
+    ], FlatColorPickerComponent.prototype, "actionButtonClick", void 0);
     __decorate([
-        ViewChild('wrapper', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], ColorPickerComponent.prototype, "wrapper", void 0);
+        ViewChild('header', { static: false }),
+        __metadata("design:type", FlatColorPickerHeaderComponent)
+    ], FlatColorPickerComponent.prototype, "header", void 0);
     __decorate([
-        ViewChild('popupTemplate', { static: true }),
-        __metadata("design:type", TemplateRef)
-    ], ColorPickerComponent.prototype, "popupTemplate", void 0);
+        ViewChild('gradient', { static: false }),
+        __metadata("design:type", ColorGradientComponent)
+    ], FlatColorPickerComponent.prototype, "gradient", void 0);
     __decorate([
-        ViewChild('palette', { read: ElementRef, static: false }),
-        __metadata("design:type", ElementRef)
-    ], ColorPickerComponent.prototype, "palette", void 0);
+        ViewChild('palette', { static: false }),
+        __metadata("design:type", ColorPaletteComponent)
+    ], FlatColorPickerComponent.prototype, "palette", void 0);
     __decorate([
-        ViewChild('colorGradient', { static: false }),
-        __metadata("design:type", ColorGradientComponent)
-    ], ColorPickerComponent.prototype, "colorGradient", void 0);
-    ColorPickerComponent = ColorPickerComponent_1 = __decorate([
+        ViewChild('footer', { static: false }),
+        __metadata("design:type", FlatColorPickerActionButtonsComponent)
+    ], FlatColorPickerComponent.prototype, "footer", void 0);
+    FlatColorPickerComponent = FlatColorPickerComponent_1 = __decorate([
         Component({
-            selector: 'kendo-colorpicker',
-            providers: [{
+            exportAs: 'kendoFlatColorPicker',
+            selector: 'kendo-flatcolorpicker',
+            providers: [
+                {
                     multi: true,
                     provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return ColorPickerComponent_1; })
-                }, {
+                    useExisting: forwardRef(function () { return FlatColorPickerComponent_1; })
+                },
+                {
                     provide: KendoInput,
-                    useExisting: forwardRef(function () { return ColorPickerComponent_1; })
+                    useExisting: forwardRef(function () { return FlatColorPickerComponent_1; })
                 },
-                ColorPickerLocalizationService,
+                FlatColorPickerService,
+                FlatColorPickerLocalizationService,
                 {
                     provide: LocalizationService,
-                    useExisting: ColorPickerLocalizationService
+                    useExisting: FlatColorPickerLocalizationService
                 },
                 {
                     provide: L10N_PREFIX,
-                    useValue: 'kendo.colorpicker'
+                    useValue: 'kendo.flatcolorpicker'
                 }
             ],
-            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorGradient=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradient=\"kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-hexInputPlaceholder=\"kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input.\"\n            hexInputPlaceholder=\"HEX Color\"\n            i18n-redInputPlaceholder=\"kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input.\"\n            redInputPlaceholder=\"Red\"\n            i18n-greenInputPlaceholder=\"kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input.\"\n            greenInputPlaceholder=\"Green\"\n            i18n-blueInputPlaceholder=\"kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input.\"\n            blueInputPlaceholder=\"Blue\"\n            i18n-alphaInputPlaceholder=\"kendo.colorpicker.alphaInputPlaceholder|The placeholder for the alpha input.\"\n            alphaInputPlaceholder=\"Alpha\">\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-picker-wrap': true,\n                'k-state-disabled': this.disabled,\n                'k-state-focused': this.isFocused\n            }\"\n            role=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-label]=\"value\"\n            [id]=\"focusableId\"\n            [attr.tabindex]=\"tabindex\"\n            (focus)=\"handleWrapperFocus()\"\n            (blur)=\"handleWrapperBlur()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown)=\"handleWrapperKeyDown($event)\"\n        >\n            <span *ngIf=\"!iconStyles\" class=\"k-selected-color\" [style.background-color]=\"value\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-icon k-i-line\" *ngIf=\"!value\"></span>\n            </span>\n            <span *ngIf=\"iconStyles\" class=\"k-tool-icon\" [ngClass]=\"iconStyles\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-selected-color\" [style.background-color]=\"value\"></span>\n            </span>\n            <span class=\"k-select\" (click)=\"handleWrapperClick()\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <kendo-colorgradient  #colorGradient\n                *ngIf=\"view === 'gradient' || view === 'combo'\"\n                [value]=\"value\"\n                [format]=\"format\"\n                [opacity]=\"gradientSettings.opacity\"\n                [clearButton]=\"gradientSettings.clearButton\"\n                [delay]=\"gradientSettings.delay\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (valueChange)=\"handleValueChange($event, false)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n            >\n            </kendo-colorgradient>\n            <kendo-colorpalette\n                #palette\n                *ngIf=\"view === 'palette' || view === 'combo'\"\n                kendoFocusOnDomReady\n                [palette]=\"paletteSettings.palette\"\n                [columns]=\"paletteSettings.columns\"\n                [tileSize]=\"paletteSettings.tileSize\"\n                [format]=\"format\"\n                [value]=\"value\"\n                (blur)=\"handlePopupBlur($event)\"\n                (cellSelection)=\"handleValueChange($event, true)\"\n                (mousedown)=\"$event.preventDefault()\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n            >\n            </kendo-colorpalette>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
-        }),
-        __metadata("design:paramtypes", [PopupService,
-            ChangeDetectorRef,
+            template: "\n        <ng-container kendoFlatColorPickerLocalizedMessages\n            i18n-flatColorPickerNoColor=\"kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.flatcolorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.flatcolorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.flatcolorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.flatcolorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.flatcolorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.flatcolorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.flatcolorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.flatcolorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <div kendoFlatColorPickerHeader\n            *ngIf=\"headerHasContent\"\n            #header\n            [clearButton]=\"clearButton\"\n            [activeView]=\"activeView\"\n            [views]=\"views\"\n            [value]=\"value\"\n            [selection]=\"selection\"\n            [preview]=\"preview\"\n            (clearButtonClick)=\"onClearButtonClick()\"\n            (viewChange)=\"onViewChange($event)\"\n            (valuePaneClick)=\"resetSelection($event)\">\n        </div>\n        <div class=\"k-coloreditor-views k-vstack\">\n            <kendo-colorgradient #gradient\n                *ngIf=\"activeView === 'gradient'\"\n                [tabindex]=\"null\"\n                [value]=\"selection\"\n                [format]=\"format\"\n                [opacity]=\"gradientSettings.opacity\"\n                [delay]=\"gradientSettings.delay\"\n                [contrastTool]=\"gradientSettings.contrastTool\"\n                [readonly]=\"readonly\"\n                (valueChange)=\"handleValueChange($event)\"\n            >\n            </kendo-colorgradient>\n            <kendo-colorpalette #palette\n                *ngIf=\"activeView === 'palette'\"\n                kendoFocusOnDomReady\n                [palette]=\"paletteSettings.palette\"\n                [columns]=\"paletteSettings.columns\"\n                [tileSize]=\"paletteSettings.tileSize\"\n                [format]=\"format\"\n                [value]=\"selection\"\n                (valueChange)=\"handleValueChange($event)\"\n            >\n            </kendo-colorpalette>\n        </div>\n        <div kendoFlatColorPickerActionButtons *ngIf=\"preview\"\n            #footer\n            [ngClass]=\"'k-justify-content-' + actionsLayout\"\n            (actionButtonClick)=\"onAction($event)\">\n        </div>\n"
+        }),
+        __metadata("design:paramtypes", [FlatColorPickerService,
+            ElementRef,
             LocalizationService,
+            ChangeDetectorRef,
+            Renderer2,
             NgZone])
-    ], ColorPickerComponent);
-    return ColorPickerComponent;
-}());
-
-/**
- * @hidden
- */
-var ColorPaletteService = /** @class */ (function () {
-    function ColorPaletteService() {
-        this.colorRows = [];
-    }
-    ColorPaletteService.prototype.setColorMatrix = function (palette, columns) {
-        this.colorRows = [];
-        if (!(isPresent(palette) && palette.length)) {
-            return;
-        }
-        columns = columns || palette.length;
-        for (var start = 0; start < palette.length; start += columns) {
-            var row = palette.slice(start, columns + start);
-            this.colorRows.push(row);
-        }
-    };
-    ColorPaletteService.prototype.getCellCoordsFor = function (color) {
-        if (!isPresent(color)) {
-            return;
-        }
-        for (var row = 0; row < this.colorRows.length; row++) {
-            for (var col = 0; col < this.colorRows[row].length; col++) {
-                if (this.colorRows[row][col] === color) {
-                    return { row: row, col: col };
-                }
-            }
-        }
-    };
-    ColorPaletteService.prototype.getColorAt = function (cellCoords) {
-        if (!(isPresent(cellCoords) && isPresent(this.colorRows[cellCoords.row]))) {
-            return;
-        }
-        return this.colorRows[cellCoords.row][cellCoords.col];
-    };
-    ColorPaletteService.prototype.getNextCell = function (current, horizontalStep, verticalStep) {
-        if (!(isPresent(current) && isPresent(current.row) && isPresent(current.col))) {
-            return { row: 0, col: 0 };
-        }
-        var row = this.clampIndex(current.row + verticalStep, this.colorRows.length - 1);
-        var col = this.clampIndex(current.col + horizontalStep, this.colorRows[row].length - 1);
-        return { row: row, col: col };
-    };
-    ColorPaletteService.prototype.clampIndex = function (index, max) {
-        var minArrayIndex = 0;
-        if (index < minArrayIndex) {
-            return minArrayIndex;
-        }
-        if (index > max) {
-            return max;
-        }
-        return index;
-    };
-    ColorPaletteService = __decorate([
-        Injectable()
-    ], ColorPaletteService);
-    return ColorPaletteService;
+    ], FlatColorPickerComponent);
+    return FlatColorPickerComponent;
 }());
 
-/**
- * @hidden
- */
-var ColorPaletteLocalizationService = /** @class */ (function (_super) {
-    __extends(ColorPaletteLocalizationService, _super);
-    function ColorPaletteLocalizationService(prefix, messageService, _rtl, colorPickerLocalization) {
-        var _this = _super.call(this, prefix, messageService, _rtl) || this;
-        _this.colorPickerLocalization = colorPickerLocalization;
-        return _this;
-    }
-    ColorPaletteLocalizationService.prototype.get = function (shortKey) {
-        if (this.colorPickerLocalization) {
-            return this.colorPickerLocalization.get(shortKey);
-        }
-        return _super.prototype.get.call(this, shortKey);
-    };
-    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);
-    return ColorPaletteLocalizationService;
-}(LocalizationService));
-
-var DEFAULT_TILE_SIZE = 24;
-var DEFAULT_COLUMNS_COUNT = 10;
-var DEFAULT_PRESET$1 = 'office';
-var DEFAULT_ACCESSIBLE_PRESET$1 = 'accessible';
 var 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.
  */
-var ColorPaletteComponent = /** @class */ (function () {
-    function ColorPaletteComponent(host, service, cdr, renderer, localizationService) {
+var ColorPickerComponent = /** @class */ (function () {
+    function ColorPickerComponent(popupService, cdr, localizationService, ngZone) {
         var _this = this;
-        this.host = host;
-        this.service = service;
+        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 = function () { };
         this.notifyNgChanged = function () { };
-        this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
         });
     }
-    ColorPaletteComponent_1 = ColorPaletteComponent;
-    Object.defineProperty(ColorPaletteComponent.prototype, "paletteId", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.id;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPaletteComponent.prototype, "value", {
+    ColorPickerComponent_1 = ColorPickerComponent;
+    Object.defineProperty(ColorPickerComponent.prototype, "value", {
         get: function () {
             return this._value;
         },
@@ -9258,396 +10090,543 @@ var ColorPaletteComponent = /** @class */ (function () {
          * Specifies the value of the initially selected color.
          */
         set: function (value) {
-            this._value = parseColor$1(value, this.format);
+            this._value = parseColor$1(value, this.format, this.gradientSettings.opacity);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPaletteComponent.prototype, "columns", {
+    Object.defineProperty(ColorPickerComponent.prototype, "popupSettings", {
         get: function () {
-            return this._columns;
+            return this._popupSettings;
         },
         /**
-         * Specifies the number of columns that will be displayed.
-         * Defaults to `10`.
+         * Configures the popup of the ColorPicker.
          */
         set: function (value) {
-            var minColumnsCount = 1;
-            this._columns = value > minColumnsCount ? value : minColumnsCount;
+            this._popupSettings = Object.assign(this._popupSettings, value);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPaletteComponent.prototype, "palette", {
+    Object.defineProperty(ColorPickerComponent.prototype, "paletteSettings", {
         get: function () {
-            return this._palette;
+            return this._paletteSettings;
         },
         /**
-         * 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: function (value) {
-            var _this = this;
-            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;
-            }
-            var colors = (typeof value === 'string') ? value.split(',') : value;
-            this._palette = colors.map(function (color) { return parseColor$1(color, _this.format, false); });
+            this._paletteSettings = Object.assign(this._paletteSettings, value);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPaletteComponent.prototype, "tabindex", {
+    Object.defineProperty(ColorPickerComponent.prototype, "gradientSettings", {
         get: function () {
-            return !this.disabled ? this._tabindex : undefined;
+            return this._gradientSettings;
         },
         /**
-         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         * Configures the gradient that is displayed in the ColorPicker popup.
          */
         set: function (value) {
-            var tabindex = Number(value);
-            var defaultValue = 0;
-            this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+            this._gradientSettings = Object.assign(this._gradientSettings, value);
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPaletteComponent.prototype, "tileLayout", {
-        /**
-         * @hidden
-         */
+    Object.defineProperty(ColorPickerComponent.prototype, "tabindex", {
         get: function () {
-            if (typeof this.tileSize !== 'number') {
-                return this.tileSize;
-            }
-            return { width: this.tileSize, height: this.tileSize };
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPaletteComponent.prototype, "colorRows", {
+            return !this.disabled ? this._tabindex : undefined;
+        },
         /**
-         * @hidden
+         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         *
+         * @default 0
          */
-        get: function () {
-            return this.service.colorRows;
+        set: function (value) {
+            var tabindex = Number(value);
+            var defaultValue = 0;
+            this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPaletteComponent.prototype, "hostTabindex", {
+    Object.defineProperty(ColorPickerComponent.prototype, "isOpen", {
         /**
-         * @hidden
+         * Indicates whether the ColorPicker popup is open.
          */
-        get: function () { return this.tabindex; },
+        get: function () {
+            return isPresent(this.popupRef);
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPaletteComponent.prototype, "disabledClass", {
+    Object.defineProperty(ColorPickerComponent.prototype, "iconStyles", {
         /**
          * @hidden
          */
-        get: function () { return this.disabled; },
+        get: function () {
+            if (this.iconClass) {
+                return this.iconClass;
+            }
+            if (this.icon) {
+                return "k-icon k-i-" + this.icon;
+            }
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ColorPaletteComponent.prototype, "readonlyAttribute", {
+    ColorPickerComponent.prototype.ngOnInit = function () {
+        var defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        var settingsPalette = this._paletteSettings.palette;
+        var 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
+        };
+    };
+    ColorPickerComponent.prototype.ngOnChanges = function (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);
+        }
+    };
+    ColorPickerComponent.prototype.ngOnDestroy = function () {
+        this.closePopup();
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+    };
+    Object.defineProperty(ColorPickerComponent.prototype, "colorPickerAriaLabel", {
         /**
          * @hidden
          */
-        get: function () { return this.readonly; },
+        get: function () {
+            return this.value ? this.value : this.localizationService.get('colorPickerNoColor');
+        },
         enumerable: true,
         configurable: true
     });
-    ColorPaletteComponent.prototype.ngOnInit = function () {
-        if (this.colorRows.length === 0) {
-            var 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);
-        }
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.handleCancelEvent = function (ev) {
+        this.cancel.emit(ev);
     };
-    ColorPaletteComponent.prototype.ngAfterViewInit = function () {
-        this.setHostElementAriaLabel();
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.togglePopup = function () {
+        this.toggleWithEvents(!this.isOpen);
+        this.focus();
     };
-    ColorPaletteComponent.prototype.ngOnDestroy = function () {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.handleActiveColorClick = function () {
+        this.focus();
+        var event = new ActiveColorClickEvent(this.value);
+        this.activeColorClick.emit(event);
+        if (!event.isOpenPrevented() || this.isOpen) {
+            this.togglePopup();
         }
     };
-    ColorPaletteComponent.prototype.ngOnChanges = function (changes) {
-        if (changes.palette || changes.columns) {
-            this.setRows();
-        }
-        if (changes.palette || changes.value || changes.columns) {
-            this.focusedCell = this.service.getCellCoordsFor(this.value);
-            this.setHostElementAriaLabel();
+    /**
+     * Focuses the wrapper of the ColorPicker.
+     */
+    ColorPickerComponent.prototype.focus = function () {
+        if (this.disabled) {
+            return;
         }
+        this.wrapper.nativeElement.focus();
     };
     /**
      * @hidden
      */
-    ColorPaletteComponent.prototype.handleKeydown = function (event) {
-        var 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;
+    ColorPickerComponent.prototype.handleWrapperFocus = function () {
+        if (this.isFocused) {
+            return;
         }
-        event.preventDefault();
+        this.isFocused = true;
+        this.onFocus.emit();
+    };
+    /**
+     * Blurs the ColorPicker.
+     */
+    ColorPickerComponent.prototype.blur = function () {
+        this.wrapper.nativeElement.blur();
     };
     /**
      * @hidden
      */
-    ColorPaletteComponent.prototype.handleHostBlur = function () {
+    ColorPickerComponent.prototype.handleWrapperBlur = function () {
+        if (this.isOpen) {
+            return;
+        }
+        this.isFocused = false;
+        this.onBlur.emit();
         this.notifyNgTouched();
-        this.handleCellFocusOnBlur();
     };
     /**
-     * @hidden
+     * Clears the value of the ColorPicker.
      */
-    ColorPaletteComponent.prototype.handleCellSelection = function (value, cell) {
-        if (this.readonly) {
+    ColorPickerComponent.prototype.reset = function () {
+        if (!isPresent(this.value)) {
             return;
         }
-        this.selectedCell = cell;
-        this.focusedCell = this.selectedCell;
-        this.focusInComponent = true;
-        var parsedColor = parseColor$1(value, this.format, false);
-        this.cellSelection.emit(parsedColor);
-        if (this.value !== parsedColor) {
+        this._value = undefined;
+        this.notifyNgChanged(undefined);
+    };
+    /**
+     * 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.
+     */
+    ColorPickerComponent.prototype.toggle = function (open) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.closePopup();
+        open = isPresent(open) ? open : !this.isOpen;
+        if (open) {
+            this.openPopup();
+        }
+    };
+    /**
+     * @hidden
+     */
+    ColorPickerComponent.prototype.handleValueChange = function (color) {
+        var parsedColor = parseColor$1(color, this.format, this.gradientSettings.opacity);
+        var 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
+     */
+    ColorPickerComponent.prototype.handlePopupBlur = function (event) {
+        if (this.popupBlurInvalid(event)) {
+            return;
         }
+        this.isFocused = false;
+        this.onBlur.emit();
+        this.notifyNgTouched();
+        this.toggleWithEvents(false);
     };
     /**
      * @hidden
      */
-    ColorPaletteComponent.prototype.writeValue = function (value) {
+    ColorPickerComponent.prototype.writeValue = function (value) {
         this.value = value;
-        this.focusedCell = this.service.getCellCoordsFor(this.value);
     };
     /**
      * @hidden
      */
-    ColorPaletteComponent.prototype.registerOnChange = function (fn) {
+    ColorPickerComponent.prototype.registerOnChange = function (fn) {
         this.notifyNgChanged = fn;
     };
     /**
      * @hidden
      */
-    ColorPaletteComponent.prototype.registerOnTouched = function (fn) {
+    ColorPickerComponent.prototype.registerOnTouched = function (fn) {
         this.notifyNgTouched = fn;
     };
     /**
      * @hidden
      */
-    ColorPaletteComponent.prototype.setDisabledState = function (isDisabled) {
+    ColorPickerComponent.prototype.setDisabledState = function (isDisabled) {
         this.cdr.markForCheck();
         this.disabled = isDisabled;
     };
     /**
      * @hidden
-     * Used by the TextBoxContainer to determine if the component is empty.
      */
-    ColorPaletteComponent.prototype.isEmpty = function () {
-        return false;
+    ColorPickerComponent.prototype.handleWrapperKeyDown = function (event) {
+        if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
+            event.preventDefault();
+            this.toggleWithEvents(true);
+        }
     };
     /**
-     * Clears the color value of the ColorPalette.
+     * @hidden
      */
-    ColorPaletteComponent.prototype.reset = function () {
-        this.focusedCell = null;
-        if (isPresent(this.value)) {
-            this._value = undefined;
-            this.notifyNgChanged(undefined);
+    ColorPickerComponent.prototype.handlePopupKeyDown = function (event) {
+        if (event.keyCode === Keys.Escape) {
+            this.toggleWithEvents(false);
+            this.wrapper.nativeElement.focus();
+        }
+        if (event.keyCode === Keys.Tab) {
+            var currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
+            var nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
+            if (event.target === currentElement) {
+                event.preventDefault();
+                nextElement.nativeElement.focus();
+            }
         }
     };
-    ColorPaletteComponent.prototype.handleCellFocusOnBlur = function () {
-        this.focusInComponent = false;
-        this.focusedCell = this.selectedCell;
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    ColorPickerComponent.prototype.isEmpty = function () {
+        return false;
     };
-    ColorPaletteComponent.prototype.setRows = function () {
-        if (!isPresent(this.palette)) {
-            return;
-        }
-        this.columns = this.columns || DEFAULT_COLUMNS_COUNT;
-        this.service.setColorMatrix(this.palette, this.columns);
+    ColorPickerComponent.prototype.popupBlurInvalid = function (ev) {
+        var focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        var wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
+        return !this.isFocused || wrapperClicked || focusInPopupElement;
     };
-    ColorPaletteComponent.prototype.handleCellNavigation = function (horizontalStep, verticalStep) {
-        if (this.readonly) {
+    ColorPickerComponent.prototype.toggleWithEvents = function (open) {
+        var sameState = this.isOpen === open;
+        if (this.disabled || this.readonly || sameState) {
             return;
         }
-        this.focusedCell = this.service.getNextCell(this.focusedCell, horizontalStep, verticalStep);
-        this.focusInComponent = true;
+        var eventArgs;
+        if (open) {
+            eventArgs = new ColorPickerOpenEvent();
+            this.open.emit(eventArgs);
+        }
+        else {
+            eventArgs = new ColorPickerCloseEvent();
+            this.close.emit(eventArgs);
+        }
+        if (!eventArgs.isDefaultPrevented()) {
+            this.toggle(open);
+        }
+        if (open) {
+            this.focusFirstElement();
+        }
     };
-    ColorPaletteComponent.prototype.setHostElementAriaLabel = function () {
-        var parsed = parseColor$1(this.value, this.format);
-        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', "" + (this.value ? parsed : this.localizationService.get('colorPaletteNoColor')));
+    ColorPickerComponent.prototype.focusFirstElement = function () {
+        var _this = this;
+        this.ngZone.runOutsideAngular(function () {
+            setTimeout(function () {
+                var elementToFocus = _this.flatColorPicker.gradient ? _this.flatColorPicker.gradient.gradientDragHandle :
+                    _this.flatColorPicker.palette.host;
+                elementToFocus.nativeElement.focus();
+            });
+        });
+    };
+    ColorPickerComponent.prototype.openPopup = function () {
+        var _this = this;
+        var horizontalAlign = this.direction === "rtl" ? "right" : "left";
+        var anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
+        var 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(function () {
+            _this.toggleWithEvents(false);
+            if (!_this.isOpen) {
+                _this.wrapper.nativeElement.focus({
+                    preventScroll: true
+                });
+            }
+        });
     };
-    ColorPaletteComponent.prototype.handleEnter = function () {
-        if (!isPresent(this.focusedCell)) {
+    ColorPickerComponent.prototype.closePopup = function () {
+        if (!this.isOpen) {
             return;
         }
-        var selectedColor = this.service.getColorAt(this.focusedCell);
-        this.handleCellSelection(selectedColor, this.focusedCell);
+        this.popupRef.close();
+        this.popupRef = null;
     };
-    var ColorPaletteComponent_1;
+    Object.defineProperty(ColorPickerComponent.prototype, "firstFocusableElement", {
+        get: function () {
+            if (!this.flatColorPicker.header || (this.views.length <= 1 && !this.flatColorPicker.clearButton)) {
+                return this.flatColorPicker.gradient ? this.flatColorPicker.gradient.gradientDragHandle : this.flatColorPicker.palette.host;
+            }
+            return this.views.length > 1 ? this.flatColorPicker.header.viewButtonsCollection.toArray()[0] : this.flatColorPicker.header.clearButtonElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ColorPickerComponent.prototype, "lastFocusableElement", {
+        get: function () {
+            if (this.preview) {
+                return this.flatColorPicker.footer.lastButton;
+            }
+            if (this.flatColorPicker.palette) {
+                return this.flatColorPicker.palette.host;
+            }
+            return this.gradientSettings.opacity ? this.flatColorPicker.gradient.inputs.opacityInput.numericInput : this.flatColorPicker.gradient.inputs.blueInput;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    var ColorPickerComponent_1;
+    __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])
-    ], ColorPaletteComponent.prototype, "palette", null);
+    ], ColorPickerComponent.prototype, "paletteSettings", null);
     __decorate([
         Input(),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [Number])
-    ], ColorPaletteComponent.prototype, "tabindex", null);
+        __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", Boolean)
-    ], ColorPaletteComponent.prototype, "disabled", void 0);
+    ], ColorPickerComponent.prototype, "clearButton", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], ColorPickerComponent.prototype, "tabindex", null);
     __decorate([
         Input(),
         __metadata("design:type", Boolean)
-    ], ColorPaletteComponent.prototype, "readonly", void 0);
+    ], ColorPickerComponent.prototype, "preview", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", Object)
-    ], ColorPaletteComponent.prototype, "tileSize", void 0);
+        __metadata("design:type", String)
+    ], ColorPickerComponent.prototype, "actionsLayout", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], ColorPaletteComponent.prototype, "selectionChange", void 0);
+    ], ColorPickerComponent.prototype, "valueChange", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], ColorPaletteComponent.prototype, "valueChange", void 0);
+    ], ColorPickerComponent.prototype, "open", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
-    ], ColorPaletteComponent.prototype, "cellSelection", void 0);
+    ], ColorPickerComponent.prototype, "close", void 0);
     __decorate([
-        HostBinding('attr.tabindex'),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [])
-    ], ColorPaletteComponent.prototype, "hostTabindex", null);
+        Output('focus'),
+        __metadata("design:type", EventEmitter)
+    ], ColorPickerComponent.prototype, "onFocus", void 0);
     __decorate([
-        HostBinding('class.k-colorpalette'),
-        __metadata("design:type", Boolean)
-    ], ColorPaletteComponent.prototype, "hostClasses", void 0);
+        Output('blur'),
+        __metadata("design:type", EventEmitter)
+    ], ColorPickerComponent.prototype, "onBlur", void 0);
     __decorate([
-        HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ColorPaletteComponent.prototype, "disabledClass", null);
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ColorPickerComponent.prototype, "cancel", void 0);
     __decorate([
-        HostBinding('attr.aria-readonly'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], ColorPaletteComponent.prototype, "readonlyAttribute", null);
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ColorPickerComponent.prototype, "activeColorClick", void 0);
     __decorate([
-        HostListener('keydown', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], ColorPaletteComponent.prototype, "handleKeydown", null);
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ColorPickerComponent.prototype, "activeViewChange", 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('container', { read: ViewContainerRef, static: true }),
+        __metadata("design:type", ViewContainerRef)
+    ], ColorPickerComponent.prototype, "container", void 0);
+    __decorate([
+        ViewChild('wrapper', { static: true }),
+        __metadata("design:type", ElementRef)
+    ], ColorPickerComponent.prototype, "wrapper", void 0);
+    __decorate([
+        ViewChild('popupTemplate', { static: true }),
+        __metadata("design:type", TemplateRef)
+    ], ColorPickerComponent.prototype, "popupTemplate", void 0);
+    __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(function () { return ColorPaletteComponent_1; }) // tslint:disable-line:no-forward-ref
+                    useExisting: forwardRef(function () { return ColorPickerComponent_1; })
                 }, {
                     provide: KendoInput,
-                    useExisting: forwardRef(function () { return ColorPaletteComponent_1; })
+                    useExisting: forwardRef(function () { return ColorPickerComponent_1; })
                 },
-                ColorPaletteService,
-                ColorPaletteLocalizationService,
+                ColorPickerLocalizationService,
                 {
                     provide: LocalizationService,
-                    useExisting: ColorPaletteLocalizationService
+                    useExisting: ColorPickerLocalizationService
                 },
                 {
                     provide: L10N_PREFIX,
-                    useValue: 'kendo.colorpalette'
+                    useValue: 'kendo.colorpicker'
                 }
             ],
-            template: "\n        <ng-container kendoColorPaletteLocalizedMessages\n            i18n-colorPaletteNoColor=\"kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\">\n        </ng-container>\n        <div role=\"listbox\" class=\"k-colorpalette-table-wrap\"\n            [attr.aria-activedescendant]=\"activeCellId\">\n            <table class=\"k-colorpalette-table k-palette\">\n                <tbody>\n                    <tr *ngFor=\"let row of colorRows; let rowIndex = index\">\n                        <td *ngFor=\"let color of row; let colIndex = index\"\n                            role=\"option\"\n                            [class.k-state-selected]=\"selectedCell?.row === rowIndex && selectedCell?.col === colIndex\"\n                            [class.k-state-focus]=\"focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex\"\n                            [attr.aria-selected]=\"selectedCell?.row === rowIndex && selectedCell?.col === colIndex\"\n                            [attr.aria-label]=\"color\"\n                            class=\"k-colorpalette-tile\"\n                            [id]=\"rowIndex + '-' + colIndex\"\n                            [attr.value]=\"color\"\n                            (click)=\"handleCellSelection(color, { row: rowIndex, col: colIndex })\"\n                            [ngStyle]=\"{\n                                backgroundColor: color,\n                                width: tileLayout.width + 'px',\n                                height: tileLayout.height + 'px',\n                                minWidth: tileLayout.width + 'px'\n                            }\">\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    "
+            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorPickerNoColor=\"kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty.\"\n            colorPickerNoColor=\"Colorpicker no color chosen\"\n            i18n-flatColorPickerNoColor=\"kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.colorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.colorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.colorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.colorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.colorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.colorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.colorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <span\n            #wrapper\n            [ngClass]=\"{\n                'k-picker-wrap': true,\n                'k-state-disabled': this.disabled,\n                'k-state-focused': this.isFocused\n            }\"\n            role=\"listbox\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-readonly]=\"readonly\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-label]=\"colorPickerAriaLabel\"\n            [id]=\"focusableId\"\n            [attr.tabindex]=\"tabindex\"\n            (focus)=\"handleWrapperFocus()\"\n            (blur)=\"handleWrapperBlur()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown)=\"handleWrapperKeyDown($event)\"\n        >\n            <span *ngIf=\"!iconStyles\" class=\"k-selected-color\" [style.background]=\"value\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-icon k-i-line\" *ngIf=\"!value\"></span>\n            </span>\n            <span *ngIf=\"iconStyles\" class=\"k-tool-icon\" [ngClass]=\"iconStyles\" (click)=\"handleActiveColorClick()\">\n                <span class=\"k-selected-color\" [style.background-color]=\"value\"></span>\n            </span>\n            <span class=\"k-select\" (click)=\"togglePopup()\">\n                <span class=\"k-icon k-i-arrow-s\"></span>\n            </span>\n        </span>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
         }),
-        __metadata("design:paramtypes", [ElementRef,
-            ColorPaletteService,
+        __metadata("design:paramtypes", [PopupService,
             ChangeDetectorRef,
-            Renderer2,
-            LocalizationService])
-    ], ColorPaletteComponent);
-    return ColorPaletteComponent;
+            LocalizationService,
+            NgZone])
+    ], ColorPickerComponent);
+    return ColorPickerComponent;
 }());
 
 /**
@@ -9666,6 +10645,14 @@ var ColorPickerMessages = /** @class */ (function (_super) {
         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)
@@ -9714,6 +10701,34 @@ var ColorPickerMessages = /** @class */ (function (_super) {
         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);
     return ColorPickerMessages;
 }(ComponentMessages));
 
@@ -9744,7 +10759,7 @@ var ColorPickerCustomMessagesComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return 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])
@@ -9772,7 +10787,7 @@ var LocalizedColorPickerMessagesDirective = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return LocalizedColorPickerMessagesDirective_1; }) // tslint:disable-line:no-forward-ref
                 }
             ],
-            selector: '[kendoColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
+            selector: '[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]'
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], LocalizedColorPickerMessagesDirective);
@@ -9827,7 +10842,8 @@ var ContrastValidationComponent = /** @class */ (function () {
     });
     Object.defineProperty(ContrastValidationComponent.prototype, "contrastText", {
         get: function () {
-            return this.type + ": " + this.ratio.toFixed(1);
+            var ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
+            return this.type + ": " + ratio.toFixed(1);
         },
         enumerable: true,
         configurable: true
@@ -9836,18 +10852,18 @@ var ContrastValidationComponent = /** @class */ (function () {
         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: "\n        <span>{{contrastText}}</span>\n                <span class=\"k-contrast-validation k-text-success\" *ngIf=\"pass\">\n                    {{passMessage}}\n                    <span class=\"k-icon k-i-check\"></span>\n                </span>\n                <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!pass\">\n                    {{failMessage}}\n                <span class=\"k-icon k-i-close\"></span>\n        </span>\n    "
+            template: "\n        <span>{{contrastText}}</span>\n        <ng-container *ngIf=\"value\">\n            <span class=\"k-contrast-validation k-text-success\" *ngIf=\"pass\">\n                {{passMessage}}\n                <span class=\"k-icon k-i-check\"></span>\n            </span>\n            <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!pass\">\n                {{failMessage}}\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n        </ng-container>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], ContrastValidationComponent);
@@ -9860,8 +10876,6 @@ var ContrastValidationComponent = /** @class */ (function () {
 var ContrastComponent = /** @class */ (function () {
     function ContrastComponent(localization) {
         this.localization = localization;
-        this.aaRatio = AA_RATIO;
-        this.aaaRatio = AAA_RATIO;
     }
     Object.defineProperty(ContrastComponent.prototype, "formatedRatio", {
         get: function () {
@@ -9870,23 +10884,23 @@ var ContrastComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ContrastComponent.prototype, "contrastRatioMessage", {
+    Object.defineProperty(ContrastComponent.prototype, "contrastRatioText", {
         get: function () {
-            return this.localization.get('contrastRatio');
+            return this.localization.get('contrastRatio') + ": " + (this.value ? this.formatedRatio : 'n/a');
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(ContrastComponent.prototype, "satisfiesAACondition", {
         get: function () {
-            return this.contrastRatio >= this.aaRatio;
+            return this.contrastRatio >= AA_RATIO;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(ContrastComponent.prototype, "satisfiesAAACondition", {
         get: function () {
-            return this.contrastRatio >= this.aaaRatio;
+            return this.contrastRatio >= AAA_RATIO;
         },
         enumerable: true,
         configurable: true
@@ -9910,17 +10924,103 @@ var ContrastComponent = /** @class */ (function () {
     ContrastComponent = __decorate([
         Component({
             selector: '[kendoContrastTool]',
-            template: "\n        <div class=\"k-contrast-ratio\">\n            <span class=\"k-contrast-ratio-text\">{{contrastRatioMessage}}: {{formatedRatio}}</span>\n            <span class=\"k-contrast-validation k-text-success\" *ngIf=\"satisfiesAACondition\">\n                <span class=\"k-icon k-i-check\"></span>\n                <span class=\"k-icon k-i-check\" *ngIf=\"satisfiesAAACondition\"></span>\n            </span>\n            <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!satisfiesAACondition\">\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n        </div>\n        <div kendoContrastValidation\n            type=\"AA\"\n            [ratio]=\"aaaRatio\"\n            [pass]=\"satisfiesAACondition\">\n        </div>\n        <div kendoContrastValidation\n            type=\"AAA\"\n            [ratio]=\"aaaRatio\"\n            [pass]=\"satisfiesAAACondition\">\n        </div>\n    "
+            template: "\n        <div class=\"k-contrast-ratio\">\n            <span class=\"k-contrast-ratio-text\">{{contrastRatioText}}</span>\n            <ng-container *ngIf=\"value\">\n                <span class=\"k-contrast-validation k-text-success\" *ngIf=\"satisfiesAACondition\">\n                    <span class=\"k-icon k-i-check\"></span>\n                    <span class=\"k-icon k-i-check\" *ngIf=\"satisfiesAAACondition\"></span>\n                </span>\n                <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!satisfiesAACondition\">\n                    <span class=\"k-icon k-i-close\"></span>\n                </span>\n            </ng-container>\n        </div>\n        <div kendoContrastValidation\n            type=\"AA\"\n            [value]=\"value\"\n            [pass]=\"satisfiesAACondition\">\n        </div>\n        <div kendoContrastValidation\n            type=\"AAA\"\n            [value]=\"value\"\n            [pass]=\"satisfiesAAACondition\">\n        </div>\n    "
         }),
         __metadata("design:paramtypes", [LocalizationService])
     ], ContrastComponent);
     return ContrastComponent;
 }());
 
+/**
+ * @hidden
+ */
+var ColorContrastSvgComponent = /** @class */ (function () {
+    function ColorContrastSvgComponent() {
+        this.hostClass = true;
+    }
+    ColorContrastSvgComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        this.metrics = this.wrapper.getBoundingClientRect();
+        this.oldA = this.hsva.value.a;
+        this.oldH = this.hsva.value.h;
+        this.hsva.subscribe(function (value) {
+            if (value.h !== _this.oldH || value.a !== _this.oldA) {
+                _this.oldH = value.h;
+                _this.oldA = value.a;
+                _this.setPaths();
+            }
+        });
+    };
+    ColorContrastSvgComponent.prototype.ngOnChanges = function (changes) {
+        if (isPresent(changes.backgroundColor) && this.metrics) {
+            this.setPaths();
+        }
+    };
+    ColorContrastSvgComponent.prototype.setPaths = function () {
+        var 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)];
+    };
+    ColorContrastSvgComponent.prototype.findValue = function (contrast, saturation, low, high, comparer) {
+        var mid = (low + high) / 2;
+        var hsva = Object.assign({}, this.hsva.value, { s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height });
+        var 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);
+    };
+    ColorContrastSvgComponent.prototype.getPaths = function (contrast, stepCount, reversed) {
+        if (reversed === void 0) { reversed = false; }
+        var points = [];
+        for (var i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
+            var value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? (function (a, b) { return a < b; }) : (function (a, b) { return 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: "\n        <svg:path *ngFor=\"let path of paths\" [attr.d]=\"path\" fill=\"none\" stroke=\"white\" stroke-width=\"1\"></svg:path>\n    "
+        })
+    ], ColorContrastSvgComponent);
+    return ColorContrastSvgComponent;
+}());
+
 var PUBLIC_DIRECTIVES = [
     ColorPickerComponent,
     ColorPaletteComponent,
     ColorGradientComponent,
+    FlatColorPickerComponent,
     LocalizedColorPickerMessagesDirective,
     ColorPickerCustomMessagesComponent
 ];
@@ -9928,7 +11028,10 @@ var INTERNAL_DIRECTIVES = [
     ColorInputComponent,
     FocusOnDomReadyDirective,
     ContrastComponent,
-    ContrastValidationComponent
+    ContrastValidationComponent,
+    FlatColorPickerHeaderComponent,
+    FlatColorPickerActionButtonsComponent,
+    ColorContrastSvgComponent
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -10632,4 +11735,4 @@ var InputsModule = /** @class */ (function () {
  * 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 };