nxt-color-picker/lib/color-picker.directive.d.ts

Color picker widget for Angular

import { Overlay } from '@angular/cdk/overlay';
import { ApplicationRef, ElementRef, EventEmitter, Injector, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';
import { Rgba } from '../util/formats';
import { AlphaChannel, ColorMode, DialogDisplay, DialogPosition, InputChangeEvent, OutputFormat, SliderChangeEvent } from '../util/types';
import * as i0 from "@angular/core";
export 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>;
}