nxt-color-picker/index.d.ts

Color picker widget for Angular

import * as i6 from '@angular/cdk/overlay';
import { Overlay } from '@angular/cdk/overlay';
import * as i0 from '@angular/core';
import { OnChanges, OnDestroy, EventEmitter, Injector, ApplicationRef, ViewContainerRef, ElementRef, SimpleChanges, OnInit, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
import * as i5 from '@angular/common';

declare class Cmyk {
    c: number;
    m: number;
    y: number;
    k: number;
    a: number;
    /** Wheter values are normalized to [0..1] */
    readonly normalized: boolean;
    constructor(c: number, m: number, y: number, k: number, a: number, 
    /** Wheter values are normalized to [0..1] */
    normalized?: boolean);
}
declare class Hsla {
    h: number;
    s: number;
    l: number;
    a: number;
    /** Wheter values are normalized to [0..1] */
    readonly normalized: boolean;
    constructor(h: number, s: number, l: number, a: number, 
    /** Wheter values are normalized to [0..1] */
    normalized?: boolean);
}
declare class Hsva {
    h: number;
    s: number;
    v: number;
    a: number;
    /** Wheter values are normalized to [0..1] */
    readonly normalized: boolean;
    constructor(h: number, s: number, v: number, a: number, 
    /** Wheter values are normalized to [0..1] */
    normalized?: boolean);
}
declare class Rgba {
    r: number;
    g: number;
    b: number;
    a: number;
    /** Wheter values are normalized to [0..1] */
    readonly normalized: boolean;
    constructor(r: number, g: number, b: number, a: number, 
    /** Wheter values are normalized to [0..1] */
    normalized?: boolean);
}

declare enum ColorFormatEnum {
    hex = "hex",
    rgba = "rgba",
    hsla = "hsla",
    cmyk = "cmyk"
}
type ColorFormat = `${ColorFormatEnum}`;
declare const AlphaEnabledFormats: Set<"hex" | "rgba" | "hsla" | "cmyk">;
declare enum OutputFormatEnum {
    auto = "auto",
    hex = "hex",
    rgba = "rgba",
    hsla = "hsla"
}
type OutputFormat = `${OutputFormatEnum}`;
declare enum AlphaChannelEnum {
    enabled = "enabled",
    disabled = "disabled",
    always = "always",
    forced = "forced"
}
type AlphaChannel = `${AlphaChannelEnum}`;
declare enum DialogPositionEnum {
    auto = "auto",
    top = "top",
    left = "left",
    right = "right",
    bottom = "bottom"
}
type DialogPosition = `${DialogPositionEnum}`;
declare enum DialogDisplayEnum {
    popup = "popup",
    inline = "inline"
}
type DialogDisplay = `${DialogDisplayEnum}`;
type ColorMode = 'color' | 'c' | '1' | 'grayscale' | 'g' | '2' | 'presets' | 'p' | '3';
interface InputChangeEvent {
    input: string;
    valid: boolean;
    value: number | string;
    color: string;
}
interface SliderChangeEvent {
    slider: string;
    value?: number | string;
    color: string;
}

declare class ColorPickerDirective implements OnChanges, OnDestroy {
    private injector;
    private appRef;
    private vcRef;
    private elRef;
    private overlay;
    private dialog?;
    private dialogCreated;
    private ignoreChanges;
    private cmpRef?;
    private readonly _callbacks;
    private overlayRef?;
    private get resIgnoredElements();
    /** The color to show in the color picker dialog */
    nxtColor?: string;
    /** Use this option to set color picker dialog width */
    width: string;
    /** Use this option to force color picker dialog height */
    height: string;
    /** Sets the default open / close state of the color picker */
    toggle: boolean;
    /** Disables opening of the color picker dialog via toggle */
    disabled: boolean;
    /** Dialog color mode */
    mode: ColorMode;
    /** Enables CMYK input format and color change event */
    cmykEnabled: boolean;
    /** Output color format */
    outputFormat: OutputFormat;
    /** Alpha channel mode */
    alphaChannel: AlphaChannel;
    /** Used when the color is not well-formed or is undefined */
    fallbackColor?: string;
    /** Dialog position */
    position: DialogPosition | DialogPosition[];
    /** Dialog offset percentage relative to the directive element */
    positionOffset: number;
    /**
     * Show label for preset colors
     *
     * If string is given, it overrides the default label.
     */
    presetLabel: boolean | string;
    /** Array of preset colors to show in the color picker dialog */
    presetColors?: string[];
    /** Disables / hides the color input field from the dialog */
    disableInput: boolean;
    /** Dialog positioning mode */
    dialogDisplay: DialogDisplay;
    /** Array of HTML elements that will be ignored when clicked */
    ignoredElements?: any[];
    /** Save currently selected color when user clicks outside */
    saveClickOutside: boolean;
    /** Close the color picker dialog when user clicks outside */
    closeClickOutside: boolean;
    /** Show an OK / Apply button which saves the color */
    okButton: boolean;
    /** Show a Cancel / Reset button which resets the color */
    cancelButton: boolean;
    /** Show buttons to add / remove preset colors */
    presetColorsEditable: boolean;
    /** Use this option to set the max colors allowed in presets */
    maxPresetColors?: number;
    /**
     * Create dialog component in the root view container
     *
     * Note: The root component needs to have public viewContainerRef.
     */
    useRootViewContainer: boolean;
    /** Current color value, emit when dialog is isOpen */
    open: EventEmitter<string>;
    /** Current color value, emit when dialog is closed */
    close: EventEmitter<string>;
    /** Input name and its value, emit when user changes color through inputs */
    inputChange: EventEmitter<InputChangeEvent>;
    /** Status of the dialog, emit when dialog is isOpen / closed */
    toggleChange: EventEmitter<boolean>;
    /** Slider name and current color, emit when slider dragging starts */
    sliderDragStart: EventEmitter<SliderChangeEvent>;
    /** Slider name and its value, emit when user changes color through slider */
    sliderChange: EventEmitter<SliderChangeEvent>;
    /** Slider name and current color, emit when slider dragging ends */
    sliderDragEnd: EventEmitter<SliderChangeEvent>;
    /** Color select canceled, emit when Cancel button is pressed */
    colorSelect: EventEmitter<string>;
    /** Selected color value, emit when OK button pressed or user clicks outside (if saveClickOutside is true) */
    colorSelectCancel: EventEmitter<void>;
    /** Changed color value, emit when color changes */
    nxtColorChange: EventEmitter<string>;
    /** Outputs the color as CMYK string if CMYK is enabled */
    cmykColorChange: EventEmitter<string>;
    /** Preset colors, emit when preset color is added / removed */
    presetColorsChange: EventEmitter<string[]>;
    /** @internal */
    constructor(injector: Injector, appRef: ApplicationRef, vcRef: ViewContainerRef, elRef: ElementRef, overlay: Overlay);
    /** @internal */
    handleOpen(event: Event): void;
    /** @internal */
    handleInput(event: Event): void;
    /** @internal */
    ngOnDestroy(): void;
    /** @internal */
    ngOnChanges(changes: SimpleChanges): void;
    openDialog(): void;
    closeDialog(): void;
    /**
     * Get text color mode to ensure good contrast with selected color
     *
     * @param bg    Solid background color; this is used when selected color has transparency
     * @param fg    Foreground color, defaults to current picker value
     * @returns
     */
    textColorMode(bg?: string | Rgba, fg?: Rgba | undefined): "light" | "dark";
    private dispose;
    private create;
    private setupDialog;
    private getPositions;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerDirective, "[nxtColor]", ["nxtColorPicker"], { "nxtColor": { "alias": "nxtColor"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "toggle": { "alias": "toggle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "cmykEnabled": { "alias": "cmykEnabled"; "required": false; }; "outputFormat": { "alias": "outputFormat"; "required": false; }; "alphaChannel": { "alias": "alphaChannel"; "required": false; }; "fallbackColor": { "alias": "fallbackColor"; "required": false; }; "position": { "alias": "position"; "required": false; }; "positionOffset": { "alias": "positionOffset"; "required": false; }; "presetLabel": { "alias": "presetLabel"; "required": false; }; "presetColors": { "alias": "presetColors"; "required": false; }; "disableInput": { "alias": "disableInput"; "required": false; }; "dialogDisplay": { "alias": "dialogDisplay"; "required": false; }; "ignoredElements": { "alias": "ignoredElements"; "required": false; }; "saveClickOutside": { "alias": "saveClickOutside"; "required": false; }; "closeClickOutside": { "alias": "closeClickOutside"; "required": false; }; "okButton": { "alias": "okButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "presetColorsEditable": { "alias": "presetColorsEditable"; "required": false; }; "maxPresetColors": { "alias": "maxPresetColors"; "required": false; }; "useRootViewContainer": { "alias": "useRootViewContainer"; "required": false; }; }, { "open": "open"; "close": "close"; "inputChange": "inputChange"; "toggleChange": "toggleChange"; "sliderDragStart": "sliderDragStart"; "sliderChange": "sliderChange"; "sliderDragEnd": "sliderDragEnd"; "colorSelect": "colorSelect"; "colorSelectCancel": "colorSelectCancel"; "nxtColorChange": "nxtColorChange"; "cmykColorChange": "cmykColorChange"; "presetColorsChange": "presetColorsChange"; }, never, never, false, never>;
}

/**
 * @internal
 */
declare class SliderPosition {
    h: number;
    s: number;
    v: number;
    a: number;
    constructor(h: number, s: number, v: number, a: number);
}
/**
 * @internal
 */
declare enum ColorModeInternal {
    color = 0,
    grayscale = 1,
    presets = 2
}
/**
 * @internal
 */
type CursorEvent = {
    v: number;
    rgX: number;
} | {
    v: number;
    rgY: number;
} | {
    v: number;
    s: number;
    rgX: number;
    rgY: number;
};
/**
 * @internal
 */
type TextEvent = string | {
    v: number;
    rg: number;
};
/**
 * @internal
 */
interface DirectiveCallbacks {
    stateChanged(state: boolean): void;
    cmykChanged(valuse: string, ignore?: boolean): void;
    colorChanged(value: string, ignore?: boolean): void;
    colorSelectCanceled(): void;
    colorSelected(value: string): void;
    inputChanged(event: InputChangeEvent): void;
    sliderDragStart(event: SliderChangeEvent): void;
    sliderChanged(event: SliderChangeEvent): void;
    sliderDragEnd(event: SliderChangeEvent): void;
    presetColorsChanged(value?: string[]): void;
}
/**
 * @internal
 */
interface DialogConfig {
    callbacks: DirectiveCallbacks;
    elementRef: ElementRef;
    color: any;
    width: string;
    height: string;
    dialogDisplay: DialogDisplay;
    fallbackColor?: string;
    mode: ColorMode;
    cmykEnabled: boolean;
    alphaChannel: AlphaChannel;
    outputFormat: OutputFormat;
    disableInput: boolean;
    ignoredElements?: any[];
    saveClickOutside: boolean;
    closeClickOutside: boolean;
    useRootViewContainer: boolean;
    position: DialogPosition | DialogPosition[];
    presetLabel: boolean | string;
    presetColors?: string[];
    maxPresetColors?: number;
    okButton: boolean;
    cancelButton: boolean;
    presetColorsEditable: boolean;
}

/**
 * @internal
 */
declare class TextDirective {
    rg?: number;
    text: any;
    newValue: EventEmitter<TextEvent>;
    inputChange(event: Event): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<TextDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<TextDirective, "[nxtText]", never, { "rg": { "alias": "rg"; "required": false; }; "text": { "alias": "nxtText"; "required": false; }; }, { "newValue": "newValue"; }, never, never, false, never>;
}

/**
 * @internal
 */
declare class SliderDirective {
    private elRef;
    private isMoving;
    rgX?: number;
    rgY?: number;
    slider?: string;
    dragEnd: EventEmitter<any>;
    dragStart: EventEmitter<any>;
    newValue: EventEmitter<CursorEvent>;
    constructor(elRef: ElementRef);
    onStart(event: MouseEvent | TouchEvent): void;
    onMove(event: MouseEvent | TouchEvent): void;
    onStop(event: MouseEvent | TouchEvent): void;
    private getX;
    private getY;
    private setCursor;
    static ɵfac: i0.ɵɵFactoryDeclaration<SliderDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<SliderDirective, "[nxtSlider]", never, { "rgX": { "alias": "rgX"; "required": false; }; "rgY": { "alias": "rgY"; "required": false; }; "slider": { "alias": "nxtSlider"; "required": false; }; }, { "dragEnd": "dragEnd"; "dragStart": "dragStart"; "newValue": "newValue"; }, never, never, false, never>;
}

/**
 * @internal
 */
declare class ColorPickerService {
    private active?;
    constructor();
    setActive(active: ColorPickerComponent): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<ColorPickerService>;
}

/**
 * @internal
 */
declare class ColorPickerComponent implements OnInit, OnDestroy, AfterViewChecked {
    private elRef;
    private cdRef;
    private service;
    readonly colorModeInternal: typeof ColorModeInternal;
    private hsva?;
    private cmyk?;
    private cmykColor;
    private outputColor;
    private initialColor;
    private fallbackColor?;
    private sliderH?;
    private dialogInputFields;
    private callbacks?;
    show: boolean;
    format: ColorFormat;
    slider?: SliderPosition;
    hexText?: string;
    hexAlpha?: number;
    cmykText?: Cmyk;
    hslaText?: Hsla;
    rgbaText?: Rgba;
    selectedColor: string;
    hueSliderColor?: string;
    alphaSliderColor?: string;
    svSliderLight: boolean;
    hueSliderLight: boolean;
    valueSliderLight: boolean;
    alphaSliderLight: boolean;
    width?: string;
    height?: string;
    mode: ColorModeInternal;
    cmykEnabled: boolean;
    alphaChannel: AlphaChannel;
    outputFormat: OutputFormat;
    disableInput: boolean;
    dialogDisplay?: DialogDisplay;
    ignoredElements?: any[];
    saveClickOutside: boolean;
    closeClickOutside: boolean;
    okButton: boolean;
    cancelButton: boolean;
    presetLabel: boolean | string;
    presetColors?: string[];
    maxPresetColors?: number;
    presetColorsEditable: boolean;
    constructor(elRef: ElementRef, cdRef: ChangeDetectorRef, service: ColorPickerService);
    onCancel(event: Event): void;
    onAccept(event: Event): void;
    onFocusChange(event: MouseEvent | FocusEvent): void;
    ngOnInit(): void;
    ngOnDestroy(): void;
    ngAfterViewChecked(): void;
    openDialog(color: any, emit?: boolean): void;
    closeDialog(): void;
    setupDialog(config: DialogConfig): void;
    setInitialColor(color: string): void;
    setPresetConfig(presetLabel: boolean | string, presetColors?: string[]): void;
    setColorFromString(value: string, emit?: boolean, update?: boolean): void;
    stringToRgba(value: string): string | undefined;
    onDragEnd(slider: string): void;
    onDragStart(slider: string): void;
    onFormatToggle(change: number): void;
    onColorChange(value: CursorEvent): void;
    onHueChange(value: CursorEvent): void;
    onValueChange(value: CursorEvent): void;
    onAlphaChange(value: CursorEvent): void;
    onHexInput(value?: TextEvent): void;
    onRedInput(value: TextEvent): void;
    onBlueInput(value: TextEvent): void;
    onGreenInput(value: TextEvent): void;
    onHueInput(value: TextEvent): void;
    onValueInput(value: TextEvent): void;
    onAlphaInput(value: TextEvent): void;
    onLightnessInput(value: TextEvent): void;
    onSaturationInput(value: TextEvent): void;
    onCyanInput(value: TextEvent): void;
    onMagentaInput(value: TextEvent): void;
    onYellowInput(value: TextEvent): void;
    onBlackInput(value: TextEvent): void;
    onAddPresetColor(value: string): void;
    onRemovePresetColor(value: string): void;
    private openColorPicker;
    private closeColorPicker;
    private updateColorPicker;
    fill(n: number): any[];
    formatAlpha(a?: number): string | undefined;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "nxt-color-picker", never, {}, {}, never, never, false, never>;
}

declare class ColorPickerModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<ColorPickerModule, [typeof TextDirective, typeof SliderDirective, typeof ColorPickerComponent, typeof ColorPickerDirective], [typeof i5.CommonModule, typeof i6.OverlayModule], [typeof ColorPickerDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<ColorPickerModule>;
}

declare function hsvaToHsla(hsva: Hsva): Hsla;
declare function hslaToHsva(hsla: Hsla): Hsva;
declare function hsvaToRgba(hsva: Hsva): Rgba;
declare function rgbaToCmyk(rgba: Rgba): Cmyk;
declare function rgbaToHsva(rgba: Rgba): Hsva;
declare function rgbaToHex(rgba: Rgba, allowHex8?: boolean): string;
declare function cmykToRgb(cmyk: Cmyk): Rgba;
declare function normalizeCMYK(cmyk: Cmyk): Cmyk;
declare function denormalizeCMYK(cmyk: Cmyk): Cmyk;
declare function normalizeRGBA(rgba: Rgba): Rgba;
declare function denormalizeRGBA(rgba: Rgba): Rgba;
declare function normalizeHSVA(hsva: Hsva): Hsva;
declare function denormalizeHSVA(hsva: Hsva): Hsva;
declare function normalizeHSLA(hsla: Hsla): Hsla;
declare function denormalizeHSLA(hsla: Hsla): Hsla;
declare function stringToHsva(colorString?: string, allowHex8?: boolean): Hsva | undefined;
declare function stringToCmyk(colorString?: string, allowHex8?: boolean): Cmyk | undefined;
declare function formatOutput(hsva: Hsva, outputFormat: OutputFormat, alphaChannel?: AlphaChannel): string;
declare function formatCmyk(cmyk: Cmyk, alphaChannel: AlphaChannel): string;
declare function calculateContrast(foreground: Rgba, background: Rgba): number;
declare function compositeColors(foreground: Rgba, background: Rgba): Rgba;
declare function compositeAlpha(foregroundAlpha: number, backgroundAlpha: number): number;
declare function compositeComponent(fgC: number, fgA: number, bgC: number, bgA: number, a: number): number;
declare function calculateLuminance(color: Rgba): number;
declare function calculateMinimumAlpha(foreground: Rgba, background: Rgba, minContrastRatio: number): number;

export { AlphaChannelEnum, AlphaEnabledFormats, Cmyk, ColorFormatEnum, ColorPickerDirective, ColorPickerModule, DialogDisplayEnum, DialogPositionEnum, Hsla, Hsva, OutputFormatEnum, Rgba, calculateContrast, calculateLuminance, calculateMinimumAlpha, cmykToRgb, compositeAlpha, compositeColors, compositeComponent, denormalizeCMYK, denormalizeHSLA, denormalizeHSVA, denormalizeRGBA, formatCmyk, formatOutput, hslaToHsva, hsvaToHsla, hsvaToRgba, normalizeCMYK, normalizeHSLA, normalizeHSVA, normalizeRGBA, rgbaToCmyk, rgbaToHex, rgbaToHsva, stringToCmyk, stringToHsva };
export type { AlphaChannel, ColorFormat, ColorMode, DialogDisplay, DialogPosition, InputChangeEvent, OutputFormat, SliderChangeEvent };