@progress/kendo-angular-inputs 21.4.1 → 22.0.0

package/esm2022/colorpicker/colorpicker.component.mjs

@@ -1,1315 +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 */
-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 { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { AdaptiveService } from '@progress/kendo-angular-utils';
-import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, KendoInput, isChanged, closest, guid, ResizeSensorComponent, isDocumentAvailable, normalizeKeys } 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 { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { parseCSSClassNames } from '@progress/kendo-angular-common';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
-import { NgClass } from '@angular/common';
-import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
-import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.component';
-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-utils";
-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.
- *
- * The `ColorPickerComponent` is a tool for choosing colors from Gradient and Palette views
- * rendered in its popup. You can preview the selected color, revert it to its previous state, or clear it.
- *
- * @example
- * ```html
- * <kendo-colorpicker [(value)]="selectedColor"></kendo-colorpicker>
- * ```
- *
- * @remarks
- * Supported children components are: {@link ColorPickerMessages}.
- */
-export class ColorPickerComponent {
-    host;
-    popupService;
-    cdr;
-    localizationService;
-    ngZone;
-    renderer;
-    injector;
-    adaptiveService;
-    hostClasses = true;
-    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;
-    }
-    direction;
-    role = 'combobox';
-    hasPopup = 'dialog';
-    get isControlInvalid() {
-        return (this.control?.invalid)?.toString();
-    }
-    /**
-     * @hidden
-     */
-    focusableId;
-    /**
-     * Specifies the views rendered in the popup.
-     * By default, both the gradient and palette views are rendered.
-     */
-    views = ['gradient', 'palette'];
-    /**
-     * @hidden
-     */
-    set view(view) {
-        this.views = [view];
-    }
-    get view() {
-        return (this.views && this.views.length > 0) ? this.views[0] : null;
-    }
-    /**
-     * Enables or disables the adaptive mode.
-     * By default, adaptive rendering is disabled.
-     */
-    adaptiveMode = 'none';
-    /**
-     * Sets the initially active view in the popup. Supports two-way binding.
-     */
-    activeView;
-    /**
-     * Sets the read-only state of the ColorPicker.
-     *
-     * @default false
-     */
-    readonly = false;
-    /**
-     * Sets the disabled state of the ColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
-     *
-     * @default false
-     */
-    disabled = false;
-    /**
-     * Specifies the output format of the ColorPicker.
-     *
-     * If the input value is in a different format, the component parses it into the specified output `format`.
-     *
-     * @default 'rgba'
-     */
-    format = 'rgba';
-    /**
-     * Sets the value of the 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 displayed in the ColorPicker popup.
-     */
-    set paletteSettings(value) {
-        this._paletteSettings = Object.assign(this._paletteSettings, value);
-    }
-    get paletteSettings() {
-        return this._paletteSettings;
-    }
-    /**
-     * Configures the gradient displayed in the ColorPicker popup.
-     */
-    set gradientSettings(value) {
-        this._gradientSettings = Object.assign(this._gradientSettings, value);
-    }
-    get gradientSettings() {
-        return this._gradientSettings;
-    }
-    /**
-     * Defines the name of an existing icon in the Kendo UI theme.
-     * Provide only the name of the icon without the `k-icon` or `k-i-` prefixes.
-     */
-    icon;
-    /**
-     * A CSS class name which displays an icon in the ColorPicker button.
-     * `iconClass` is compatible with the `ngClass` syntax.
-     *
-     * Takes precedence over `icon` if both are defined.
-     */
-    iconClass;
-    /**
-     * Defines an SVGIcon to render within the button.
-     * The input can take either an existing Kendo SVG icon 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;
-    }
-    /**
-     * Sets the title of the ActionSheet rendered instead of the Popup on small screens.
-     */
-    adaptiveTitle = '';
-    /**
-     * Sets the subtitle of the ActionSheet rendered instead of the Popup on small screens.
-     * By default, the ActionSheet does not render a subtitle.
-     */
-    adaptiveSubtitle;
-    /**
-     * Specifies whether the ColorPicker displays a **Clear color** button.
-     *
-     * @default true
-     */
-    clearButton = true;
-    /**
-     * Sets 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;
-    }
-    /**
-     * Displays **Apply** and **Cancel** action buttons and color preview panes.
-     *
-     * 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
-     * previous state, i.e., to the current value.
-     *
-     * @default false
-     */
-    preview = false;
-    /**
-     * Configures the layout of the **Apply** and **Cancel** action buttons.
-     *
-     * @default 'end'
-     */
-    actionsLayout = 'end';
-    /**
-     * The size property specifies the padding of the ColorPicker internal elements
-     * ([see example]({% slug appearance_colorpicker %}#toc-size)).
-     *
-     * @default 'medium'
-     */
-    set size(size) {
-        const newSize = 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-roundness)).
-     *
-     * @default 'medium'
-     */
-    set rounded(rounded) {
-        const newRounded = 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-fill-mode)).
-     *
-     * @default 'solid'
-     */
-    set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
-    }
-    get fillMode() {
-        return this._fillMode;
-    }
-    /**
-     * Fires when the value changes.
-     */
-    valueChange = new EventEmitter();
-    /**
-     * Fires when the Popup (or ActionSheet in adaptive mode) is about to open.
-     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) remains closed.
-     */
-    open = new EventEmitter();
-    /**
-     * Fires when the Popup (or ActionSheet in adaptive mode) is about to close.
-     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) remains open.
-     */
-    close = new EventEmitter();
-    /**
-     * Fires when the ColorPicker is focused.
-     */
-    onFocus = new EventEmitter();
-    /**
-     * Fires when the ColorPicker is blurred.
-     */
-    onBlur = new EventEmitter();
-    /**
-     * Fires when the user cancels the current color selection.
-     *
-     * Fires on preview pane or 'Cancel' button click.
-     */
-    cancel = new EventEmitter();
-    /**
-     * Fires when 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.
-     */
-    activeColorClick = new EventEmitter();
-    /**
-     * @hidden
-     * Fires when the clear button is clicked.
-     */
-    clearButtonClick = new EventEmitter();
-    /**
-     * Fires when the view is about to change.
-     * Used to provide a two-way binding for the `activeView` property.
-     */
-    activeViewChange = new EventEmitter();
-    /**
-     * Indicates whether the ColorPicker wrapper is focused.
-     */
-    isFocused = false;
-    /**
-    * @hidden
-    */
-    windowSize = 'large';
-    /**
-     * Returns the current open state. Returns `true` if the Popup (or ActionSheet in adaptive mode) is currently open.
-     */
-    get isOpen() {
-        return isPresent(this.popupRef) || this.isActionSheetExpanded;
-    }
-    /**
-     * @hidden
-     */
-    get customIconStyles() {
-        if (this.iconClass) {
-            let parsedIconClass = '';
-            parseCSSClassNames(this.iconClass).forEach(iconClass => {
-                parsedIconClass += iconClass + ' ';
-            });
-            return parsedIconClass.slice(0, -1);
-        }
-        return '';
-    }
-    /**
-     * @hidden
-     */
-    get isAdaptiveModeEnabled() {
-        return this.adaptiveMode === 'auto';
-    }
-    /**
-     * @hidden
-     */
-    get isAdaptive() {
-        return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
-    }
-    /**
-     * @hidden
-     */
-    get actionSheet() {
-        return this.adaptiveRenderer?.actionSheet;
-    }
-    /**
-     * @hidden
-     */
-    get isActionSheetExpanded() {
-        return Boolean(this.actionSheet?.expanded);
-    }
-    /**
-     * @hidden
-     */
-    get iconStyles() {
-        if (this.icon && !this.iconClass) {
-            return `${this.icon}`;
-        }
-        return '';
-    }
-    /**
-     * Provides a reference to a container element inside the component markup.
-     * The container element references the location of the appended popup&mdash;
-     * for example, inside the component markup.
-     */
-    container;
-    activeColor;
-    popupTemplate;
-    flatColorPicker;
-    /**
-     * @hidden
-     */
-    adaptiveRenderer;
-    /**
-     * @hidden
-     */
-    arrowDownIcon = caretAltDownIcon;
-    popupRef;
-    _svgIcon;
-    _value;
-    _tabindex = 0;
-    _popupSettings = { animate: true };
-    _paletteSettings = {};
-    _gradientSettings = { opacity: true, delay: 0 };
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
-    dynamicRTLSubscription;
-    subscriptions = new Subscription();
-    popupSubs = new Subscription();
-    colorPickerId;
-    control;
-    constructor(host, popupService, cdr, localizationService, ngZone, renderer, injector, adaptiveService) {
-        this.host = host;
-        this.popupService = popupService;
-        this.cdr = cdr;
-        this.localizationService = localizationService;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.injector = injector;
-        this.adaptiveService = adaptiveService;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-        this.colorPickerId = nextColorPickerId++;
-    }
-    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,
-            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();
-        this.windowSize = this.adaptiveService.size;
-        if (this.actionSheet && isDocumentAvailable()) {
-            // The following syntax is used as it does not violate CSP compliance
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
-            this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
-        }
-    }
-    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
-     */
-    onResize() {
-        const currentWindowSize = this.adaptiveService.size;
-        if (this.isAdaptiveModeEnabled && this.windowSize !== currentWindowSize) {
-            if (this.isOpen) {
-                this.toggleWithEvents(false);
-            }
-            this.windowSize = currentWindowSize;
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleCancelEvent(ev) {
-        this.cancel.emit(ev);
-    }
-    /**
-     * @hidden
-     */
-    togglePopup() {
-        if (!this.isActionSheetExpanded) {
-            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;
-        }
-        if (!this.isActionSheetExpanded) {
-            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.isActionSheetExpanded) {
-            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 (or ActionSheet in adaptive mode) 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) {
-        this.windowSize = this.adaptiveService.size;
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        this.cdr.markForCheck();
-        if (this.isActionSheetExpanded) {
-            this.closeActionSheet();
-        }
-        else {
-            this.closePopup();
-        }
-        open = isPresent(open) ? open : !this.isOpen;
-        if (open) {
-            if (this.isAdaptive && !this.isActionSheetExpanded) {
-                this.openActionSheet();
-            }
-            else {
-                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.isActionSheetExpanded) {
-            if (this.popupBlurInvalid(event)) {
-                return;
-            }
-            this.isFocused = false;
-            this.onBlur.emit();
-            this.notifyNgTouched();
-            this.toggleWithEvents(false);
-        }
-    }
-    /**
-     * @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
-     */
-    handleWrapperKeyDown(event) {
-        const code = normalizeKeys(event);
-        if (code === Keys.ArrowDown || code === Keys.Enter) {
-            event.preventDefault();
-            this.ngZone.run(() => {
-                this.toggleWithEvents(true);
-            });
-        }
-    }
-    /**
-     * @hidden
-     */
-    applyValue() {
-        this.handleValueChange(this.flatColorPicker.selection);
-        this.toggleWithEvents(false);
-    }
-    /**
-     * @hidden
-     */
-    cancelValue(e) {
-        this.flatColorPicker.resetSelection(e);
-        this.toggleWithEvents(false);
-    }
-    /**
-     * @hidden
-     */
-    onActionSheetClose(e) {
-        if (this.preview) {
-            this.cancelValue(e);
-        }
-        else {
-            this.applyValue();
-        }
-    }
-    /**
-     * @hidden
-     */
-    handlePopupKeyDown(event) {
-        if (event.code === Keys.Escape) {
-            this.toggleWithEvents(false);
-            this.host.nativeElement.focus();
-        }
-        if (event.code === 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
-     */
-    messageFor(key) {
-        return this.localizationService.get(key);
-    }
-    /**
-     * @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();
-            }
-        });
-    }
-    openActionSheet() {
-        this.actionSheet.toggle(true);
-    }
-    closeActionSheet() {
-        this.actionSheet.toggle(false);
-        this.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 || this.adaptiveRenderer.applyButton.nativeElement;
-        }
-        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;
-    }
-    notifyNgTouched = () => { };
-    notifyNgChanged = () => { };
-    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);
-                const closestActionSheet = this.isActionSheetExpanded ? closest(event.relatedTarget, (element) => element === this.actionSheet.element.nativeElement) :
-                    false;
-                if (!closestPopup && !closestWrapper && !closestActionSheet) {
-                    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(() => {
-                    if (!this.isActionSheetExpanded) {
-                        this.handleWrapperClick(event);
-                    }
-                });
-            }));
-        });
-    }
-    domFocusListener = (event) => event.stopImmediatePropagation();
-    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;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 }, { token: i3.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", 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", "class.k-readonly": "this.readonly" } }, 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 }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, 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-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
-          adaptiveCloseButtonTitle="Close"
-          i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
-          adaptiveTitle="Choose Color"
-          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"
-          i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
-          toggleButtonLabel="Select color">
-        </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}"
-            >
-            @if (iconClass || icon || svgIcon) {
-              <kendo-icon-wrapper
-                [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"
-          [size]="size"
-          [svgIcon]="arrowDownIcon"
-          [fillMode]="fillMode"
-          [disabled]="disabled"
-          rounded="none"
-          class="k-input-button"
-          [attr.aria-label]="messageFor('toggleButtonLabel')"
-          >
-        </button>
-        <ng-template #popupTemplate>
-          <kendo-flatcolorpicker
-            #flatColorPicker
-            [value]="value"
-            [format]="format"
-            [size]="isAdaptive ? 'large' : size"
-            [views]="views"
-            [activeView]="activeView"
-            [actionsLayout]="actionsLayout"
-            [adaptiveMode]="isActionSheetExpanded"
-            [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>
-        <kendo-adaptive-renderer
-          [actionSheetTemplate]="popupTemplate"
-          [isActionSheetExpanded]="isActionSheetExpanded"
-          [title]="adaptiveTitle"
-          [subtitle]="adaptiveSubtitle"
-          [preview]="preview"
-          (actionSheetClose)="onActionSheetClose($event)"
-          (onApply)="applyValue()"
-          (onCancel)="cancelValue($event)"
-          >
-        </kendo-adaptive-renderer>
-        @if (isOpen || isAdaptiveModeEnabled) {
-          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "adaptiveMode", "paletteSettings", "size"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "actionSheetTemplate", "isActionSheetExpanded", "preview"], outputs: ["actionSheetClose", "onExpand", "onCollapse", "onApply", "onCancel"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
-          adaptiveCloseButtonTitle="Close"
-          i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
-          adaptiveTitle="Choose Color"
-          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"
-          i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
-          toggleButtonLabel="Select color">
-        </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}"
-            >
-            @if (iconClass || icon || svgIcon) {
-              <kendo-icon-wrapper
-                [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"
-          [size]="size"
-          [svgIcon]="arrowDownIcon"
-          [fillMode]="fillMode"
-          [disabled]="disabled"
-          rounded="none"
-          class="k-input-button"
-          [attr.aria-label]="messageFor('toggleButtonLabel')"
-          >
-        </button>
-        <ng-template #popupTemplate>
-          <kendo-flatcolorpicker
-            #flatColorPicker
-            [value]="value"
-            [format]="format"
-            [size]="isAdaptive ? 'large' : size"
-            [views]="views"
-            [activeView]="activeView"
-            [actionsLayout]="actionsLayout"
-            [adaptiveMode]="isActionSheetExpanded"
-            [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>
-        <kendo-adaptive-renderer
-          [actionSheetTemplate]="popupTemplate"
-          [isActionSheetExpanded]="isActionSheetExpanded"
-          [title]="adaptiveTitle"
-          [subtitle]="adaptiveSubtitle"
-          [preview]="preview"
-          (actionSheetClose)="onActionSheetClose($event)"
-          (onApply)="applyValue()"
-          (onCancel)="cancelValue($event)"
-          >
-        </kendo-adaptive-renderer>
-        @if (isOpen || isAdaptiveModeEnabled) {
-          <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
-        }
-        `,
-                    standalone: true,
-                    imports: [LocalizedColorPickerMessagesDirective, NgClass, IconWrapperComponent, ButtonComponent, FlatColorPickerComponent, ResizeSensorComponent, AdaptiveRendererComponent]
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.AdaptiveService }], 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
-            }], adaptiveMode: [{
-                type: Input
-            }], activeView: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
-            }], 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
-            }], adaptiveTitle: [{
-                type: Input
-            }], adaptiveSubtitle: [{
-                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 }]
-            }], adaptiveRenderer: [{
-                type: ViewChild,
-                args: [AdaptiveRendererComponent]
-            }] } });