@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
282 lines (281 loc) • 8.42 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2024 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 * as i0 from "@angular/core";
/**
* The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
* The ColorGradient is independently used by `kendo-colorpicker` and can be directly added to the page.
*/
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
*/
id: string;
/**
* Defines whether the alpha slider will be displayed.
*
* @default true
*/
opacity: boolean;
/**
* Sets the disabled state of the ColorGradient. To learn how to disable the component in reactive forms, refer to the article on [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;
/**
* Specifies whether the ColorGradient should display a 'Clear color' button.
*
* @default false
*/
clearButton: boolean;
/**
* Determines the delay time (in milliseconds) before the value is changed on handle drag. A value of 0 indicates no delay.
*
* @default 0
*/
delay: number;
/**
* Specifies the value of the initially selected color.
*/
set value(value: string);
get value(): string;
/**
* Enables the color contrast tool. Accepts the background color that will be compared to the selected value.
* The tool will calculate the contrast ratio between the two colors.
*/
set contrastTool(value: string);
get contrastTool(): 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 the output format of the ColorGradientComponent.
* The input value may be in a different format, but it will be parsed into the output `format`
* after the component processes it.
*
* The supported values are:
* * (Default) `rgba`
* * `hex`
*/
format: OutputFormat;
/**
* Fires each time 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>;
/**
* Indicates whether the ColorGradient or any of its content is focused.
*/
get isFocused(): boolean;
/**
* @hidden
*/
get alphaSliderValue(): number;
/**
* Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys.
*
* @default 5
*/
gradientSliderStep: number;
/**
* Determines the step (in pixels) when moving the gradient drag handle using the keyboard arrow keys while holding the shift key.
*
* @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 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;
static ɵfac: i0.ɵɵFactoryDeclaration<ColorGradientComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ColorGradientComponent, "kendo-colorgradient", ["kendoColorGradient"], { "id": "id"; "opacity": "opacity"; "disabled": "disabled"; "readonly": "readonly"; "clearButton": "clearButton"; "delay": "delay"; "value": "value"; "contrastTool": "contrastTool"; "tabindex": "tabindex"; "format": "format"; "gradientSliderStep": "gradientSliderStep"; "gradientSliderSmallStep": "gradientSliderSmallStep"; }, { "valueChange": "valueChange"; }, never, never, true, never>;
}