@ngxmc/color-picker/index.d.ts

Angular Material Color Picker

import * as i0 from '@angular/core';
import { OnDestroy, AfterViewInit, NgZone, OnInit, OnChanges, SimpleChanges, InjectionToken, EventEmitter, ElementRef, ViewContainerRef, AfterContentInit, ChangeDetectorRef } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { AbstractControl, FormGroup, ControlValueAccessor, Validator, ValidationErrors } from '@angular/forms';
import { Subject } from 'rxjs';
import { Directionality } from '@angular/cdk/bidi';
import { ScrollStrategy, Overlay, OverlayRef } from '@angular/cdk/overlay';
import { MatDialog } from '@angular/material/dialog';
import { MatFormField } from '@angular/material/form-field';
import { MatButton } from '@angular/material/button';

type ColorInputFormat = 'rgb' | 'hex' | 'hex6' | 'hex3' | 'hex4' | 'hex8';

declare class Color {
    r: number;
    g: number;
    b: number;
    a: number;
    roundA: number;
    hex: string;
    rgba: string;
    constructor(_r: number, _g: number, _b: number, _a?: number);
    toHex(allow3Char?: boolean): string;
    toRgba(): string;
    toHexString(allow3Char?: boolean): string;
    toRgbString(): string;
    toHex8(allow4Char: any): string;
    toHex8String(allow4Char?: boolean): string;
    toString(format: ColorInputFormat): string;
}

declare class NgxMatColorPaletteComponent {
    readonly colorChanged: i0.OutputEmitterRef<Color>;
    readonly color: i0.InputSignal<Color>;
    readonly theme: i0.InputSignal<ThemePalette>;
    handleColorChanged(color: Color): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorPaletteComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatColorPaletteComponent, "ngx-mat-color-palette", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; }, { "colorChanged": "colorChanged"; }, never, never, true, never>;
}

declare abstract class NgxMatBaseColorCanvas implements OnDestroy, AfterViewInit {
    protected zone: NgZone;
    readonly colorChanged: i0.OutputEmitterRef<Color>;
    readonly theme: i0.InputSignal<ThemePalette>;
    readonly color: i0.WritableSignal<Color>;
    set setColor(color: Color);
    canvas: HTMLCanvasElement;
    elementId: string;
    ctx: CanvasRenderingContext2D;
    width: number;
    height: number;
    x: number;
    y: number;
    drag: boolean;
    protected _destroyed: Subject<void>;
    constructor(zone: NgZone, elementId: string);
    ngOnDestroy(): void;
    ngAfterViewInit(): void;
    protected draw(): void;
    onMousedown(e: MouseEvent): void;
    onMousemove(e: MouseEvent): void;
    onMouseup(e: MouseEvent): void;
    emitChange(color: Color): void;
    abstract changeColor(e: MouseEvent): void;
    abstract fillGradient(): void;
    abstract redrawIndicator(x: number, y: number): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatBaseColorCanvas, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxMatBaseColorCanvas, never, never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "setColor": { "alias": "color"; "required": false; }; }, { "colorChanged": "colorChanged"; }, never, never, true, never>;
}

declare class NgxMatColorCanvasComponent extends NgxMatBaseColorCanvas implements OnInit, AfterViewInit, OnChanges, OnDestroy {
    protected zone: NgZone;
    private _baseColor;
    get rCtrl(): AbstractControl;
    get gCtrl(): AbstractControl;
    get bCtrl(): AbstractControl;
    get aCtrl(): AbstractControl;
    get hexCtrl(): AbstractControl;
    _resetBaseColor: boolean;
    formGroup: FormGroup;
    rgba: string;
    constructor(zone: NgZone);
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    private updateForm;
    redrawIndicator(x: number, y: number): void;
    fillGradient(): void;
    onSliderColorChanged(c: Color): void;
    changeColor(e: MouseEvent): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorCanvasComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatColorCanvasComponent, "ngx-mat-color-canvas", never, {}, {}, never, never, true, never>;
}

