import { Obj } from '@mathigon/core';
import { TransformMatrix } from '@mathigon/euclid/src';
import { CanvasDrawingOptions, GeoShape, Point, Rectangle, SimplePoint, SVGDrawingOptions } from '@mathigon/euclid';
import { AnimationProperties, AnimationResponse } from './animate';
import { EventCallback } from './events';
import { Observable } from './observable';
import type { Modal } from './components/modal';
import type { Alert } from './components/alert';
import type { IconView } from './components/icon';
import type { Popup } from './components/popup';
import type { Select } from './components/select';
declare global {
    interface Element {
        _view?: ElementView;
    }
}
interface EventListenerOptions {
    capture?: boolean;
    passive?: boolean;
}
export declare abstract class BaseView<T extends HTMLElement | SVGElement> {
    readonly _el: T;
    readonly _data: Obj<unknown>;
    readonly _events: Obj<EventCallback[]>;
    readonly type: string;
    model?: Observable;
    constructor(_el: T);
    get id(): string;
    get data(): DOMStringMap;
    get tagName(): string;
    equals(el: ElementView): boolean;
    /** Adds one or more space-separated classes to this element. */
    addClass(className: string): void;
    removeClass(className: string): void;
    hasClass(className: string): boolean;
    toggleClass(className: string): boolean;
    /** Toggles multiple space-separated class names based on a condition. */
    setClass(className: string, condition: boolean | undefined): void;
    attr(attr: string): string;
    hasAttr(attr: string): boolean;
    setAttr(attr: string, value: unknown): void;
    removeAttr(attr: string): void;
    get attributes(): Attr[];
    get html(): string;
    set html(h: string);
    get text(): string;
    set text(t: string);
    set textStr(t: unknown);
    /** Blurs this DOM element. */
    blur(): void;
    /** Focuses this DOM element. */
    focus(): void;
    getParentModel(): Observable | undefined;
    bindModel(model: Observable, recursive?: boolean): void;
    bindVariable(_model: Observable, _name: string): void;
    private $placeholder?;
    /** Conditionally hide this element from the DOM (using placeholder comments). */
    toggleDOM(show?: boolean): void;
    private reattachModalListenersInSubtree;
    private removeModalListenersInSubtree;
    /**
     * Updates modal listeners for `this` element and its descendants with data-modal attributes.
     * Used when elements are shown/hidden via :if to attach/remove listeners
     */
    private updateModalListenersInSubtree;
    private makeDynamicAttribute;
    private makeDynamicList;
    get bounds(): DOMRect;
    get boundsRect(): Rectangle;
    contains(point: Point): boolean;
    /** Checks if this element is currently visible in the viewport. */
    get isInViewport(): boolean;
    get topLeftPosition(): Point;
    get boxCenter(): Point;
    abstract get width(): number;
    abstract get height(): number;
    abstract get positionLeft(): number;
    abstract get positionTop(): number;
    get scrollWidth(): number;
    get scrollHeight(): number;
    get scrollTop(): number;
    set scrollTop(y: number);
    get scrollLeft(): number;
    set scrollLeft(x: number);
    /** Scrolls the element to a specific position. */
    scrollTo(pos: number, time?: number, easing?: string): void;
    /** Scrolls the element by a given distance. */
    scrollBy(distance: number, time?: number, easing?: string): void;
    /**
     * Retrieves or sets CSS properties on this element. Examples:
     *   * $el.css('color');  // returns 'red'
     *   * $el.css('color', 'blue');
     *   * $el.css({color: 'blue'});
     */
    css(props: string | Obj<string | number>, value?: string | number): string | undefined;
    /** Shortcut for getting the CSS transform style of an element. */
    get transform(): string;
    get transformMatrix(): TransformMatrix;
    /** Finds the x and y scale of this element. */
    get scale(): number[];
    /** Sets the CSS transform on this element. */
    setTransform(posn?: SimplePoint, angle?: number, scale?: number): void;
    /** Sets the CSS transform of this element to an x/y translation. */
    translate(x: number, y: number): void;
    /**
     * Makes the element visible. Use the `data-display` attribute to determine
     * how this is done. Possible options are `visibility`, to use CSS visibility,
     * or CSS display values. The default is `display: block`.
     */
    show(): void;
    /**
     * Makes the element invisible, using CSS visibility (if
     * `data-display="visibility"`), or `display: none`.
     */
    hide(): void;
    /** Hides or shows the element based on a boolean value. */
    toggle(show?: boolean): void;
    /** Checks if an element matches a given CSS selector. */
    is(selector: string): boolean;
    /** Finds the index of an elements, in the list of its siblings. */
    index(): number;
    /** Adds a new child element at the beginning of this one. */
    prepend(newChild: ElementView): void;
    /** Adds a new child element at the end of this one. */
    append(newChild: ElementView | Text): void;
    /** Adds a new element immediately before this one, as a sibling. */
    insertBefore(newChild: ElementView): void;
    /** Adds a new element immediately after this one, as a sibling. */
    insertAfter(newChild: ElementView): void;
    /** Returns this element's next sibling, or undefined. */
    get next(): ElementView;
    /** Returns this element's previous sibling, or undefined. */
    get prev(): ElementView;
    /** The first child element matching a given selector. */
    $<T extends Element | string>(selector: T): QueryResult<T>;
    /** All child elements matching a given selector. */
    $$<T extends string>(selector: T): QueryResults<T>;
    /** Returns this element's parent, or undefined. */
    get parent(): HTMLView;
    /** Finds all parent elements that match a specific selector. */
    parents(selector: string): HTMLView[];
    /** Checks if this element has one of the given elements as parent. */
    hasParent(...$p: ElementView[]): boolean;
    /** Returns an array of all children of this element. */
    get children(): ElementView[];
    /** Returns an array of all child nodes, including text nodes. */
    get childNodes(): Array<ElementView | Text>;
    /** Detach and re-insert to restart CSS animations. */
    restartAnimation(): void;
    /** Detaches an element from the DOM. */
    detach(): void;
    /** Removes this element. */
    remove(): void;
    /** Removes all children of this element. */
    removeChildren(): void;
    /** Creates a copy of this element, and optionally its children. */
    copy(recursive?: boolean): ElementView;
    /** Binds one ore more space-separated event listeners on this element. */
    on(events: string, callback: EventCallback, options?: EventListenerOptions): void;
    /** Binds a one-time event listener on this element. */
    one(events: string, callback: EventCallback, options?: EventListenerOptions): void;
    /**
     * Removes an event listener on this element. If callback is undefined, it
     * removes all event listeners for this event.
     */
    off(events: string, callback?: EventCallback): void;
    /** Triggers a specific event on this element. */
    trigger(events: string, args?: unknown): void;
    /**
     * Binds an event listener for a specific key that is pressed while this
     * element is in focus.
     */
    onKey(keys: string, callback: (e: KeyboardEvent, key: string) => void, options?: {
        meta?: boolean;
        up?: boolean;
    }): void;
    onAttr(name: string, callback: (value: string, initial?: boolean) => void): void;
    /** Returns a promise that is resolved when an event is triggered. */
    onPromise(event: string, resolveImmediately?: boolean): Promise<void>;
    /**
     * Animates multiple CSS properties of this element, with a given duration,
     * delay and ease function.
     */
    animate(rules: AnimationProperties, duration?: number, delay?: number, easing?: string): AnimationResponse;
    /**
     * Runs an enter animation on this element. Valid effect names are
     *   * 'fade', 'pop' and 'descend'
     *   * 'draw' and 'draw-reverse'
     *   * 'slide' and 'slide-down'
     *   * 'reveal', 'reveal-left' and 'reveal-right'
     */
    enter(effect?: string, duration?: number, delay?: number): AnimationResponse;
    /**
     * Runs an exit animation on this element. See `.enter()` for options.
     */
    exit(effect?: string, duration?: number, delay?: number, remove?: boolean): AnimationResponse;
    /**
     * Triggers a CSS animation in an element by adding a class and removing it
     * after the `animationEnd` event.
     */
    effect(className: string): void;
}
export type ElementView = BaseView<HTMLElement | SVGElement>;
export declare class HTMLBaseView<T extends HTMLElement> extends BaseView<T> {
    get offsetTop(): number;
    get offsetLeft(): number;
    get offsetParent(): ElementView;
    /** Returns this element's width, including border and padding. */
    get width(): number;
    /** Returns this element's height, including border and padding. */
    get height(): number;
    /** Returns this element's width, excluding border and padding. */
    get innerWidth(): number;
    /** Returns this element's height, excluding border and padding. */
    get innerHeight(): number;
    /** Returns this element's width, including margins. */
    get outerWidth(): number;
    /** Returns this element's height, including margins. */
    get outerHeight(): number;
    /** @returns {number} */
    get positionTop(): number;
    /** @returns {number} */
    get positionLeft(): number;
    /** Calculates the element offset relative to any other parent element. */
    offset(parent: HTMLView): {
        top: number;
        left: number;
        bottom: number;
        right: number;
    };
}
export type HTMLView = HTMLBaseView<HTMLElement>;
export declare class SVGBaseView<T extends SVGGraphicsElement> extends BaseView<T> {
    readonly type = "svg";
    /** Returns the owner `<svg>` which this element is a child of. */
    get $ownerSVG(): SVGParentView;
    get width(): number;
    get height(): number;
    get positionLeft(): number;
    get positionTop(): number;
    get inverseTransformMatrix(): [[number, number, number], [number, number, number]];
    setTransform(posn?: SimplePoint, angle?: number, scale?: number): void;
    /**
     * Finds the total stroke length of this element. Similar to the SVG
     * `getTotalLength()` function, but works for a wider variety of elements.
     */
    get strokeLength(): number;
    /**
     * Gets the coordinates of the point at a distance `d` along the length of the
     * stroke of this `<path>` element.
     */
    getPointAtLength(d: number): Point;
    /**
     * Gets the coordinates of the point at a position `p` along the length of the
     * stroke of this `<path>` element, where `0 ≤ p ≤ 1`.
     */
    getPointAt(p: number): Point;
    /** Returns a list of all points along an SVG `<path>` element. */
    get points(): SimplePoint[];
    /** Sets the list of points for an SVG `<path>` element.c*/
    set points(p: SimplePoint[]);
    /** Appends a new point to an SVG `<path>` element. */
    addPoint(p: SimplePoint): void;
    /** Finds the center of an SVG `<circle>` element. */
    get center(): Point;
    /** Sets the center of an SVG `<circle>` or `<text>` element. */
    setCenter(c: SimplePoint): void;
    /** Sets the end points of an SVG `<line>` element. */
    setLine(p: SimplePoint, q: SimplePoint): void;
    /** Sets the bounds of an SVG `<rectangle>` element. */
    setRect(rect: Rectangle): void;
    /** Draws a generic geometry object onto an SVG `<path>` element. */
    draw(obj: GeoShape | undefined, options?: SVGDrawingOptions): void;
}
export declare class SVGParentView extends SVGBaseView<SVGSVGElement> {
    /** Returns the viewport coordinates of this `<svg>` element. */
    get viewBox(): DOMRect;
    get $ownerSVG(): this;
    get positionLeft(): number;
    get positionTop(): number;
    /** Returns the intrinsic width of this `<svg>` element. */
    get svgWidth(): number;
    /** Returns the intrinsic height of this `<svg>` element. */
    get svgHeight(): number;
    /** Create a new `<path>` element child and draw a geometry object onto it. */
    drawPath(obj: GeoShape, attributes?: Obj<unknown>, options?: SVGDrawingOptions): SVGView;
    /** Converts an SVG element into a PNG, JPG or SVG data URI. */
    image(type: 'png' | 'jpg' | 'svg', width?: number, height?: number, viewBox?: string): Promise<string>;
    downloadImage(fileName: string, width?: number, height?: number, viewBox?: string): void;
}
export type SVGView = SVGBaseView<SVGGraphicsElement>;
export declare class WindowView extends HTMLBaseView<HTMLHtmlElement | HTMLBodyElement> {
    readonly type = "window";
    get width(): number;
    get height(): number;
    get innerWidth(): number;
    get innerHeight(): number;
    get outerWidth(): number;
    get outerHeight(): number;
    get scrollWidth(): number;
    get scrollHeight(): number;
    get scrollTop(): number;
    set scrollTop(y: number);
    get scrollLeft(): number;
    set scrollLeft(x: number);
}
type InputFieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
export declare class FormView extends HTMLBaseView<HTMLFormElement> {
    readonly type = "form";
    get action(): string;
    /** Summarises the data for an HTML <form> element in an JSON Object. */
    get formData(): Obj<string>;
    get isValid(): boolean;
}
export declare class InputView extends HTMLBaseView<InputFieldElement> {
    readonly type = "input";
    get checked(): boolean;
    set checked(value: boolean);
    get readonly(): boolean;
    set readonly(value: boolean);
    get value(): string;
    set value(v: string);
    bindVariable(model: Observable, name: string): void;
    /** Polyfill for type and inputmode attributes. */
    setInputPattern(value: string): void;
    /** Binds a change event listener. */
    change(callback: (val: string) => void): void;
    validate(callback: (value: string) => string): void;
    setValidity(str: string): void;
    get isValid(): boolean;
}
export declare class CanvasView extends HTMLBaseView<HTMLCanvasElement> {
    private _ctx?;
    readonly type = "canvas";
    /** Returns the drawing context for a `<canvas>` element. */
    getContext(c?: string, options?: WebGLContextAttributes): RenderingContext | null;
    /** Converts a Canvas element into a PNG or JPEG data URI. */
    image(type?: 'png' | 'jpg'): string;
    /** Returns the intrinsic pixel width of this `<canvas>` element. */
    get canvasWidth(): number;
    /** Returns the intrinsic pixel height of this `<canvas>` element. */
    get canvasHeight(): number;
    /** Cached reference to the 2D context for this `<canvas>` element. */
    get ctx(): CanvasRenderingContext2D;
    /** Draws a generic geometry object ont a `<canvas>` element. */
    draw(obj: GeoShape, options?: CanvasDrawingOptions): void;
    /** Clears this canvas. */
    clear(): void;
    /** Clears this canvas. */
    fill(color: string): void;
    /** Erase a specific circle of the canvas. */
    clearCircle(center: Point, radius: number): void;
    downloadImage(fileName: string): void;
}
export declare class MediaView extends HTMLBaseView<HTMLMediaElement> {
    /** Starts playback on a media element. */
    play(): Promise<void>;
    /** Pauses playback on a media element. */
    pause(): void;
}
declare const SVG_TAGS: readonly ["path", "rect", "circle", "ellipse", "polygon", "polyline", "g", "defs", "marker", "line", "text", "tspan", "pattern", "mask", "svg", "foreignObject", "image", "use", "clipPath", "linearGradient", "radialGradient"];
type CreateResult<T extends string> = T extends ('div' | 'p' | 'span') ? HTMLView : T extends 'svg' ? SVGParentView : T extends (typeof SVG_TAGS[number]) ? SVGView : T extends 'canvas' ? CanvasView : T extends 'form' ? FormView : T extends ('input' | 'select' | 'textarea') ? InputView : T extends ('video' | 'audio') ? MediaView : T extends 'x-modal' ? Modal : T extends 'x-popup' ? Popup : T extends 'x-alert' ? Alert : T extends 'x-icon' ? IconView : T extends 'x-select' ? Select : ElementView;
type QueryResult<T extends Element | string> = T extends HTMLDivElement | HTMLSpanElement ? HTMLView : T extends HTMLCanvasElement ? CanvasView : T extends SVGSVGElement ? SVGParentView : T extends SVGElement ? SVGView : T extends Element ? ElementView : T extends string ? CreateResult<T> | undefined : ElementView | undefined;
type QueryResults<T extends string> = T extends string ? Array<CreateResult<T>> : ElementView[];
/**
 * Finds the Element that matches a specific CSS selector, or creates a new
 * Element wrapper around a native HTMLElement instance.
 */
export declare function $<T extends Element | string>(query?: T, context?: ElementView): QueryResult<T>;
/** Finds all elements that match a specific CSS selector. */
export declare function $$<T extends string>(selector: T, context?: ElementView): QueryResults<T>;
/** Creates a new Element instance from a given set of options. */
export declare function $N<T extends string>(tag: T, attributes?: Obj<unknown>, parent?: ElementView): CreateResult<T>;
export declare const $body: WindowView;
export declare const $html: WindowView;
export {};