web-ui-pack

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... *  * <wup-spin w-inline="false" w-fit="true" w-overflowfade="true"></wup-spin> *  * <wup-spin w-inline w-fit></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 {};