@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
300 lines (299 loc) • 9.06 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, Renderer2, NgZone, EventEmitter, SimpleChanges, OnChanges, OnDestroy, ChangeDetectorRef, Injector, OnInit } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { OutputFormat, HSVA } from './models';
import { KendoDragEvent } from './events/kendo-drag-event';
import { ColorInputComponent } from './color-input.component';
import { SVGIcon } from '@progress/kendo-angular-icons';
import { InputSize } from '../common/models';
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI ColorGradient component.
*
* The ColorGradientComponent lets you select a color by moving a drag handle over a gradient area. You can use it directly or as part of the `kendo-colorpicker`.
*
* @example
* ```html
* <kendo-colorgradient [(ngModel)]="color"></kendo-colorgradient>
* ```
*
* @remarks
* Supported children components are: {@link ColorPickerMessages}.
*/
export declare class ColorGradientComponent implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
private host;
private ngZone;
private renderer;
private cdr;
private localizationService;
private injector;
hostClasses: boolean;
get readonlyAttribute(): boolean;
get disabledClass(): boolean;
get gradientId(): string;
direction: string;
get hostTabindex(): string;
ariaRole: string;
get isControlInvalid(): string;
get isDisabled(): string | undefined;
/**
* @hidden
*/
enterHandler(event: any): void;
/**
* @hidden
*/
escapeHandler(event: any): void;
/**
* @hidden
*/
focusHandler(ev: any): void;
/**
* @hidden
*/
adaptiveMode: boolean;
/**
* @hidden
*/
id: string;
/**
* Shows or hides the alpha slider.
*
* @default true
*/
opacity: boolean;
/**
* Sets the size of the ColorGradient internal elements.
*
* @default 'medium'
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Disables the ColorGradient. To disable it in reactive forms, see [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
*
* @default false
*/
disabled: boolean;
/**
* Sets the read-only state of the ColorGradient.
*
* @default false
*/
readonly: boolean;
/**
* Shows or hides the **Clear color** button.
*
* @default false
*/
clearButton: boolean;
/**
* Sets the delay (in milliseconds) before the value changes on handle drag.
*
* @default 0
*/
delay: number;
/**
* Sets the value of the selected color.
*/
set value(value: string);
get value(): string;
/**
* Enables the color contrast tool that checks the contrast ratio of the selected color against a predefined background color. [See example](slug:contrasttool_colorgradient).
*/
set contrastTool(value: string);
get contrastTool(): string;
/**
* 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;
/**
* Sets the output format of the ColorGradient. The input value may be in a different format, but it will be parsed into the output format after the component processes it.
*
* @default 'rgba'
*/
format: OutputFormat;
/**
* Fires when the user selects a new color..
*/
valueChange: EventEmitter<string>;
/**
* @hidden
*/
backgroundColor: string;
/**
* @hidden
*
* Represents the currently selected `hue`, `saturation`, `value`, and `alpha` values.
* The values are initially set in `ngOnInit` or in `ngOnChanges` and are
* updated on moving the drag handle or the sliders.
*/
hsva: BehaviorSubject<HSVA>;
/**
* Returns `true` if the component or its content is focused.
*/
get isFocused(): boolean;
/**
* @hidden
*/
get alphaSliderValue(): number;
/**
* Sets the step (in pixels) for moving the gradient drag handle with the arrow keys.
*
* @default 5
*/
gradientSliderStep: number;
/**
* Sets the step (in pixels) for moving the gradient drag handle with `Shift+arrow keys`.
*
* @default 2
*/
gradientSliderSmallStep: number;
gradientDragHandle: ElementRef;
inputs: ColorInputComponent;
private alphaSlider;
private gradientWrapper;
private hsvRectangle;
/**
* @hidden
*/
internalNavigation: boolean;
/**
* @hidden
*/
dropletSlashIcon: SVGIcon;
private _value;
private _tabindex;
private _contrastTool;
private listeners;
private hueSliderTouched;
private alphaSliderTouched;
private _size;
private updateValues;
private changeRequestsSubscription;
private dynamicRTLSubscription;
private hsvHandleCoordinates;
get gradientRect(): ClientRect;
/**
* @hidden
*/
get hsvSliderValueText(): string;
/**
* @hidden
*/
get contrastToolVisible(): boolean;
/**
* @hidden
*/
get innerTabIndex(): number;
private control;
constructor(host: ElementRef, ngZone: NgZone, renderer: Renderer2, cdr: ChangeDetectorRef, localizationService: LocalizationService, injector: Injector);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* Focuses the component.
*/
focus(): void;
/**
* @hidden
*/
reset(): void;
/**
* @hidden
*/
handleDragPress(args: KendoDragEvent): void;
/**
* @hidden
*/
onHandleDrag(args: any): void;
/**
* @hidden
*/
onHandleRelease(): void;
/**
* @hidden
*/
onKeyboardAction(args: any): void;
/**
* @hidden
*/
changePosition(position: MouseEvent): void;
/**
* @hidden
*/
handleHueSliderChange(hue: number): void;
/**
* @hidden
*/
handleAlphaSliderChange(alpha: number): void;
/**
* @hidden
*/
handleInputsValueChange(color: string): void;
/**
* @hidden
*/
writeValue(value: string): void;
/**
* @hidden
*/
registerOnChange(fn: any): void;
/**
* @hidden
*/
registerOnTouched(fn: any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
get colorGradientHandleTitle(): string;
/**
* @hidden
*/
get colorGradientHandleAriaLabel(): string;
/**
* @hidden
*/
get hueSliderTitle(): string;
/**
* @hidden
*/
get opacitySliderTitle(): string;
/**
* @hidden
*/
get clearButtonTitle(): string;
/**
* @hidden
* Used by the FloatingLabel to determine if the component is empty.
*/
isEmpty(): boolean;
private notifyNgChanged;
private notifyNgTouched;
private moveDragHandle;
private handleValueChange;
private setDragHandleElementPosition;
private setAlphaSliderBackground;
private setHostElementAriaLabel;
private setBackgroundColor;
private updateUI;
private addEventListeners;
private subscribeChanges;
private unsubscribeChanges;
private handleClasses;
static ɵfac: i0.ɵɵFactoryDeclaration<ColorGradientComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "id": { "alias": "id"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "value": { "alias": "value"; "required": false; }; "contrastTool": { "alias": "contrastTool"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "format": { "alias": "format"; "required": false; }; "gradientSliderStep": { "alias": "gradientSliderStep"; "required": false; }; "gradientSliderSmallStep": { "alias": "gradientSliderSmallStep"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
}