import WUPBaseElement, { AttributeMap } from "./baseElement";
declare const tagName = "wup-spin";
declare global {
    namespace WUP.Spin {
        interface Options {
            /** Place inside parent as inline-block otherwise overflow target in the center (`position: relative` is not required);
             * @defaultValue false */
            inline: boolean;
            /** Allow to reduce size to fit parent (for max-size change css-var --spin-size)
             * @defaultValue `auto` => `false` when inline:true, `true` when inline:false */
            fit: boolean | "auto";
            /** Virtual padding of parentElement [top, right, bottom, left] or [top/bottom, right/left] in px
             * @defaultValue [4,4] */
            overflowOffset: [number, number, number, number] | [number, number];
            /** Allow to create shadowBox to partially hide target (only for `inline: false`)
             * @defaultValue true */
            overflowFade: boolean;
            /** Anchor element that need to overflow by spinner; ignored if option `inline='true'`
             * @defaultValue `auto`: parentElement */
            overflowTarget: HTMLElement | "auto";
        }
        interface JSXProps extends WUP.Base.OnlyNames<Options> {
            "w-inline"?: boolean | "";
            "w-fit"?: boolean | "" | "auto";
            /** Virtual padding of parentElement [top, right, bottom, left] or [top/bottom, right/left] in px;
             * * Point Global reference to object with array
             * @example
             * ```js
             * window.someObj = [...];
             * <wup-spin w-overflowoffset="window.someObj"></wup-spin>
             * ```
             * @defaultValue [4,4] */
            "w-overflowOffset"?: string;
            "w-overflowFade"?: boolean | "";
            /** Anchor element that need to overflow by spinner
             * * Point querySelector to related element
             * @example
             * ```html
             * <div id="me"></wup-spin>
             * <wup-spin "w-overflowTarget="#me"></wup-spin>
             * ```
             * @defaultValue `auto`: parentElement */
            "w-overflowTarget"?: string;
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPSpinElement;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /** Flexible animated element with ability to place over target element without position relative
             * @see {@link WUPSpinElement} */
            [tagName]: WUP.Base.ReactHTML<WUPSpinElement> & WUP.Spin.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /** Flexible animated element with ability to place over target element without position relative
             * @see {@link WUPSpinElement} */
            [tagName]: HTMLAttributes<WUPSpinElement> & WUP.Spin.JSXProps;
        }
    }
}
/** Flexible animated element with ability to place over target element without position relative
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/spin}
 * @tutorial Troubleshooting
 * * when used several spin-types at once: define `--spin-1` & `--spin-2` colors manually per each spin-type
 * @example
 * JS/TS
 * ```js
 * import WUPSpinElement, { spinUseTwinDualRing } from "web-ui-pack/spinElement";
 * spinUseTwinDualRing(WUPSpinElement); // to apply another style
 *
 * const el = document.body.appendChild(document.createElement('wup-spin'));
 * el.$options.inline = false;
 * el.$options.overflowTarget = document.body.appendChild(document.createElement('button'))
 * ```
 * HTML
 * ```html
 * <button> Loading...
 *  <!-- Default; it's equal to <wup-spin></wup-spin>-->
 *  <wup-spin w-inline="false" w-fit="true" w-overflowfade="true"></wup-spin>
 *  <!-- Inline + fit to parent -->
 *  <wup-spin w-inline w-fit></wup-spin>
 *  <!-- OR; it's equal to <wup-spin w-inline="false" w-fit="true" w-overflowfade="false"></wup-spin> -->
 *  <wup-spin w-overflowfade="false"></wup-spin>
 * </button>
 * ``` */
export default class WUPSpinElement<TOptions extends WUP.Spin.Options = WUP.Spin.Options> extends WUPBaseElement<TOptions> {
    #private;
    static get $styleRoot(): string;
    static get $styleApplied(): string;
    static get $style(): string;
    static get mappedAttributes(): Record<string, AttributeMap>;
    static $defaults: WUP.Spin.Options;
    /** Used to clone defaults to options on init; override it to clone  */
    static cloneDefaults<T extends Record<string, any>>(): T;
    static _itemsCount: number;
    /** Force to update position (when options changed) */
    $refresh(): void;
    protected connectedCallback(): void;
    protected gotRemoved(): void;
    protected gotRender(): void;
    protected gotReady(): void;
    $refFade?: HTMLDivElement;
    protected gotChanges(propsChanged: Array<keyof WUP.Spin.Options> | null): void;
    /** Returns value based on `$options.fit` */
    get isFitParent(): boolean;
    /** Returns target element based on $options */
    get target(): HTMLElement;
    /** Returns whether exists parent with position relative */
    get hasRelativeParent(): boolean;
    /** Update position. Call this method in cases when you changed options */
    protected updatePosition(): Pick<DOMRect, "width" | "height" | "top" | "left"> | undefined;
}
/** Basic function to change spinner-style */
export declare function spinSetStyle(cls: typeof WUPSpinElement<any>, itemsCount: number, getter: () => string): void;
/** Apply on class to change spinner-style */
export declare function spinUseRing(cls: typeof WUPSpinElement<any>): void;
/** Apply on class to change spinner-style */
export declare function spinUseDualRing(cls: typeof WUPSpinElement<any>): void;
/** Apply on class to change spinner-style */
export declare function spinUseTwinDualRing(cls: typeof WUPSpinElement<any>): void;
/** Apply on class to change spinner-style */
export declare function spinUseRoller(cls: typeof WUPSpinElement<any>): void;
/** Apply on class to change spinner-style */
export declare function spinUseDotRoller(cls: typeof WUPSpinElement<any>): void;
/** Apply on class to change spinner-style */
export declare function spinUseDotRing(cls: typeof WUPSpinElement<any>): void;
/** Apply on class to change spinner-style */
export declare function spinUseSpliceRing(cls: typeof WUPSpinElement<any>): void;
/** Apply on class to change spinner-style */
export declare function spinUseHash(cls: typeof WUPSpinElement<any>): void;
export {};