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

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

@@ -0,0 +1,553 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, isDevMode, NgZone, ChangeDetectorRef, Output, Renderer2, ViewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { isChanged, KendoInput } from '@progress/kendo-angular-common';
+import { FlatColorPickerLocalizationService } from './localization/flatcolorpicker-localization.service';
+import { FlatColorPickerService } from './services/flatcolorpicker.service';
+import { ColorPickerCancelEvent } from './events';
+import { parseColor } from './utils';
+import { isPresent } from '../common/utils';
+import { ColorGradientComponent } from './color-gradient.component';
+import { ColorPaletteComponent } from './color-palette.component';
+import { FlatColorPickerHeaderComponent } from './flatcolorpicker-header.component';
+import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions.component';
+/**
+ * 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(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.
+     */
+    FlatColorPickerComponent.prototype.isEmpty = function () {
+        return false;
+    };
+    /**
+     * Focuses the wrapper of the FlatColorPicker.
+     */
+    FlatColorPickerComponent.prototype.focus = function () {
+        if (this.disabled && this.focused) {
+            return;
+        }
+        this.host.nativeElement.focus();
+        this.focused = true;
+    };
+    /**
+     * Blurs the wrapper of the FlatColorPicker.
+     */
+    FlatColorPickerComponent.prototype.blur = function () {
+        if (!this.focused) {
+            return;
+        }
+        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
+     */
+    FlatColorPickerComponent.prototype.onViewChange = function (view) {
+        var _this = this;
+        if (this.activeView === view) {
+            return;
+        }
+        this.activeView = view;
+        this.activeViewChange.emit(view);
+        if (this.activeView === 'gradient') {
+            this.ngZone.runOutsideAngular(function () {
+                setTimeout(function () {
+                    _this.gradient.gradientDragHandle.nativeElement.focus();
+                });
+            });
+        }
+    };
+    /**
+     * @hidden
+     */
+    FlatColorPickerComponent.prototype.onClearButtonClick = function () {
+        this.resetInnerComponentValue();
+        this.host.nativeElement.focus();
+    };
+    /**
+     * @hidden
+     */
+    FlatColorPickerComponent.prototype.handleValueChange = function (color) {
+        if (this.value === color) {
+            return;
+        }
+        if (this.preview) {
+            this.changeCurrentValue(color);
+        }
+        else {
+            this.setFlatColorPickerValue(color);
+        }
+    };
+    /**
+     * @hidden
+     */
+    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
+     */
+    FlatColorPickerComponent.prototype.registerOnChange = function (fn) {
+        this.notifyNgChanged = fn;
+    };
+    /**
+     * @hidden
+     */
+    FlatColorPickerComponent.prototype.registerOnTouched = function (fn) {
+        this.notifyNgTouched = fn;
+    };
+    /**
+     * @hidden
+     */
+    FlatColorPickerComponent.prototype.setDisabledState = function (isDisabled) {
+        this.cdr.markForCheck();
+        this.disabled = isDisabled;
+    };
+    /**
+     * @hidden
+     */
+    FlatColorPickerComponent.prototype.resetSelection = function (ev) {
+        var eventArgs = new ColorPickerCancelEvent(ev);
+        this.cancel.emit(eventArgs);
+        if (!eventArgs.isDefaultPrevented()) {
+            this.selection = this.value;
+        }
+        this.notifyNgTouched();
+    };
+    FlatColorPickerComponent.prototype.setHostElementAriaLabel = function () {
+        var parsed = parseColor(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);
+    };
+    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);
+    };
+    FlatColorPickerComponent.prototype.changeCurrentValue = function (color) {
+        this.selection = color;
+        this.notifyNgTouched();
+    };
+    FlatColorPickerComponent.prototype.resetInnerComponentValue = function () {
+        this.selection = null;
+        if (this.gradient) {
+            this.gradient.reset();
+            return;
+        }
+        this.palette.reset();
+    };
+    FlatColorPickerComponent.prototype.setFlatColorPickerValue = function (color) {
+        if (this.value === color) {
+            return;
+        }
+        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");
+        }
+    };
+    FlatColorPickerComponent.prototype.initDomEvents = function () {
+        var _this = this;
+        if (!this.host) {
+            return;
+        }
+        var hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(function () {
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focus', function () {
+                _this.focused = true;
+            }));
+            _this.subscriptions.add(_this.renderer.listen(hostElement, 'blur', function () {
+                _this.focused = false;
+                _this.notifyNgTouched();
+            }));
+        });
+    };
+    var FlatColorPickerComponent_1;
+    tslib_1.__decorate([
+        HostBinding('class.k-flatcolorpicker'),
+        HostBinding('class.k-coloreditor'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.k-state-disabled'),
+        HostBinding('attr.aria-disabled'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], FlatColorPickerComponent.prototype, "disabledClass", null);
+    tslib_1.__decorate([
+        HostBinding('attr.aria-readonly'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], FlatColorPickerComponent.prototype, "ariaReadonly", null);
+    tslib_1.__decorate([
+        HostBinding('attr.dir'),
+        tslib_1.__metadata("design:type", String)
+    ], FlatColorPickerComponent.prototype, "direction", void 0);
+    tslib_1.__decorate([
+        HostBinding('attr.tabindex'),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], FlatColorPickerComponent.prototype, "hostTabindex", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerComponent.prototype, "readonly", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerComponent.prototype, "disabled", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], FlatColorPickerComponent.prototype, "format", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], FlatColorPickerComponent.prototype, "value", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number),
+        tslib_1.__metadata("design:paramtypes", [Number])
+    ], FlatColorPickerComponent.prototype, "tabindex", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerComponent.prototype, "clearButton", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerComponent.prototype, "preview", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], FlatColorPickerComponent.prototype, "actionsLayout", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], FlatColorPickerComponent.prototype, "activeView", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], FlatColorPickerComponent.prototype, "views", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [Object])
+    ], FlatColorPickerComponent.prototype, "gradientSettings", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [Object])
+    ], FlatColorPickerComponent.prototype, "paletteSettings", null);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], FlatColorPickerComponent.prototype, "valueChange", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], FlatColorPickerComponent.prototype, "cancel", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], FlatColorPickerComponent.prototype, "activeViewChange", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], FlatColorPickerComponent.prototype, "actionButtonClick", void 0);
+    tslib_1.__decorate([
+        ViewChild('header', { static: false }),
+        tslib_1.__metadata("design:type", FlatColorPickerHeaderComponent)
+    ], FlatColorPickerComponent.prototype, "header", void 0);
+    tslib_1.__decorate([
+        ViewChild('gradient', { static: false }),
+        tslib_1.__metadata("design:type", ColorGradientComponent)
+    ], FlatColorPickerComponent.prototype, "gradient", void 0);
+    tslib_1.__decorate([
+        ViewChild('palette', { static: false }),
+        tslib_1.__metadata("design:type", ColorPaletteComponent)
+    ], FlatColorPickerComponent.prototype, "palette", void 0);
+    tslib_1.__decorate([
+        ViewChild('footer', { static: false }),
+        tslib_1.__metadata("design:type", FlatColorPickerActionButtonsComponent)
+    ], FlatColorPickerComponent.prototype, "footer", void 0);
+    FlatColorPickerComponent = FlatColorPickerComponent_1 = tslib_1.__decorate([
+        Component({
+            exportAs: 'kendoFlatColorPicker',
+            selector: 'kendo-flatcolorpicker',
+            providers: [
+                {
+                    multi: true,
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return FlatColorPickerComponent_1; })
+                },
+                {
+                    provide: KendoInput,
+                    useExisting: forwardRef(function () { return FlatColorPickerComponent_1; })
+                },
+                FlatColorPickerService,
+                FlatColorPickerLocalizationService,
+                {
+                    provide: LocalizationService,
+                    useExisting: FlatColorPickerLocalizationService
+                },
+                {
+                    provide: L10N_PREFIX,
+                    useValue: 'kendo.flatcolorpicker'
+                }
+            ],
+            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"
+        }),
+        tslib_1.__metadata("design:paramtypes", [FlatColorPickerService,
+            ElementRef,
+            LocalizationService,
+            ChangeDetectorRef,
+            Renderer2,
+            NgZone])
+    ], FlatColorPickerComponent);
+    return FlatColorPickerComponent;
+}());
+export { FlatColorPickerComponent };

