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

package/esm2020/colorpicker/colorpicker.component.mjs

@@ -0,0 +1,1086 @@
+/**-----------------------------------------------------------------------------------------
+* 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 */
+import { take } from 'rxjs/operators';
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2, Injector, isDevMode } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { FlatColorPickerComponent } from './flatcolorpicker.component';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { packageMetadata } from '../package-metadata';
+import { PALETTEPRESETS } from './models';
+import { ActiveColorClickEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
+import { parseColor } from './utils';
+import { getStylingClasses, isPresent } from '../common/utils';
+import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
+import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
+import { parseCSSClassNames } from '@progress/kendo-angular-common';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "./flatcolorpicker.component";
+import * as i6 from "./localization/localized-colorpicker-messages.directive";
+import * as i7 from "@angular/common";
+const DOM_FOCUS_EVENTS = ['focus', 'blur'];
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
+/**
+ * @hidden
+ */
+let nextColorPickerId = 0;
+/**
+ * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
+ *
+ * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
+ * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
+ */
+export class ColorPickerComponent {
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector) {
+        this.host = host;
+        this.popupService = popupService;
+        this.cdr = cdr;
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.injector = injector;
+        this.hostClasses = true;
+        this.role = 'combobox';
+        this.hasPopup = 'dialog';
+        /**
+         * Specifies the views that will be rendered in the popup.
+         * By default both the gradient and palette views will be rendered.
+         */
+        this.views = ['gradient', 'palette'];
+        /**
+         * Sets the read-only state of the ColorPicker.
+         *
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Sets the disabled state of the ColorPicker.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Specifies the output format of the ColorPicker.
+         *
+         * If the input value is in a different format, it will be parsed into the specified output `format`.
+         *
+         * The supported values are:
+         * * `rgba` (default)
+         * * `hex`
+         */
+        this.format = 'rgba';
+        /**
+         * Specifies whether the ColorPicker should display a 'Clear color' button.
+         *
+         * @default true
+         */
+        this.clearButton = true;
+        /**
+         * Displays `Apply` and `Cancel` action buttons and color preview panes.
+         *
+         * When enabled, the component value will not change immediately upon
+         * color selection, but only after the `Apply` button is clicked.
+         *
+         * The `Cancel` button reverts the current selection to its
+         * previous state i.e. to the current value.
+         *
+         * @default false
+         */
+        this.preview = false;
+        /**
+         * Configures the layout of the `Apply` and `Cancel` action buttons.
+         *
+         * The possible values are:
+         * * `start`
+         * * `center`
+         * * `end` (default)
+         * * `stretch`
+         */
+        this.actionsLayout = 'end';
+        /**
+         * Fires each time the value is changed.
+         */
+        this.valueChange = new EventEmitter();
+        /**
+         * Fires each time the popup is about to open.
+         * This event is preventable. If you cancel it, the popup will remain closed.
+         */
+        this.open = new EventEmitter();
+        /**
+         * Fires each time the popup is about to close.
+         * This event is preventable. If you cancel it, the popup will remain open.
+         */
+        this.close = new EventEmitter();
+        /**
+         * Fires each time ColorPicker is focused.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the ColorPicker is blurred.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires when the user cancels the current color selection.
+         *
+         * Fires on preview pane or 'Cancel' button click.
+         */
+        this.cancel = new EventEmitter();
+        /**
+         * Fires each time the left side of the ColorPicker wrapper is clicked.
+         * The event is triggered regardless of whether a ColorPicker icon is set or not.
+         *
+         * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
+         */
+        this.activeColorClick = new EventEmitter();
+        /**
+         * @hidden
+         * Fires each time the clear button is clicked.
+         */
+        this.clearButtonClick = 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();
+        /**
+         * Indicates whether the ColorPicker wrapper is focused.
+         */
+        this.isFocused = false;
+        /**
+         * @hidden
+         */
+        this.arrowDownIcon = caretAltDownIcon;
+        this._tabindex = 0;
+        this._popupSettings = { animate: true };
+        this._paletteSettings = {};
+        this._gradientSettings = { opacity: true, delay: 0 };
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        this.subscriptions = new Subscription();
+        this.popupSubs = new Subscription();
+        this.notifyNgTouched = () => { };
+        this.notifyNgChanged = () => { };
+        this.domFocusListener = (event) => event.stopImmediatePropagation();
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+        this.colorPickerId = nextColorPickerId++;
+    }
+    get focusedClass() {
+        return this.isFocused;
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    get ariaReadonly() {
+        return this.readonly;
+    }
+    get ariaExpanded() {
+        return this.isOpen;
+    }
+    get hostTabindex() {
+        return this.tabindex;
+    }
+    get isControlInvalid() {
+        return (this.control?.invalid)?.toString();
+    }
+    /**
+     * @hidden
+     */
+    set view(view) {
+        this.views = [view];
+    }
+    get view() {
+        return (this.views && this.views.length > 0) ? this.views[0] : null;
+    }
+    /**
+     * Specifies the value of the initially selected color.
+     */
+    set value(value) {
+        this._value = parseColor(value, this.format, this.gradientSettings.opacity);
+    }
+    get value() {
+        return this._value;
+    }
+    /**
+     * Configures the popup of the ColorPicker.
+     */
+    set popupSettings(value) {
+        this._popupSettings = Object.assign(this._popupSettings, value);
+    }
+    get popupSettings() {
+        return this._popupSettings;
+    }
+    /**
+     * Configures the palette that is displayed in the ColorPicker popup.
+     */
+    set paletteSettings(value) {
+        this._paletteSettings = Object.assign(this._paletteSettings, value);
+    }
+    get paletteSettings() {
+        return this._paletteSettings;
+    }
+    /**
+     * Configures the gradient that is displayed in the ColorPicker popup.
+     */
+    set gradientSettings(value) {
+        this._gradientSettings = Object.assign(this._gradientSettings, value);
+    }
+    get gradientSettings() {
+        return this._gradientSettings;
+    }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * The size property specifies the padding of the ColorPicker internal elements
+     * ([see example]({% slug appearance_colorpicker %}#toc-size)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
+     */
+    set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
+     */
+    set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * Indicates whether the ColorPicker popup is open.
+     */
+    get isOpen() {
+        return isPresent(this.popupRef);
+    }
+    /**
+     * @hidden
+     */
+    get customIconStyles() {
+        if (this.iconClass) {
+            let parsedIconClass = '';
+            parseCSSClassNames(this.iconClass).forEach(iconClass => {
+                parsedIconClass += iconClass + ' ';
+            });
+            return parsedIconClass.slice(0, -1);
+        }
+        return '';
+    }
+    /**
+     * @hidden
+     */
+    get iconStyles() {
+        if (this.icon && !this.iconClass) {
+            return `${this.icon}`;
+        }
+        return '';
+    }
+    ngOnInit() {
+        const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
+        const settingsPalette = this._paletteSettings.palette;
+        const presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
+            PALETTEPRESETS[settingsPalette].columns :
+            undefined;
+        this._paletteSettings = {
+            palette: settingsPalette || defaultPreset,
+            tileSize: this._paletteSettings.tileSize || 24,
+            columns: this._paletteSettings.columns || presetColumns || 10
+        };
+        this.handleHostId();
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-controls', `k-colorpicker-popup-${this.colorPickerId}`);
+        this.control = this.injector.get(NgControl, null);
+    }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+        this.setHostElementAriaLabel();
+        this.initDomEvents();
+    }
+    ngOnChanges(changes) {
+        if (changes.format && changes.format.currentValue === 'name') {
+            this.activeView = 'palette';
+        }
+        if (this.activeView === 'gradient' && this.gradientSettings.opacity) {
+            this.format = 'rgba';
+            this.value = parseColor(this.value, this.format, this.gradientSettings.opacity);
+        }
+        if (isChanged('value', changes)) {
+            this.setHostElementAriaLabel();
+        }
+    }
+    ngOnDestroy() {
+        this.closePopup();
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+        this.subscriptions.unsubscribe();
+        this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
+    }
+    /**
+     * @hidden
+     */
+    handleCancelEvent(ev) {
+        this.cancel.emit(ev);
+    }
+    /**
+     * @hidden
+     */
+    togglePopup() {
+        this.focus();
+        this.toggleWithEvents(!this.isOpen);
+    }
+    /**
+     * @hidden
+     */
+    handleWrapperClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.focus();
+        if (closest(event.target, (element) => element === this.activeColor.nativeElement)) {
+            const event = new ActiveColorClickEvent(this.value);
+            this.activeColorClick.emit(event);
+            if (!event.isOpenPrevented() || this.isOpen) {
+                this.toggleWithEvents(!this.isOpen);
+            }
+            return;
+        }
+        this.toggleWithEvents(!this.isOpen);
+    }
+    /**
+     * Focuses the wrapper of the ColorPicker.
+     */
+    focus() {
+        this.isFocused = true;
+        this.host.nativeElement.focus();
+    }
+    /**
+     * @hidden
+     */
+    handleWrapperFocus() {
+        if (this.isFocused) {
+            return;
+        }
+        this.ngZone.run(() => {
+            this.focus();
+            this.onFocus.emit();
+        });
+    }
+    /**
+     * Blurs the ColorPicker.
+     */
+    blur() {
+        this.isFocused = false;
+        this.host.nativeElement.blur();
+        this.notifyNgTouched();
+    }
+    /**
+     * @hidden
+     */
+    handleWrapperBlur() {
+        if (this.isOpen) {
+            return;
+        }
+        this.ngZone.run(() => {
+            this.onBlur.emit();
+            this.isFocused = false;
+        });
+    }
+    /**
+     * Clears the value of the ColorPicker.
+     */
+    reset() {
+        if (!isPresent(this.value)) {
+            return;
+        }
+        this._value = undefined;
+        this.setHostElementAriaLabel();
+        this.notifyNgChanged(undefined);
+    }
+    /**
+     * Toggles the popup of the ColorPicker.
+     * Does not trigger the `open` and `close` events of the component.
+     *
+     * @param open An optional parameter. Specifies whether the popup will be opened or closed.
+     */
+    toggle(open) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.cdr.markForCheck();
+        this.closePopup();
+        open = isPresent(open) ? open : !this.isOpen;
+        if (open) {
+            this.openPopup();
+            this.focusFirstElement();
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleValueChange(color) {
+        const parsedColor = parseColor(color, this.format, this.gradientSettings.opacity);
+        const valueChange = parsedColor !== this.value;
+        if (valueChange) {
+            this.value = parsedColor;
+            this.valueChange.emit(parsedColor);
+            this.setHostElementAriaLabel();
+            this.notifyNgChanged(parsedColor);
+        }
+    }
+    /**
+     * @hidden
+     */
+    handlePopupBlur(event) {
+        if (this.popupBlurInvalid(event)) {
+            return;
+        }
+        this.isFocused = false;
+        this.onBlur.emit();
+        this.notifyNgTouched();
+        this.toggleWithEvents(false);
+    }
+    /**
+     * @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
+     */
+    handleWrapperKeyDown(event) {
+        if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
+            event.preventDefault();
+            this.ngZone.run(() => {
+                this.toggleWithEvents(true);
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    handlePopupKeyDown(event) {
+        if (event.keyCode === Keys.Escape) {
+            this.toggleWithEvents(false);
+            this.host.nativeElement.focus();
+        }
+        if (event.keyCode === Keys.Tab) {
+            const currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
+            const nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
+            if (event.target === currentElement) {
+                event.preventDefault();
+                nextElement.focus();
+            }
+        }
+    }
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty() {
+        return false;
+    }
+    setHostElementAriaLabel() {
+        const ariaLabelValue = `${this.value ? this.value : this.localizationService.get('colorPickerNoColor')}`;
+        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
+    }
+    handleClasses(value, input) {
+        const elem = this.host.nativeElement;
+        const classes = getStylingClasses('picker', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    popupBlurInvalid(ev) {
+        const focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
+        const hostClicked = closest(ev.relatedTarget, (element) => element === this.host.nativeElement);
+        return Boolean(hostClicked || focusInFlatColorPickerElement);
+    }
+    toggleWithEvents(open) {
+        const sameState = this.isOpen === open;
+        if (this.disabled || this.readonly || sameState) {
+            return;
+        }
+        let eventArgs;
+        if (open) {
+            eventArgs = new ColorPickerOpenEvent();
+            this.open.emit(eventArgs);
+        }
+        else {
+            eventArgs = new ColorPickerCloseEvent();
+            this.close.emit(eventArgs);
+        }
+        if (!eventArgs.isDefaultPrevented()) {
+            this.toggle(open);
+        }
+        if (open) {
+            this.focusFirstElement();
+        }
+    }
+    focusFirstElement() {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.flatColorPicker) {
+                const gradientDragHandle = this.flatColorPicker.gradient?.gradientDragHandle;
+                const palette = this.flatColorPicker.palette?.host;
+                const elementToFocus = gradientDragHandle ? gradientDragHandle : palette;
+                elementToFocus.nativeElement.focus();
+            }
+        });
+    }
+    openPopup() {
+        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
+        const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
+        const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
+        this.popupRef = this.popupService.open({
+            anchor: this.activeColor,
+            animate: this.popupSettings.animate,
+            appendTo: this.popupSettings.appendTo,
+            popupAlign: popupPosition,
+            anchorAlign: anchorPosition,
+            popupClass: 'k-colorpicker-popup',
+            content: this.popupTemplate,
+            positionMode: 'absolute'
+        });
+        this.renderer.setAttribute(this.popupRef.popupElement.querySelector('.k-colorpicker-popup'), 'id', `k-colorpicker-popup-${this.colorPickerId}`);
+        this.popupSubs.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => {
+            this.toggleWithEvents(false);
+            if (!this.isOpen) {
+                this.host.nativeElement.focus({
+                    preventScroll: true
+                });
+            }
+        }));
+    }
+    closePopup() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.popupSubs.unsubscribe();
+        this.popupRef.close();
+        this.popupRef = null;
+    }
+    get firstFocusableElement() {
+        if (!this.flatColorPicker.header || (this.views.length <= 1 && !this.flatColorPicker.clearButton)) {
+            const gradient = this.flatColorPicker.gradient;
+            return gradient ? gradient.gradientDragHandle : this.flatColorPicker.palette.host;
+        }
+        return this.views.length > 1 ? this.flatColorPicker.header.viewButtonsCollection.toArray()[0] : this.flatColorPicker.header.clearButtonElement;
+    }
+    get lastFocusableElement() {
+        if (this.preview) {
+            return this.flatColorPicker.footer.lastButton;
+        }
+        if (this.flatColorPicker.palette) {
+            return this.flatColorPicker.palette.host;
+        }
+        const gradient = this.flatColorPicker.gradient;
+        const inputs = gradient && gradient.inputs;
+        if (gradient && inputs && inputs.formatView === 'hex') {
+            return inputs.hexInput;
+        }
+        return this.gradientSettings.opacity ? inputs.opacityInput.numericInput : inputs.blueInput.numericInput;
+    }
+    handleDomEvents(action, events) {
+        const hostElement = this.host.nativeElement;
+        events.forEach(ev => hostElement[`${action}EventListener`](ev, this.domFocusListener, true));
+    }
+    initDomEvents() {
+        if (!this.host) {
+            return;
+        }
+        const hostElement = this.host.nativeElement;
+        this.ngZone.runOutsideAngular(() => {
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
+                this.handleWrapperFocus();
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (event) => {
+                const closestPopup = this.popupRef ?
+                    closest(event.relatedTarget, (element) => element === this.flatColorPicker.host.nativeElement) :
+                    false;
+                const closestWrapper = closest(event.relatedTarget, (element) => element === this.host.nativeElement);
+                if (!closestPopup && !closestWrapper) {
+                    this.handleWrapperBlur();
+                }
+            }));
+            this.handleDomEvents('add', DOM_FOCUS_EVENTS);
+            this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (event) => {
+                this.handleWrapperKeyDown(event);
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'click', (event) => {
+                this.ngZone.run(() => {
+                    this.handleWrapperClick(event);
+                });
+            }));
+        });
+    }
+    handleHostId() {
+        const hostElement = this.host.nativeElement;
+        const existingId = hostElement.getAttribute('id');
+        if (existingId) {
+            this.focusableId = existingId;
+        }
+        else {
+            const id = `k-${guid()}`;
+            hostElement.setAttribute('id', id);
+            this.focusableId = id;
+        }
+    }
+}
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [{
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorPickerComponent)
+        }, {
+            provide: KendoInput,
+            useExisting: forwardRef(() => ColorPickerComponent)
+        },
+        ColorPickerLocalizationService,
+        {
+            provide: LocalizationService,
+            useExisting: ColorPickerLocalizationService
+        },
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.colorpicker'
+        }
+    ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "activeColor", first: true, predicate: ["activeColor"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "flatColorPicker", first: true, predicate: ["flatColorPicker"], descendants: true }], exportAs: ["kendoColorPicker"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container kendoColorPickerLocalizedMessages
+            i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
+            colorPickerNoColor="Colorpicker no color chosen"
+            i18n-flatColorPickerNoColor="kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
+            flatColorPickerNoColor="Flatcolorpicker no color chosen"
+            i18n-colorGradientNoColor="kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            colorGradientNoColor="Colorgradient no color chosen"
+            i18n-colorPaletteNoColor="kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
+            colorPaletteNoColor="Colorpalette no color chosen"
+            i18n-colorGradientHandle="kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
+            colorGradientHandle="Choose color"
+            i18n-clearButton="kendo.colorpicker.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.colorpicker.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            i18n-contrastRatio="kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio"
+            i18n-previewColor="kendo.colorpicker.previewColor|The message for the color preview pane."
+            previewColor="Color preview"
+            i18n-revertSelection="kendo.colorpicker.revertSelection|The message for the selected color pane."
+            revertSelection="Revert selection"
+            i18n-gradientView="kendo.colorpicker.gradientView|The message for the gradient view button."
+            gradientView="Gradient view"
+            i18n-paletteView="kendo.colorpicker.paletteView|The message for the palette view button."
+            paletteView="Palette view"
+            i18n-formatButton="kendo.colorpicker.formatButton|The message for the input format toggle button."
+            formatButton="Change color format"
+            i18n-applyButton="kendo.colorpicker.applyButton|The message for the Apply action button."
+            applyButton="Apply"
+            i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
+            cancelButton="Cancel"
+            i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
+        </ng-container>
+        <span #activeColor class="k-input-inner">
+            <span
+                class="k-value-icon k-color-preview"
+                [ngClass]="{'k-icon-color-preview': customIconStyles || iconStyles || svgIcon, 'k-no-color': !value}"
+            >
+                <kendo-icon-wrapper
+                    *ngIf="iconClass || icon || svgIcon"
+                    [name]="iconStyles"
+                    innerCssClass="k-color-preview-icon"
+                    [customFontClass]="customIconStyles"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
+            </span>
+
+        </span>
+        <button
+            kendoButton
+            tabindex="-1"
+            type="button"
+            icon="caret-alt-down"
+            [svgIcon]="arrowDownIcon"
+            aria-hidden="true"
+            class="k-input-button"
+        >
+        </button>
+        <ng-template #popupTemplate>
+            <kendo-flatcolorpicker
+                #flatColorPicker
+                [value]="value"
+                [format]="format"
+                [views]="views"
+                [activeView]="activeView"
+                [actionsLayout]="actionsLayout"
+                [preview]="preview"
+                [gradientSettings]="gradientSettings"
+                [paletteSettings]="paletteSettings"
+                [clearButton]="clearButton"
+                (cancel)="handleCancelEvent($event)"
+                (focusout)="handlePopupBlur($event)"
+                (valueChange)="handleValueChange($event)"
+                (keydown)="handlePopupKeyDown($event)"
+                (activeViewChange)="activeViewChange.emit($event)"
+                (clearButtonClick)="clearButtonClick.emit()"
+                (actionButtonClick)="togglePopup()">
+            </kendo-flatcolorpicker>
+        </ng-template>
+        <ng-container #container></ng-container>
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5.FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: i6.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoColorPicker',
+                    selector: 'kendo-colorpicker',
+                    providers: [{
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPickerComponent)
+                        }, {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => ColorPickerComponent)
+                        },
+                        ColorPickerLocalizationService,
+                        {
+                            provide: LocalizationService,
+                            useExisting: ColorPickerLocalizationService
+                        },
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.colorpicker'
+                        }],
+                    template: `
+        <ng-container kendoColorPickerLocalizedMessages
+            i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
+            colorPickerNoColor="Colorpicker no color chosen"
+            i18n-flatColorPickerNoColor="kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
+            flatColorPickerNoColor="Flatcolorpicker no color chosen"
+            i18n-colorGradientNoColor="kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
+            colorGradientNoColor="Colorgradient no color chosen"
+            i18n-colorPaletteNoColor="kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
+            colorPaletteNoColor="Colorpalette no color chosen"
+            i18n-colorGradientHandle="kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
+            colorGradientHandle="Choose color"
+            i18n-clearButton="kendo.colorpicker.clearButton|The title for the clear button."
+            clearButton="Clear value"
+            i18n-hueSliderHandle="kendo.colorpicker.hueSliderHandle|The title for the hue slider handle."
+            hueSliderHandle="Set hue"
+            i18n-opacitySliderHandle="kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle."
+            opacitySliderHandle="Set opacity"
+            i18n-contrastRatio="kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool."
+            contrastRatio="Contrast ratio"
+            i18n-previewColor="kendo.colorpicker.previewColor|The message for the color preview pane."
+            previewColor="Color preview"
+            i18n-revertSelection="kendo.colorpicker.revertSelection|The message for the selected color pane."
+            revertSelection="Revert selection"
+            i18n-gradientView="kendo.colorpicker.gradientView|The message for the gradient view button."
+            gradientView="Gradient view"
+            i18n-paletteView="kendo.colorpicker.paletteView|The message for the palette view button."
+            paletteView="Palette view"
+            i18n-formatButton="kendo.colorpicker.formatButton|The message for the input format toggle button."
+            formatButton="Change color format"
+            i18n-applyButton="kendo.colorpicker.applyButton|The message for the Apply action button."
+            applyButton="Apply"
+            i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
+            cancelButton="Cancel"
+            i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
+            redChannelLabel="Red channel"
+            i18n-greenChannelLabel="kendo.colorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
+            greenChannelLabel="Green channel"
+            i18n-blueChannelLabel="kendo.colorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
+            blueChannelLabel="Blue channel"
+            i18n-alphaChannelLabel="kendo.colorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
+            alphaChannelLabel="Alpha channel"
+            i18n-redInputPlaceholder="kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input."
+            redChannelLabel="R"
+            i18n-greenInputPlaceholder="kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input."
+            greenInputPlaceholder="G"
+            i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
+            blueInputPlaceholder="B"
+            i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
+            hexInputPlaceholder="HEX">
+        </ng-container>
+        <span #activeColor class="k-input-inner">
+            <span
+                class="k-value-icon k-color-preview"
+                [ngClass]="{'k-icon-color-preview': customIconStyles || iconStyles || svgIcon, 'k-no-color': !value}"
+            >
+                <kendo-icon-wrapper
+                    *ngIf="iconClass || icon || svgIcon"
+                    [name]="iconStyles"
+                    innerCssClass="k-color-preview-icon"
+                    [customFontClass]="customIconStyles"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
+            </span>
+
+        </span>
+        <button
+            kendoButton
+            tabindex="-1"
+            type="button"
+            icon="caret-alt-down"
+            [svgIcon]="arrowDownIcon"
+            aria-hidden="true"
+            class="k-input-button"
+        >
+        </button>
+        <ng-template #popupTemplate>
+            <kendo-flatcolorpicker
+                #flatColorPicker
+                [value]="value"
+                [format]="format"
+                [views]="views"
+                [activeView]="activeView"
+                [actionsLayout]="actionsLayout"
+                [preview]="preview"
+                [gradientSettings]="gradientSettings"
+                [paletteSettings]="paletteSettings"
+                [clearButton]="clearButton"
+                (cancel)="handleCancelEvent($event)"
+                (focusout)="handlePopupBlur($event)"
+                (valueChange)="handleValueChange($event)"
+                (keydown)="handlePopupKeyDown($event)"
+                (activeViewChange)="activeViewChange.emit($event)"
+                (clearButtonClick)="clearButtonClick.emit()"
+                (actionButtonClick)="togglePopup()">
+            </kendo-flatcolorpicker>
+        </ng-template>
+        <ng-container #container></ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-colorpicker']
+            }, {
+                type: HostBinding,
+                args: ['class.k-icon-picker']
+            }, {
+                type: HostBinding,
+                args: ['class.k-picker']
+            }], focusedClass: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }, {
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], ariaReadonly: [{
+                type: HostBinding,
+                args: ['attr.aria-readonly']
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], hostTabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], hasPopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], isControlInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], views: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], paletteSettings: [{
+                type: Input
+            }], gradientSettings: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], actionsLayout: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], cancel: [{
+                type: Output
+            }], activeColorClick: [{
+                type: Output
+            }], clearButtonClick: [{
+                type: Output
+            }], activeViewChange: [{
+                type: Output
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef, static: true }]
+            }], activeColor: [{
+                type: ViewChild,
+                args: ['activeColor', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], flatColorPicker: [{
+                type: ViewChild,
+                args: ['flatColorPicker', { static: false }]
+            }] } });