ngx-color-picker/index.d.ts

Color picker widget for Angular

import * as i0 from '@angular/core';
import { EventEmitter, OnInit, OnDestroy, AfterViewInit, ElementRef, TemplateRef, OnChanges } from '@angular/core';

declare enum ColorFormats {
    HEX = 0,
    RGBA = 1,
    HSLA = 2,
    CMYK = 3
}
declare class Rgba {
    r: number;
    g: number;
    b: number;
    a: number;
    constructor(r: number, g: number, b: number, a: number);
}
declare class Hsva {
    h: number;
    s: number;
    v: number;
    a: number;
    constructor(h: number, s: number, v: number, a: number);
}
declare class Hsla {
    h: number;
    s: number;
    l: number;
    a: number;
    constructor(h: number, s: number, l: number, a: number);
}
declare class Cmyk {
    c: number;
    m: number;
    y: number;
    k: number;
    a: number;
    constructor(c: number, m: number, y: number, k: number, a?: number);
}

type ColorMode = 'color' | 'c' | '1' | 'grayscale' | 'g' | '2' | 'presets' | 'p' | '3';
type AlphaChannel = 'enabled' | 'disabled' | 'always' | 'forced';
type OutputFormat = 'auto' | 'hex' | 'rgba' | 'hsla';
declare class TextDirective {
    rg: number;
    text: any;
    newValue: EventEmitter<any>;
    inputChange(event: any): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<TextDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<TextDirective, "[text]", never, { "rg": { "alias": "rg"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "newValue": "newValue"; }, never, never, true, never>;
}
declare class SliderDirective {
    private elRef;
    private document;
    private readonly listenerMove;
    private readonly listenerStop;
    rgX: number;
    rgY: number;
    dragEnd: EventEmitter<any>;
    dragStart: EventEmitter<any>;
    newValue: EventEmitter<any>;
    mouseDown(event: any): void;
    touchStart(event: any): void;
    constructor();
    private move;
    private start;
    private stop;
    private getX;
    private getY;
    private setCursor;
    static ɵfac: i0.ɵɵFactoryDeclaration<SliderDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<SliderDirective, "[slider]", never, { "rgX": { "alias": "rgX"; "required": false; }; "rgY": { "alias": "rgY"; "required": false; }; }, { "dragEnd": "dragEnd"; "dragStart": "dragStart"; "newValue": "newValue"; }, never, never, true, never>;
}
declare class SliderPosition {
    h: number;
    s: number;
    v: number;
    a: number;
    constructor(h: number, s: number, v: number, a: number);
}

declare class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
    private ngZone;
    private elRef;
    private cdRef;
    private platformId;
    private service;
    private document;
    private cmyk;
    private hsva;
    private width;
    private height;
    private cmykColor;
    private outputColor;
    private initialColor;
    private fallbackColor;
    private listenerResize;
    private listenerMouseDown;
    private directiveInstance;
    private sliderH;
    private sliderDimMax;
    private directiveElementRef;
    private dialogArrowSize;
    private dialogArrowOffset;
    private dialogInputFields;
    private useRootViewContainer;
    private readonly window;
    show: boolean;
    hidden: boolean;
    top: number;
    left: number;
    position: string;
    format: ColorFormats;
    slider: SliderPosition;
    hexText: string;
    hexAlpha: number;
    cmykText: Cmyk;
    hslaText: Hsla;
    rgbaText: Rgba;
    arrowTop: number;
    selectedColor: string;
    hueSliderColor: string;
    alphaSliderColor: string;
    cpWidth: number;
    cpHeight: number;
    cpColorMode: number;
    cpCmykEnabled: boolean;
    cpAlphaChannel: AlphaChannel;
    cpOutputFormat: OutputFormat;
    cpDisableInput: boolean;
    cpDialogDisplay: string;
    cpIgnoredElements: any;
    cpSaveClickOutside: boolean;
    cpCloseClickOutside: boolean;
    cpPosition: string;
    cpUsePosition: string;
    cpPositionOffset: number;
    cpOKButton: boolean;
    cpOKButtonText: string;
    cpOKButtonClass: string;
    cpCancelButton: boolean;
    cpCancelButtonText: string;
    cpCancelButtonClass: string;
    cpEyeDropper: boolean;
    eyeDropperSupported: boolean;
    cpPresetLabel: string;
    cpPresetColors: string[];
    cpPresetColorsClass: string;
    cpMaxPresetColorsLength: number;
    cpPresetEmptyMessage: string;
    cpPresetEmptyMessageClass: string;
    cpAddColorButton: boolean;
    cpAddColorButtonText: string;
    cpAddColorButtonClass: string;
    cpRemoveColorButtonClass: string;
    cpArrowPosition: number;
    cpTriggerElement: ElementRef;
    cpExtraTemplate: TemplateRef<any>;
    dialogElement: ElementRef;
    hueSlider: ElementRef;
    alphaSlider: ElementRef;
    handleEsc(event: any): void;
    handleEnter(event: any): void;
    constructor();
    ngOnInit(): void;
    ngOnDestroy(): void;
    ngAfterViewInit(): void;
    openDialog(color: any, emit?: boolean): void;
    closeDialog(): void;
    setupDialog(instance: any, elementRef: ElementRef, color: any, cpWidth: string, cpHeight: string, cpDialogDisplay: string, cpFallbackColor: string, cpColorMode: string, cpCmykEnabled: boolean, cpAlphaChannel: AlphaChannel, cpOutputFormat: OutputFormat, cpDisableInput: boolean, cpIgnoredElements: any, cpSaveClickOutside: boolean, cpCloseClickOutside: boolean, cpUseRootViewContainer: boolean, cpPosition: string, cpPositionOffset: string, cpPositionRelativeToArrow: boolean, cpPresetLabel: string, cpPresetColors: string[], cpPresetColorsClass: string, cpMaxPresetColorsLength: number, cpPresetEmptyMessage: string, cpPresetEmptyMessageClass: string, cpOKButton: boolean, cpOKButtonClass: string, cpOKButtonText: string, cpCancelButton: boolean, cpCancelButtonClass: string, cpCancelButtonText: string, cpAddColorButton: boolean, cpAddColorButtonClass: string, cpAddColorButtonText: string, cpRemoveColorButtonClass: string, cpEyeDropper: boolean, cpTriggerElement: ElementRef, cpExtraTemplate: TemplateRef<any>): void;
    setColorMode(mode: string): void;
    setInitialColor(color: any): void;
    setPresetConfig(cpPresetLabel: string, cpPresetColors: string[]): void;
    setColorFromString(value: string, emit?: boolean, update?: boolean): void;
    onResize(): void;
    onDragEnd(slider: string): void;
    onDragStart(slider: string): void;
    onMouseDown(event: MouseEvent): void;
    onAcceptColor(event: Event): void;
    onCancelColor(event: Event): void;
    onEyeDropper(): void;
    onFormatToggle(change: number): void;
    onColorChange(value: {
        s: number;
        v: number;
        rgX: number;
        rgY: number;
    }): void;
    onHueChange(value: {
        v: number;
        rgX: number;
    }): void;
    onValueChange(value: {
        v: number;
        rgX: number;
    }): void;
    onAlphaChange(value: {
        v: number;
        rgX: number;
    }): void;
    onHexInput(value: string | null): void;
    onRedInput(value: {
        v: number;
        rg: number;
    }): void;
    onBlueInput(value: {
        v: number;
        rg: number;
    }): void;
    onGreenInput(value: {
        v: number;
        rg: number;
    }): void;
    onHueInput(value: {
        v: number;
        rg: number;
    }): void;
    onValueInput(value: {
        v: number;
        rg: number;
    }): void;
    onAlphaInput(value: {
        v: number;
        rg: number;
    }): void;
    onLightnessInput(value: {
        v: number;
        rg: number;
    }): void;
    onSaturationInput(value: {
        v: number;
        rg: number;
    }): void;
    onCyanInput(value: {
        v: number;
        rg: number;
    }): void;
    onMagentaInput(value: {
        v: number;
        rg: number;
    }): void;
    onYellowInput(value: {
        v: number;
        rg: number;
    }): void;
    onBlackInput(value: {
        v: number;
        rg: number;
    }): void;
    onAddPresetColor(event: any, value: string): void;
    onRemovePresetColor(event: any, value: string): void;
    private openColorPicker;
    private closeColorPicker;
    private updateColorPicker;
    private setDialogPosition;
    private isDescendant;
    private createDialogBox;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "color-picker", never, {}, {}, never, never, true, never>;
}

