/**----------------------------------------------------------------------------------------- * Copyright © 2024 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 { 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 * 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; 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; /** * @hidden */ set view(view: ColorPickerView); get view(): ColorPickerView; /** * 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 | { [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; /** * Fires each time the popup is about to open. * This event is preventable. If you cancel it, the popup will remain closed. */ open: EventEmitter; /** * Fires each time the popup is about to close. * This event is preventable. If you cancel it, the popup will remain open. */ close: EventEmitter; /** * Fires each time ColorPicker is focused. */ onFocus: EventEmitter; /** * Fires each time the ColorPicker is blurred. */ onBlur: EventEmitter; /** * Fires when the user cancels the current color selection. * * Fires on preview pane or 'Cancel' button click. */ cancel: 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. */ activeColorClick: EventEmitter; /** * @hidden * Fires each time the clear button is clicked. */ clearButtonClick: EventEmitter; /** * Fires each time the view is about to change. * Used to provide a two-way binding for the `activeView` property. */ activeViewChange: EventEmitter; /** * Indicates whether the ColorPicker wrapper is focused. */ isFocused: boolean; /** * Indicates whether the ColorPicker popup is open. */ get isOpen(): boolean; /** * @hidden */ get customIconStyles(): string; /** * @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— * for example, inside the component markup. */ container: ViewContainerRef; private activeColor; private popupTemplate; private flatColorPicker; /** * @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); ngOnInit(): void; ngAfterViewInit(): void; ngOnChanges(changes: any): void; ngOnDestroy(): 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 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 */ 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 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; static ɵcmp: i0.ɵɵComponentDeclaration; }