@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/esm2020/colorpicker/flatcolorpicker.component.mjs

@@ -0,0 +1,829 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-unused-expressions */
+import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, isDevMode, NgZone, ChangeDetectorRef, Output, Renderer2, ViewChild, Injector, HostListener } from "@angular/core";
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { findFocusableChild, isChanged, KendoInput } from '@progress/kendo-angular-common';
+import { validatePackage } from "@progress/kendo-licensing";
+import { FlatColorPickerLocalizationService } from './localization/flatcolorpicker-localization.service';
+import { FlatColorPickerService } from './services/flatcolorpicker.service';
+import { packageMetadata } from "../package-metadata";
+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';
+import { DRAGHANDLE_MOVE_SPEED, DRAGHANDLE_MOVE_SPEED_SMALL_STEP } from "./constants";
+import { take } from "rxjs/operators";
+import * as i0 from "@angular/core";
+import * as i1 from "./services/flatcolorpicker.service";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "./flatcolorpicker-header.component";
+import * as i4 from "./color-gradient.component";
+import * as i5 from "./color-palette.component";
+import * as i6 from "./flatcolorpicker-actions.component";
+import * as i7 from "./localization/localized-colorpicker-messages.directive";
+import * as i8 from "@angular/common";
+/**
+ * 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.
+ */
+export class FlatColorPickerComponent {
+    constructor(host, service, localizationService, cdr, renderer, ngZone, injector) {
+        this.host = host;
+        this.service = service;
+        this.localizationService = localizationService;
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        this.hostClasses = true;
+        this.ariaRole = 'textbox';
+        /**
+         * 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
+         * Fires each time the clear button is clicked.
+         */
+        this.clearButtonClick = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.actionButtonClick = new EventEmitter();
+        this._tabindex = 0;
+        this._gradientSettings = {
+            opacity: true,
+            delay: 0,
+            gradientSliderStep: DRAGHANDLE_MOVE_SPEED,
+            gradientSliderSmallStep: DRAGHANDLE_MOVE_SPEED_SMALL_STEP
+        };
+        this._paletteSettings = {};
+        this.subscriptions = new Subscription();
+        this.internalNavigation = false;
+        this.notifyNgChanged = () => { };
+        this.notifyNgTouched = () => { };
+        validatePackage(packageMetadata);
+        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?.toString() || '0';
+    }
+    get isControlInvalid() {
+        return (this.control?.invalid)?.toString();
+    }
+    get isDisabled() {
+        return this.disabled?.toString() || undefined;
+    }
+    /**
+     * @hidden
+     */
+    enterHandler(event) {
+        if (event.target !== this.host.nativeElement) {
+            return;
+        }
+        event.preventDefault();
+        this.internalNavigation = true;
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.firstFocusable?.focus());
+    }
+    /**
+     * @hidden
+     */
+    escapeHandler() {
+        this.internalNavigation = false;
+        this.host.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    focusHandler(ev) {
+        this.internalNavigation = ev.target !== this.host.nativeElement;
+    }
+    /**
+     * 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) {
+        if (isPresent(value)) {
+            const tabindex = Number(value);
+            this._tabindex = !isNaN(tabindex) ? tabindex : 0;
+        }
+        else {
+            // Allows removal of the tabindex attribute
+            this._tabindex = value;
+        }
+    }
+    get tabindex() {
+        return !this.disabled ? this._tabindex : undefined;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * @hidden
+     */
+    get innerTabIndex() {
+        return this.internalNavigation ? 0 : -1;
+    }
+    /**
+     * @hidden
+     */
+    get firstFocusable() {
+        if (this.headerHasContent) {
+            return this.headerElement.nativeElement.querySelector('.k-button');
+        }
+        return this.activeView === 'gradient' ? this.gradient : this.palette;
+    }
+    ngOnInit() {
+        this.selection = this.value;
+        this.control = this.injector.get(NgControl, null);
+        this._paletteSettings = this.service.getPaletteSettings(this._paletteSettings, this.format);
+        this.setActiveView();
+    }
+    ngAfterViewInit() {
+        this.setHostElementAriaLabel();
+        this.initDomEvents();
+        this.setSizingVariables();
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.removeGradientAttributes());
+    }
+    ngOnChanges(changes) {
+        if (isChanged('value', changes)) {
+            this.selection = this.value;
+            this.setHostElementAriaLabel();
+        }
+        if (isChanged('paletteSettings', changes)) {
+            this.setSizingVariables();
+        }
+    }
+    ngOnDestroy() {
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    focusFirstHeaderButton() {
+        if (this.gradientElement.nativeElement === document.activeElement) {
+            if (this.headerHasContent && !this.preview) {
+                const firstHeaderButton = this.headerElement.nativeElement.querySelector('.k-button');
+                firstHeaderButton.focus();
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    lastFocusable(event) {
+        if (this.preview) {
+            this.footer.lastButton.nativeElement.focus();
+            return;
+        }
+        event.stopImmediatePropagation();
+        const gradient = this.gradientElement?.nativeElement;
+        const palette = this.palette?.host.nativeElement;
+        this.activeView === 'gradient' ? gradient.focus() : palette.focus();
+    }
+    /**
+     * @hidden
+     */
+    onTab(ev) {
+        const { shiftKey } = ev;
+        const nextTabStop = this.preview ? this.footer.firstButton.nativeElement : this.headerHasContent ? findFocusableChild(this.headerElement.nativeElement) : null;
+        const previousTabStop = this.headerHasContent ? findFocusableChild(this.headerElement.nativeElement) : this.preview ? this.footer.lastButton.nativeElement : null;
+        if (!nextTabStop && !previousTabStop) {
+            return;
+        }
+        ev.preventDefault();
+        // eslint-disable-next-line no-unused-expressions
+        shiftKey ? previousTabStop?.focus() : nextTabStop?.focus();
+    }
+    /**
+     * @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);
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                this[this.activeView]?.focus();
+            });
+        });
+        if (this.activeView === 'gradient') {
+            this.removeGradientAttributes();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onClearButtonClick() {
+        this.resetInnerComponentValue();
+        this.clearButtonClick.emit();
+    }
+    /**
+     * @hidden
+     */
+    handleValueChange(color) {
+        // eslint-disable-next-line no-unused-expressions
+        this.preview ? this.changeCurrentValue(color) : this.setFlatColorPickerValue(color);
+    }
+    /**
+     * @hidden
+     */
+    onAction(ev) {
+        // eslint-disable-next-line no-unused-expressions
+        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 element = this.host.nativeElement.querySelector('.k-coloreditor-views.k-vstack');
+        const cssProperties = `
+            --kendo-color-preview-columns: ${this.paletteSettings.columns};
+            --kendo-color-preview-width: ${paletteTileSize.width}px;
+            --kendo-color-preview-height: ${paletteTileSize.height}px;
+        `;
+        this.renderer.setProperty(element, 'style', cssProperties);
+    }
+    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;
+        }
+        const 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();
+            }));
+        });
+    }
+    removeGradientAttributes() {
+        this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'role');
+        this.gradientElement && this.renderer.removeAttribute(this.gradientElement.nativeElement, 'aria-label');
+    }
+}
+FlatColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FlatColorPickerService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", paletteSettings: "paletteSettings" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FlatColorPickerComponent)
+        },
+        {
+            provide: KendoInput,
+            useExisting: forwardRef(() => FlatColorPickerComponent)
+        },
+        FlatColorPickerService,
+        FlatColorPickerLocalizationService,
+        {
+            provide: LocalizationService,
+            useExisting: FlatColorPickerLocalizationService
+        },
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.flatcolorpicker'
+        }
+    ], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerElement", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true }, { propertyName: "gradientElement", first: true, predicate: ["gradient"], descendants: true, read: ElementRef }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], exportAs: ["kendoFlatColorPicker"], usesOnChanges: true, ngImport: i0, 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"
+            i18n-redChannelLabel="kendo.flatcolorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.flatcolorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.flatcolorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.flatcolorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.flatcolorpicker.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.flatcolorpicker.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.flatcolorpicker.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.flatcolorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
+        </ng-container>
+        <div kendoFlatColorPickerHeader
+            [innerTabIndex]="innerTabIndex"
+            *ngIf="headerHasContent"
+            #header
+            [clearButton]="clearButton"
+            [activeView]="activeView"
+            [views]="views"
+            [value]="value"
+            [selection]="selection"
+            [preview]="preview"
+            (clearButtonClick)="onClearButtonClick()"
+            (viewChange)="onViewChange($event)"
+            (valuePaneClick)="resetSelection($event)"
+            (tabOut)="lastFocusable($event)"></div>
+        <div class="k-coloreditor-views k-vstack">
+            <kendo-colorgradient #gradient
+                [tabindex]="innerTabIndex"
+                *ngIf="activeView === 'gradient'"
+                [value]="selection"
+                [format]="format"
+                [opacity]="gradientSettings.opacity"
+                [delay]="gradientSettings.delay"
+                [contrastTool]="gradientSettings.contrastTool"
+                [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
+                [gradientSliderStep]="gradientSettings.gradientSliderStep"
+                [readonly]="readonly"
+                (keydown.tab)="focusFirstHeaderButton()"
+                (valueChange)="handleValueChange($event)"
+            ></kendo-colorgradient>
+            <kendo-colorpalette #palette
+                [tabindex]="innerTabIndex"
+                *ngIf="activeView === 'palette'"
+                [palette]="paletteSettings.palette"
+                [columns]="paletteSettings.columns"
+                [tileSize]="paletteSettings.tileSize"
+                [format]="format"
+                [value]="selection"
+                [readonly]="readonly"
+                (valueChange)="handleValueChange($event)"
+            ></kendo-colorpalette>
+        </div>
+        <div kendoFlatColorPickerActionButtons
+            [innerTabIndex]="innerTabIndex"
+            *ngIf="preview"
+            #footer
+            [ngClass]="'k-justify-content-' + actionsLayout"
+            (actionButtonClick)="onAction($event)"
+            (tabOut)="firstFocusable.focus()"></div>
+`, isInline: true, components: [{ type: i3.FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { type: i4.ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: i5.ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: i6.FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }], directives: [{ type: i7.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoFlatColorPicker',
+                    selector: 'kendo-flatcolorpicker',
+                    providers: [
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FlatColorPickerComponent)
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => FlatColorPickerComponent)
+                        },
+                        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"
+            i18n-redChannelLabel="kendo.flatcolorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.flatcolorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.flatcolorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.flatcolorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.flatcolorpicker.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.flatcolorpicker.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.flatcolorpicker.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.flatcolorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
+        </ng-container>
+        <div kendoFlatColorPickerHeader
+            [innerTabIndex]="innerTabIndex"
+            *ngIf="headerHasContent"
+            #header
+            [clearButton]="clearButton"
+            [activeView]="activeView"
+            [views]="views"
+            [value]="value"
+            [selection]="selection"
+            [preview]="preview"
+            (clearButtonClick)="onClearButtonClick()"
+            (viewChange)="onViewChange($event)"
+            (valuePaneClick)="resetSelection($event)"
+            (tabOut)="lastFocusable($event)"></div>
+        <div class="k-coloreditor-views k-vstack">
+            <kendo-colorgradient #gradient
+                [tabindex]="innerTabIndex"
+                *ngIf="activeView === 'gradient'"
+                [value]="selection"
+                [format]="format"
+                [opacity]="gradientSettings.opacity"
+                [delay]="gradientSettings.delay"
+                [contrastTool]="gradientSettings.contrastTool"
+                [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
+                [gradientSliderStep]="gradientSettings.gradientSliderStep"
+                [readonly]="readonly"
+                (keydown.tab)="focusFirstHeaderButton()"
+                (valueChange)="handleValueChange($event)"
+            ></kendo-colorgradient>
+            <kendo-colorpalette #palette
+                [tabindex]="innerTabIndex"
+                *ngIf="activeView === 'palette'"
+                [palette]="paletteSettings.palette"
+                [columns]="paletteSettings.columns"
+                [tileSize]="paletteSettings.tileSize"
+                [format]="format"
+                [value]="selection"
+                [readonly]="readonly"
+                (valueChange)="handleValueChange($event)"
+            ></kendo-colorpalette>
+        </div>
+        <div kendoFlatColorPickerActionButtons
+            [innerTabIndex]="innerTabIndex"
+            *ngIf="preview"
+            #footer
+            [ngClass]="'k-justify-content-' + actionsLayout"
+            (actionButtonClick)="onAction($event)"
+            (tabOut)="firstFocusable.focus()"></div>
+`
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FlatColorPickerService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-flatcolorpicker']
+            }, {
+                type: HostBinding,
+                args: ['class.k-coloreditor']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], ariaReadonly: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostTabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], isControlInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], isDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], enterHandler: [{
+                type: HostListener,
+                args: ['keydown.enter', ['$event']]
+            }], escapeHandler: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }], focusHandler: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], actionsLayout: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], views: [{
+                type: Input
+            }], gradientSettings: [{
+                type: Input
+            }], paletteSettings: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], activeViewChange: [{
+                type: Output
+            }], clearButtonClick: [{
+                type: Output
+            }], actionButtonClick: [{
+                type: Output
+            }], header: [{
+                type: ViewChild,
+                args: ['header']
+            }], headerElement: [{
+                type: ViewChild,
+                args: ['header', { read: ElementRef }]
+            }], gradient: [{
+                type: ViewChild,
+                args: ['gradient']
+            }], gradientElement: [{
+                type: ViewChild,
+                args: ['gradient', { read: ElementRef }]
+            }], palette: [{
+                type: ViewChild,
+                args: ['palette']
+            }], footer: [{
+                type: ViewChild,
+                args: ['footer']
+            }] } });