declare class ColorPickerDirective implements OnChanges, OnDestroy {
    private readonly injector;
    private readonly appRef;
    private readonly vcRef;
    private readonly elRef;
    private dialog;
    private dialogCreated;
    private ignoreChanges;
    private cmpRef;
    private viewAttachedToAppRef;
    colorPicker: string;
    cpWidth: string;
    cpHeight: string;
    cpToggle: boolean;
    cpDisabled: boolean;
    cpIgnoredElements: any;
    cpFallbackColor: string;
    cpColorMode: ColorMode;
    cpCmykEnabled: boolean;
    cpOutputFormat: OutputFormat;
    cpAlphaChannel: AlphaChannel;
    cpDisableInput: boolean;
    cpDialogDisplay: string;
    cpSaveClickOutside: boolean;
    cpCloseClickOutside: boolean;
    cpUseRootViewContainer: boolean;
    cpPosition: string;
    cpPositionOffset: string;
    cpPositionRelativeToArrow: boolean;
    cpOKButton: boolean;
    cpOKButtonText: string;
    cpOKButtonClass: string;
    cpCancelButton: boolean;
    cpCancelButtonText: string;
    cpCancelButtonClass: string;
    cpEyeDropper: boolean;
    cpPresetLabel: string;
    cpPresetColors: string[];
    cpPresetColorsClass: string;
    cpMaxPresetColorsLength: number;
    cpPresetEmptyMessage: string;
    cpPresetEmptyMessageClass: string;
    cpAddColorButton: boolean;
    cpAddColorButtonText: string;
    cpAddColorButtonClass: string;
    cpRemoveColorButtonClass: string;
    cpArrowPosition: number;
    cpExtraTemplate: TemplateRef<any>;
    cpInputChange: EventEmitter<{
        input: string;
        value: number | string;
        color: string;
    }>;
    cpToggleChange: EventEmitter<boolean>;
    cpSliderChange: EventEmitter<{
        slider: string;
        value: string | number;
        color: string;
    }>;
    cpSliderDragEnd: EventEmitter<{
        slider: string;
        color: string;
    }>;
    cpSliderDragStart: EventEmitter<{
        slider: string;
        color: string;
    }>;
    colorPickerOpen: EventEmitter<string>;
    colorPickerClose: EventEmitter<string>;
    colorPickerCancel: EventEmitter<string>;
    colorPickerSelect: EventEmitter<string>;
    colorPickerChange: EventEmitter<string>;
    cpCmykColorChange: EventEmitter<string>;
    cpPresetColorsChange: EventEmitter<any>;
    handleClick(): void;
    handleFocus(): void;
    handleInput(event: any): void;
    ngOnDestroy(): void;
    ngOnChanges(changes: any): void;
    openDialog(): void;
    closeDialog(): void;
    cmykChanged(value: string): void;
    stateChanged(state: boolean): void;
    colorChanged(value: string, ignore?: boolean): void;
    colorSelected(value: string): void;
    colorCanceled(): void;
    inputFocus(): void;
    inputChange(event: any): void;
    inputChanged(event: any): void;
    sliderChanged(event: any): void;
    sliderDragEnd(event: {
        slider: string;
        color: string;
    }): void;
    sliderDragStart(event: {
        slider: string;
        color: string;
    }): void;
    presetColorsChanged(value: any[]): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerDirective, "[colorPicker]", ["ngxColorPicker"], { "colorPicker": { "alias": "colorPicker"; "required": false; }; "cpWidth": { "alias": "cpWidth"; "required": false; }; "cpHeight": { "alias": "cpHeight"; "required": false; }; "cpToggle": { "alias": "cpToggle"; "required": false; }; "cpDisabled": { "alias": "cpDisabled"; "required": false; }; "cpIgnoredElements": { "alias": "cpIgnoredElements"; "required": false; }; "cpFallbackColor": { "alias": "cpFallbackColor"; "required": false; }; "cpColorMode": { "alias": "cpColorMode"; "required": false; }; "cpCmykEnabled": { "alias": "cpCmykEnabled"; "required": false; }; "cpOutputFormat": { "alias": "cpOutputFormat"; "required": false; }; "cpAlphaChannel": { "alias": "cpAlphaChannel"; "required": false; }; "cpDisableInput": { "alias": "cpDisableInput"; "required": false; }; "cpDialogDisplay": { "alias": "cpDialogDisplay"; "required": false; }; "cpSaveClickOutside": { "alias": "cpSaveClickOutside"; "required": false; }; "cpCloseClickOutside": { "alias": "cpCloseClickOutside"; "required": false; }; "cpUseRootViewContainer": { "alias": "cpUseRootViewContainer"; "required": false; }; "cpPosition": { "alias": "cpPosition"; "required": false; }; "cpPositionOffset": { "alias": "cpPositionOffset"; "required": false; }; "cpPositionRelativeToArrow": { "alias": "cpPositionRelativeToArrow"; "required": false; }; "cpOKButton": { "alias": "cpOKButton"; "required": false; }; "cpOKButtonText": { "alias": "cpOKButtonText"; "required": false; }; "cpOKButtonClass": { "alias": "cpOKButtonClass"; "required": false; }; "cpCancelButton": { "alias": "cpCancelButton"; "required": false; }; "cpCancelButtonText": { "alias": "cpCancelButtonText"; "required": false; }; "cpCancelButtonClass": { "alias": "cpCancelButtonClass"; "required": false; }; "cpEyeDropper": { "alias": "cpEyeDropper"; "required": false; }; "cpPresetLabel": { "alias": "cpPresetLabel"; "required": false; }; "cpPresetColors": { "alias": "cpPresetColors"; "required": false; }; "cpPresetColorsClass": { "alias": "cpPresetColorsClass"; "required": false; }; "cpMaxPresetColorsLength": { "alias": "cpMaxPresetColorsLength"; "required": false; }; "cpPresetEmptyMessage": { "alias": "cpPresetEmptyMessage"; "required": false; }; "cpPresetEmptyMessageClass": { "alias": "cpPresetEmptyMessageClass"; "required": false; }; "cpAddColorButton": { "alias": "cpAddColorButton"; "required": false; }; "cpAddColorButtonText": { "alias": "cpAddColorButtonText"; "required": false; }; "cpAddColorButtonClass": { "alias": "cpAddColorButtonClass"; "required": false; }; "cpRemoveColorButtonClass": { "alias": "cpRemoveColorButtonClass"; "required": false; }; "cpArrowPosition": { "alias": "cpArrowPosition"; "required": false; }; "cpExtraTemplate": { "alias": "cpExtraTemplate"; "required": false; }; }, { "cpInputChange": "cpInputChange"; "cpToggleChange": "cpToggleChange"; "cpSliderChange": "cpSliderChange"; "cpSliderDragEnd": "cpSliderDragEnd"; "cpSliderDragStart": "cpSliderDragStart"; "colorPickerOpen": "colorPickerOpen"; "colorPickerClose": "colorPickerClose"; "colorPickerCancel": "colorPickerCancel"; "colorPickerSelect": "colorPickerSelect"; "colorPickerChange": "colorPickerChange"; "cpCmykColorChange": "cpCmykColorChange"; "cpPresetColorsChange": "cpPresetColorsChange"; }, never, never, true, never>;
}

declare class ColorPickerService {
    private active;
    setActive(active: ColorPickerComponent | null): void;
    hsva2hsla(hsva: Hsva): Hsla;
    hsla2hsva(hsla: Hsla): Hsva;
    hsvaToRgba(hsva: Hsva): Rgba;
    cmykToRgb(cmyk: Cmyk): Rgba;
    rgbaToCmyk(rgba: Rgba): Cmyk;
    rgbaToHsva(rgba: Rgba): Hsva;
    rgbaToHex(rgba: Rgba, allowHex8?: boolean): string;
    normalizeCMYK(cmyk: Cmyk): Cmyk;
    denormalizeCMYK(cmyk: Cmyk): Cmyk;
    denormalizeRGBA(rgba: Rgba): Rgba;
    stringToHsva(colorString?: string, allowHex8?: boolean): Hsva | null;
    outputFormat(hsva: Hsva, outputFormat: string, alphaChannel: string | null): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<ColorPickerService>;
}

export { Cmyk, ColorPickerComponent, ColorPickerDirective, ColorPickerService, Hsla, Hsva, Rgba, SliderDirective, TextDirective };
export type { AlphaChannel, ColorMode, OutputFormat };