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

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

@@ -0,0 +1,593 @@
+/**-----------------------------------------------------------------------------------------
+* 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";
+var FlatColorPickerComponent_1;
+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.
+ */
+let FlatColorPickerComponent = FlatColorPickerComponent_1 = class FlatColorPickerComponent {
+    constructor(service, host, localizationService, cdr, renderer, ngZone) {
+        this.service = service;
+        this.host = host;
+        this.localizationService = localizationService;
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.hostClasses = true;
+        /**
+         * Sets the read-only state of the FlatColorPicker.
+         *
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Sets the disabled state of the FlatColorPicker.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Specifies the output format of the FlatColorPicker.
+         *
+         * If the input value is in a different format, it will be parsed into the specified output `format`.
+         *
+         * The supported values are:
+         * * `rgba` (default)
+         * * `hex`
+         */
+        this.format = 'rgba';
+        /**
+         * Specifies whether the FlatColorPicker should display a 'Clear color' button.
+         *
+         * @default true
+         */
+        this.clearButton = true;
+        /**
+         * Displays `Apply` and `Cancel` action buttons and a color preview pane.
+         *
+         * When enabled, the component value will not change immediately upon
+         * color selection, but only after the `Apply` button is clicked.
+         *
+         * The `Cancel` button reverts the current selection to its
+         * initial state i.e. to the current value.
+         *
+         * @default true
+         */
+        this.preview = true;
+        /**
+         * Configures the layout of the `Apply` and `Cancel` action buttons.
+         * * `start`
+         * * `center`
+         * * `end` (default)
+         * * `stretch`
+         */
+        this.actionsLayout = 'end';
+        /**
+         * Specifies the views that will be rendered. Default value is gradient and palette.
+         */
+        this.views = ['gradient', 'palette'];
+        /**
+         * Fires each time the component value is changed.
+         */
+        this.valueChange = new EventEmitter();
+        /**
+         * Fires when the user cancels the current color selection.
+         *
+         * The event is emitted on preview pane or on 'Cancel' button click.
+         */
+        this.cancel = new EventEmitter();
+        /**
+         * Fires each time the view is about to change.
+         * Used to provide a two-way binding for the `activeView` property.
+         */
+        this.activeViewChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.actionButtonClick = new EventEmitter();
+        this._tabindex = 0;
+        this._gradientSettings = { opacity: true, delay: 0 };
+        this._paletteSettings = {};
+        this.subscriptions = new Subscription();
+        this.notifyNgChanged = () => { };
+        this.notifyNgTouched = () => { };
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    get ariaReadonly() {
+        return this.readonly;
+    }
+    get hostTabindex() {
+        return this.tabindex;
+    }
+    /**
+     * Specifies the initially selected color.
+     */
+    set value(value) {
+        this._value = parseColor(value, this.format, this.gradientSettings.opacity);
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
+     */
+    set tabindex(value) {
+        const tabindex = Number(value);
+        const defaultValue = 0;
+        this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
+    }
+    get tabindex() {
+        return !this.disabled ? this._tabindex : undefined;
+    }
+    /**
+     * Configures the gradient view.
+     */
+    set gradientSettings(value) {
+        Object.assign(this._gradientSettings, value);
+    }
+    get gradientSettings() {
+        return this._gradientSettings;
+    }
+    /**
+     * Configures the palette view.
+     */
+    set paletteSettings(value) {
+        Object.assign(this._paletteSettings, value);
+    }
+    get paletteSettings() {
+        return this._paletteSettings;
+    }
+    ngOnInit() {
+        this.selection = this.value;
+        this._paletteSettings = this.service.getPaletteSettings(this._paletteSettings, this.format);
+        this.setActiveView();
+    }
+    ngAfterViewInit() {
+        this.setHostElementAriaLabel();
+        this.initDomEvents();
+        this.setSizingVariables();
+    }
+    ngOnChanges(changes) {
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
+        if (isChanged('paletteSettings', changes)) {
+            this.setSizingVariables();
+        }
+    }
+    ngOnDestroy() {
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    get headerHasContent() {
+        return this.preview || this.views.length > 1 || this.clearButton;
+    }
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty() {
+        return false;
+    }
+    /**
+     * Focuses the wrapper of the FlatColorPicker.
+     */
+    focus() {
+        if (this.disabled && this.focused) {
+            return;
+        }
+        this.host.nativeElement.focus();
+        this.focused = true;
+    }
+    /**
+     * Blurs the wrapper of the FlatColorPicker.
+     */
+    blur() {
+        if (!this.focused) {
+            return;
+        }
+        this.notifyNgTouched();
+        this.host.nativeElement.blur();
+        this.focused = false;
+    }
+    /**
+     * Clears the value of the FlatColorPicker.
+     */
+    reset() {
+        if (!isPresent(this.value)) {
+            return;
+        }
+        this.value = undefined;
+        this.notifyNgChanged(undefined);
+        this.setHostElementAriaLabel();
+    }
+    /**
+     * @hidden
+     */
+    onViewChange(view) {
+        if (this.activeView === view) {
+            return;
+        }
+        this.activeView = view;
+        this.activeViewChange.emit(view);
+        if (this.activeView === 'gradient') {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.gradient.gradientDragHandle.nativeElement.focus();
+                });
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    onClearButtonClick() {
+        this.resetInnerComponentValue();
+        this.host.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    handleValueChange(color) {
+        if (this.value === color) {
+            return;
+        }
+        if (this.preview) {
+            this.changeCurrentValue(color);
+        }
+        else {
+            this.setFlatColorPickerValue(color);
+        }
+    }
+    /**
+     * @hidden
+     */
+    onAction(ev) {
+        ev.target === 'apply' ? this.setFlatColorPickerValue(this.selection) : this.resetSelection(ev.originalEvent);
+        this.actionButtonClick.emit();
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.value = value;
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.notifyNgChanged = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.notifyNgTouched = fn;
+    }
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled) {
+        this.cdr.markForCheck();
+        this.disabled = isDisabled;
+    }
+    /**
+     * @hidden
+     */
+    resetSelection(ev) {
+        const eventArgs = new ColorPickerCancelEvent(ev);
+        this.cancel.emit(eventArgs);
+        if (!eventArgs.isDefaultPrevented()) {
+            this.selection = this.value;
+        }
+        this.notifyNgTouched();
+    }
+    setHostElementAriaLabel() {
+        const parsed = parseColor(this.value, this.format, this.gradientSettings.opacity);
+        const ariaLabelValue = `${this.value ? parsed : this.localizationService.get('flatColorPickerNoColor')}`;
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    }
+    setSizingVariables() {
+        const paletteTileSize = this.service.paletteTileLayout(this.paletteSettings.tileSize);
+        const value = `--kendo-color-preview-columns: ${this.paletteSettings.columns};
+            --kendo-color-preview-width: ${paletteTileSize.width}px;
+            --kendo-color-preview-height: ${paletteTileSize.height}px;`;
+        this.host.nativeElement.querySelector('.k-coloreditor-views.k-vstack').setAttribute('style', value);
+    }
+    changeCurrentValue(color) {
+        this.selection = color;
+        this.notifyNgTouched();
+    }
+    resetInnerComponentValue() {
+        this.selection = null;
+        if (this.gradient) {
+            this.gradient.reset();
+            return;
+        }
+        this.palette.reset();
+    }
+    setFlatColorPickerValue(color) {
+        if (this.value === color) {
+            return;
+        }
+        this.value = color;
+        this.valueChange.emit(color);
+        this.notifyNgChanged(color);
+        this.setHostElementAriaLabel();
+    }
+    setActiveView() {
+        if (!isPresent(this.activeView)) {
+            this.activeView = this.views[0];
+            return;
+        }
+        if (isDevMode() && this.views.indexOf(this.activeView) === -1) {
+            throw new Error("Invalid configuration: The current activeView is not present in the views collection");
+        }
+    }
+    initDomEvents() {
+        if (!this.host) {
+            return;
+        }
+        let hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focus', () => {
+                this.focused = true;
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'blur', () => {
+                this.focused = false;
+                this.notifyNgTouched();
+            }));
+        });
+    }
+};
+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(() => FlatColorPickerComponent_1)
+            },
+            {
+                provide: KendoInput,
+                useExisting: forwardRef(() => FlatColorPickerComponent_1)
+            },
+            FlatColorPickerService,
+            FlatColorPickerLocalizationService,
+            {
+                provide: LocalizationService,
+                useExisting: FlatColorPickerLocalizationService
+            },
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.flatcolorpicker'
+            }
+        ],
+        template: `
+        <ng-container kendoFlatColorPickerLocalizedMessages
+            i18n-flatColorPickerNoColor="kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
+            flatColorPickerNoColor="Flatcolorpicker no color chosen"
+            i18n-colorGradientNoColor="kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            colorGradientNoColor="Colorgradient no color chosen"
+            i18n-colorPaletteNoColor="kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
+            colorPaletteNoColor="Colorpalette no color chosen"
+            i18n-colorGradientHandle="kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
+            colorGradientHandle="Choose color"
+            i18n-clearButton="kendo.flatcolorpicker.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            i18n-contrastRatio="kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio"
+            i18n-previewColor="kendo.flatcolorpicker.previewColor|The message for the color preview pane."
+            previewColor="Color preview"
+            i18n-revertSelection="kendo.flatcolorpicker.revertSelection|The message for the selected color pane."
+            revertSelection="Revert selection"
+            i18n-gradientView="kendo.flatcolorpicker.gradientView|The message for the gradient view button."
+            gradientView="Gradient view"
+            i18n-paletteView="kendo.flatcolorpicker.paletteView|The message for the palette view button."
+            paletteView="Palette view"
+            i18n-formatButton="kendo.flatcolorpicker.formatButton|The message for the input format toggle button."
+            formatButton="Change color format"
+            i18n-applyButton="kendo.flatcolorpicker.applyButton|The message for the Apply action button."
+            applyButton="Apply"
+            i18n-cancelButton="kendo.flatcolorpicker.cancelButton|The message for the Cancel action button."
+            cancelButton="Cancel">
+        </ng-container>
+        <div kendoFlatColorPickerHeader
+            *ngIf="headerHasContent"
+            #header
+            [clearButton]="clearButton"
+            [activeView]="activeView"
+            [views]="views"
+            [value]="value"
+            [selection]="selection"
+            [preview]="preview"
+            (clearButtonClick)="onClearButtonClick()"
+            (viewChange)="onViewChange($event)"
+            (valuePaneClick)="resetSelection($event)">
+        </div>
+        <div class="k-coloreditor-views k-vstack">
+            <kendo-colorgradient #gradient
+                *ngIf="activeView === 'gradient'"
+                [tabindex]="null"
+                [value]="selection"
+                [format]="format"
+                [opacity]="gradientSettings.opacity"
+                [delay]="gradientSettings.delay"
+                [contrastTool]="gradientSettings.contrastTool"
+                [readonly]="readonly"
+                (valueChange)="handleValueChange($event)"
+            >
+            </kendo-colorgradient>
+            <kendo-colorpalette #palette
+                *ngIf="activeView === 'palette'"
+                kendoFocusOnDomReady
+                [palette]="paletteSettings.palette"
+                [columns]="paletteSettings.columns"
+                [tileSize]="paletteSettings.tileSize"
+                [format]="format"
+                [value]="selection"
+                (valueChange)="handleValueChange($event)"
+            >
+            </kendo-colorpalette>
+        </div>
+        <div kendoFlatColorPickerActionButtons *ngIf="preview"
+            #footer
+            [ngClass]="'k-justify-content-' + actionsLayout"
+            (actionButtonClick)="onAction($event)">
+        </div>
+`
+    }),
+    tslib_1.__metadata("design:paramtypes", [FlatColorPickerService,
+        ElementRef,
+        LocalizationService,
+        ChangeDetectorRef,
+        Renderer2,
+        NgZone])
+], FlatColorPickerComponent);
+export { FlatColorPickerComponent };

