@progress/kendo-angular-inputs 21.4.1 → 22.0.0

package/esm2022/colorpicker/flatcolorpicker.component.mjs

@@ -1,942 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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 { getStylingClasses, 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 { NgClass } from "@angular/common";
-import { LocalizedColorPickerMessagesDirective } from "./localization/localized-colorpicker-messages.directive";
-import * as i0 from "@angular/core";
-import * as i1 from "./services/flatcolorpicker.service";
-import * as i2 from "@progress/kendo-angular-l10n";
-const DEFAULT_SIZE = 'medium';
-/**
- * Represents the Kendo UI FlatColorPicker component for Angular.
- *
- * The `FlatColorPickerComponent` lets you choose colors through palettes with predefined sets of colors and through a gradient that renders an HSV canvas. You can preview the selected color, revert it to its previous state, or clear it.
- *
- * @example
- * ```html
- * <kendo-flatcolorpicker [(value)]="selectedColor"></kendo-flatcolorpicker>
- * ```
- *
- * @remarks
- * Supported children components are: {@link ColorPickerMessages}.
- */
-export class FlatColorPickerComponent {
-    host;
-    service;
-    localizationService;
-    cdr;
-    renderer;
-    ngZone;
-    injector;
-    hostClasses = true;
-    get disabledClass() {
-        return this.disabled;
-    }
-    get ariaReadonly() {
-        return this.readonly;
-    }
-    direction;
-    get hostTabindex() {
-        return this.tabindex?.toString() || '0';
-    }
-    ariaRole = 'textbox';
-    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;
-    }
-    /**
-     * Sets the read-only state of the FlatColorPicker.
-     *
-     * @default false
-     */
-    readonly = false;
-    /**
-     * Sets the disabled state of the FlatColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
-     *
-     * @default false
-     */
-    disabled = false;
-    /**
-     * Specifies the output format of the FlatColorPicker.
-     *
-     * If the input value is in a different format, the component parses it into the specified output `format`.
-     *
-     * @default 'rgba'
-     */
-    format = 'rgba';
-    /**
-     * 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;
-    }
-    /**
-     * Specifies whether the FlatColorPicker displays a **Clear color** button.
-     *
-     * @default true
-     */
-    clearButton = true;
-    /**
-     * Displays `Apply` and `Cancel` action buttons and a color preview pane.
-     *
-     * When enabled, the component value does 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
-     */
-    preview = true;
-    /**
-     * Configures the layout of the `Apply` and `Cancel` action buttons.
-     *
-     * @default 'end'
-     */
-    actionsLayout = 'end';
-    /**
-     * Sets the initially active view in the FlatColorPicker. Supports two-way binding.
-     */
-    activeView;
-    /**
-     * Specifies the views to render. The default value is gradient and palette.
-     */
-    views = ['gradient', 'palette'];
-    /**
-     * Configures the gradient view.
-     */
-    set gradientSettings(value) {
-        Object.assign(this._gradientSettings, value);
-    }
-    get gradientSettings() {
-        return this._gradientSettings;
-    }
-    /**
-     * @hidden
-     */
-    adaptiveMode = false;
-    /**
-     * Configures the palette view.
-     */
-    set paletteSettings(value) {
-        Object.assign(this._paletteSettings, value);
-    }
-    get paletteSettings() {
-        return this._paletteSettings;
-    }
-    /**
-     * Sets the size of the FlatColorPicker internal elements.
-     *
-     * @default 'medium'
-     */
-    set size(size) {
-        const newSize = size || DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
-    /**
-     * Fires when the component value changes.
-     */
-    valueChange = new EventEmitter();
-    /**
-     * Fires when the user cancels the current color selection.
-     *
-     * The event is emitted on preview pane or on 'Cancel' button click.
-     */
-    cancel = new EventEmitter();
-    /**
-     * Fires when the view is about to change.
-     * Used to provide a two-way binding for the `activeView` property.
-     */
-    activeViewChange = new EventEmitter();
-    /**
-     * @hidden
-     * Fires each time the clear button is clicked.
-     */
-    clearButtonClick = new EventEmitter();
-    /**
-     * @hidden
-     */
-    actionButtonClick = new EventEmitter();
-    header;
-    headerElement;
-    gradient;
-    gradientElement;
-    palette;
-    footer;
-    /**
-     * @hidden
-     */
-    selection;
-    focused;
-    _value;
-    _tabindex = 0;
-    _gradientSettings = {
-        opacity: true,
-        delay: 0,
-        gradientSliderStep: DRAGHANDLE_MOVE_SPEED,
-        gradientSliderSmallStep: DRAGHANDLE_MOVE_SPEED_SMALL_STEP
-    };
-    _paletteSettings = {};
-    dynamicRTLSubscription;
-    subscriptions = new Subscription();
-    internalNavigation = false;
-    _size = 'medium';
-    control;
-    /**
-     * @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;
-    }
-    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;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
-    ngOnInit() {
-        this.selection = this.value;
-        this.control = this.injector.get(NgControl, null);
-        this._paletteSettings = this.service.getPaletteSettings(this._paletteSettings, this.format);
-        this.setActiveView();
-    }
-    ngAfterViewInit() {
-        const stylingInputs = ['size'];
-        stylingInputs.forEach(input => {
-            this.handleClasses(this[input], input);
-        });
-        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;
-        if (this.activeView === 'gradient') {
-            gradient.focus();
-        }
-        else {
-            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();
-        if (shiftKey) {
-            previousTabStop?.focus();
-        }
-        else {
-            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) {
-        if (this.preview) {
-            this.changeCurrentValue(color);
-        }
-        else {
-            this.setFlatColorPickerValue(color);
-        }
-    }
-    /**
-     * @hidden
-     */
-    onAction(ev) {
-        if (ev.target === 'apply') {
-            this.setFlatColorPickerValue(this.selection);
-        }
-        else {
-            this.resetSelection(ev.originalEvent);
-        }
-        this.actionButtonClick.emit();
-    }
-    /**
-     * @hidden
-     */
-    writeValue(value) {
-        this.value = value;
-        this.cdr.markForCheck();
-    }
-    /**
-     * @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};`];
-        if (paletteTileSize.width) {
-            cssProperties.push(`--kendo-color-preview-width: ${paletteTileSize.width}px;`);
-        }
-        if (paletteTileSize.height) {
-            cssProperties.push(`--kendo-color-preview-height: ${paletteTileSize.height}px;`);
-        }
-        this.renderer.setProperty(element, 'style', cssProperties.join(' '));
-    }
-    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");
-        }
-    }
-    notifyNgChanged = () => { };
-    notifyNgTouched = () => { };
-    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() {
-        if (this.gradientElement) {
-            this.renderer.removeAttribute(this.gradientElement.nativeElement, 'role');
-            this.renderer.removeAttribute(this.gradientElement.nativeElement, 'aria-label');
-        }
-    }
-    handleClasses(value, input) {
-        const elem = this.host.nativeElement;
-        const classes = getStylingClasses('coloreditor', input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
-        }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FlatColorPickerComponent, isStandalone: true, 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", adaptiveMode: "adaptiveMode", paletteSettings: "paletteSettings", size: "size" }, 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", "class.k-readonly": "this.readonly" } }, 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>
-        @if (headerHasContent) {
-          <div kendoFlatColorPickerHeader
-            [innerTabIndex]="innerTabIndex"
-            #header
-            [clearButton]="clearButton"
-            [activeView]="activeView"
-            [views]="views"
-            [size]="size"
-            [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">
-          @if (activeView === 'gradient') {
-            <kendo-colorgradient #gradient
-              [tabindex]="innerTabIndex"
-              [value]="selection"
-              [size]="size"
-              [adaptiveMode]="adaptiveMode"
-              [format]="format"
-              [opacity]="gradientSettings.opacity"
-              [delay]="gradientSettings.delay"
-              [contrastTool]="gradientSettings.contrastTool"
-              [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
-              [gradientSliderStep]="gradientSettings.gradientSliderStep"
-              [readonly]="readonly"
-              [ariaAttributesEnabled]="false"
-              (keydown.tab)="focusFirstHeaderButton()"
-              (valueChange)="handleValueChange($event)"
-            ></kendo-colorgradient>
-          }
-          @if (activeView === 'palette') {
-            <kendo-colorpalette #palette
-              [tabindex]="innerTabIndex"
-              [palette]="paletteSettings.palette"
-              [size]="size"
-              [columns]="paletteSettings.columns"
-              [tileSize]="paletteSettings.tileSize"
-              [format]="format"
-              [value]="selection"
-              [readonly]="readonly"
-              (valueChange)="handleValueChange($event)"
-            ></kendo-colorpalette>
-          }
-        </div>
-        @if (preview && !adaptiveMode) {
-          <div
-            #footer
-            kendoFlatColorPickerActionButtons
-            [innerTabIndex]="innerTabIndex"
-            [size]="size"
-            [ngClass]="'k-justify-content-' + actionsLayout"
-            (actionButtonClick)="onAction($event)"
-            (tabOut)="firstFocusable.focus()">
-          </div>
-        }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep", "ariaAttributesEnabled"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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>
-        @if (headerHasContent) {
-          <div kendoFlatColorPickerHeader
-            [innerTabIndex]="innerTabIndex"
-            #header
-            [clearButton]="clearButton"
-            [activeView]="activeView"
-            [views]="views"
-            [size]="size"
-            [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">
-          @if (activeView === 'gradient') {
-            <kendo-colorgradient #gradient
-              [tabindex]="innerTabIndex"
-              [value]="selection"
-              [size]="size"
-              [adaptiveMode]="adaptiveMode"
-              [format]="format"
-              [opacity]="gradientSettings.opacity"
-              [delay]="gradientSettings.delay"
-              [contrastTool]="gradientSettings.contrastTool"
-              [gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
-              [gradientSliderStep]="gradientSettings.gradientSliderStep"
-              [readonly]="readonly"
-              [ariaAttributesEnabled]="false"
-              (keydown.tab)="focusFirstHeaderButton()"
-              (valueChange)="handleValueChange($event)"
-            ></kendo-colorgradient>
-          }
-          @if (activeView === 'palette') {
-            <kendo-colorpalette #palette
-              [tabindex]="innerTabIndex"
-              [palette]="paletteSettings.palette"
-              [size]="size"
-              [columns]="paletteSettings.columns"
-              [tileSize]="paletteSettings.tileSize"
-              [format]="format"
-              [value]="selection"
-              [readonly]="readonly"
-              (valueChange)="handleValueChange($event)"
-            ></kendo-colorpalette>
-          }
-        </div>
-        @if (preview && !adaptiveMode) {
-          <div
-            #footer
-            kendoFlatColorPickerActionButtons
-            [innerTabIndex]="innerTabIndex"
-            [size]="size"
-            [ngClass]="'k-justify-content-' + actionsLayout"
-            (actionButtonClick)="onAction($event)"
-            (tabOut)="firstFocusable.focus()">
-          </div>
-        }
-        `,
-                    standalone: true,
-                    imports: [LocalizedColorPickerMessagesDirective, FlatColorPickerHeaderComponent, ColorGradientComponent, ColorPaletteComponent, FlatColorPickerActionButtonsComponent, NgClass]
-                }]
-        }], ctorParameters: () => [{ 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
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
-            }], 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
-            }], adaptiveMode: [{
-                type: Input
-            }], paletteSettings: [{
-                type: Input
-            }], size: [{
-                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']
-            }] } });