web-ui-pack/notifyElement.d.ts

Web package with UI elements

import WUPBaseModal from "./baseModal";
export declare const enum NotifyOpenCases {
    /** When $open() is called programmatically */
    onManualCall = 0,
    /** On init (when appended to layout/HTML) */
    onInit = 1
}
export declare const enum NotifyCloseCases {
    /** When $close() is called programmatically */
    onManualCall = 0,
    /** When was click on button[close] */
    onCloseClick = 1,
    /** When closed according to pointed show-time */
    onTimeEnd = 2
}
declare const tagName = "wup-notify";
declare global {
    namespace WUP.Notify {
        interface ShowOptions {
            /** Message appended to element  */
            textContent: string;
            /** Options to override defaults */
            defaults?: Partial<WUP.Notify.Options>;
            /** Called when element is already rendered; so possible to change innerHTML */
            onRender?: (el: WUPNotifyElement) => void;
            /** Default class that appended to element */
            className?: string;
        }
        interface Options {
            /** Case when need to show;
             * @defaultValue `NotifyOpenCases.onInit` */
            openCase: NotifyOpenCases;
            /** Position on the screen
             * @defaultValue 'bottom-left' */
            placement: "top-left" | "top-middle" | "top-right" | "bottom-left" | "bottom-middle" | "bottom-right";
            /** Time (ms) after that Notify is closed; if provide `0` then it will be closed only by click event
             *  @defaultValue 5000 (ms) */
            autoClose: number | null | false;
            /** Close on element click
             * @defaultValue false */
            closeOnClick: boolean;
            /** Remove itself after closing
             * @defaultValue true */
            selfRemove: boolean;
            /** Pause on mouse-hover OR touch; AND when autoClose > 0
             * @defaultValue true */
            pauseOnHover: boolean;
            /** Pause when window loses focus
             * @defaultValue true */
            pauseOnWinBlur: boolean;
        }
        interface EventMap extends WUP.BaseModal.EventMap<NotifyOpenCases, NotifyCloseCases> {
        }
        interface JSXProps extends WUP.BaseModal.JSXProps, WUP.Base.OnlyNames<Options> {
            "w-placement"?: Options["placement"];
            "w-autoClose"?: number | "";
            "w-closeOnClick"?: boolean | "";
            "w-selfRemove"?: boolean | "";
            "w-pauseOnHover"?: boolean | "";
            "w-pauseOnWinBlur"?: boolean | "";
        }
    }
    interface HTMLElementTagNameMap {
        [tagName]: WUPNotifyElement;
    }
}
declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            /**  Modal element
             *  @see {@link WUPNotifyElement} */
            [tagName]: WUP.Base.ReactHTML<WUPNotifyElement> & WUP.Notify.JSXProps;
        }
    }
}
declare module "preact/jsx-runtime" {
    namespace JSX {
        interface HTMLAttributes<RefType> {
        }
        interface IntrinsicElements {
            /**  Modal element
             *  @see {@link WUPNotifyElement} */
            [tagName]: HTMLAttributes<WUPNotifyElement> & WUP.Notify.JSXProps;
        }
    }
}
/** Notify element
 * @see demo {@link https://yegorich555.github.io/web-ui-pack/notify}
 * @example
 * JS/TS
 * ```js
 * WUPNotifyElement.$defaults.placement = ...;
 *
 * const el = document.createElement('wup-notify');
 * el.textContent = ...;
 * document.body.append(el);
 * el.$onClose = () => console.warn("its closed & self removed");
 *```
 * HTML
 * ```html
 * <wup-notify>Some content here</wup-notify>
 * ``` */
export default class WUPNotifyElement<TOptions extends WUP.Notify.Options = WUP.Notify.Options, Events extends WUP.Notify.EventMap = WUP.Notify.EventMap> extends WUPBaseModal<TOptions, Events> {
    #private;
    static get observedOptions(): Array<keyof WUP.Notify.Options>;
    static get observedAttributes(): Array<string>;
    static get $styleRoot(): string;
    static get $style(): string;
    static $defaults: WUP.Notify.Options;
    /** Create & show notification
     * @returns created element
     * @tutorial Troubleshooting
     * * On close notify-element self-removed */
    static $show(opts: WUP.Notify.ShowOptions): WUPNotifyElement;
    /** Reference to button[close] */
    $refClose?: HTMLButtonElement;
    /** Reference to progress bar  */
    $refProgress?: HTMLDivElement;
    $isPaused: boolean;
    /** Pause progress bar & closing by time (if option autoClose is set)
     * @returns ms that left before closing */
    $pause(): number;
    /** Returns whethere element in play mode and will be closed after a time */
    get $isPlayed(): boolean;
    /** Play/resume progress bar & close/hide by pointed time
     * @param ms time closing; if missed then will be used stored time from $pause OR from $options.autoClose */
    $play(ms?: number | null): void;
    /** Called once on opening */
    protected gotRender(isOpening?: boolean): void;
    protected gotChanges(propsChanged: string[] | null): void;
    /** Saved dy position */
    _dy: number;
    /** Saved dx position */
    _dx: string;
    gotOpen(openCase: NotifyOpenCases, e: MouseEvent | null): void;
    /** Returns if item is visible and has same placement option */
    isSameSibling(item: WUPNotifyElement): boolean;
    /** Update vertical positions of all (or pointed) items + shift if something required */
    refreshVertical(items?: WUPNotifyElement[], isInit?: boolean): void;
    gotClose(closeCase: NotifyCloseCases, ev: MouseEvent | null): void;
    protected resetState(): void;
    /** Called when handles click to check if was close-click */
    gotClick(e: MouseEvent): void;
    /** Singleton array with opened elements */
    get _openedItems(): Array<WUPNotifyElement>;
}
export {};