wj-elements/dist/packages/wje-color-picker/color-picker.element.d.ts

WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.

import { default as WJElement } from '../wje-element/element.js';
/**
 * @summary ColorPicker is a custom web component that extends WJElement.
 * It provides a color picker functionality with a color area, hue slider, alpha slider, and color swatches.
 * The color picker allows users to select a color by moving a marker on the color area, adjusting the hue and alpha sliders, or clicking on a color swatch.
 * @documentation https://elements.webjet.sk/components/color-picker
 * @status stable
 * @augments WJElement
 * @slot - The card header main content.
 * @csspart anchor - The anchor part of the color picker.
 * @csspart picker - The main part of the color picker.
 * @csspart marker - The marker part of the color picker.
 * @csspart color-area - The color area part of the color picker.
 * @csspart hue - The hue slider part of the color picker.
 * @csspart alpha - The alpha slider part of the color picker.
 * @csspart color-preview - The color preview part of the color picker.
 * @csspart input - The input part of the color picker.
 * @cssproperty [--wje-color-picker-area] - The color of the color area background.
 * @cssproperty [--wje-color-picker-value] - The value of the color picker input.
 * @cssproperty [--wje-color-picker-swatch] - The color of the color swatch button.
 * @cssproperty [--wje-color-picker-size] - The color of the color marker.
 * @cssproperty [--wje-color-picker-radius] - The color of the color anchor.
 */
export default class ColorPicker extends WJElement {
    /**
     * Getter for the CSS stylesheet.
     * @returns {object} The styles object.
     * @static
     */
    static get cssStyleSheet(): object;
    /**
     * Getter for the observed attributes.
     * @returns {Array} An empty array.
     * @static
     */
    static get observedAttributes(): any[];
    /**
     * The position of the color marker.
     * @type {object}
     * @private
     */
    private _markerPosition;
    /**
     * The color swatches.
     * @type {Array}
     * @private
     */
    private _swatches;
    /**
     * Setter for the marker position.
     * @param {object} value The new marker position.
     */
    set markerPosition(value: object);
    /**
     * Getter for the marker position.
     * @returns {object} The current marker position.
     */
    get markerPosition(): object;
    /**
     * Setter for the color swatches.
     * @param {string} value The new color swatches.
     */
    set swatches(value: string);
    /**
     * Getter for the color swatches.
     * @returns {Array} The current color swatches.
     */
    get swatches(): any[];
    /**
     * Draws the ColorPicker element.
     * @returns {DocumentFragment} The created document fragment.
     */
    draw(): DocumentFragment;
    popup: HTMLElement;
    anchor: HTMLDivElement;
    picker: HTMLDivElement;
    marker: HTMLDivElement;
    colorArea: HTMLDivElement;
    hueSlider: HTMLElement;
    alphaSlider: HTMLElement;
    colorPreview: HTMLDivElement;
    input: HTMLElement;
    /**
     * Sets the hue.
     * @param node
     */
    createSwatches(node: any): void;
    /**
     * Sets up the event listeners for the ColorPicker.
     */
    afterDraw(): void;
    init: boolean;
    colorAreaDimension: {
        width: any;
        x: any;
        y: any;
        height: any;
    };
    /**
     * Sets the sliders to the given color.
     * @param color
     */
    setSliders(color: any): void;
    /**
     * Gets the dimensions of the color area.
     * @returns {{width: *, x: *, y: *, height: *}}
     */
    dimension(): {
        width: any;
        x: any;
        y: any;
        height: any;
    };
    /**
     * Moves the marker to the given position.
     * @param e
     */
    moveMarker: (e: any) => void;
    /**
     * Sets the hue.
     * @param e
     * @returns {{pageY: (*|number), pageX: (*|number)}}
     */
    getPointerPosition(e: any): {
        pageY: (any | number);
        pageX: (any | number);
    };
    /**
     * Sets the position of the marker.
     * @param x
     * @param y
     */
    setMarkerPosition(x: any, y: any): void;
    /**
     * Sets the color at the given position.
     * @param x
     * @param y
     * @param alpha
     * @returns {*|tinycolor}
     */
    setColorAtPosition(x: any, y: any, alpha?: number): any | tinycolor;
    /**
     * Sets the marker position by color.
     * @param color
     * @returns {{x: number, y: number}}
     */
    setMarkerPositionByColor: (color?: string) => {
        x: number;
        y: number;
    };
    /**
     * Updates the color picker's current color and its associated UI elements.
     * @param {tinycolor.Instance|null} [color] The color value to set. If null, the current value from the input field is used.
     * @param {string} [type] The type of action determining which UI element to update. Possible values: "marker", "hue", "alpha", "swatch".
     */
    setColor: (color?: tinycolor.Instance | null, type?: string) => void;
    value: {
        hex8: any;
        hex: any;
        rgb: any;
        rgba: any;
        hsl: any;
        hsla: any;
        hsv: any;
        hsva: any;
        name: any;
        format: any;
    };
    /**
     * Sets the hue.
     * @param {object} e The event object.
     */
    setHue: (e: object) => void;
    /**
     * Sets the alpha.
     * @param {object} e The event object.
     */
    setAlpha: (e: object) => void;
    /**
     * Converts hue and alpha values into an HSVA color string.
     * @param {number} hue The hue value, typically between 0 and 360.
     * @param {number} alpha The alpha value, typically between 0 and 100, representing the opacity percentage.
     * @returns {string} - The HSVA color string in the format `hsva(h, 100%, 100%, a)`.
     */
    getH: any;
    getHSVA: (hue: any, alpha: any) => string;
}