ngx-color-picker

ngx-color-picker

Version 19.0.0
Published 1 month ago
296 kB
1 dependency
MIT license

Install

npm i ngx-color-picker

yarn add ngx-color-picker

pnpm add ngx-color-picker

Overview

Color picker widget for Angular

Index

Classes

Cmyk
- a
- c
- k
- m
- y
ColorPickerComponent
ColorPickerDirective
ColorPickerService
Hsla
- a
- h
- l
- s
Hsva
- a
- h
- s
- v
Rgba
- a
- b
- g
- r
SliderDirective
TextDirective

Classes

class Cmyk

class Cmyk {}

constructor

constructor(c: number, m: number, y: number, k: number, a?: number);

property a

a: number;

property c

c: number;

property k

k: number;

property m

m: number;

property y

y: number;

class ColorPickerComponent

class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {}

constructor

constructor(
    ngZone: NgZone,
    elRef: ElementRef,
    cdRef: ChangeDetectorRef,
    document: Document,
    platformId: string,
    service: ColorPickerService
);

property alphaSlider

alphaSlider: ElementRef;

property alphaSliderColor

alphaSliderColor: string;

property arrowTop

arrowTop: number;

property cmykText

cmykText: Cmyk;

property cpAddColorButton

cpAddColorButton: boolean;

property cpAddColorButtonClass

cpAddColorButtonClass: string;

property cpAddColorButtonText

cpAddColorButtonText: string;

property cpAlphaChannel

cpAlphaChannel: AlphaChannel;

property cpArrowPosition

cpArrowPosition: number;

property cpCancelButton

cpCancelButton: boolean;

property cpCancelButtonClass

cpCancelButtonClass: string;

property cpCancelButtonText

cpCancelButtonText: string;

property cpCloseClickOutside

cpCloseClickOutside: boolean;

property cpCmykEnabled

cpCmykEnabled: boolean;

property cpColorMode

cpColorMode: number;

property cpDialogDisplay

cpDialogDisplay: string;

property cpDisableInput

cpDisableInput: boolean;

property cpExtraTemplate

cpExtraTemplate: TemplateRef<any>;

property cpEyeDropper

cpEyeDropper: boolean;

property cpHeight

cpHeight: number;

property cpIgnoredElements

cpIgnoredElements: any;

property cpMaxPresetColorsLength

cpMaxPresetColorsLength: number;

property cpOKButton

cpOKButton: boolean;

property cpOKButtonClass

cpOKButtonClass: string;

property cpOKButtonText

cpOKButtonText: string;

property cpOutputFormat

cpOutputFormat: OutputFormat;

property cpPosition

cpPosition: string;

property cpPositionOffset

cpPositionOffset: number;

property cpPresetColors

cpPresetColors: string[];

property cpPresetColorsClass

cpPresetColorsClass: string;

property cpPresetEmptyMessage

cpPresetEmptyMessage: string;

property cpPresetEmptyMessageClass

cpPresetEmptyMessageClass: string;

property cpPresetLabel

cpPresetLabel: string;

property cpRemoveColorButtonClass

cpRemoveColorButtonClass: string;

property cpSaveClickOutside

cpSaveClickOutside: boolean;

property cpTriggerElement

cpTriggerElement: ElementRef;

property cpUsePosition

cpUsePosition: string;

property cpWidth

cpWidth: number;

property dialogElement

dialogElement: ElementRef;

property eyeDropperSupported

eyeDropperSupported: boolean;

property format

format: ColorFormats;

property hexAlpha

hexAlpha: number;

property hexText

hexText: string;

property hidden

hidden: boolean;

property hslaText

hslaText: Hsla;

property hueSlider

hueSlider: ElementRef;

property hueSliderColor

hueSliderColor: string;

property left

left: number;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    ColorPickerComponent,
    'color-picker',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;

property position

position: string;

property rgbaText

rgbaText: Rgba;

property selectedColor

selectedColor: string;

property show

show: boolean;

property slider

slider: SliderPosition;

property top

top: number;

method closeDialog

closeDialog: () => void;

method handleEnter

handleEnter: (event: any) => void;

method handleEsc

handleEsc: (event: any) => void;

method ngAfterViewInit

ngAfterViewInit: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method ngOnInit

ngOnInit: () => void;

method onAcceptColor

onAcceptColor: (event: Event) => void;

method onAddPresetColor

onAddPresetColor: (event: any, value: string) => void;

method onAlphaChange

onAlphaChange: (value: { v: number; rgX: number }) => void;

method onAlphaInput

onAlphaInput: (value: { v: number; rg: number }) => void;

method onBlackInput

onBlackInput: (value: { v: number; rg: number }) => void;

method onBlueInput

onBlueInput: (value: { v: number; rg: number }) => void;

method onCancelColor

onCancelColor: (event: Event) => void;

method onColorChange

onColorChange: (value: {
    s: number;
    v: number;
    rgX: number;
    rgY: number;
}) => void;

method onCyanInput

onCyanInput: (value: { v: number; rg: number }) => void;

method onDragEnd

onDragEnd: (slider: string) => void;

method onDragStart

