import { DOMRenderer, JsxProps, RenderMode, VNode, DataObject, JsxChildren } from "dom-renderer";
import { CustomElement, DelegateEventHandler, CustomFormElement, HTMLFieldProps } from "web-utility";
import { IReactionDisposer, IReactionPublic } from "mobx";
export interface ComponentMeta extends ElementDefinitionOptions, Partial<ShadowRootInit> {
    tagName: string;
    transitible?: boolean;
    renderMode?: RenderMode;
}
export type ClassComponent = CustomElementConstructor;
export type WebCellProps<T extends HTMLElement = HTMLElement> = JsxProps<T>;
export interface WebCell<P = {}> extends CustomElement {
    props: P & WebCellProps;
    internals: ReturnType<HTMLElement['attachInternals']>;
    renderer: DOMRenderer;
    root: ParentNode;
    mounted: boolean;
    update: () => Promise<void>;
    /**
     * Called at DOM tree updated
     */
    updatedCallback?: () => any;
    /**
     * Called at first time of DOM tree updated
     */
    mountedCallback?: () => any;
    emit: (event: string, detail?: any, option?: EventInit) => boolean;
}
interface DelegatedEvent {
    type: keyof HTMLElementEventMap;
    selector: string;
    handler: EventListener;
}
/**
 * `class` decorator of Web components
 */
export function component(meta: ComponentMeta): <T extends ClassComponent>(Class: T, { addInitializer }: ClassDecoratorContext<ClassComponent>) => T;
/**
 * Method decorator of DOM Event delegation
 */
export function on<T extends HTMLElement>(type: DelegatedEvent['type'], selector: string): (method: DelegateEventHandler, { addInitializer }: ClassMethodDecoratorContext<T>) => void;
export type ComponentTag = string | WebCellComponent;
export interface FunctionCellProps extends WebCellProps {
    component: FC | AFC;
}
export interface FunctionCell extends WebCell<FunctionCellProps> {
}
export class FunctionCell extends HTMLElement implements WebCell<FunctionCellProps> {
    accessor component: FunctionCellProps['component'];
    accessor vNode: VNode | undefined;
    disconnectedCallback: IReactionDisposer;
    render(): VNode;
}
type GetAsyncProps<T> = T extends () => Promise<{
    default: FunctionComponent<infer P> | ClassComponent;
}> ? P : {};
export const lazy: <T extends () => Promise<{
    default: FunctionComponent | ClassComponent;
}>>(loader: T) => (props: GetAsyncProps<T>) => VNode;
export class Defer<T = void> {
    resolve: (value: T | PromiseLike<T>) => void;
    reject: (reason?: any) => void;
    promise: Promise<T>;
}
export function getMobxData<T extends DataObject>(observable: T): T;
export const animated: <T extends HTMLElement | SVGElement>(root: T, targetSelector: string) => Promise<AnimationEvent>;
export type PropsWithChildren<P extends DataObject = {}> = P & {
    children?: JsxChildren;
};
export type FunctionComponent<P extends DataObject = {}> = (props: P) => VNode;
export type AsyncFunctionComponent<P extends DataObject = {}> = (props: P) => Promise<VNode>;
export type FC<P extends DataObject = {}> = FunctionComponent<P>;
export type AFC<P extends DataObject = {}> = AsyncFunctionComponent<P>;
export type WebCellComponent = FunctionComponent | ClassComponent;
export type ComponentType<P extends object = {}> = FC<P> | (WebCell<P> & ClassComponent);
export type ComponentProps<C extends keyof JSX.IntrinsicElements | WebCellComponent> = C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C] : C extends FC<infer P> ? P : C extends WebCell<infer P> & ClassComponent ? P : never;
export type ObservableComponent = WebCellComponent | AsyncFunctionComponent;
export type AwaitedComponent<T extends ObservableComponent> = T extends (props: infer P) => Promise<infer R> ? (props: P) => R : T;
/**
 * `class` decorator of Web components for MobX
 */
export function observer<T extends ObservableComponent>(func: T, _: ClassDecoratorContext): AwaitedComponent<T>;
export function observer<T extends ObservableComponent>(func: T): AwaitedComponent<T>;
/**
 * `accessor` decorator of MobX `@observable` for HTML attributes
 */
