@exadel/esl/modules/esl-trigger/core/esl-base-trigger.d.ts

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

import { ESLBaseElement } from '../../esl-base-element/core';
import type { ESLToggleable, ESLToggleableActionParams } from '../../esl-toggleable/core/esl-toggleable';
/** Base class for elements that should trigger {@link ESLToggleable} instance */
export declare abstract class ESLBaseTrigger extends ESLBaseElement {
    /** Event that represents {@link ESLTrigger} state change */
    CHANGE_EVENT: string;
    /** Events to observe target {@link ESLToggleable} instance state */
    OBSERVED_EVENTS: string;
    /** @readonly Observed Toggleable active state marker */
    active: boolean;
    /** CSS classes to set on active state */
    activeClass: string;
    /** Target element {@link ESLTraversingQuery} selector to set `activeClass` */
    activeClassTarget: string;
    /** Click event tracking media query. Default: `all` */
    trackClick: string;
    /** Hover event tracking media query. Default: `none` */
    trackHover: string;
    /** Value of aria-label for active state */
    a11yLabelActive: string | null;
    /** Value of aria-label for inactive state */
    a11yLabelInactive: string | null;
    /** Show delay value */
    showDelay: string;
    /** Hide delay value */
    hideDelay: string;
    /**
     * Alternative show delay value for hover action.
     * Note: the value should be numeric in order to delay hover action.
     */
    hoverShowDelay: string;
    /**
     * Alternative hide delay value for hover action.
     * Note: the value should be numeric in order to delay hover action.
     */
    hoverHideDelay: string;
    /** Prevent ESC keyboard event handling for target element hiding */
    ignoreEsc: boolean;
    /** Action to pass to the Toggleable. Supports `show`, `hide` and `toggle` values. `toggle` by default */
    mode: 'toggle' | 'show' | 'hide';
    /** Target observable Toggleable */
    abstract get $target(): ESLToggleable | null;
    /** Element target to setup aria attributes */
    get $a11yTarget(): HTMLElement | null;
    /** Value to setup aria-label */
    get a11yLabel(): string | null;
    /** Marker to allow track hover */
    get allowHover(): boolean;
    /** Marker to allow track clicks */
    get allowClick(): boolean;
    /** Checks that the target is in active state */
    get isTargetActive(): boolean;
    protected connectedCallback(): void;
    /** Check if the event target should be ignored */
    protected isTargetIgnored(target: EventTarget | null): boolean;
    /** Merge params to pass to the toggleable */
    protected mergeToggleableParams(this: ESLBaseTrigger, ...params: ESLToggleableActionParams[]): ESLToggleableActionParams;
    /** Show target toggleable with passed params */
    showTarget(params?: ESLToggleableActionParams): void;
    /** Hide target toggleable with passed params */
    hideTarget(params?: ESLToggleableActionParams): void;
    /** Toggles target toggleable with passed params */
    toggleTarget(params?: ESLToggleableActionParams, state?: boolean): void;
    /**
     * Updates trigger state according to toggleable state
     * Does not produce `esl:change:active` event
     */
    updateState(): boolean;
    /** Handles target primary (observed) event */
    protected _onPrimaryEvent(event: Event): void;
    /** Handles ESLToggleable state change */
    protected _onTargetStateChange(originalEvent?: Event): void;
    /** Handles `click` event */
    protected _onClick(event: MouseEvent): void;
    /** Handles `keydown` event */
    protected _onKeydown(event: KeyboardEvent): void;
    /** Handles hover `mouseenter` event */
    protected _onMouseEnter(event: MouseEvent): void;
    /** Handles hover `mouseleave` event */
    protected _onMouseLeave(event: MouseEvent): void;
    /** Set initial a11y attributes. Do nothing if trigger contains actionable element */
    initA11y(): void;
    /** Update aria attributes */
    updateA11y(): void;
}