declare class NgxMatColorCollectionComponent {
    readonly colorChanged: i0.OutputEmitterRef<Color>;
    set color(c: Color);
    readonly selectedColor: i0.WritableSignal<string>;
    colors1: string[];
    colors2: string[];
    select(hex: string): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorCollectionComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatColorCollectionComponent, "ngx-mat-color-collection", never, { "color": { "alias": "color"; "required": false; }; }, { "colorChanged": "colorChanged"; }, never, never, true, never>;
}

declare class NgxMatColorSliderComponent extends NgxMatBaseColorCanvas {
    protected zone: NgZone;
    constructor(zone: NgZone);
    ngAfterViewInit(): void;
    fillGradient(): void;
    redrawIndicator(x: number, y: number): void;
    changeColor(e: MouseEvent): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorSliderComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatColorSliderComponent, "ngx-mat-color-slider", never, {}, {}, never, never, true, never>;
}

declare class ColorAdapter {
    sameColor(a: Color, b: Color): boolean;
    format(c: Color, format: ColorInputFormat): string;
    parse(value: string): Color | null;
    static ɵfac: i0.ɵɵFactoryDeclaration<ColorAdapter, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<ColorAdapter>;
}

type MatColorFormats = {
    display: {
        colorInput: ColorInputFormat;
    };
};
declare const NGX_MAT_COLOR_FORMATS: MatColorFormats;
declare const MAT_COLOR_FORMATS: InjectionToken<MatColorFormats>;

