fix(esl-panel): fix the falsy state of animation in the default open …

…panel in esl-panel-group

Co-authored-by: ala'n (Alexey Stsefanovich) <astsefanovich@exadel.com>

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

@@ -34,6 +34,7 @@ ESLPanelGroup.register();
 
 - `has-opened` - readonly attribute that indicates whether the panel group has opened panels
 - `current-mode` - readonly attribute that indicates the currently applied rendering mode of the panel group
+- `animating` - a marker of animation process running
 
 ### Events
 

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

@@ -72,6 +72,9 @@ export class ESLPanelGroup extends ESLBaseElement {
   /** Readonly attribute that indicates whether the panel group has opened panels */
   @boolAttr({readonly: true}) public hasOpened: boolean;
 
+  /** Active while animation in progress */
+  @boolAttr({readonly: true}) public animating: boolean;
+
   /** Height of previous active panel */
   protected _previousHeight: number = 0;
 
@@ -268,13 +271,15 @@ export class ESLPanelGroup extends ESLBaseElement {
 
   /** Pre-processing animation action */
   protected beforeAnimate(): void {
+    this.$$attr('animating', true);
     CSSClassUtils.add(this, this.animationClass);
   }
 
   /** Post-processing animation action */
   protected afterAnimate(silent?: boolean): void {
     this.style.removeProperty('height');
     CSSClassUtils.remove(this, this.animationClass);
+    this.$$attr('animating', false);
 
     if (silent) return;
     this.$$fire(this.AFTER_ANIMATE_EVENT, {bubbles: false});

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

@@ -90,7 +90,7 @@ export class ESLPanel extends ESLToggleable {
 
   /** Handles post animation process to initiate after animate step */
   protected postAnimate(capturedBy?: ESLPanelGroup | null): void {
-    if (capturedBy) {
+    if (capturedBy && capturedBy.animating) {
       capturedBy.$$on({
         event: capturedBy.AFTER_ANIMATE_EVENT,
         once: true