package/dist/es/colorpicker/localization/colorgradient-localization.service.js

@@ -5,20 +5,20 @@
 import * as tslib_1 from "tslib";
 import { Inject, Optional } from '@angular/core';
 import { LocalizationService, L10N_PREFIX, MessageService, RTL } from '@progress/kendo-angular-l10n';
-import { ColorPickerLocalizationService } from './colorpicker-localization.service';
+import { FlatColorPickerLocalizationService } from './flatcolorpicker-localization.service';
 /**
  * @hidden
  */
 var ColorGradientLocalizationService = /** @class */ (function (_super) {
     tslib_1.__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);
     };
@@ -26,8 +26,8 @@ var ColorGradientLocalizationService = /** @class */ (function (_super) {
         tslib_1.__param(0, Inject(L10N_PREFIX)),
         tslib_1.__param(1, Optional()),
         tslib_1.__param(2, Optional()), tslib_1.__param(2, Inject(RTL)),
-        tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(ColorPickerLocalizationService)),
-        tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, ColorPickerLocalizationService])
+        tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(FlatColorPickerLocalizationService)),
+        tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
     ], ColorGradientLocalizationService);
     return ColorGradientLocalizationService;
 }(LocalizationService));

package/dist/es/colorpicker/localization/colorpalette-localization.service.js

