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 { "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 = [...]; * * ``` * @defaultValue [4,4] */ "w-overflowOffset"?: string; "w-overflowFade"?: boolean | ""; /** Anchor element that need to overflow by spinner * * Point querySelector to related element * @example * ```html *
* * ``` * @defaultValue `auto`: parentElement */ "w-overflowTarget"?: string; } } 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.Base.ReactHTML & WUP.Spin.JSXProps; } } } declare module "preact/jsx-runtime" { namespace JSX { interface HTMLAttributes { } interface IntrinsicElements { /** Flexible animated element with ability to place over target element without position relative * @see {@link WUPSpinElement} */ [tagName]: HTMLAttributes & WUP.Spin.JSXProps; } } } /** 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 * * ``` */ export default class WUPSpinElement extends WUPBaseElement { #private; static get $styleRoot(): string; static get $styleApplied(): string; static get $style(): string; static get mappedAttributes(): Record; static $defaults: WUP.Spin.Options; /** Used to clone defaults to options on init; override it to clone */ static cloneDefaults>(): 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 | 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 | 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 {};