UNPKG

@exadel/esl

Version:

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

88 lines (87 loc) 3.97 kB
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; /** Marker to stop event bubbling */ stopPropagation: 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; }