@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
77 lines (76 loc) • 5.24 kB
TypeScript
import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
import { NgModel } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
import { TabbableListDirective } from '../../directives/accessibility/index';
import { ColorPickerColor } from './color-picker-color';
import { ColorPickerButtonSize, ColorPickerButtonStyle, ColorPickerInputColors, ColorPickerInputMode } from './color-picker.type';
import * as i0 from "@angular/core";
export declare class ColorPickerComponent implements OnInit, OnDestroy {
id: string;
/**
* The collection of colors to display in the color swatch.
*
* Colors can be specified either as a string, which is the hex or RGBA value of the color; or as a `ColorPickerColor` object,
* which allows a name to be associated with the color. See below for details of the `ColorPickerColor` class.
* This property is either a one-dimensional or two-dimensional array. If a two-dimensional array is provided,
* the colors will be split into rows, providing more control over the appearance of the swatch.
*/
set inputColors(colors: ColorPickerInputColors[] | ColorPickerInputColors[][]);
/**
* The currently selected color. If this is one of the `colors` in the colors collection, it will be visually
* highlighted in the swatch. It will also be shown in the input panel, if enabled (see showInput).
* Note that this will always be a `ColorPickerColor` object, even if plain strings are provided to the colors property.
* See below for details of the `ColorPickerColor` class.
*/
set selected(selected: ColorPickerColor);
/**
* The number of columns to display in the color swatch. Set this to -1 if the width should be specified by a stylesheet
* instead, e.g. to provide a responsive layout.
*/
set columns(columns: number);
/** The style of the color swatch buttons. */
buttonStyle: ColorPickerButtonStyle;
/** The size of the color swatch buttons. Three size variants are currently supported. */
set buttonSize(buttonSize: ColorPickerButtonSize);
/** Whether to show tooltips above the color swatch buttons. These contain the color name if provided; otherwise the color hex/RGBA value. */
showTooltips: boolean;
/** Whether to show the hex/RGBA input panel. */
showInput: boolean;
/** The default input mode to display in the input panel. The user can switch modes using the toggle button. */
inputMode: ColorPickerInputMode;
/** Defines a function that returns an aria-label for ColorPickerColor. */
colorAriaLabel: (color: ColorPickerColor) => string;
/** Defines a function that returns an aria-label for the button that switches input modes. */
switchModeAriaLabel: (mode: ColorPickerInputMode) => string;
/** Define a function that returns an aria-label for the input control. */
inputAriaLabel: (mode: ColorPickerInputMode) => string;
/** Emitted when the user changes the selected color, either by clicking a color swatch button, or entering a valid color value into the input panel text field. */
selectedChange: EventEmitter<ColorPickerColor>;
/** Emitted when the user changes the colour input mode */
inputModeChange: EventEmitter<ColorPickerInputMode>;
/** Emitted when the user presses enter in the input panel text field. This can be used to commit a color change and/or close a popup. */
inputSubmit: EventEmitter<void>;
cssWidth: string;
colors: ColorPickerColor[][];
selected$: BehaviorSubject<ColorPickerColor>;
columns$: BehaviorSubject<number>;
buttonSize$: BehaviorSubject<ColorPickerButtonSize>;
inputPatterns: {
hex: RegExp;
rgba: RegExp;
};
/** Access the ngModel instance of the input field */
inputFormControl: NgModel;
tabbableList: TabbableListDirective;
private readonly _onDestroy;
ngOnInit(): void;
ngOnDestroy(): void;
onFocus(): void;
updateColorValue(input: string, mode: ColorPickerInputMode): void;
toggleColorEntryType(): void;
private getColorAriaLabel;
private getSwitchModeAriaLabel;
private getInputAriaLabel;
static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "ux-color-picker", ["ux-color-picker"], { "id": { "alias": "id"; "required": false; }; "inputColors": { "alias": "colors"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "buttonStyle": { "alias": "buttonStyle"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "showTooltips": { "alias": "showTooltips"; "required": false; }; "showInput": { "alias": "showInput"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "colorAriaLabel": { "alias": "colorAriaLabel"; "required": false; }; "switchModeAriaLabel": { "alias": "switchModeAriaLabel"; "required": false; }; "inputAriaLabel": { "alias": "inputAriaLabel"; "required": false; }; }, { "selectedChange": "selectedChange"; "inputModeChange": "inputModeChange"; "inputSubmit": "inputSubmit"; }, never, never, false, never>;
}