UNPKG

@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
/**----------------------------------------------------------------------------------------- * 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>; }