ESL Trigger

ESLTrigger - a custom element, that allows triggering ESLToggleable instances state changes.

NOTE (update 5.8.0): Starting from 5.8.0 version, default ESLTrigger styles handle missing target element by setting display: none to the trigger element. If you want to keep the trigger visible, you can override default styles for the no-target attribute of the trigger esl-trigger[no-target] { display: block; }, or just skip importing default styles in your project. It is also important to note that there is no more indirect console warning about missing target element, use selector query with no-target attribute or rely on hidden state of the trigger element that comes out of the box now.

Attributes / Properties

• active-class - CSS classes to set on active state

• active-class-target - target element ESLTraversingQuery selector to set active-class

• target - target Toggleable ESLTraversingQuery selector

• track-click - MediaQuery to define allowed to track click event media. (Default: all)

• track-hover - MediaQuery to define allowed to track hover event media. (Default: not all)

• ignore-esc - to disallow handle ESC keyboard event to hide target element

• mode - action to pass to the Toggleable. Supports show, hide and toggle values (toggle by default)

• ignore - selector to ignore inner elements

• a11y-target - selector of inner target element to place aria attributes. Uses trigger itself if blank

• a11y-label-active - value of aria-label for active state

• a11y-label-inactive - value of aria-label for inactive state

• show-delay - show delay value (number in ms or none)

• hide-delay - hide delay value (number in ms or none)

• hover-show-delay - show delay override value for hover (number in ms or none)

• hover-hide-delay - hide delay override value for hover (number in ms or none)

• stop-propagation - stop event bubbling on click and keydown events (default true)

Readonly Attributes / Properties

• active - readonly marker of active Toggleable target

• no-target - readonly marker to indicate that no target Toggleable was found new

Events

• esl:change:active - thrown when trigger changes its state