declare class NgxMatColorPickerInputEvent {
    /** Reference to the colorpicker input component that emitted the event. */
    target: NgxMatColorPickerInput;
    /** Reference to the native input element associated with the colorpicker input. */
    targetElement: HTMLElement;
    /** The new value for the target colorpicker input. */
    value: Color | null;
    constructor(
    /** Reference to the colorpicker input component that emitted the event. */
    target: NgxMatColorPickerInput, 
    /** Reference to the native input element associated with the colorpicker input. */
    targetElement: HTMLElement);
}
declare const MAT_COLORPICKER_VALUE_ACCESSOR: any;
declare const MAT_COLORPICKER_VALIDATORS: any;
declare class NgxMatColorPickerInput implements ControlValueAccessor, OnInit, OnDestroy, Validator {
    private _elementRef;
    private _formField;
    private _colorFormats;
    private _adapter;
    set ngxMatColorPicker(value: NgxMatColorPickerComponent);
    _picker: NgxMatColorPickerComponent;
    /** Whether the colorpicker-input is disabled. */
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    /** The value of the input. */
    get value(): Color | null;
    set value(value: Color | null);
    private _value;
    /** Emits when a `change` event is fired on this `<input>`. */
    readonly colorChange: i0.OutputEmitterRef<NgxMatColorPickerInputEvent>;
    /** Emits when an `input` event is fired on this `<input>`. */
    readonly colorInput: i0.OutputEmitterRef<NgxMatColorPickerInputEvent>;
    /** Emits when the disabled state has changed */
    _disabledChange: EventEmitter<boolean>;
    /** Emits when the value changes (either due to user input or programmatic change). */
    _valueChange: EventEmitter<Color>;
    _onTouched: () => void;
    private _cvaOnChange;
    private _validatorOnChange;
    private _pickerSubscription;
    /** The combined form control validator for this input. */
    private _validator;
    /** Whether the last value set on the input was valid. */
    private _lastValueValid;
    constructor(_elementRef: ElementRef<HTMLInputElement>, _formField: MatFormField, _colorFormats: MatColorFormats, _adapter: ColorAdapter);
    /** Returns the palette used by the input's form field, if any. */
    getThemePalette(): ThemePalette;
    registerOnValidatorChange(fn: () => void): void;
    validate(c: AbstractControl): ValidationErrors | null;
    /**
     * @deprecated
     * @breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead
     */
    getPopupConnectionElementRef(): ElementRef;
    /**
     * Gets the element that the colorpicker popup should be connected to.
     * @return The element to connect the popup to.
     */
    getConnectedOverlayOrigin(): ElementRef;
    ngOnInit(): void;
    ngOnDestroy(): void;
    writeValue(value: Color): void;
    registerOnChange(fn: (value: any) => void): void;
    registerOnTouched(fn: () => void): void;
    setDisabledState(isDisabled: boolean): void;
    _onChange(): void;
    _onKeydown(event: KeyboardEvent): void;
    /** Handles blur events on the input. */
    _onBlur(): void;
    /** Formats a value and sets it on the input element. */
    private _formatValue;
    _onInput(value: string): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorPickerInput, [null, { optional: true; }, { optional: true; }, null]>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxMatColorPickerInput, "input[ngxMatColorPicker]", ["ngxMatColorPickerInput"], { "ngxMatColorPicker": { "alias": "ngxMatColorPicker"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "colorChange": "colorChange"; "colorInput": "colorInput"; }, never, never, true, never>;
}

/** Injection token that determines the scroll handling while the calendar is open. */
declare const NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
declare function NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
declare const NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
    provide: InjectionToken<() => ScrollStrategy>;
    deps: (typeof Overlay)[];
    useFactory: typeof NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY;
};
declare class NgxMatColorPickerContentComponent {
    /** Reference to the internal calendar component. */
    _palette: i0.Signal<NgxMatColorPaletteComponent>;
    picker: NgxMatColorPickerComponent;
    _isAbove: boolean;
    color: ThemePalette;
    constructor();
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorPickerContentComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatColorPickerContentComponent, "ngx-mat-color-picker-content", ["ngxMatColorPickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
}
declare class NgxMatColorPickerComponent implements OnDestroy {
    private _dialog;
    private _overlay;
    private _zone;
    private _adapter;
    private _dir;
    private _document;
    private _viewContainerRef;
    private _scrollStrategy;
    /** Emits when the datepicker has been opened. */
    openedStream: EventEmitter<void>;
    /** Emits when the datepicker has been closed. */
    closedStream: EventEmitter<void>;
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    get touchUi(): boolean;
    set touchUi(value: boolean);
    private _touchUi;
    /** Whether the calendar is open. */
    get opened(): boolean;
    set opened(value: boolean);
    private _opened;
    /** Default Color palette to use on the datepicker's calendar. */
    get defaultColor(): ThemePalette;
    set defaultColor(value: ThemePalette);
    _defaultColor: ThemePalette;
    /** Color palette to use on the datepicker's calendar. */
    get color(): ThemePalette;
    set color(value: ThemePalette);
    _color: ThemePalette;
    get isPrimary(): boolean;
    get isAccent(): boolean;
    get isWarn(): boolean;
    /** The currently selected date. */
    get _selected(): Color;
    set _selected(value: Color);
    private _validSelected;
    _pickerInput: NgxMatColorPickerInput;
    /** A reference to the overlay when the picker is opened as a popup. */
    _popupRef: OverlayRef;
    /** A reference to the dialog when the picker is opened as a dialog. */
    private _dialogRef;
    /** Reference to the component instantiated in popup mode. */
    private _popupComponentRef;
    /** A portal containing the content for this picker. */
    private _portal;
    /** Emits when the datepicker is disabled. */
    readonly _disabledChange: EventEmitter<boolean>;
    /** The element that was focused before the datepicker was opened. */
    private _focusedElementBeforeOpen;
    /** Subscription to value changes in the associated input element. */
    private _inputSubscription;
    /** Emits new selected date when selected date changes. */
    readonly _selectedChanged: Subject<Color>;
    constructor(_dialog: MatDialog, _overlay: Overlay, _zone: NgZone, _adapter: ColorAdapter, _dir: Directionality, scrollStrategy: any, _document: any, _viewContainerRef: ViewContainerRef);
    ngOnDestroy(): void;
    /** Selects the given date */
    select(nextVal: Color): void;
    /**
     * Register an input with this datepicker.
     * @param input The datepicker input to register with this datepicker.
     */
    registerInput(input: NgxMatColorPickerInput): void;
    open(): void;
    /** Open the calendar as a dialog. */
    private _openAsDialog;
    /** Open the calendar as a popup. */
    private _openAsPopup;
    /** Create the popup. */
    private _createPopup;
    close(): void;
    /** Passes the current theme color along to the calendar overlay. */
    private _setColor;
    /** Create the popup PositionStrategy. */
    private _createPopupPositionStrategy;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorPickerComponent, [null, null, null, null, { optional: true; }, null, { optional: true; }, null]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatColorPickerComponent, "ngx-mat-color-picker", ["ngxMatColorPicker"], { "disabled": { "alias": "disabled"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "defaultColor": { "alias": "defaultColor"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never, true, never>;
}

declare class NgxMatColorpickerToggleIcon {
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorpickerToggleIcon, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxMatColorpickerToggleIcon, "[ngxMatColorpickerToggleIcon]", never, {}, {}, never, never, true, never>;
}
declare class NgxMatColorToggleComponent implements AfterContentInit, OnDestroy {
    private _cd;
    private _stateChanges;
    picker: i0.InputSignal<NgxMatColorPickerComponent>;
    tabIndex: i0.InputSignal<number>;
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    /** Whether ripples on the toggle should be disabled. */
    disableRipple: i0.InputSignal<boolean>;
    _button: i0.Signal<MatButton>;
    constructor(_cd: ChangeDetectorRef);
    ngOnDestroy(): void;
    ngAfterContentInit(): void;
    open(event: Event): void;
    private _watchStateChanges;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMatColorToggleComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgxMatColorToggleComponent, "ngx-mat-color-toggle", ["ngxMatColorPickerToggle"], { "picker": { "alias": "for"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; }, {}, never, ["[ngxMatColorpickerToggleIcon]"], true, never>;
}

declare class NumericColorInputDirective {
    onInput($event: any): void;
    /**
     * Format input
     * @param input
     */
    private _formatInput;
    static ɵfac: i0.ɵɵFactoryDeclaration<NumericColorInputDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<NumericColorInputDirective, "[ngxMatNumericColorInput]", never, {}, {}, never, never, true, never>;
}

declare const NUMERIC_REGEX: RegExp;
declare const MAX_RGB = 255;
declare const MIN_RGB = 0;
/** List basic colors */
declare const BASIC_COLORS: string[];
/**
 * Get color at position
 * @param ctx
 * @param x
 * @param y
 */
declare function getColorAtPosition(ctx: CanvasRenderingContext2D, x: number, y: number): {
    r: number;
    g: number;
    b: number;
};
declare function rgbaToHex(r: number, g: number, b: number, a: number, allow4Char?: boolean): string;
declare function pad2(c: any): string;
declare function convertDecimalToHex(d: any): string;
declare function rgbToHex(r: number, g: number, b: number, allow3Char?: boolean): string;
declare const matchers: {
    CSS_UNIT: RegExp;
    rgb: RegExp;
    rgba: RegExp;
    hsl: RegExp;
    hsla: RegExp;
    hsv: RegExp;
    hsva: RegExp;
    hex3: RegExp;
    hex6: RegExp;
    hex4: RegExp;
    hex8: RegExp;
};
declare function stringInputToObject(color: string): {
    r: number;
    g: number;
    b: number;
    a: number;
};
declare function createMissingDateImplError(provider: string): Error;

export { BASIC_COLORS, Color, ColorAdapter, MAT_COLORPICKER_VALIDATORS, MAT_COLORPICKER_VALUE_ACCESSOR, MAT_COLOR_FORMATS, MAX_RGB, MIN_RGB, NGX_MAT_COLOR_FORMATS, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, NUMERIC_REGEX, NgxMatColorCanvasComponent, NgxMatColorCollectionComponent, NgxMatColorPaletteComponent, NgxMatColorPickerComponent, NgxMatColorPickerContentComponent, NgxMatColorPickerInput, NgxMatColorPickerInputEvent, NgxMatColorSliderComponent, NgxMatColorToggleComponent, NgxMatColorpickerToggleIcon, NumericColorInputDirective, convertDecimalToHex, createMissingDateImplError, getColorAtPosition, matchers, pad2, rgbToHex, rgbaToHex, stringInputToObject };
export type { ColorInputFormat, MatColorFormats };