@alegendstale/holly-components/dist/components/color-palette/color-palette.d.ts

Reusable UI components created using lit

import { LitElement, TemplateResult, nothing, PropertyValues } from 'lit';
import { ColorPaletteSettings, Direction, PaletteSettings, Status } from './color-palette-utils.js';
import './item/color-palette-item.js';
import './item/color-palette-item-edit.js';
import '../tool-tip/tool-tip.js';
import '../canvas/canvas-gradient.js';
/**
 * A component which can display colors in various ways.
 *
 * @dependency color-palette-item
 * @dependency color-palette-item-edit
 * @dependency tool-tip
 * @dependency canvas-gradient
 *
 * @event {boolean} hc-palette-edit - Emits a change in editMode.
 * @event {string} hc-notice - Emits a user-facing notice.
 * @event hc-palette-change - Emits a change in palette colors or settings.
 *
 * @cssprop {<length>} --palette-height - The height of the palette.
 * @cssprop {<length>} --palette-width - The width of the palette.
 * @cssprop {<color>} --palette-background-color - The background color of the palette.
 * @cssprop {<color>} --palette-color - The color of the palette.
 * @cssprop {<length>} --palette-column-flex-basis - The flex size for palette items.
 * @cssprop {<length>} --palette-corners - The radius of the palette corners.
 */
export declare class ColorPalette extends LitElement {
    static styles: import("lit").CSSResult[];
    private _tooltip;
    /** @internal */
    private _editMode;
    /**
     * Whether the palette can be edited.
     * @type {boolean}
     * @default false
    */
    set editMode(val: boolean);
    get editMode(): boolean;
    /** The input colors the palette will display. */
    colors: string[];
    /**
     * The height of the palette.
     * @default 150
    */
    height: number;
    /**
     * The width of the palette.
     * @default 700
    */
    width: number;
    /**
     * The direction the palette colors will face.
     * @default column
    */
    direction: Direction;
    /** Whether the colors will appear as a gradient. */
    gradient: boolean;
    /** Whether hovering over the palette is allowed. */
    preventHover: boolean;
    /** Whether the text on each color is shown. */
    hideText: boolean;
    /** Whether the input bypasses validation checks. */
    override: boolean;
    /** The aliases for each color. */
    aliases: string[];
    /** The maximum width of the container. (So that the palette doesn't expand past its bounds) */
    maxWidth: number;
    /** Helper accessor for settings */
    set settings({ height, width, direction, gradient, preventHover, override, aliases }: PaletteSettings);
    get settings(): PaletteSettings;
    /** The current status of the palette. */
    status: Status;
    /** @internal Whether the palette should pulse on error. */
    private pulse;
    /** Extended settings */
    pluginSettings: ColorPaletteSettings;
    connectedCallback(): void;
    protected willUpdate(_changedProperties: PropertyValues): void;
    /** Sets the current status and parses colors. */
    setStatusAndColors(): void;
    render(): TemplateResult<1>;
    /** @returns `user` OR `auto` width based on which is more appropriate. */
    getPaletteWidth(): number;
    /** Creates a color palette or gradient palette depending on settings. */
    protected createPalette(): TemplateResult | typeof nothing;
    /** Create a color palette. */
    protected createColors(): TemplateResult;
    /** Create a gradient palette. */
    protected createGradient(): TemplateResult;
    /**
     * Create invalid palette based on palette status.
     * @param type Palette status type
     */
    protected createInvalidPalette(type: Status, message?: string): TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'color-palette': ColorPalette;
    }
}
//# sourceMappingURL=color-palette.d.ts.map