@thednp/color-picker 2.0.1 → 2.0.3

package/dist/js/color-picker.d.ts

@@ -1,300 +1,307 @@
-import Color$1 from '@thednp/color';
-import { ColorFormats, HSLA, HSVA, HWBA, RGBA } from '@thednp/color';
-
-declare class ColorPalette {
-	static Color: typeof Color$1;
-	hue: number;
-	hueSteps: number;
-	lightSteps: number;
-	saturation: number;
-	colors: Color$1[];
-	/**
-	 * The `hue` parameter is optional, which would be set to 0.
-	 * * `args.hue` the starting Hue [0, 360]
-	 * * `args.hueSteps` Hue Steps Count [5, 24]
-	 * * `args.lightSteps` Lightness Steps Count [5, 12]
-	 * * `args.saturation` Saturation [0, 100]
-	 */
-	constructor(...args: [
-		number?,
-		number?,
-		number?,
-		number?
-	]);
-}
-export interface ColorPickerLabels {
-	pickerLabel: string;
-	appearanceLabel: string;
-	valueLabel: string;
-	toggleLabel: string;
-	presetsLabel: string;
-	defaultsLabel: string;
-	formatLabel: string;
-	alphaLabel: string;
-	hexLabel: string;
-	hueLabel: string;
-	whitenessLabel: string;
-	blacknessLabel: string;
-	saturationLabel: string;
-	lightnessLabel: string;
-	redLabel: string;
-	greenLabel: string;
-	blueLabel: string;
-	[key: string]: string;
-}
-export interface ColorPickerOptions {
-	colorLabels: string | string[];
-	componentLabels: ColorPickerLabels;
-	format: ColorFormats;
-	colorPresets: string | string[] | ColorPalette | false;
-	colorKeywords: string | string[] | false;
-}
-export interface ColorNames {
-	white: string;
-	black: string;
-	grey: string;
-	red: string;
-	orange: string;
-	brown: string;
-	gold: string;
-	olive: string;
-	yellow: string;
-	lime: string;
-	green: string;
-	teal: string;
-	cyan: string;
-	blue: string;
-	violet: string;
-	magenta: string;
-	pink: string;
-	[key: string]: string;
-}
-/**
- * Color Picker Web Component
- *
- * @see http://thednp.github.io/color-picker
- */
-declare class ColorPicker {
-	static Color: typeof Color$1;
-	static ColorPalette: typeof ColorPalette;
-	static getInstance: (element: HTMLInputElement) => ColorPicker | null;
-	static init: (element: HTMLInputElement) => ColorPicker;
-	static selector: string;
-	static roundPart: (v: number) => number;
-	static setElementStyle: (element: HTMLElement, styles: Partial<import("@thednp/shorty").CSS4Declaration>) => void;
-	static setAttribute: (element: HTMLElement, att: string, value: string) => void;
-	static getBoundingClientRect: (element: HTMLElement, includeScale?: boolean) => import("@thednp/shorty").BoundingClientRect;
-	static version: string;
-	static colorNames: string[];
-	static colorPickerLabels: ColorPickerLabels;
-	id: number;
-	input: HTMLInputElement;
-	color: Color$1;
-	format: string;
-	parent: HTMLElement;
-	dragElement: HTMLElement | undefined;
-	isOpen: boolean;
-	controlPositions: {
-		c1x: number;
-		c1y: number;
-		c2y: number;
-		c3y: number;
-	};
-	colorLabels: ColorNames;
-	colorKeywords: string[] | false;
-	colorPresets: ColorPalette | string[] | false;
-	componentLabels: ColorPickerLabels;
-	pickerToggle: HTMLElement;
-	menuToggle: HTMLElement;
-	colorPicker: HTMLElement;
-	colorMenu: HTMLElement;
-	controls: HTMLElement;
-	inputs: HTMLInputElement[];
-	controlKnobs: HTMLElement[];
-	visuals: HTMLElement[];
-	/**
-	 * Returns a new `ColorPicker` instance. The target of this constructor
-	 * must be an `HTMLInputElement`.
-	 *
-	 * @param target the target `<input>` element
-	 * @param config instance options
-	 */
-	constructor(target: (HTMLElement & HTMLInputElement) | string, config?: Partial<ColorPickerOptions>);
-	/** Returns the current colour value */
-	get value(): string;
-	/**
-	 * Sets a new colour value.
-	 *
-	 * @param {string} v new colour value
-	 */
-	set value(v: string);
-	/** Check if the colour presets include any non-colour. */
-	get hasNonColor(): boolean;
-	/** Returns hexadecimal value of the current colour. */
-	get hex(): string;
-	/** Returns the current colour value in {h,s,v,a} object format. */
-	get hsv(): HSVA;
-	/** Returns the current colour value in {h,s,l,a} object format. */
-	get hsl(): HSLA;
-	/** Returns the current colour value in {h,w,b,a} object format. */
-	get hwb(): HWBA;
-	/** Returns the current colour value in {r,g,b,a} object format. */
-	get rgb(): RGBA;
-	/** Returns the current colour brightness. */
-	get brightness(): number;
-	/** Returns the current colour luminance. */
-	get luminance(): number;
-	/** Checks if the current colour requires a light text colour. */
-	get isDark(): boolean;
-	/** Checks if the current input value is a valid colour. */
-	get isValid(): boolean;
-	/** Returns the colour appearance, usually the closest colour name for the current value. */
-	get appearance(): string;
-	/** Updates `ColorPicker` visuals. */
-	updateVisuals(): void;
-	/**
-	 * The `ColorPicker` *focusout* event listener when open.
-	 *
-	 * @param e
-	 * @this {ColorPicker}
-	 */
-	handleFocusOut: ({ relatedTarget }: FocusEvent & {
-		relatedTarget: HTMLElement;
-	}) => void;
-	/**
-	 * The `ColorPicker` *keyup* event listener when open.
-	 *
-	 * @param e
-	 * @this {ColorPicker}
-	 */
-	handleDismiss: ({ code }: KeyboardEvent) => void;
-	/**
-	 * The `ColorPicker` *scroll* event listener when open.
-	 *
-	 * @param e
-	 */
-	handleScroll: (e: Event) => void;
-	/**
-	 * The `ColorPicker` keyboard event listener for menu navigation.
-	 *
-	 * @param e
-	 */
-	menuKeyHandler: (e: KeyboardEvent & {
-		target: HTMLElement;
-	}) => void;
-	/**
-	 * The `ColorPicker` click event listener for the colour menu presets / defaults.
-	 *
-	 * @param e
-	 * @this {ColorPicker}
-	 */
-	menuClickHandler: (e: Event) => void;
-	/**
-	 * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
-	 *
-	 * @param e
-	 */
-	pointerDown: (e: PointerEvent & {
-		target: HTMLElement;
-	}) => void;
-	/**
-	 * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
-	 *
-	 * @param e
-	 * @this
-	 */
-	pointerUp: ({ target }: PointerEvent & {
-		target: HTMLElement;
-	}) => void;
-	/**
-	 * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
-	 *
-	 * @param {PointerEvent} e
-	 */
-	pointerMove: (e: PointerEvent) => void;
-	/**
-	 * The `ColorPicker` *keydown* event listener for control knobs.
-	 *
-	 * @param e
-	 */
-	handleKnobs: (e: Event & {
-		code: string;
-	}) => void;
-	/** The event listener of the colour form inputs. */
-	changeHandler: () => void;
-	/**
-	 * Updates `ColorPicker` first control:
-	 * * `lightness` and `saturation` for HEX/RGB;
-	 * * `lightness` and `hue` for HSL.
-	 *
-	 * @param X the X component of the offset
-	 * @param Y the Y component of the offset
-	 */
-	changeControl1(X: number, Y: number): void;
-	/**
-	 * Updates `ColorPicker` second control:
-	 * * `hue` for HEX/RGB/HWB;
-	 * * `saturation` for HSL.
-	 *
-	 * @param Y the Y offset
-	 */
-	changeControl2(Y: number): void;
-	/**
-	 * Updates `ColorPicker` last control,
-	 * the `alpha` channel.
-	 *
-	 * @param Y
-	 */
-	changeAlpha(Y: number): void;
-	/**
-	 * Updates `ColorPicker` control positions on:
-	 * * initialization
-	 * * window resize
-	 */
-	update: () => void;
-	/** Updates the open dropdown position on *scroll* event. */
-	updateDropdownPosition(): void;
-	/** Updates control knobs' positions. */
-	setControlPositions(): void;
-	/** Update the visual appearance label and control knob labels. */
-	updateAppearance(): void;
-	/** Updates the control knobs actual positions. */
-	updateControls(): void;
-	/**
-	 * Updates all color form inputs.
-	 *
-	 * @param isPrevented when `true`, the component original event is prevented
-	 */
-	updateInputs(isPrevented?: boolean): void;
-	/**
-	 * Toggle the `ColorPicker` dropdown visibility.
-	 *
-	 * @param e
-	 */
-	togglePicker: (e?: Event) => void;
-	/** Shows the `ColorPicker` dropdown. */
-	showPicker: () => void;
-	/**
-	 * Toggles the visibility of the `ColorPicker` presets menu.
-	 *
-	 * @param e
-	 * @this {ColorPicker}
-	 */
-	toggleMenu: (e?: Event) => void;
-	/**
-	 * Hides the currently open `ColorPicker` dropdown.
-	 *
-	 * @param {boolean=} focusPrevented
-	 */
-	hide(focusPrevented?: boolean): void;
-	/** Removes `ColorPicker` from target `<input>`. */
-	dispose(): void;
-}
-
-export {
-	ColorPicker as default,
-};
-
-export as namespace ColorPicker;
-
-export {};
+import { BoundingClientRect } from '@thednp/shorty';
+import { ColorFormats } from '@thednp/color';
+import { CSS4Declaration } from '@thednp/shorty';
+import { default as default_2 } from '@thednp/color';
+import { HSLA } from '@thednp/color';
+import { HSVA } from '@thednp/color';
+import { HWBA } from '@thednp/color';
+import { RGBA } from '@thednp/color';
+
+declare interface ColorNames {
+    white: string;
+    black: string;
+    grey: string;
+    red: string;
+    orange: string;
+    brown: string;
+    gold: string;
+    olive: string;
+    yellow: string;
+    lime: string;
+    green: string;
+    teal: string;
+    cyan: string;
+    blue: string;
+    violet: string;
+    magenta: string;
+    pink: string;
+    [key: string]: string;
+}
+
+/**
+ * Returns a color palette with a given set of parameters.
+ *
+ * @example
+ * new ColorPalette(0, 12, 10, 80);
+ * // => { hue: 0, hueSteps: 12, lightSteps: 10, saturation: 80, colors: Array<Color> }
+ */
+declare class ColorPalette {
+    static Color: typeof default_2;
+    hue: number;
+    hueSteps: number;
+    lightSteps: number;
+    saturation: number;
+    colors: default_2[];
+    /**
+     * The `hue` parameter is optional, which would be set to 0.
+     * * `args.hue` the starting Hue [0, 360]
+     * * `args.hueSteps` Hue Steps Count [5, 24]
+     * * `args.lightSteps` Lightness Steps Count [5, 12]
+     * * `args.saturation` Saturation [0, 100]
+     */
+    constructor(...args: [number?, number?, number?, number?]);
+}
+
+/**
+ * Color Picker Web Component
+ *
+ * @see http://thednp.github.io/color-picker
+ */
+declare class ColorPicker {
+    static Color: typeof default_2;
+    static ColorPalette: typeof ColorPalette;
+    static getInstance: (element: Element) => ColorPicker | null;
+    static init: (element: Element) => ColorPicker;
+    static selector: string;
+    static roundPart: (v: number) => number;
+    static setElementStyle: (element: Element, styles: Partial<CSS4Declaration>) => void;
+    static setAttribute: (element: Element, att: string, value: string) => void;
+    static getBoundingClientRect: (element: Element, includeScale?: boolean) => BoundingClientRect;
+    static version: string;
+    static colorNames: string[];
+    static colorPickerLabels: ColorPickerLabels;
+    id: number;
+    input: HTMLInputElement;
+    color: default_2;
+    format: string;
+    parent: HTMLElement;
+    dragElement: HTMLElement | undefined;
+    isOpen: boolean;
+    controlPositions: {
+        c1x: number;
+        c1y: number;
+        c2y: number;
+        c3y: number;
+    };
+    colorLabels: ColorNames;
+    colorKeywords: string[] | false;
+    colorPresets: ColorPalette | string[] | false;
+    componentLabels: ColorPickerLabels;
+    pickerToggle: HTMLElement;
+    menuToggle: HTMLElement;
+    colorPicker: HTMLElement;
+    colorMenu: HTMLElement;
+    controls: HTMLElement;
+    inputs: HTMLInputElement[];
+    controlKnobs: HTMLElement[];
+    visuals: HTMLElement[];
+    /**
+     * Returns a new `ColorPicker` instance. The target of this constructor
+     * must be an `HTMLInputElement`.
+     *
+     * @param target the target `<input>` element
+     * @param config instance options
+     */
+    constructor(target: Element | string, config?: Partial<ColorPickerOptions>);
+    /** Returns the current colour value */
+    get value(): string;
+    /**
+     * Sets a new colour value.
+     *
+     * @param {string} v new colour value
+     */
+    set value(v: string);
+    /** Check if the colour presets include any non-colour. */
+    get hasNonColor(): boolean;
+    /** Returns hexadecimal value of the current colour. */
+    get hex(): string;
+    /** Returns the current colour value in {h,s,v,a} object format. */
+    get hsv(): HSVA;
+    /** Returns the current colour value in {h,s,l,a} object format. */
+    get hsl(): HSLA;
+    /** Returns the current colour value in {h,w,b,a} object format. */
+    get hwb(): HWBA;
+    /** Returns the current colour value in {r,g,b,a} object format. */
+    get rgb(): RGBA;
+    /** Returns the current colour brightness. */
+    get brightness(): number;
+    /** Returns the current colour luminance. */
+    get luminance(): number;
+    /** Checks if the current colour requires a light text colour. */
+    get isDark(): boolean;
+    /** Checks if the current input value is a valid colour. */
+    get isValid(): boolean;
+    /** Returns the colour appearance, usually the closest colour name for the current value. */
+    get appearance(): string;
+    /** Updates `ColorPicker` visuals. */
+    updateVisuals(): void;
+    /**
+     * The `ColorPicker` *focusout* event listener when open.
+     *
+     * @param e
+     * @this {ColorPicker}
+     */
+    handleFocusOut: ({ relatedTarget }: FocusEvent & {
+        relatedTarget: HTMLElement;
+    }) => void;
+    /**
+     * The `ColorPicker` *keyup* event listener when open.
+     *
+     * @param e
+     * @this {ColorPicker}
+     */
+    handleDismiss: ({ code }: KeyboardEvent) => void;
+    /**
+     * The `ColorPicker` *scroll* event listener when open.
+     *
+     * @param e
+     */
+    handleScroll: (e: Event) => void;
+    /**
+     * The `ColorPicker` keyboard event listener for menu navigation.
+     *
+     * @param e
+     */
+    menuKeyHandler: (e: KeyboardEvent & {
+        target: HTMLElement;
+    }) => void;
+    /**
+     * The `ColorPicker` click event listener for the colour menu presets / defaults.
+     *
+     * @param e
+     * @this {ColorPicker}
+     */
+    menuClickHandler: (e: Event) => void;
+    /**
+     * The `ColorPicker` *touchstart* / *mousedown* events listener for control knobs.
+     *
+     * @param e
+     */
+    pointerDown: (e: PointerEvent & {
+        target: HTMLElement;
+    }) => void;
+    /**
+     * The `ColorPicker` *touchend* / *mouseup* events listener for control knobs.
+     *
+     * @param e
+     * @this
+     */
+    pointerUp: ({ target }: PointerEvent & {
+        target: HTMLElement;
+    }) => void;
+    /**
+     * The `ColorPicker` *touchmove* / *mousemove* events listener for control knobs.
+     *
+     * @param {PointerEvent} e
+     */
+    pointerMove: (e: PointerEvent) => void;
+    /**
+     * The `ColorPicker` *keydown* event listener for control knobs.
+     *
+     * @param e
+     */
+    handleKnobs: (e: Event & {
+        code: string;
+    }) => void;
+    /** The event listener of the colour form inputs. */
+    changeHandler: () => void;
+    /**
+     * Updates `ColorPicker` first control:
+     * * `lightness` and `saturation` for HEX/RGB;
+     * * `lightness` and `hue` for HSL.
+     *
+     * @param X the X component of the offset
+     * @param Y the Y component of the offset
+     */
+    changeControl1(X: number, Y: number): void;
+    /**
+     * Updates `ColorPicker` second control:
+     * * `hue` for HEX/RGB/HWB;
+     * * `saturation` for HSL.
+     *
+     * @param Y the Y offset
+     */
+    changeControl2(Y: number): void;
+    /**
+     * Updates `ColorPicker` last control,
+     * the `alpha` channel.
+     *
+     * @param Y
+     */
+    changeAlpha(Y: number): void;
+    /**
+     * Updates `ColorPicker` control positions on:
+     * * initialization
+     * * window resize
+     */
+    update: () => void;
+    /** Updates the open dropdown position on *scroll* event. */
+    updateDropdownPosition(): void;
+    /** Updates control knobs' positions. */
+    setControlPositions(): void;
+    /** Update the visual appearance label and control knob labels. */
+    updateAppearance(): void;
+    /** Updates the control knobs actual positions. */
+    updateControls(): void;
+    /**
+     * Updates all color form inputs.
+     *
+     * @param isPrevented when `true`, the component original event is prevented
+     */
+    updateInputs(isPrevented?: boolean): void;
+    /**
+     * Toggle the `ColorPicker` dropdown visibility.
+     *
+     * @param e
+     */
+    togglePicker: (e?: Event) => void;
+    /** Shows the `ColorPicker` dropdown. */
+    showPicker: () => void;
+    /**
+     * Toggles the visibility of the `ColorPicker` presets menu.
+     *
+     * @param e
+     * @this {ColorPicker}
+     */
+    toggleMenu: (e?: Event) => void;
+    /**
+     * Hides the currently open `ColorPicker` dropdown.
+     *
+     * @param {boolean=} focusPrevented
+     */
+    hide(focusPrevented?: boolean): void;
+    /** Removes `ColorPicker` from target `<input>`. */
+    dispose(): void;
+}
+export default ColorPicker;
+
+declare interface ColorPickerLabels {
+    pickerLabel: string;
+    appearanceLabel: string;
+    valueLabel: string;
+    toggleLabel: string;
+    presetsLabel: string;
+    defaultsLabel: string;
+    formatLabel: string;
+    alphaLabel: string;
+    hexLabel: string;
+    hueLabel: string;
+    whitenessLabel: string;
+    blacknessLabel: string;
+    saturationLabel: string;
+    lightnessLabel: string;
+    redLabel: string;
+    greenLabel: string;
+    blueLabel: string;
+    [key: string]: string;
+}
+
+declare type ColorPickerOptions = {
+    colorLabels: string | string[];
+    componentLabels: ColorPickerLabels;
+    format: ColorFormats;
+    colorPresets: string | string[] | ColorPalette | false;
+    colorKeywords: string | string[] | false;
+};
+
+export { }