import { DelayedTask } from '../../esl-utils/async/delayed-task'; import { ESLBaseElement } from '../../esl-base-element/core'; import type { DelegatedEvent } from '../../esl-event-listener/core/types'; import type { ESLToggleableManager, ESLA11yType } from './esl-toggleable-manager.types'; /** Default Toggleable action params type definition */ export interface ESLToggleableActionParams { /** Action to execute */ readonly action?: 'show' | 'hide'; /** Initiator string identifier */ initiator?: string; /** Delay timeout for both show and hide actions */ delay?: number; /** Show delay timeout */ showDelay?: number; /** Hide delay timeout */ hideDelay?: number; /** Force action independently of current state of the Toggleable */ force?: boolean; /** Do not throw events on action */ silent?: boolean; /** Activate hover tracking to hide Toggleable */ trackHover?: boolean; /** Element activator of the action */ activator?: HTMLElement | null; /** Event that initiates the action */ event?: Event; /** Custom user data */ [key: string]: any; } export interface ESLToggleableRequestDetails extends ESLToggleableActionParams { match?: string | ((target: Element) => boolean); } /** * ESLToggleable component * @author Julia Murashko, Alexey Stsefanovich (ala'n) * * ESLToggleable - a custom element, that is used as a base for "Popup-like" components creation */ export declare class ESLToggleable extends ESLBaseElement { static is: string; static observedAttributes: string[]; /** Default show/hide params for all ESLToggleable instances */ static DEFAULT_PARAMS: ESLToggleableActionParams; /** Event to dispatch when toggleable is going to be activated */ BEFORE_SHOW_EVENT: string; /** Event to dispatch when toggleable is going to be deactivated */ BEFORE_HIDE_EVENT: string; /** Event to dispatch when toggleable is activated */ SHOW_EVENT: string; /** Event to dispatch when toggleable is deactivated */ HIDE_EVENT: string; /** Event to dispatch when toggleable has end activation process */ AFTER_SHOW_EVENT: string; /** Event to dispatch when toggleable has end deactivation process */ AFTER_HIDE_EVENT: string; /** Event to activate toggleables on event way */ SHOW_REQUEST_EVENT: string; /** Event to deactivate toggleables on event way */ HIDE_REQUEST_EVENT: string; /** Event to dispatch when toggleable group has changed */ GROUP_CHANGED_EVENT: string; /** Delay for outside actions to trigger hide. Used by {@link ESLToggleableManager} */ OUTSIDE_ACTION_DELAY: number; /** * CSS class (supports {@link CSSClassUtils}) to add on the body element * */ bodyClass: string; /** CSS class (supports {@link CSSClassUtils}) to add when the Toggleable is active */ activeClass: string; /** * CSS class (supports {@link CSSClassUtils}) to add/remove on the container * defined by {@link containerActiveClassTarget} */ containerActiveClass: string; /** * Selector for the closest parent element to add/remove {@link containerActiveClass} * (default: `*` direct parent) */ containerActiveClassTarget: string; /** Toggleable group meta information to organize groups */ groupName: string; /** Selector to mark inner close triggers */ closeTrigger: string; /** Disallow automatic id creation when it's empty */ noAutoId: boolean; /** Close the Toggleable on ESC keyboard event */ closeOnEsc: boolean; /** Close the Toggleable on a click/tap outside */ closeOnOutsideAction: boolean; /** * Accessibility behavior. Available values: * - 'none' (default) - no focus management * - 'autofocus' - focus on the first focusable element * - 'popup' - focus on the first focusable element and return focus to the activator after the last focusable element * - 'modal' - focus on the first focusable element and trap focus inside the Toggleable (close active popups) * - 'dialog' - focus on the first focusable element and trap focus inside the Toggleable (don't close active popups) */ a11y: ESLA11yType; /** Initial params to pass to show/hide action on the start */ initialParams: ESLToggleableActionParams; /** Default params to merge into passed action params */ defaultParams: ESLToggleableActionParams; /** Hover params to pass from track hover listener */ trackHoverParams: ESLToggleableActionParams; /** Marker of initially opened toggleable instance */ initiallyOpened: boolean; /** Inner state */ private _open; /** Inner show/hide task manager instance */ protected _task: DelayedTask; /** Marker for current hover listener state */ protected _trackHover: boolean; /** Delay for track hover listeners actions */ protected _trackHoverDelay: number | undefined; protected connectedCallback(): void; protected disconnectedCallback(): void; protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void; /** Set initial state of the Toggleable */ protected setInitialState(): void; /** Bind hover events listeners for the Toggleable itself */ protected bindHoverStateTracking(track: boolean, hideDelay?: number | string): void; /** Function to merge the result action params */ protected mergeDefaultParams(params?: ESLToggleableActionParams): ESLToggleableActionParams; /** Toggle the element state */ toggle(state?: boolean, params?: ESLToggleableActionParams): ESLToggleable; /** Change the element state to active */ show(params?: ESLToggleableActionParams): ESLToggleable; /** Change the element state to inactive */ hide(params?: ESLToggleableActionParams): ESLToggleable; /** Actual show task to execute by toggleable task manger ({@link DelayedTask} out of the box) */ protected showTask(params: ESLToggleableActionParams): void; /** Actual hide task to execute by toggleable task manger ({@link DelayedTask} out of the box) */ protected hideTask(params: ESLToggleableActionParams): void; /** * Actions to execute before showing of toggleable. * Returns false if the show action should not be executed. */ protected shouldShow(params: ESLToggleableActionParams): boolean; /** * Actions to execute on show toggleable. * Inner state and 'open' attribute are not affected and updated before `onShow` execution. * Adds CSS classes, update a11y and fire {@link ESLBaseElement.REFRESH_EVENT} event by default. */ protected onShow(params: ESLToggleableActionParams): void; /** * Actions to execute before hiding of toggleable. * Returns false if the hide action should not be executed. */ protected shouldHide(params: ESLToggleableActionParams): boolean; /** * Actions to execute on hide toggleable. * Inner state and 'open' attribute are not affected and updated before `onShow` execution. * Removes CSS classes and update a11y by default. */ protected onHide(params: ESLToggleableActionParams): void; /** Active state marker */ get open(): boolean; set open(value: boolean); /** Focus manager instance */ get manager(): ESLToggleableManager; /** Last component that has activated the element. Uses {@link ESLToggleableActionParams.activator}*/ get activator(): HTMLElement | null | undefined; set activator(el: HTMLElement | null | undefined); /** If the togleable or its content has focus */ get hasFocus(): boolean; /** List of all focusable elements inside instance */ get $focusables(): HTMLElement[]; /** Returns the element to apply a11y attributes */ protected get $a11yTarget(): HTMLElement | null; /** Called on show and on hide actions to update a11y state accordingly */ protected updateA11y(): void; /** @returns if the passed event should trigger hide action */ isOutsideAction(e: Event): boolean; protected _onCloseClick(e: DelegatedEvent): void; protected _onKeyboardEvent(e: KeyboardEvent): void; protected _onMouseEnter(e: MouseEvent): void; protected _onMouseLeave(e: MouseEvent): void; /** Prepares toggle request events param */ protected buildRequestParams(e: CustomEvent): ESLToggleableActionParams | null; /** Actions to execute on show request */ protected _onShowRequest(e: CustomEvent): void; /** Actions to execute on hide request */ protected _onHideRequest(e: CustomEvent): void; } declare global { export interface ESLLibrary { Toggleable: typeof ESLToggleable; } export interface HTMLElementTagNameMap { 'esl-toggleable': ESLToggleable; } }