ngx-input-color
Version:
Angular color input component and color picker (with HSL, HSV, RGB, CMYK, HEX, alpha, eye-dropper, etc)
81 lines (80 loc) • 3.21 kB
TypeScript
import { ChangeDetectorRef, ElementRef, EventEmitter, type OnInit } from '@angular/core';
import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
import * as i0 from "@angular/core";
export interface IValue {
id?: string;
value: number;
}
export declare class ValueModel {
id: string;
value: number;
x?: number;
thumb?: HTMLElement;
color?: string;
}
export declare class RangeSliderComponent implements OnInit, ControlValueAccessor, Validator {
private changeDetectorRef;
/**
* The step value for the slider
*/
step: number;
/**
* The minimum value for the slider
*/
min: number;
/**
* The maximum value for the slider
*/
max: number;
/**
* The background color of the slider
* - can use css like `background: linear-gradient(to right, red, blue);`
* - or a solid color like `background: red;`
*/
background?: string;
/**
* If true, the background will be transparent
*/
isBgTransparent: boolean;
/**
* If true, clicking on the slider will add a new range at that position
*/
addNewRangeOnClick: boolean;
/**
* The current value of the slider
*/
change: EventEmitter<IValue[]>;
selectedIndex?: number;
selectedIndexChange: EventEmitter<number>;
private isDragging;
slider: ElementRef<HTMLDivElement>;
thumb?: ElementRef<HTMLDivElement>;
values: ValueModel[];
isDisabled: boolean;
_onChange: (value: IValue[]) => void;
_onTouched: () => void;
_validatorOnChange: () => void;
private sliderRect?;
private thumbRect?;
constructor(changeDetectorRef: ChangeDetectorRef);
ngOnInit(): void;
private generateId;
writeValue(items?: IValue[]): void;
validate(control: AbstractControl): ValidationErrors | null;
registerOnValidatorChange?(fn: () => void): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState?(disabled: boolean): void;
private updateRects;
onDrag(ev: MouseEvent | TouchEvent): void;
onResize(): void;
dragStart(ev: MouseEvent | TouchEvent, index: number): void;
addnewRangeOnSliderClick(event: MouseEvent | TouchEvent): void;
private updateThumbPosition;
updateAllThumbPositions(): void;
setValueByPosition(thumb: ValueModel, thumbRec: DOMRect, sliderRec: DOMRect): void;
onDragEnd(ev: MouseEvent | TouchEvent): void;
valueChanged(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<RangeSliderComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<RangeSliderComponent, "range-slider", never, { "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "background": { "alias": "background"; "required": false; }; "isBgTransparent": { "alias": "isBgTransparent"; "required": false; }; "addNewRangeOnClick": { "alias": "addNewRangeOnClick"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "change": "change"; "selectedIndexChange": "selectedIndexChange"; }, never, ["*"], true, never>;
}