@progress/kendo-angular-editor/tools/colorpicker/editor-colorpicker.component.d.ts

Kendo UI Editor for Angular

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ElementRef, NgZone, Renderer2 } from '@angular/core';
import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
import { PaletteSettings, ActiveColorClickEvent, ColorPickerView } from '@progress/kendo-angular-inputs';
import { DialogService } from '@progress/kendo-angular-dialog';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { EditorLocalizationService } from '../../localization/editor-localization.service';
import { ProviderService } from '../../common/provider.service';
import * as i0 from "@angular/core";
/**
 * Configures a ColorPickerComponent as a ToolBar tool.
 * Use this component to associate a `kendo-toolbar-colorpicker` with an Editor command that changes the foreground or background color of the text.
 * Use the `kendoEditorForeColor` or `kendoEditorBackColor` directive ([more information]({% slug toolbartools_editor %}#toc-colorpickers)).
 *
 * @example
 * ```html
 * <kendo-toolbar-colorpicker kendoEditorForeColor></kendo-toolbar-colorpicker>
 * ```
 */
export declare class EditorColorPickerComponent extends ToolBarToolComponent {
    private localization;
    private dialogService;
    private ngZone;
    private renderer;
    /**
     * Specifies the tab index of the component.
     *
     * @default -1
     */
    tabindex: number;
    /**
     * Specifies the initial value of the color picker.
     */
    value: string;
    /**
     * Specifies the Kendo UI font icon that the component uses.
     */
    icon: string;
    /**
     * Defines an SVGIcon to render within the ColorPicker button.
     * The input can take either an existing Kendo SVG icon or a custom one.
     */
    svgIcon: SVGIcon;
    /**
     * Overrides the default color palette settings.
     */
    paletteSettings: PaletteSettings;
    /**
     * Specifies the color-related command that the component executes.
     */
    editorCommand: 'foreColor' | 'backColor';
    /**
     * Specifies if the component is disabled.
     *
     * @default false
     */
    disabled: boolean;
    /**
     * Specifies whether the ColorPicker renders a gradient, palette, or both in its popup.
     *
     * @default ['palette']
     */
    views: ColorPickerView[];
    /**
     * @hidden
     *
     * For backward compatibility with configurations using the deprecated "view" input.
     */
    set view(view: ColorPickerView);
    get view(): ColorPickerView;
    /**
     * @hidden
     */
    get title(): string;
    element: ElementRef;
    private colorPicker;
    private colorPickerButton;
    private subs;
    private editor;
    private activeView;
    constructor(localization: EditorLocalizationService, dialogService: DialogService, ngZone: NgZone, providerService: ProviderService, renderer: Renderer2);
    ngOnInit(): void;
    ngOnDestroy(): void;
    /**
     * @hidden
     */
    handleValueChange(color: string): void;
    /**
     * @hidden
     */
    handleActiveColorClick(event: ActiveColorClickEvent): void;
    /**
     * @hidden
     */
    onClose(): void;
    /**
     * @hidden
     */
    handleClearButtonClick(): void;
    /**
     * @hidden
     */
    onActiveViewChange(view: string | ColorPickerView): void;
    /**
     * @hidden
     */
    get outerWidth(): number;
    /**
     * @hidden
     */
    openDialog(): void;
    /**
     * @hidden
     */
    canFocus(): boolean;
    /**
     * @hidden
     */
    focus(): void;
    /**
     * @hidden
     */
    handleKey(): boolean;
    static ɵfac: i0.ɵɵFactoryDeclaration<EditorColorPickerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<EditorColorPickerComponent, "kendo-toolbar-colorpicker", never, { "value": { "alias": "value"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; "editorCommand": { "alias": "editorCommand"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "views": { "alias": "views"; "required": false; }; "view": { "alias": "view"; "required": false; }; }, {}, never, never, true, never>;
}