web-ui-pack/spinElement.d.ts

import WUPBaseElement from "./baseElement";
declare const tagName = "wup-spin";
declare global {
    namespace WUP.Spin {
        interface Defaults {
            /** Place inside parent as inline-block otherwise overflow target in the center (`position: relative` is not required);
             * @defaultValue false */
            inline?: boolean;
            /** 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;
            /** Allow to reduce size to fit parent (for max-size change css-var --spin-size)
             * @defaultValue false for inline:true, true for inline:false */
            fit?: boolean;
        }
        interface Options extends Defaults {
            /** Anchor element that need to oveflow by spinner, by default it's parentElement  */
            overflowTarget?: HTMLElement | null;
        }
        interface Attributes {
            /** Place inside parent as inline-block or overflow target in the center (`position: relative` isnot  required);
             * @defaultValue false */
            inline?: boolean | "";
            /** Allow to create shadowBox to partially hide target (only for `inline: false`)
             * @defaultValue true */
            overflowFade?: boolean | "";
            /** Allow to reduce size to fit parent (for max-size change css-var --spin-size)
             * @defaultValue false for inline:true, true for inline:false */
            fit?: boolean | "";
        }
        interface JSXProps<T extends WUPSpinElement> extends WUP.Base.JSXProps<T>, Attributes {
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPSpinElement;
    }
    namespace JSX {
        interface IntrinsicElements {
            /** Flexible animated element with ability to place over target element without position relative
             * @see {@link WUPSpinElement} */
            [tagName]: WUP.Spin.JSXProps<WUPSpinElement>;
        }
    }
}
/** Flexible animated element with ability to place over target element without position relative
 * @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 inline="false" fit="true" overflowfade="true"></wup-spin>
 *  <!-- Inline + fit to parent -->
 *  <wup-spin inline fit></wup-spin>
 *  <!-- OR; it's equal to <wup-spin inline="false" fit="true" overflowfade="false"></wup-spin> -->
 *  <wup-spin overflowfade="false"></wup-spin>
 * </button>
 * ```
 */
export default class WUPSpinElement<TOptions extends WUP.Spin.Options = WUP.Spin.Options> extends WUPBaseElement<TOptions> {
    #private;
    static get observedOptions(): Array<keyof WUP.Spin.Options>;
    static get observedAttributes(): Array<LowerKeys<WUP.Spin.Attributes>>;
    static get $styleRoot(): string;
    static get $styleApplied(): string;
    static get $style(): string;
    static $defaults: WUP.Spin.Defaults;
    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;
    get target(): HTMLElement;
    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, itemsCount: number, getter: () => string): void;
/** Apply on class to change spinner-style */
export declare function spinUseRing(cls: typeof WUPSpinElement): void;
/** Apply on class to change spinner-style */
export declare function spinUseDualRing(cls: typeof WUPSpinElement): void;
/** Apply on class to change spinner-style */
export declare function spinUseTwinDualRing(cls: typeof WUPSpinElement): void;
/** Apply on class to change spinner-style */
export declare function spinUseRoller(cls: typeof WUPSpinElement): void;
/** Apply on class to change spinner-style */
export declare function spinUseDotRoller(cls: typeof WUPSpinElement): void;
/** Apply on class to change spinner-style */
export declare function spinUseDotRing(cls: typeof WUPSpinElement): void;
/** Apply on class to change spinner-style */
export declare function spinUseSpliceRing(cls: typeof WUPSpinElement): void;
/** Apply on class to change spinner-style */
export declare function spinUseHash(cls: typeof WUPSpinElement): void;
export {};