@kwiz/common/lib/types/helpers/browser.d.ts

KWIZ common utilities and helpers for M365 platform

export declare function triggerNativeEvent(ele: HTMLElement | Element | Document, eventName: string): void;
export declare function addEventHandler(elm: HTMLElement | Element | Document | Window, event: string, handler: EventListenerOrEventListenerObject): void;
/** prompts user to save/download a text file */
export declare function saveFile(fileName: string, fileData: string, type: "application/json" | "text/csv"): void;
export declare function saveZipFile(fileName: string, fileDataBase64: string): void;
/** force browser to download instead of opening a file */
export declare function downloadFile(url: string): void;
export declare function copyTextToClipboard(text: string, multiline?: boolean): boolean;
/** copies the text of an element to the clipboard. if not supported by browser - will return false so caller must check and show
 * a message to the user asking him to hit ctrl+c
 */
export declare function copyToClipboard(el: HTMLElement): boolean;
export declare function pasteTextAtCursor(textArea: HTMLTextAreaElement | HTMLInputElement, text: string): void;
/** wraps the html in a div element and returns it */
export declare function elementFromHtml(html: string): HTMLDivElement;
export declare function HtmlTextContents(htmlElement: string | HTMLElement): string;
export declare function registerDOMContentLoadedListener(doc?: Document): Promise<void>;
export declare function registerDocumentLoadComplete(doc?: Document): Promise<void>;
/** on modern experience, using navagation does inplace-page update.
 * document ready, and all windows events will not trigger and global objects will remain.
 * our app loader will fire this event when the page does that navigation so we can hook up to be notified.
 */
export declare function registerModernInplaceNavigationOnInit(handler: () => void): void;
/** Triggers handler when theme changes on a modern page
 * When the user changes the site's theme, or when navigating to a sub-site, or clicking back
 * in the browser navigating back to parent site with different theme
 */
export declare function registerModernThemeChanged(handler: () => void): void;
interface iObserverHandlerBase {
    handler?: () => void;
    key?: string;
    ignoreSubTree?: boolean;
}
interface iObserverHandlerWithKey extends iObserverHandlerBase {
    key: string;
}
interface iObserverHandlerWithKeyAndHandler extends iObserverHandlerBase {
    handler: () => void;
    key: string;
}
export declare function registerDOMChangedObserver(callbackOrHandler: (() => void) | iObserverHandlerWithKeyAndHandler, ele?: HTMLElement): void;
export declare function removeDOMChangedObserver(callbackOrHandler: (() => void) | iObserverHandlerWithKey, ele?: HTMLElement): void;
export declare function isElementVisible(ele: HTMLElement): boolean;
export declare function querySelectorAllFirstOrNull(selectors: string | string[], maintainOrder?: boolean): Element;
export declare function querySelectorAllMaintainOrder(selectors: string | string[], parent?: HTMLElement | Document | Element): HTMLElement[];
export declare function getScrollParent(node: HTMLElement): HTMLElement;
export declare function getScrollbarWidth(): number;
export declare function cumulativeOffset(element: HTMLElement): {
    top: number;
    left: number;
};
export declare function computedStyleToInlineStyle(elm: HTMLElement, options?: {
    recursive?: boolean;
    removeClassNames?: boolean;
}): void;
export declare function getPageHidden(document?: Document): any;
export declare function getAnimationFlags(): {
    supported: boolean;
    animationName: string;
    keyFramePrefix: string;
    prefix: string;
};
export declare function getAnimationEndEventName(): any;
export declare function isElement(ele: any): ele is HTMLElement;
export declare function isNode(ele: Element | Node): boolean;
export type ElementOrElemenctList = Element | HTMLElement | Element[] | HTMLElement[] | NodeListOf<HTMLElement> | NodeListOf<Element>;
export declare function emptyHTMLElement(eleOrSelector: ElementOrElemenctList): void;
export declare function removeHTMLElement(eleOrSelector: ElementOrElemenctList): void;
export declare function removeAttributeFromHTMLElements(eleOrSelector: ElementOrElemenctList, attributeName: string): void;
export declare function getSelectOptionByValue(selectElement: HTMLSelectElement, value: string): HTMLOptionElement;
export declare function getSelectOptionByIndex(selectElement: HTMLSelectElement, index: number): HTMLOptionElement;
export declare function getSelectedOption(selectElement: HTMLSelectElement): HTMLOptionElement;
export declare function setSelectOptionByValue(selectElement: HTMLSelectElement, value: string): HTMLOptionElement;
export declare function setSelectOptionByIndex(selectElement: HTMLSelectElement, index: number): HTMLOptionElement;
export declare function composePath(evt: Event): EventTarget[];
/** timeouts after 10 seconds by default */
export declare function waitForWindowObject(typeFullName: string, windowOrParent?: Window | any, timeout?: number): Promise<boolean>;
/** timeouts after 10 seconds by default */
export declare function waitFor(checker: () => boolean, timeout?: number, intervalLength?: number): Promise<boolean>;
/**
 * Waits for an async check to return true or times out.
 * @param checker           Async function that returns boolean result.
 * @param timeout           The timeout in milliseconds. Defaults to 10000ms.
 * @param intervalLength    The interval length in milliseconds to retry the checker function. Defaults to 50ms.
 */
