@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
286 lines (285 loc) • 9.79 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]({% slug overview_flatcolorpicker %}).
*
* The FlatColorPicker is a powerful tool which allows the user to choose colors through palettes with predefined sets of colors and
* through a gradient that renders an hsv canvas. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
*/
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 learn how to disable the component in reactive forms, refer to the article on [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, it will be parsed into the specified output `format`.
*
* The supported values are:
* * `rgba` (default)
* * `hex`
*/
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 should display a 'Clear color' button.
*
* @default true
*/
clearButton: boolean;
/**
* Displays `Apply` and `Cancel` action buttons and a color preview pane.
*
* 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
* initial state i.e. to the current value.
*
* @default true
*/
preview: boolean;
/**
* Configures the layout of the `Apply` and `Cancel` action buttons.
* * `start`
* * `center`
* * `end` (default)
* * `stretch`
*/
actionsLayout: ColorPickerActionsLayout;
/**
* Sets the initially active view in the FlatColorPicker. The property supports two-way binding.
* * `gradient` (default)
* * `palette`
*/
activeView: ColorPickerView;
/**
* Specifies the views that will be rendered. 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;
/**
* The size property specifies the padding of the FlatColorPicker internal elements.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Fires each time the component value is changed.
*/
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 each time 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>;
}