import { Hole } from 'uhtml'; import { Callback } from '../tools/state/statemanager.js'; import { GgUserInteractionEvent } from '../tools/state/userinteractionevent.js'; import IGirafeContext from '../tools/context/icontext.js'; declare abstract class GirafeHTMLElement extends HTMLElement { protected abstract templateUrl: string | null; protected abstract styleUrls: string[] | null; protected template: Hole | (() => Hole); readonly name: string; protected shadow: ShadowRoot; protected displayStyle?: string; private timeoutId?; protected rendered: boolean; private readonly callbacks; private readonly unsafeCache; private _context?; protected get context(): IGirafeContext; constructor(name: string, context?: IGirafeContext); protected get state(): import("../tools/main.js").State; protected getById(id: string): T; protected getChildElement(selector: string): T; protected girafeTranslate(): void; private userInfoChanged; /** * NOTE REG: We cannot just use truthy here, because javascript comparaison table is really problematic. * For example: * 0 == false * [] == false * "" == false * And there are cases where we want to check null or undefined, because 0 can be a right value. * More here : https://dorey.github.io/JavaScript-Equality-Table/ * @param val * @returns */ protected isNullOrUndefined(val: unknown): boolean; protected isNullOrUndefinedOrBlank(val: unknown): boolean; protected getParentOfType(parentNodeName: string, elem: Node | null, initialElem?: Node | null): Node | null; /** * Render the component's template. */ protected render(): void; /** * Re-Render the component. * The method should be called when the component * has already been rendered and needs to be updated. */ protected refreshRender(): void; /** * Renders a hidden span with the name of the component. * Useful to render a placeholder for not visible component. */ protected renderEmpty(): void; /** * Convert the string in parameter with uHtml and return it. * This allows to convert a string with html in a right html object. * For example, htmlUnsafe('
') will return an html div object. */ protected htmlUnsafe(str: string): Hole; /** * Convert a string to TemplateStringsArray * Manage a cache of all the created objects to limit memory usage */ private getUnsafeTemplate; /** * Remember the initial display configuration of the component * To be able to restore it */ private defineDisplayStyle; /** * In the templates, sometimes for accessibility reasons, we have to support the KeyDown Event * In those case, we often juste want to do the same as the click event when Enter or Space is pressed * Then this method can be used : it just calls the click event on the same element */ protected simulateClick(e: KeyboardEvent): void; /** * Hide the component (display: none). */ protected hide(): void; /** * Show the component (display: block). */ protected show(): void; /** * Subscribes with to the state changes made on */ protected subscribe(path: string, callback: Callback): Callback; protected subscribe(path: RegExp, callback: Callback): Callback; /** * * @param callback Unsubscribe all callbacks */ protected unsubscribe(callback: Callback): void; protected unsubscribe(callbacks: Callback[]): void; protected connectedCallback(): void; /** * When the component is disconnected from the DOM * all the callbacks will be unregistered */ protected disconnectedCallback(): void; protected registerInteractionListener(eventName: GgUserInteractionEvent, isExclusive: boolean): boolean; protected unregisterInteractionListeners(eventNames?: GgUserInteractionEvent | GgUserInteractionEvent[]): void; protected canExecute(eventName: GgUserInteractionEvent): boolean; protected getInheritedContext(): IGirafeContext; } export default GirafeHTMLElement;