@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
283 lines (282 loc) • 9.56 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 { ElementRef, EventEmitter, NgZone, ChangeDetectorRef, OnInit, AfterViewInit, OnDestroy, Renderer2, SimpleChanges, Injector } from "@angular/core";
import { ControlValueAccessor } from '@angular/forms';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { FlatColorPickerService } from './services/flatcolorpicker.service';
import { ColorPickerView, GradientSettings, OutputFormat, PaletteSettings, ColorPickerActionsLayout } from "./models";
import { ColorPickerCancelEvent } from './events';
import { ColorGradientComponent } from './color-gradient.component';
import { ColorPaletteComponent } from './color-palette.component';
import { FlatColorPickerHeaderComponent } from './flatcolorpicker-header.component';
import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions.component';
import { InputSize } from "../common/models";
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI FlatColorPicker component for Angular.
*
* The `FlatColorPickerComponent` lets you choose colors through palettes with predefined sets of colors and through a gradient that renders an HSV canvas. You can preview the selected color, revert it to its previous state, or clear it.
*
* @example
* ```html
* <kendo-flatcolorpicker [(value)]="selectedColor"></kendo-flatcolorpicker>
* ```
*
* @remarks
* Supported children components are: {@link ColorPickerMessages}.
*/
export declare class FlatColorPickerComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
host: ElementRef;
private service;
private localizationService;
private cdr;
private renderer;
private ngZone;
private injector;
hostClasses: boolean;
get disabledClass(): boolean;
get ariaReadonly(): boolean;
direction: string;
get hostTabindex(): string;
ariaRole: string;
get isControlInvalid(): string;
get isDisabled(): string | undefined;
/**
* @hidden
*/
enterHandler(event: any): void;
/**
* @hidden
*/
escapeHandler(): void;
/**
* @hidden
*/
focusHandler(ev: any): void;
/**
* Sets the read-only state of the FlatColorPicker.
*
* @default false
*/
readonly: boolean;
/**
* Sets the disabled state of the FlatColorPicker. To disable it in reactive forms, see [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
*
* @default false
*/
disabled: boolean;
/**
* Specifies the output format of the FlatColorPicker.
*
* If the input value is in a different format, the component parses it into the specified output `format`.
*
* @default 'rgba'
*/
format: OutputFormat;
/**
* Specifies the initially selected color.
*/
set value(value: string);
get value(): string;
/**
* 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;
/**
* Specifies whether the FlatColorPicker displays a **Clear color** button.
*
* @default true
*/
clearButton: boolean;
/**
* Displays `Apply` and `Cancel` action buttons and a color preview pane.
*
* 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
* initial state, i.e., to the current value.
*
* @default true
*/
preview: boolean;
/**
* Configures the layout of the `Apply` and `Cancel` action buttons.
*
* @default 'end'
*/
actionsLayout: ColorPickerActionsLayout;
/**
* Sets the initially active view in the FlatColorPicker. Supports two-way binding.
*/
activeView: ColorPickerView;
/**
* Specifies the views to render. The default value is gradient and palette.
*/
views: Array<ColorPickerView>;
/**
* Configures the gradient view.
*/
set gradientSettings(value: GradientSettings);
get gradientSettings(): GradientSettings;
/**
* @hidden
*/
adaptiveMode: boolean;
/**
* Configures the palette view.
*/
set paletteSettings(value: PaletteSettings);
get paletteSettings(): PaletteSettings;
/**
* Sets the size of the FlatColorPicker internal elements.
*
* @default 'medium'
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Fires when the component value changes.
*/
valueChange: EventEmitter<any>;
/**
* Fires when the user cancels the current color selection.
*
* The event is emitted on preview pane or on 'Cancel' button click.
*/
cancel: EventEmitter<ColorPickerCancelEvent>;
/**
* Fires when the view is about to change.
* Used to provide a two-way binding for the `activeView` property.
*/
activeViewChange: EventEmitter<string>;
/**
* @hidden
* Fires each time the clear button is clicked.
*/
clearButtonClick: EventEmitter<any>;
/**
* @hidden
*/
actionButtonClick: EventEmitter<any>;
header: FlatColorPickerHeaderComponent;
headerElement: ElementRef;
gradient: ColorGradientComponent;
gradientElement: ElementRef;
palette: ColorPaletteComponent;
footer: FlatColorPickerActionButtonsComponent;
/**
* @hidden
*/
selection: string;
private focused;
private _value;
private _tabindex;
private _gradientSettings;
private _paletteSettings;
private dynamicRTLSubscription;
private subscriptions;
private internalNavigation;
private _size;
private control;
/**
* @hidden
*/
get innerTabIndex(): number;
/**
* @hidden
*/
get firstFocusable(): any;
constructor(host: ElementRef, service: FlatColorPickerService, localizationService: LocalizationService, cdr: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone, injector: Injector);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* @hidden
*/
focusFirstHeaderButton(): void;
/**
* @hidden
*/
lastFocusable(event: any): any;
/**
* @hidden
*/
onTab(ev: KeyboardEvent): void;
/**
* @hidden
*/
get headerHasContent(): boolean;
/**
* @hidden
* Used by the FloatingLabel to determine if the component is empty.
*/
isEmpty(): boolean;
/**
* Focuses the wrapper of the FlatColorPicker.
*/
focus(): void;
/**
* Blurs the wrapper of the FlatColorPicker.
*/
blur(): void;
/**
* Clears the value of the FlatColorPicker.
*/
reset(): void;
/**
* @hidden
*/
onViewChange(view: ColorPickerView): void;
/**
* @hidden
*/
onClearButtonClick(): void;
/**
* @hidden
*/
handleValueChange(color: string): void;
/**
* @hidden
*/
onAction(ev: any): void;
/**
* @hidden
*/
writeValue(value: string): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
resetSelection(ev: any): void;
private setHostElementAriaLabel;
private setSizingVariables;
private changeCurrentValue;
private resetInnerComponentValue;
private setFlatColorPickerValue;
private setActiveView;
private notifyNgChanged;
private notifyNgTouched;
private initDomEvents;
private removeGradientAttributes;
private handleClasses;
static ɵfac: i0.ɵɵFactoryDeclaration<FlatColorPickerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<FlatColorPickerComponent, "kendo-flatcolorpicker", ["kendoFlatColorPicker"], { "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "views": { "alias": "views"; "required": false; }; "gradientSettings": { "alias": "gradientSettings"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "valueChange": "valueChange"; "cancel": "cancel"; "activeViewChange": "activeViewChange"; "clearButtonClick": "clearButtonClick"; "actionButtonClick": "actionButtonClick"; }, never, never, true, never>;
}