@progress/kendo-angular-inputs
Version:
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
428 lines (427 loc) • 14.9 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* 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.
*
* 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 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 rendered in the popup.
* By default, both the gradient and palette views are 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. Supports two-way binding.
*/
activeView: ColorPickerView;
/**
* Sets the read-only state of the ColorPicker.
*
* @default false
*/
readonly: boolean;
/**
* 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: boolean;
/**
* 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: OutputFormat;
/**
* Sets the value of the 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 displayed in the ColorPicker popup.
*/
set paletteSettings(value: PaletteSettings);
get paletteSettings(): PaletteSettings;
/**
* Configures the gradient displayed in the ColorPicker popup.
*/
set gradientSettings(value: GradientSettings);
get gradientSettings(): 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: 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 render within the button.
* The input can take either an existing Kendo SVG icon or a custom one.
*/
set svgIcon(icon: SVGIcon);
get svgIcon(): SVGIcon;
/**
* Sets the title of the ActionSheet rendered instead of the Popup on small screens.
*/
adaptiveTitle: string;
/**
* Sets the subtitle of the ActionSheet rendered instead of the Popup on small screens.
* By default, the ActionSheet does not render a subtitle.
*/
adaptiveSubtitle: any;
/**
* Specifies whether the ColorPicker displays a **Clear color** button.
*
* @default true
*/
clearButton: boolean;
/**
* Sets 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 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: boolean;
/**
* Configures the layout of the **Apply** and **Cancel** action buttons.
*
* @default 'end'
*/
actionsLayout: ColorPickerActionsLayout;
/**
* The size property specifies the padding of the ColorPicker internal elements
* ([see example]({% slug appearance_colorpicker %}#toc-size)).
*
* @default 'medium'
*/
set size(size: InputSize);
get size(): InputSize;
/**
* The rounded property specifies the border radius of the ColorPicker
* ([see example](slug:appearance_colorpicker#toc-roundness)).
*
* @default 'medium'
*/
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)).
*
* @default 'solid'
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* Fires when the value changes.
*/
valueChange: EventEmitter<any>;
/**
* 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: EventEmitter<ColorPickerOpenEvent>;
/**
* 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: EventEmitter<ColorPickerCloseEvent>;
/**
* Fires when the ColorPicker is focused.
*/
onFocus: EventEmitter<any>;
/**
* Fires when 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 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: EventEmitter<ActiveColorClickEvent>;
/**
* @hidden
* Fires when the clear button is clicked.
*/
clearButtonClick: EventEmitter<any>;
/**
* Fires when 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—
* 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: KeyboardEvent): void;
/**
* @hidden
*/
applyValue(): void;
/**
* @hidden
*/
cancelValue(e: any): void;
/**
* @hidden
*/
onActionSheetClose(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; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "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>;
}