@ng-matero/extensions/colorpicker/index.d.ts

Angular Material Extensions

import * as i0 from '@angular/core';
import { AfterViewInit, OnDestroy, EventEmitter, ElementRef, InjectionToken, OnChanges, TemplateRef, AfterContentInit, SimpleChanges } from '@angular/core';
import * as i1 from '@angular/common';
import * as i2 from '@angular/cdk/overlay';
import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
import * as i3 from '@angular/cdk/a11y';
import * as i4 from '@angular/cdk/portal';
import * as i5 from '@angular/material/button';
import { MatButton } from '@angular/material/button';
import * as i6 from 'ngx-color/chrome';
import { ThemePalette } from '@angular/material/core';
import { Subject } from 'rxjs';
import { ColorEvent } from 'ngx-color';
import { ControlValueAccessor, AbstractControl, ValidationErrors } from '@angular/forms';

declare class MtxColorPickerInputEvent {
    /** Reference to the colorpicker input component that emitted the event. */
    target: MtxColorpickerInput;
    /** Reference to the native input element associated with the colorpicker input. */
    targetElement: HTMLElement;
    /** The new value for the target colorpicker input. */
    value: string | null;
    constructor(
    /** Reference to the colorpicker input component that emitted the event. */
    target: MtxColorpickerInput, 
    /** Reference to the native input element associated with the colorpicker input. */
    targetElement: HTMLElement);
}
declare const MTX_COLORPICKER_VALUE_ACCESSOR: any;
declare const MTX_COLORPICKER_VALIDATORS: any;
type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
declare class MtxColorpickerInput implements ControlValueAccessor, AfterViewInit, OnDestroy {
    private _elementRef;
    private _formField;
    /** Whether the component has been initialized. */
    private _isInitialized;
    set mtxColorpicker(value: MtxColorpicker);
    _picker: MtxColorpicker;
    /** Whether the colorpicker-input is disabled. */
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    /** The value of the input. */
    get value(): string | null;
    set value(value: string | null);
    private _value;
    /** The input and output color format. */
    format: ColorFormat;
    /** Emits when a `change` event is fired on this `<input>`. */
    readonly colorChange: EventEmitter<MtxColorPickerInputEvent>;
    /** Emits when an `input` event is fired on this `<input>`. */
    readonly colorInput: EventEmitter<MtxColorPickerInputEvent>;
    /** 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<string | null>;
    _onTouched: () => void;
    _validatorOnChange: () => void;
    private _cvaOnChange;
    private _pickerSubscription;
    /** The combined form control validator for this input. */
    private _validator;
    /** Whether the last value set on the input was valid. */
    private _lastValueValid;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    registerOnValidatorChange(fn: () => void): void;
    /** @docs-private */
    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;
    /** Gets the ID of an element that should be used a description for the overlay. */
    getOverlayLabelId(): string | null;
    writeValue(value: string): void;
    registerOnChange(fn: (value: any) => void): void;
    registerOnTouched(fn: () => void): void;
    setDisabledState(isDisabled: boolean): void;
    _onKeydown(event: KeyboardEvent): void;
    /** Handles blur events on the input. */
    _onBlur(): void;
    _onInput(value: string): void;
    _onChange(): void;
    /** Returns the palette used by the input's form field, if any. */
    getThemePalette(): ThemePalette;
    /** TODO: Formats a value and sets it on the input element. */
    private _formatValue;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerInput, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerInput, "input[mtxColorpicker]", ["mtxColorpickerInput"], { "mtxColorpicker": { "alias": "mtxColorpicker"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "colorChange": "colorChange"; "colorInput": "colorInput"; }, never, never, true, never>;
    static ngAcceptInputType_disabled: unknown;
}

/** Injection token that determines the scroll handling while the panel is open. */
declare const MTX_COLORPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
/**
 * @docs-private
 * @deprecated No longer used, will be removed.
 * @breaking-change 21.0.0
 */
declare function MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
/** Possible positions for the colorpicker dropdown along the X axis. */
type ColorpickerDropdownPositionX = 'start' | 'end';
/** Possible positions for the colorpicker dropdown along the Y axis. */
type ColorpickerDropdownPositionY = 'above' | 'below';
/**
 * @docs-private
 * @deprecated No longer used, will be removed.
 * @breaking-change 21.0.0
 */
declare const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
    provide: InjectionToken<() => ScrollStrategy>;
    deps: (typeof Overlay)[];
    useFactory: typeof MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY;
};
declare class MtxColorpickerContent implements OnDestroy {
    protected _elementRef: ElementRef<HTMLElement>;
    protected _animationsDisabled: boolean;
    private _changeDetectorRef;
    private _ngZone;
    private _eventCleanups;
    private _animationFallback;
    color: ThemePalette;
    picker: MtxColorpicker;
    /** Emits when an animation has finished. */
    readonly _animationDone: Subject<void>;
    /** Whether there is an in-progress animation. */
    _isAnimating: boolean;
    constructor();
    ngOnDestroy(): void;
    _startExitAnimation(): void;
    private _handleAnimationEvent;
    getColorString(e: ColorEvent): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerContent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerContent, "mtx-colorpicker-content", ["mtxColorpickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
}
declare class MtxColorpicker implements OnChanges, OnDestroy {
    private _overlay;
    private _viewContainerRef;
    private _dir?;
    private _document?;
    private _scrollStrategy;
    private _inputStateChanges;
    /** Custom colorpicker content set by the consumer. */
    content: TemplateRef<any>;
    /** Emits when the colorpicker has been opened. */
    openedStream: EventEmitter<void>;
    /** Emits when the colorpicker has been closed. */
    closedStream: EventEmitter<void>;
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    /** Preferred position of the colorpicker in the X axis. */
    xPosition: ColorpickerDropdownPositionX;
    /** Preferred position of the colorpicker in the Y axis. */
    yPosition: ColorpickerDropdownPositionY;
    /**
     * Whether to restore focus to the previously-focused element when the panel is closed.
     * Note that automatic focus restoration is an accessibility feature and it is recommended that
     * you provide your own equivalent, if you decide to turn it off.
     */
    restoreFocus: boolean;
    /** Whether the panel is open. */
    get opened(): boolean;
    set opened(value: boolean);
    private _opened;
    /** The id for the colorpicker panel. */
    id: string;
    /** Color palette to use on the colorpicker's panel. */
    get color(): ThemePalette;
    set color(value: ThemePalette);
    private _color;
    /** The input and output color format. */
    get format(): ColorFormat;
    set format(value: ColorFormat);
    _format: ColorFormat;
    /** The currently selected color. */
    get selected(): string;
    set selected(value: string);
    private _validSelected;
    /** A reference to the overlay when the picker is opened as a popup. */
    private _overlayRef;
    /** Reference to the component instance rendered in the overlay. */
    private _componentRef;
    /** The element that was focused before the colorpicker was opened. */
    private _focusedElementBeforeOpen;
    /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
    private _backdropHarnessClass;
    /** The input element this colorpicker is associated with. */
    pickerInput: MtxColorpickerInput;
    /** Emits when the colorpicker is disabled. */
    readonly _disabledChange: Subject<boolean>;
    /** Emits new selected color when selected color changes. */
    readonly _selectedChanged: Subject<string>;
    private _injector;
    ngOnChanges(): void;
    ngOnDestroy(): void;
    /** Selects the given color. */
    select(nextVal: string): void;
    /**
     * Register an input with this colorpicker.
     * @param input The colorpicker input to register with this colorpicker.
     */
    registerInput(input: MtxColorpickerInput): void;
    /** Open the panel. */
    open(): void;
    /** Close the panel. */
    close(): void;
    /** Forwards relevant values from the colorpicker to the colorpicker content inside the overlay. */
    protected _forwardContentValues(instance: MtxColorpickerContent): void;
    /** Open the colopicker as a popup. */
    private _openOverlay;
    /** Destroys the current overlay. */
    private _destroyOverlay;
    /** Gets a position strategy that will open the panel as a dropdown. */
    private _getDropdownStrategy;
    /** Sets the positions of the colorpicker in dropdown mode based on the current configuration. */
    private _setConnectedPositions;
    /** Gets an observable that will emit when the overlay is supposed to be closed. */
    private _getCloseStream;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpicker, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpicker, "mtx-colorpicker", ["mtxColorpicker"], { "content": { "alias": "content"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "color": { "alias": "color"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never, true, never>;
    static ngAcceptInputType_disabled: unknown;
    static ngAcceptInputType_restoreFocus: unknown;
    static ngAcceptInputType_opened: unknown;
}

/** Can be used to override the icon of a `mtxColorpickerToggle`. */
declare class MtxColorpickerToggleIcon {
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerToggleIcon, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerToggleIcon, "[mtxColorpickerToggleIcon]", never, {}, {}, never, never, true, never>;
}
declare class MtxColorpickerToggle implements AfterContentInit, OnChanges, OnDestroy {
    private _changeDetectorRef;
    private _stateChanges;
    /** Colorpicker instance that the button will toggle. */
    picker: MtxColorpicker;
    /** Tabindex for the toggle. */
    tabIndex: number | null;
    /** Screen-reader label for the button. */
    ariaLabel: string;
    /** Whether the toggle button is disabled. */
    get disabled(): boolean;
    set disabled(value: boolean);
    private _disabled;
    /** Whether ripples on the toggle should be disabled. */
    disableRipple: boolean;
    /** Custom icon set by the consumer. */
    _customIcon: MtxColorpickerToggleIcon;
    /** Underlying button element. */
    _button: MatButton;
    constructor();
    ngOnChanges(changes: SimpleChanges): void;
    ngOnDestroy(): void;
    ngAfterContentInit(): void;
    _open(event: Event): void;
    private _watchStateChanges;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerToggle, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerToggle, "mtx-colorpicker-toggle", ["mtxColorpickerToggle"], { "picker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, ["_customIcon"], ["[mtxColorpickerToggleIcon]"], true, never>;
    static ngAcceptInputType_disabled: unknown;
    static ngAcceptInputType_disableRipple: unknown;
}

declare class MtxColorpickerModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxColorpickerModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof i4.PortalModule, typeof i5.MatButtonModule, typeof i6.ColorChromeModule, typeof MtxColorpicker, typeof MtxColorpickerContent, typeof MtxColorpickerInput, typeof MtxColorpickerToggle, typeof MtxColorpickerToggleIcon], [typeof MtxColorpicker, typeof MtxColorpickerContent, typeof MtxColorpickerInput, typeof MtxColorpickerToggle, typeof MtxColorpickerToggleIcon]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<MtxColorpickerModule>;
}

/**
 * Animations used by the colorpicker.
 * @docs-private
 * @deprecated No longer used, will be removed.
 * @breaking-change 21.0.0
 */
declare const mtxColorpickerAnimations: {
    readonly transformPanel: any;
};

export { MTX_COLORPICKER_SCROLL_STRATEGY, MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY, MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MTX_COLORPICKER_VALIDATORS, MTX_COLORPICKER_VALUE_ACCESSOR, MtxColorpicker, MtxColorpickerContent, MtxColorpickerInput, MtxColorpickerModule, MtxColorpickerToggle, MtxColorpickerToggleIcon, mtxColorpickerAnimations };
export type { ColorFormat, ColorpickerDropdownPositionX, ColorpickerDropdownPositionY };