onDragStart: (slider: string) => void;

method onEyeDropper

onEyeDropper: () => void;

method onFormatToggle

onFormatToggle: (change: number) => void;

method onGreenInput

onGreenInput: (value: { v: number; rg: number }) => void;

method onHexInput

onHexInput: (value: string | null) => void;

method onHueChange

onHueChange: (value: { v: number; rgX: number }) => void;

method onHueInput

onHueInput: (value: { v: number; rg: number }) => void;

method onLightnessInput

onLightnessInput: (value: { v: number; rg: number }) => void;

method onMagentaInput

onMagentaInput: (value: { v: number; rg: number }) => void;

method onMouseDown

onMouseDown: (event: MouseEvent) => void;

method onRedInput

onRedInput: (value: { v: number; rg: number }) => void;

method onRemovePresetColor

onRemovePresetColor: (event: any, value: string) => void;

method onResize

onResize: () => void;

method onSaturationInput

onSaturationInput: (value: { v: number; rg: number }) => void;

method onValueChange

onValueChange: (value: { v: number; rgX: number }) => void;

method onValueInput

onValueInput: (value: { v: number; rg: number }) => void;

method onYellowInput

onYellowInput: (value: { v: number; rg: number }) => void;

method openDialog

openDialog: (color: any, emit?: boolean) => void;

method setColorFromString

setColorFromString: (value: string, emit?: boolean, update?: boolean) => void;

method setColorMode

setColorMode: (mode: string) => void;

method setInitialColor

setInitialColor: (color: any) => void;

method setPresetConfig

setPresetConfig: (cpPresetLabel: string, cpPresetColors: string[]) => void;

method setupDialog

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;

class ColorPickerDirective

class ColorPickerDirective implements OnChanges, OnDestroy {}

constructor

constructor(
    injector: Injector,
    appRef: ApplicationRef,
    vcRef: ViewContainerRef,
    elRef: ElementRef
);

property colorPicker

colorPicker: string;

property colorPickerCancel

colorPickerCancel: EventEmitter<string>;

property colorPickerChange

colorPickerChange: EventEmitter<string>;

property colorPickerClose

colorPickerClose: EventEmitter<string>;

property colorPickerOpen

colorPickerOpen: EventEmitter<string>;

property colorPickerSelect

colorPickerSelect: EventEmitter<string>;

property cpAddColorButton

cpAddColorButton: boolean;

property cpAddColorButtonClass

cpAddColorButtonClass: string;

property cpAddColorButtonText

cpAddColorButtonText: string;

property cpAlphaChannel

cpAlphaChannel: AlphaChannel;

property cpArrowPosition

cpArrowPosition: number;

property cpCancelButton

cpCancelButton: boolean;

property cpCancelButtonClass

cpCancelButtonClass: string;

property cpCancelButtonText

cpCancelButtonText: string;

property cpCloseClickOutside

cpCloseClickOutside: boolean;

property cpCmykColorChange

cpCmykColorChange: EventEmitter<string>;

property cpCmykEnabled

cpCmykEnabled: boolean;

property cpColorMode

cpColorMode: ColorMode;

property cpDialogDisplay

cpDialogDisplay: string;

property cpDisabled

cpDisabled: boolean;

property cpDisableInput

cpDisableInput: boolean;

property cpExtraTemplate

cpExtraTemplate: TemplateRef<any>;

property cpEyeDropper

cpEyeDropper: boolean;

property cpFallbackColor

cpFallbackColor: string;

property cpHeight

cpHeight: string;

property cpIgnoredElements

cpIgnoredElements: any;

property cpInputChange

cpInputChange: EventEmitter<{
    input: string;
    value: number | string;
    color: string;
}>;

property cpMaxPresetColorsLength

cpMaxPresetColorsLength: number;

property cpOKButton

cpOKButton: boolean;

property cpOKButtonClass

cpOKButtonClass: string;

property cpOKButtonText

cpOKButtonText: string;

property cpOutputFormat

cpOutputFormat: OutputFormat;

property cpPosition

cpPosition: string;

property cpPositionOffset

cpPositionOffset: string;

property cpPositionRelativeToArrow

cpPositionRelativeToArrow: boolean;

property cpPresetColors

cpPresetColors: string[];

property cpPresetColorsChange

cpPresetColorsChange: EventEmitter<any>;

property cpPresetColorsClass

cpPresetColorsClass: string;

property cpPresetEmptyMessage

cpPresetEmptyMessage: string;

property cpPresetEmptyMessageClass

cpPresetEmptyMessageClass: string;

property cpPresetLabel

cpPresetLabel: string;

property cpRemoveColorButtonClass

cpRemoveColorButtonClass: string;

property cpSaveClickOutside

cpSaveClickOutside: boolean;

property cpSliderChange

cpSliderChange: EventEmitter<{
    slider: string;
    value: string | number;
    color: string;
}>;

property cpSliderDragEnd

cpSliderDragEnd: EventEmitter<{ slider: string; color: string }>;

property cpSliderDragStart

cpSliderDragStart: EventEmitter<{ slider: string; color: string }>;

property cpToggle

cpToggle: boolean;

