Merge pull request #736 from exadel-inc/tech/toggleables-fixes

fix: toggleable fixes

src/modules/esl-panel-group/README.md

@@ -25,3 +25,7 @@ ESLPanelGroup.register();
 - `accordion-group` - defines accordion behavior: 
   * `single` (default) allows only one Panel to be open.
   * `multiple` allows any number of open Panels.
+
+### Events
+
+- `esl:change:mode` - thrown when panel group changes mode

src/modules/esl-panel-group/core/esl-panel-group.ts

@@ -116,17 +116,19 @@ export class ESLPanelGroup extends ESLBaseElement {
   /** Update element state according to current mode */
   protected updateMode() {
     const prevMode = this.getAttribute('view');
-    this.setAttribute('view', this.currentMode);
+    const currentMode = this.currentMode;
+    this.setAttribute('view', currentMode);
 
     const $target = TraversingQuery.first(this.modeClsTarget, this);
-    if (!$target) return;
-    ESLPanelGroup.supportedModes.forEach((mode) => {
-      $target.classList.toggle(`esl-${mode}-view`, this.currentMode === mode);
+    $target && ESLPanelGroup.supportedModes.forEach((mode) => {
+      $target.classList.toggle(`esl-${mode}-view`, currentMode === mode);
     });
 
     this.reset();
 
-    this.$$fire('change:mode', {detail: {prevMode, currentMode: this.currentMode}});
+    if (prevMode !== currentMode) {
+      this.$$fire('change:mode', {detail: {prevMode, currentMode}});
+    }
   }
 
   /** @returns Panels that are processed by the current panel group */

src/modules/esl-panel/README.md

@@ -24,3 +24,12 @@ ESLPanel.register();
  - `animating` - marker of animation process running
 
 ESLPanel extends [ESLToggleable](../esl-toggleable/README.md) you can find other supported options in its documentation.
+
+### Events
+
+- `esl:before:show` - thrown when panel is going to change its state to expanded
+- `esl:before:hide` - thrown when panel is going to change its state to collapsed
+- `esl:show` - thrown when panel change its state to expanded
+- `esl:hide` - thrown when panel change its state to collapsed
+- `esl:after:show` - thrown when panel changed its state to expanded
+- `esl:after:hide` - thrown when panel changed its state to collapsed

src/modules/esl-tab/README.md

@@ -19,6 +19,10 @@ ESLToggleable or, usually, ESLPanel.
     - 'side' - scroll behavior is enabled, tab is side-aligned;
     - empty or unsupported value - scroll behavior is enabled, tab is side-aligned;
 
+### Events
+
+- `esl:change:active` - thrown when tab changes its state
+
 ### Example
 
 ```html

src/modules/esl-toggleable/README.md

@@ -36,3 +36,8 @@ Use `ESLToggleableDispatcher.init()` to initialize (and bind) ESLToggleableDispa
  - `show` - trigger element activation
  - `hide` - trigger element deactivation
  - `toggle` - toggle element state
+
+### Events
+
+- `esl:show` - thrown when toggleable change its state to active(open)
+- `esl:hide` - thrown when toggleable change its state to inactive

src/modules/esl-trigger/README.md

@@ -35,3 +35,7 @@ ESLTrigger - a custom element, that allows to trigger ESLToggleable instances st
 - `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`)
+
+### Events
+
+- `esl:change:active` - thrown when trigger changes its state