@@ -5,20 +5,20 @@
 import * as tslib_1 from "tslib";
 import { Inject, Optional } from '@angular/core';
 import { LocalizationService, L10N_PREFIX, MessageService, RTL } from '@progress/kendo-angular-l10n';
-import { ColorPickerLocalizationService } from './colorpicker-localization.service';
+import { FlatColorPickerLocalizationService } from './flatcolorpicker-localization.service';
 /**
  * @hidden
  */
 var ColorPaletteLocalizationService = /** @class */ (function (_super) {
     tslib_1.__extends(ColorPaletteLocalizationService, _super);
-    function ColorPaletteLocalizationService(prefix, messageService, _rtl, colorPickerLocalization) {
+    function ColorPaletteLocalizationService(prefix, messageService, _rtl, flatColorPickerLocalization) {
         var _this = _super.call(this, prefix, messageService, _rtl) || this;
-        _this.colorPickerLocalization = colorPickerLocalization;
+        _this.flatColorPickerLocalization = flatColorPickerLocalization;
         return _this;
     }
     ColorPaletteLocalizationService.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);
     };
@@ -26,8 +26,8 @@ var ColorPaletteLocalizationService = /** @class */ (function (_super) {
         tslib_1.__param(0, Inject(L10N_PREFIX)),
         tslib_1.__param(1, Optional()),
         tslib_1.__param(2, Optional()), tslib_1.__param(2, Inject(RTL)),
-        tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(ColorPickerLocalizationService)),
-        tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, ColorPickerLocalizationService])
+        tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(FlatColorPickerLocalizationService)),
+        tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
     ], ColorPaletteLocalizationService);
     return ColorPaletteLocalizationService;
 }(LocalizationService));

package/dist/es/colorpicker/localization/custom-messages.component.js

@@ -33,7 +33,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: ""
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])

package/dist/es/colorpicker/localization/flatcolorpicker-localization.service.js

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Inject, Optional } from '@angular/core';
+import { LocalizationService, L10N_PREFIX, MessageService, RTL } from '@progress/kendo-angular-l10n';
+import { ColorPickerLocalizationService } from './colorpicker-localization.service';
+/**
+ * @hidden
+ */
+var FlatColorPickerLocalizationService = /** @class */ (function (_super) {
+    tslib_1.__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);
+    };
+    FlatColorPickerLocalizationService = tslib_1.__decorate([
+        tslib_1.__param(0, Inject(L10N_PREFIX)),
+        tslib_1.__param(1, Optional()),
+        tslib_1.__param(2, Optional()), tslib_1.__param(2, Inject(RTL)),
+        tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(ColorPickerLocalizationService)),
+        tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, ColorPickerLocalizationService])
+    ], FlatColorPickerLocalizationService);
+    return FlatColorPickerLocalizationService;
+}(LocalizationService));
+export { FlatColorPickerLocalizationService };