property cpToggleChange

cpToggleChange: EventEmitter<boolean>;

property cpUseRootViewContainer

cpUseRootViewContainer: boolean;

property cpWidth

cpWidth: string;

property ɵdir

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
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerDirective, never>;

method closeDialog

closeDialog: () => void;

method cmykChanged

cmykChanged: (value: string) => void;

method colorCanceled

colorCanceled: () => void;

method colorChanged

colorChanged: (value: string, ignore?: boolean) => void;

method colorSelected

colorSelected: (value: string) => void;

method handleClick

handleClick: () => void;

method handleFocus

handleFocus: () => void;

method handleInput

handleInput: (event: any) => void;

method inputChange

inputChange: (event: any) => void;

method inputChanged

inputChanged: (event: any) => void;

method inputFocus

inputFocus: () => void;

method ngOnChanges

ngOnChanges: (changes: any) => void;

method ngOnDestroy

ngOnDestroy: () => void;

method openDialog

openDialog: () => void;

method presetColorsChanged

presetColorsChanged: (value: any[]) => void;

method sliderChanged

sliderChanged: (event: any) => void;

method sliderDragEnd

sliderDragEnd: (event: { slider: string; color: string }) => void;

method sliderDragStart

sliderDragStart: (event: { slider: string; color: string }) => void;

method stateChanged

stateChanged: (state: boolean) => void;

class ColorPickerService

class ColorPickerService {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<ColorPickerService>;

method cmykToRgb

cmykToRgb: (cmyk: Cmyk) => Rgba;

method denormalizeCMYK

denormalizeCMYK: (cmyk: Cmyk) => Cmyk;

method denormalizeRGBA

denormalizeRGBA: (rgba: Rgba) => Rgba;

method hsla2hsva

hsla2hsva: (hsla: Hsla) => Hsva;

method hsva2hsla

hsva2hsla: (hsva: Hsva) => Hsla;

method hsvaToRgba

hsvaToRgba: (hsva: Hsva) => Rgba;

method normalizeCMYK

normalizeCMYK: (cmyk: Cmyk) => Cmyk;

method outputFormat

outputFormat: (
    hsva: Hsva,
    outputFormat: string,
    alphaChannel: string | null
) => string;

method rgbaToCmyk

rgbaToCmyk: (rgba: Rgba) => Cmyk;

method rgbaToHex

rgbaToHex: (rgba: Rgba, allowHex8?: boolean) => string;

method rgbaToHsva

rgbaToHsva: (rgba: Rgba) => Hsva;

method setActive

setActive: (active: ColorPickerComponent | null) => void;

method stringToHsva

stringToHsva: (colorString?: string, allowHex8?: boolean) => Hsva | null;

class Hsla

class Hsla {}

constructor

constructor(h: number, s: number, l: number, a: number);

property a

a: number;

property h

h: number;

property l

l: number;

property s

s: number;

class Hsva

class Hsva {}

constructor

constructor(h: number, s: number, v: number, a: number);

property a

a: number;

property h

h: number;

property s

s: number;

property v

v: number;

class Rgba

class Rgba {}

constructor

constructor(r: number, g: number, b: number, a: number);

property a

a: number;

property b

b: number;

property g

g: number;

property r

r: number;

class SliderDirective

class SliderDirective {}

constructor

constructor(elRef: ElementRef);

property dragEnd

dragEnd: EventEmitter<any>;

property dragStart

dragStart: EventEmitter<any>;

property newValue

newValue: EventEmitter<any>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    SliderDirective,
    '[slider]',
    never,
    {
        rgX: { alias: 'rgX'; required: false };
        rgY: { alias: 'rgY'; required: false };
        slider: { alias: 'slider'; required: false };
    },
    { dragEnd: 'dragEnd'; dragStart: 'dragStart'; newValue: 'newValue' },
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<SliderDirective, never>;

property rgX

rgX: number;

property rgY

rgY: number;

property slider

slider: string;

method mouseDown

mouseDown: (event: any) => void;

method touchStart

touchStart: (event: any) => void;

class TextDirective

class TextDirective {}

property newValue

newValue: EventEmitter<any>;

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    TextDirective,
    '[text]',
    never,
    {
        rg: { alias: 'rg'; required: false };
        text: { alias: 'text'; required: false };
    },
    { newValue: 'newValue' },
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<TextDirective, never>;

property rg

rg: number;

property text

text: any;

method inputChange

inputChange: (event: any) => void;

Type Aliases

type AlphaChannel

type AlphaChannel = 'enabled' | 'disabled' | 'always' | 'forced';

type ColorMode

type ColorMode =
    | 'color'
    | 'c'
    | '1'
    | 'grayscale'
    | 'g'
    | '2'
    | 'presets'
    | 'p'
    | '3';

type OutputFormat

type OutputFormat = 'auto' | 'hex' | 'rgba' | 'hsla';

Package Files (6)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ngx-color-picker.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ngx-color-picker)

HTML

<a href="https://www.jsdocs.io/package/ngx-color-picker"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 month ago.
Package analyzed in 4622 ms.
Missing or incorrect documentation? Open an issue for this package.