export declare function waitForAsync(checker: () => Promise<boolean>, timeout?: number, intervalLength?: number): Promise<boolean>;
/**
 * An async function that returns after a set delay.
 * @param delay The delay in milliseconds. Defaults to 500ms.
 */
export declare function delayAsync(delay?: number): Promise<unknown>;
export interface IElementCreationOptions<T> {
    attributes?: {
        [attribName: string]: string;
    };
    properties?: {
        [K in keyof T]?: T[K];
    };
    style?: {
        [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P];
    };
}
export declare function addStyleSheet(options?: IElementCreationOptions<HTMLLinkElement>, doc?: Document): void;
export declare function createStylesheet(options?: IElementCreationOptions<HTMLLinkElement>, doc?: Document): HTMLLinkElement;
export declare function createHtmlElement<T extends HTMLElement>(tagName: string, options?: IElementCreationOptions<T>, doc?: Document): T;
export declare function isInsideIFrame(win?: Window): boolean;
export declare function isIFrameAccessible(iframeEle: HTMLIFrameElement): boolean;
export declare function HTMLEncode(d: string): string;
export declare function HTMLDecode(a: any): string;
export declare function ScriptEncode(e: any): string;
export declare function addEventListeners(eles: ElementOrElemenctList, events: string | string[], listener: (evt: Event) => void, useCapture?: boolean): void;
/** defer calling this function multiple times within X time frame to execute only once after the last call */
export declare function debounce<T extends (...args: any[]) => void>(callback: T, ms: number, thisArg?: any): T;
/** call a funciton X number of times, on a specific interval. */
export declare function interval<T extends () => void>(callback: T, msBetweenCalls: number, numberOfTimesToCall: number, thisArg?: any): void;
/** throttle repeated calls to callback, makes sure it is only called once per *wait* at most, but won't defer it for longer than that.
 * Unlike debounce, which can end up waiting for 5 minutes if it is being called repeatedly.
 */
export declare function throttle<T extends (...args: any[]) => any>(callback: T, wait?: number, thisArg?: any): T;
/** allows you to register, re-register or remove a resize handler without ending up with multiple registrations. */
export declare function OnWindowResize(handlerID: string, handler: () => void): void;
export declare function dispatchCustomEvent<T>(obj: HTMLElement | Window | Document, eventName: string, params?: {
    bubbles?: boolean;
    cancelable?: boolean;
    detail?: T;
}): void;
export declare function addStyleElement(cssText: string, id?: string): HTMLStyleElement;
export declare function getReactInstanceFromElement(node: any): any;
/** registers a listener to when the browser url changed */
export declare function registerUrlChanged(callback: () => void): void;
export declare const DisableAnchorInterceptAttribute = "data-interception";
export declare const DisableAnchorInterceptValue = "off";
export declare function DisableAnchorIntercept(link: HTMLAnchorElement): void;
/** go over HTML and add  data-interception="off" to all <a> tags. */
export declare function DisableAnchorInterceptInHtml(html: string): string;
/** adding the disable attribute to all a links in the container that do not already have them. returning the number of links that were disabled (not ones that were already disabled before) */
export declare function DisableAnchorInterceptInElement(container: ParentNode): number;
export declare function isChildOf(node: HTMLElement, parent: {
    /** parent has one of those classes */
    class?: string | string[];
    id?: string | string[];
    tagName?: string | string[];
}): boolean;
export declare function findAcestor(ele: HTMLElement, predicate: (ele2: HTMLElement) => boolean): HTMLElement;
export declare function loadModernFormsCSS(): void;
interface ILoadingOverlayOptions {
    bgColor?: string;
    innerHtml?: string;
}
export declare function showLoadingOverlay(elm: HTMLElement, options?: ILoadingOverlayOptions): void;
export declare function hideLoadingOverlay(elm: HTMLElement): void;
export declare function getLoadingOverlayHtml(options?: ILoadingOverlayOptions): string;
export declare function getUniqueElementId(id?: string): string;
export declare function stopEvent(e: {
    preventDefault(): void;
    stopPropagation(): void;
}): void;
/** send in --color or var(--color) and get the computed value for an element */
export declare function getCSSVariableValue(value: string, elm?: HTMLElement): string;
/**
 * Converts an HTMLImageElement/SVGImageElement to base 64 and resizes the image to the exact dimensions of the element.
 * The following image types are supported: jpg, jpeg, gif, png, webp, bmp
 */
export declare function convertImageToBase64(imgEle: HTMLImageElement | SVGImageElement, quality?: ImageSmoothingQuality): Promise<string>;
export {};