@progress/kendo-angular-inputs/colorpicker/colorpicker.component.d.ts

Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { EventEmitter, ElementRef, OnDestroy, ViewContainerRef, ChangeDetectorRef, NgZone, OnChanges, OnInit, AfterViewInit, Renderer2, Injector } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { PopupService } from '@progress/kendo-angular-popup';
import { AdaptiveService, AdaptiveSize } from '@progress/kendo-angular-utils';
import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { PopupSettings, PaletteSettings, OutputFormat, ColorPickerView, GradientSettings, ColorPickerActionsLayout } from './models';
import { ActiveColorClickEvent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
import { InputFillMode, InputRounded, InputSize } from '../common/models';
import { SVGIcon } from '@progress/kendo-angular-icons';
import { AdaptiveMode } from './models/adaptive-mode';
import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.component';
import * as i0 from "@angular/core";
/**
 * 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 declare class ColorPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
    private host;
    private popupService;
    private cdr;
    private localizationService;
    private ngZone;
    private renderer;
    private injector;
    private adaptiveService;
    hostClasses: boolean;
    get focusedClass(): boolean;
    get disabledClass(): boolean;
    get ariaReadonly(): boolean;
    get ariaExpanded(): boolean;
    get hostTabindex(): number;
    direction: string;
    role: string;
    hasPopup: string;
    get isControlInvalid(): string;
    /**
     * @hidden
     */
    focusableId: string;
    /**
     * Specifies the views that will be rendered in the popup.
     * By default both the gradient and palette views will be rendered.
     */
    views: Array<ColorPickerView>;
    /**
     * @hidden
     */
    set view(view: ColorPickerView);
    get view(): ColorPickerView;
    /**
     * Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
     */
    adaptiveMode: AdaptiveMode;
    /**
     * Sets the initially active view in the popup. The property supports two-way binding.
     *
     * The supported values are:
     * * `gradient`
     * * `palette`
     */
    activeView: ColorPickerView;
    /**
     * Sets the read-only state of the ColorPicker.
     *
     * @default false
     */
    readonly: boolean;
    /**
     * Sets the disabled state of the ColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
     *
     * @default false
     */
    disabled: boolean;
    /**
     * 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`
     */
    format: OutputFormat;
    /**
     * Specifies the value of the initially selected color.
     */
    set value(value: string);
    get value(): string;
    /**
     * Configures the popup of the ColorPicker.
     */
    set popupSettings(value: PopupSettings);
    get popupSettings(): PopupSettings;
    /**
     * Configures the palette that is displayed in the ColorPicker popup.
     */
    set paletteSettings(value: PaletteSettings);
    get paletteSettings(): PaletteSettings;
    /**
     * Configures the gradient that is displayed in the ColorPicker popup.
     */
    set gradientSettings(value: GradientSettings);
    get gradientSettings(): GradientSettings;
    /**
     * Defines the name of an [existing icon in the Kendo UI theme]({% slug icons %}).
     * Provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
     *
     * For example, `pencil-tools` will be parsed to `k-icon k-i-pencil-tools`.
     */
    icon: string;
    /**
     * 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: string | Array<string> | {
        [key: string]: boolean;
    };
    /**
     * 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: SVGIcon);
    get svgIcon(): SVGIcon;
    /**
     * Specifies whether the ColorPicker should display a 'Clear color' button.
     *
     * @default true
     */
    clearButton: boolean;
    /**
     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
     *
     * @default 0
     */
    set tabindex(value: number);
    get tabindex(): number;
    /**
     * 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
     */
    preview: boolean;
    /**
     * Configures the layout of the `Apply` and `Cancel` action buttons.
     *
     * The possible values are:
     * * `start`
     * * `center`
     * * `end` (default)
     * * `stretch`
     */
    actionsLayout: ColorPickerActionsLayout;
    /**
     * 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: InputSize);
    get size(): InputSize;
    /**
     * The rounded property specifies the border radius of the ColorPicker
     * ([see example](slug:appearance_colorpicker#toc-roundness)).
     *
     * The possible values are:
     * * `small`
     * * `medium` (default)
     * * `large`
     * * `full`
     * * `none`
     */
    set rounded(rounded: InputRounded);
    get rounded(): InputRounded;
    /**
     * The fillMode property specifies the background and border styles of the ColorPicker
     * ([see example]({% slug appearance_colorpicker %}#toc-fill-mode)).
     *
     * The possible values are:
     * * `flat`
     * * `solid` (default)
     * * `outline`
     * * `none`
     */
    set fillMode(fillMode: InputFillMode);
    get fillMode(): InputFillMode;
    /**
     * Fires each time the value is changed.
     */
    valueChange: EventEmitter<any>;
    /**
     * Fires each time the Popup (or ActionSheet in adaptive mode) is about to open.
     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) will remain closed.
     */
    open: EventEmitter<ColorPickerOpenEvent>;
    /**
     * Fires each time the Popup (or ActionSheet in adaptive mode) is about to close.
     * This event is preventable. If you cancel it, the Popup (or the ActionSheet) will remain open.
     */
    close: EventEmitter<ColorPickerCloseEvent>;
    /**
     * Fires each time ColorPicker is focused.
     */
    onFocus: EventEmitter<any>;
    /**
     * Fires each time the ColorPicker is blurred.
     */
    onBlur: EventEmitter<any>;
    /**
     * Fires when the user cancels the current color selection.
     *
     * Fires on preview pane or 'Cancel' button click.
     */
    cancel: EventEmitter<ColorPickerCancelEvent>;
    /**
     * 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.
     */
    activeColorClick: EventEmitter<ActiveColorClickEvent>;
    /**
     * @hidden
     * Fires each time the clear button is clicked.
     */
    clearButtonClick: EventEmitter<any>;
    /**
     * Fires each time the view is about to change.
     * Used to provide a two-way binding for the `activeView` property.
     */
    activeViewChange: EventEmitter<string>;
    /**
     * Indicates whether the ColorPicker wrapper is focused.
     */
    isFocused: boolean;
    /**
    * @hidden
    */
    windowSize: AdaptiveSize;
    /**
     * Returns the current open state. Returns `true` if the Popup (or ActionSheet in adaptive mode) is currently open.
     */
    get isOpen(): boolean;
    /**
     * @hidden
     */
    get customIconStyles(): string;
    /**
     * @hidden
     */
    get isAdaptiveModeEnabled(): boolean;
    /**
     * @hidden
     */
    get isAdaptive(): boolean;
    /**
     * @hidden
     */
    get actionSheet(): ActionSheetComponent;
    /**
     * @hidden
     */
    get isActionSheetExpanded(): boolean;
    /**
     * @hidden
     */
    get iconStyles(): string;
    /**
     * 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: ViewContainerRef;
    private activeColor;
    private popupTemplate;
    private flatColorPicker;
    /**
     * @hidden
     */
    adaptiveRenderer: AdaptiveRendererComponent;
    /**
     * @hidden
     */
    arrowDownIcon: SVGIcon;
    private popupRef;
    private _svgIcon;
    private _value;
    private _tabindex;
    private _popupSettings;
    private _paletteSettings;
    private _gradientSettings;
    private _size;
    private _rounded;
    private _fillMode;
    private dynamicRTLSubscription;
    private subscriptions;
    private popupSubs;
    private colorPickerId;
    private control;
    constructor(host: ElementRef, popupService: PopupService, cdr: ChangeDetectorRef, localizationService: LocalizationService, ngZone: NgZone, renderer: Renderer2, injector: Injector, adaptiveService: AdaptiveService);
    ngOnInit(): void;
    ngAfterViewInit(): void;
    ngOnChanges(changes: any): void;
    ngOnDestroy(): void;
    /**
     * @hidden
     */
    onResize(): void;
    /**
     * @hidden
     */
    handleCancelEvent(ev: ColorPickerCancelEvent): void;
    /**
     * @hidden
     */
    togglePopup(): void;
    /**
     * @hidden
     */
    handleWrapperClick(event: MouseEvent): void;
    /**
     * Focuses the wrapper of the ColorPicker.
     */
    focus(): void;
    /**
     * @hidden
     */
    handleWrapperFocus(): void;
    /**
     * Blurs the ColorPicker.
     */
    blur(): void;
    /**
     * @hidden
     */
    handleWrapperBlur(): void;
    /**
     * Clears the value of the ColorPicker.
     */
    reset(): void;
    /**
     * 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?: boolean): void;
    /**
     * @hidden
     */
    handleValueChange(color: string): void;
    /**
     * @hidden
     */
    handlePopupBlur(event: FocusEvent): void;
    /**
     * @hidden
     */
    writeValue(value: string): void;
    /**
     * @hidden
     */
    registerOnChange(fn: any): void;
    /**
     * @hidden
     */
    registerOnTouched(fn: any): void;
    /**
     * @hidden
     */
    setDisabledState(isDisabled: boolean): void;
    /**
     * @hidden
     */
    handleWrapperKeyDown(event: any): void;
    /**
     * @hidden
     */
    onApply(): void;
    /**
     * @hidden
     */
    onCancel(e: any): void;
    /**
     * @hidden
     */
    handlePopupKeyDown(event: any): void;
    /**
     * @hidden
     * Used by the FloatingLabel to determine if the component is empty.
     */
    isEmpty(): boolean;
    private setHostElementAriaLabel;
    private handleClasses;
    private popupBlurInvalid;
    private toggleWithEvents;
    private focusFirstElement;
    private openActionSheet;
    private closeActionSheet;
    private openPopup;
    private closePopup;
    private get firstFocusableElement();
    private get lastFocusableElement();
    private notifyNgTouched;
    private notifyNgChanged;
    private handleDomEvents;
    private initDomEvents;
    private domFocusListener;
    private handleHostId;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "kendo-colorpicker", ["kendoColorPicker"], { "views": { "alias": "views"; "required": false; }; "view": { "alias": "view"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; "gradientSettings": { "alias": "gradientSettings"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "cancel": "cancel"; "activeColorClick": "activeColorClick"; "clearButtonClick": "clearButtonClick"; "activeViewChange": "activeViewChange"; }, never, never, true, never>;
}