import { XY } from '@thegraid/common-lib';
import { Container, Event, EventDispatcher, Text } from '@thegraid/easeljs-module';
import { NamedContainer } from './named-container.js';
import { type PaintableShape } from './paintable';
/** send a simple value of type to target. */
export declare class ValueEvent extends Event {
    value: number | string;
    constructor(type: string, value: number | string);
    /** dispatch ValueEvent via target */
    static dispatchValueEvent(target: EventDispatcher, type: string, value: number | string): boolean;
}
/** Container with a Box (colored circle/ellispe/shape), a value Text, and optional label Text.
 *
 * ValueCounter can be attached to a Container and the value updated by a ValueEvent.
 */
export declare class ValueCounter extends NamedContainer {
    static defaultSize: number;
    color: string;
    box: PaintableShape;
    _value: number | string;
    /** width of curently displayed ellipse */
    wide: number;
    /** height of curently displayed ellipse */
    high: number;
    /** font size in px */
    fontSize: number;
    fontName: string;
    fontSpec: string;
    label: Text;
    labelFontSize: number;
    readonly text: Text;
    /**
     * Default shape is a coinGold ellipse around the value.
     *
     * override makeBox, newBox, boxAlign, boxSize, for other options.
     *
     * Initially mouseEnabled = mouseChildren = false;
     * @param name
     * @param initValue
     * @param color [C.coinGold]
     * @param fontSize [ValueCounter.defaultSize]
     * @param fontName [F.defaultFont]
     * @param textColors [undefined = [C.BLACK,C.WHITE]] for C.pickTextColor(color, textColors)]
     */
    constructor(name: string, initValue?: number | string, color?: string, fontSize?: number, fontName?: string, textColors?: string[]);
    textColors?: string[];
    /**
     * repaint shape and text with new color/size/font.
     * Invoked by supplying extra args to setValue().
     */
    protected setFont(fontSize?: number, fontName?: string, textColor?: string): void;
    /** set Label (at bottom of box) */
    setLabel(label: string | Text, offset?: XY, fontSize?: number): void;
    /** make a DisplayObject [Shape.ellispe] of size (high, wide) for this ValueCounter */
    protected makeBox(color: string, high: number, wide: number): PaintableShape;
    /** adjust box (grow/shrink) when value does not 'fit' */
    protected newBox(wide: number, high: number): void;
    /** return required size { width, height } of Box (ellispe or rect or whatever) */
    protected boxSize(text: Text): {
        width: number;
        height: number;
    };
    protected boxAlignment: 'center' | 'left' | 'right';
    boxAlign(align?: "center" | "left" | "right"): void;
    protected setBoxWithValue(value: string | number): void;
    get value(): number | string;
    set value(value: number | string);
    /** old form. @deprecated use this.value */
    getValue(): number | string;
    /** display new value, possibly new color, fontSize, fontName, textColor */
    setValue(value?: string | number, color?: string, fontSize?: number, fontName?: string, textColor?: string): void;
    updateValue(value: number | string): void;
    /**
     * add this ValueCounter to given Container with offsets, listening to target for [Value]Event of type.
     * @param cont likely an overCont
     * @param offest where on cont to place graphic
     * @param target EventDispatcher to listen for updates
     * @param type? type of Event to listen for valf (undefined -> no listener)
     * @param valf? function to extract value from ValueEvent
     */
    attachToContainer(cont: Container, offset?: XY, target?: EventDispatcher, type?: string, valf?: ((ve: Event) => number | string)): void;
}