package/dist/es2015/colorpicker/localization/colorgradient-localization.service.d.ts

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { LocalizationService, MessageService } from '@progress/kendo-angular-l10n';
-import { ColorPickerLocalizationService } from './colorpicker-localization.service';
+import { FlatColorPickerLocalizationService } from './flatcolorpicker-localization.service';
 /**
  * @hidden
  */
 export declare class ColorGradientLocalizationService extends LocalizationService {
-    private colorPickerLocalization?;
-    constructor(prefix: string, messageService: MessageService, _rtl: boolean, colorPickerLocalization?: ColorPickerLocalizationService);
+    private flatColorPickerLocalization?;
+    constructor(prefix: string, messageService: MessageService, _rtl: boolean, flatColorPickerLocalization?: FlatColorPickerLocalizationService);
     get(shortKey: string): string;
 }

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

@@ -5,18 +5,18 @@
 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
  */
 let ColorGradientLocalizationService = class ColorGradientLocalizationService extends LocalizationService {
-    constructor(prefix, messageService, _rtl, colorPickerLocalization) {
+    constructor(prefix, messageService, _rtl, flatColorPickerLocalization) {
         super(prefix, messageService, _rtl);
-        this.colorPickerLocalization = colorPickerLocalization;
+        this.flatColorPickerLocalization = flatColorPickerLocalization;
     }
     get(shortKey) {
-        if (this.colorPickerLocalization) {
-            return this.colorPickerLocalization.get(shortKey);
+        if (this.flatColorPickerLocalization) {
+            return this.flatColorPickerLocalization.get(shortKey);
         }
         return super.get(shortKey);
     }
@@ -25,7 +25,7 @@ ColorGradientLocalizationService = 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])
+    tslib_1.__param(3, Optional()), tslib_1.__param(3, Inject(FlatColorPickerLocalizationService)),
+    tslib_1.__metadata("design:paramtypes", [String, MessageService, Boolean, FlatColorPickerLocalizationService])
 ], ColorGradientLocalizationService);
 export { ColorGradientLocalizationService };

package/dist/es2015/colorpicker/localization/colorpalette-localization.service.d.ts

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { LocalizationService, MessageService } from '@progress/kendo-angular-l10n';
-import { ColorPickerLocalizationService } from './colorpicker-localization.service';
+import { FlatColorPickerLocalizationService } from './flatcolorpicker-localization.service';
 /**
  * @hidden
  */
 export declare class ColorPaletteLocalizationService extends LocalizationService {
-    private colorPickerLocalization?;
-    constructor(prefix: string, messageService: MessageService, _rtl: boolean, colorPickerLocalization?: ColorPickerLocalizationService);
+    private flatColorPickerLocalization?;
+    constructor(prefix: string, messageService: MessageService, _rtl: boolean, flatColorPickerLocalization?: FlatColorPickerLocalizationService);
     get(shortKey: string): string;
 }