import { BrowserVisibleArea, DeviceType, RGBType } from '../types/ui.type';
import { Nullable } from '../types/general';
/**
 * Get the browser's visible area
 *
 * @returns {BrowserVisibleArea} The browser visible area.
 */
export declare const getBrowserVisibleArea: () => BrowserVisibleArea;
/**
 * find the parent dom with selector
 * if selector is a component tag name like 'vega-card',
 * we can call by findParent<HTMLVegaCardElement>(this.el, "vega-card") get the HTMLVegaCardElement;
 *
 * The function is generic, meaning that it can be used with any type of element
 *
 * @typedef HTMLElementTagNameMap
 * @typedef T
 * @param {HTMLElement} el - The element to start searching from.
 * @param {keyof HTMLElementTagNameMap | string} selector - The selector to find the parent element with.
 * @param {{ outerMost?: boolean }} [options] - options.outerMost: boolean - whether to find the outermost parent that matches the selector.
 * @param {boolean} [options.outerMost=false] - Whether to find the outermost parent that matches the selector.
 * @returns {Nullable<T>} The first element that matches the selector.
 */
export declare function findParent<T extends HTMLElement>(el: Nullable<HTMLElement>, selector: keyof HTMLElementTagNameMap | string, options?: {
  outerMost?: boolean;
}): Nullable<T>;
/**
 * It returns the device type based on the user agent
 *
 * @returns {DeviceType} The device type.
 */
export declare const getDeviceType: () => DeviceType;
/**
 * return class sting without '', null, undefined, Nan
 *
 * @param {string[]} classes - class array
 * @returns {string} - class string
 */
export declare const arrayToClassString: (classes: string[]) => string;
/**
 * If the element is the target, return true, otherwise, if the element has a parent, return the result
 * of calling isParent on the parent, otherwise return false.
 *
 * @param {HTMLElement} element - The element to check if it's a parent of the target.
 * @param {HTMLElement} target - The element that you want to check if it's a parent of the element.
 * @returns {boolean} A boolean value.
 */
export declare function isParent(element: Nullable<HTMLElement>, target: HTMLElement): boolean;
/**
 * "Scroll the container to the item."
 * The function takes two parameters:
 * container: The container to scroll.
 * item: The item to scroll to.
 * The function scrolls the container to the item
 *
 * @param {HTMLElement} container - The container element that you want to scroll.
 * @param {HTMLElement} item - The item to scroll to.
 * @returns {void} - return.
 */
export declare function containerScrollToItem(container: HTMLElement, item: HTMLElement): void;
/**
 * Check if the element is visible by checking if the element's height is greater than 0.
 *
 * @param {HTMLElement} element - HTMLElement - the element to check if it's visible
 * @returns {boolean} A boolean value.
 */
export declare function isElementVisible(element: HTMLElement): boolean;
/**
 * It takes a string and returns a number, or null if the string is empty
 *
 * @param {string} input - The string to extract the number from.
 * @returns {number | null} A function that takes a string and returns a number or null.
 */
export declare function extractNumberFromString(input: string): number | null;
/**
 * It takes a hexadecimal color string and returns an object with the red, green, and blue values
 *
 * @param {string} hex - The hexadecimal color value to convert to RGB.
 * @returns {RGBType | null} - The RGB color value
 */
export declare function hexToRGB(hex: string): RGBType | null;
/**
 * It convert RGB color to Hex color
 *
 * @param {string} rgb - The RGB color.
 * @returns {Nullable<string>} - The hex color
 */
export declare function rgbToHex(rgb: string): Nullable<string>;
/**
 * It converts a hexadecimal color code from shorthand form to full form
 *
 * @param {string} hex - The hexadecimal color code that you want to convert to full form.
 * @returns {string} the hexFullForm variable.
 */
export declare function getHexFromShorthand(hex: string): string;
/**
 * It returns true if the text in the element is wrapped.
 *
 * @param {HTMLElement} element - The element to be judged.
 * @returns {boolean} A boolean value.
 */
export declare function isTextWrapped(element: HTMLElement): boolean;
/**
 * "Get the computed style of an element."
 * The first parameter is the element whose style we want to get. The second parameter is the name of
 * the style we want to get
 *
 * @param {HTMLElement} element - The element whose style you want to get.
 * @param {string} styleName - The name of the style you want to get.
 * @returns {string} The computed style of the element.
 */
export declare function getElementComputedStyle(element: HTMLElement, styleName: string): string;
/**
 * Get the deep active element in shadow component
 *
 * @param {Document | ShadowRoot} root the root element
 * @param {boolean} fallbackToHost whether to fallback to host when active element is null, default is false.
 * In some cases, web component is used in a11y scenario, assistive technology may trigger click event on the host element but the active element is null, setting fallbackToHost to true can help to get the host element in this case.
 * @returns {Nullable<HTMLElement>} active element
 */
export declare function getDeepActiveElementInShadow(root?: Document | ShadowRoot, fallbackToHost?: boolean): Nullable<HTMLElement>;
/**
 * Check if a node is an HTML element.
 *
 * @param {Node} element - The node to check.
 * @returns {element is HTMLElement} - True if the node is an HTML element, false otherwise.
 */
export declare function isHTMLElement(element: Node): element is HTMLElement;
/**
 * Checks if the click event is likely triggered by VoiceOver by comparing the click coordinates with the center of the clicked element.
 * VoiceOver clicks typically have coordinates that are very close to the center of the element,
 *   so if the click is within 1 pixel of the center, we consider it a VoiceOver click.
 *
 * @param {MouseEvent} clickEvent - The click event to check.
 * @returns {boolean} True if the click is likely a VoiceOver click, false otherwise.
 */
export declare function checkIsVoiceOverClick(clickEvent: MouseEvent): boolean;
/**
 * Checks if the given element is focusable based on its tag, attributes, and tabIndex.
 *
 * @param {HTMLElement} element - The element to check.
 * @returns {boolean} True if the element is focusable, false otherwise.
 */
export declare function isFocusableElement(element: HTMLElement): boolean;
/**
 * Recursively searches for the first focusable element within the given container, including its shadow DOM descendants.
 *
 * @param {HTMLElement | ShadowRoot} container - The container to search within.
 * @returns {Nullable<HTMLElement>} The first focusable element found, or null if none exists.
 */
export declare function getFirstFocusableElement(container: HTMLElement | ShadowRoot): Nullable<HTMLElement>;