export function attribute<C extends HTMLElement, V>(_: ClassAccessorDecoratorTarget<C, V>, { name, addInitializer }: ClassAccessorDecoratorContext<C>): void;
export type ReactionExpression<I = any, O = any> = (data: I, reaction: IReactionPublic) => O;
export type ReactionEffect<V> = (newValue: V, oldValue: V, reaction: IReactionPublic) => any;
/**
 * Method decorator of [MobX `reaction()`](https://mobx.js.org/reactions.html#reaction)
 *
 * @example
 * ```tsx
 * import { observable } from 'mobx';
 * import { component, observer, reaction } from 'web-cell';
 *
 * @component({ tagName: 'my-tag' })
 * @observer
 * export class MyTag extends HTMLElement {
 *     @observable
 *     accessor count = 0;
 *
 *     @reaction(({ count }) => count)
 *     handleCountChange(newValue: number, oldValue: number) {
 *         console.log(`Count changed from ${oldValue} to ${newValue}`);
 *     }
 *
 *     render() {
 *        return (
 *            <button onClick={() => this.count++}>
 *                Up count {this.count}
 *            </button>
 *        );
 *    }
 * }
 * ```
 */
export const reaction: <C extends HTMLElement, V>(expression: ReactionExpression<C, V>) => (effect: ReactionEffect<V>, { addInitializer }: ClassMethodDecoratorContext<C>) => void;
export type PositionY = 'Top' | 'Bottom';
export type DirectionX = 'Left' | 'Right';
export type DirectionY = 'Up' | 'Down';
export type Direction = DirectionX | DirectionY;
export type AnimationMode = 'In' | 'Out';
export type AttentionSeekers = 'bounce' | 'flash' | 'pulse' | 'rubberBand' | `shake${'X' | 'Y'}` | 'headShake' | 'swing' | 'tada' | 'wobble' | 'jello' | 'heartBeat';
export type BackEntrances = `backIn${Direction}`;
export type BackExits = `backOut${Direction}`;
export type BouncingEntrances = `bounceIn${'' | Direction}`;
export type BouncingExits = `bounceOut${'' | Direction}`;
export type FadingEntrances = `fadeIn${'' | `${Direction}${'' | 'Big'}`}` | `fadeIn${PositionY}${DirectionX}`;
export type FadingExits = `fadeOut${'' | `${Direction}${'' | 'Big'}` | `${PositionY}${DirectionX}`}`;
export type Flippers = `flip${'' | `${AnimationMode}${'X' | 'Y'}`}`;
export type Lightspeed = `lightSpeed${AnimationMode}${DirectionX}`;
export type RotatingEntrances = `rotateIn${'' | `${DirectionY}${DirectionX}`}`;
export type RotatingExits = `rotateOut${'' | `${DirectionY}${DirectionX}`}`;
export type Specials = 'hinge' | 'jackInTheBox' | `roll${'In' | 'Out'}`;
export type ZoomingEntrances = `zoomIn${'' | Direction}`;
export type ZoomingExits = `zoomOut${'' | Direction}`;
export type SlidingEntrances = `slideIn${Direction}`;
export type SlidingExits = `slideOut${Direction}`;
export type AnimationType = AttentionSeekers | BackEntrances | BackExits | BouncingEntrances | BouncingExits | FadingEntrances | FadingExits | Flippers | Lightspeed | RotatingEntrances | RotatingExits | Specials | ZoomingEntrances | ZoomingExits | SlidingEntrances | SlidingExits;
export interface AnimateCSSProps {
    type: AnimationType;
    component: FC<WebCellProps>;
}
export interface AnimateCSS extends WebCell<AnimateCSSProps> {
}
export class AnimateCSS extends HTMLElement implements WebCell<AnimateCSSProps> {
    accessor type: AnimationType;
    accessor playing: boolean;
    component: FC<WebCellProps>;
    connectedCallback(): Promise<void>;
    typeChanged(): Promise<void>;
    render(): VNode;
}
export interface WebField<P = {}> extends CustomFormElement, WebCell<P & HTMLFieldProps> {
}
/**
 * `class` decorator of Form associated Web components
 */
export function formField<T extends ClassComponent>(Class: T, _: ClassDecoratorContext): T;

//# sourceMappingURL=index.d.ts.map