feat!: update for tab and trigger events; fix double a11y control for…

… tabs

BREAKING CHANGE:
- `transitionend` event of ESLPanel replaced with `after:show`/`after:hide`
- `statechange` event of ESLTrigger replaced with `change:active`

src/modules/esl-media/core/esl-media-manager.ts

@@ -25,7 +25,7 @@ export class MediaGroupRestrictionManager {
       const current = managerMap.get(instance.group);
       managerMap.set(instance.group, instance);
       if (!current || current === instance || !current.active) return;
-      if (current.$$fireNs('mangedpause')) {
+      if (current.$$fire('mangedpause')) {
         current.pause();
       }
     }

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

@@ -70,11 +70,10 @@ export class ESLPanel extends ESLBasePopup {
   @bind
   protected _onTransitionEnd(e?: TransitionEvent) {
     if (!e || e.propertyName === 'max-height') {
+      // TODO: state is not 'safe' as we can not be sure in caller
       this.style.removeProperty('max-height');
-      // TODO: rename
-      this.$$fire('transitionend', {
-        detail: {open: this.open}
-      });
+      // TODO: move to afterAnimate!
+      this.$$fire(this.open ? 'after:show' : 'after:hide');
     }
   }
 
@@ -93,6 +92,7 @@ export class ESLPanel extends ESLBasePopup {
   }
 
   protected afterAnimate(params: PanelActionParams) {
+    // FIXME: that is not working!!!
     params.noCollapse && this.style.removeProperty('max-height');
     CSSUtil.removeCls(this, this.animateClass);
     CSSUtil.removeCls(this, this.postAnimateClass);

src/modules/esl-scrollable-tabs/core/esl-scrollable-tabs.ts

@@ -24,6 +24,7 @@ export class ESLScrollableTabs extends ESLTabsContainer {
     this.addEventListener('click', this._onClick, false);
     this.$list?.addEventListener('scroll', this._onScroll, {passive: true});
     this.addEventListener('focusin', this._onFocus);
+    this.addEventListener('change:active', this._onTriggerStateChange);
     window.addEventListener('resize', this.onResize);
   }
 
@@ -32,6 +33,7 @@ export class ESLScrollableTabs extends ESLTabsContainer {
     this.removeEventListener('click', this._onClick, false);
     this.$list?.removeEventListener('scroll', this._onScroll);
     this.removeEventListener('focusin', this._onFocus);
+    this.removeEventListener('change:active', this._onTriggerStateChange);
     window.removeEventListener('resize', this.onResize);
   }
 
@@ -116,7 +118,6 @@ export class ESLScrollableTabs extends ESLTabsContainer {
 
   @bind
   protected _onTriggerStateChange(event: CustomEvent) {
-    super._onTriggerStateChange(event);
     this.deferredFitToViewport(this.current() as ESLTab);
   }
 

src/modules/esl-tab/core/esl-tabs-container.ts

@@ -2,7 +2,6 @@ import {ESLTriggersContainer, GroupTarget} from '../../esl-trigger/core/esl-trig
 import {ExportNs} from '../../esl-utils/environment/export-ns';
 import ESLTab from './esl-tab';
 import ESLTrigger from '../../esl-trigger/core/esl-trigger';
-import {bind} from '../../esl-utils/decorators/bind';
 import {attr} from '../../esl-base-element/decorators/attr';
 
 @ExportNs('TabsContainer')
@@ -11,16 +10,6 @@ export class ESLTabsContainer extends ESLTriggersContainer {
 
   @attr({defaultValue: '.esl-tab-list'}) public tabList: string;
 
-  protected bindEvents() {
-    super.bindEvents();
-    this.addEventListener('activestatechange', this._onTriggerStateChange);
-  }
-
-  protected unbindEvents() {
-    super.unbindEvents();
-    this.removeEventListener('activestatechange', this._onTriggerStateChange);
-  }
-
   get $triggers(): ESLTab[] {
     const els = this.querySelectorAll(ESLTab.is);
     return els ? Array.from(els) as ESLTab[] : [];
@@ -33,19 +22,6 @@ export class ESLTabsContainer extends ESLTriggersContainer {
     if (!targetEl) return;
     targetEl.click();
   }
-
-  protected updateA11y(trigger: ESLTab) {
-    const target = trigger.$a11yTarget || trigger;
-    target.setAttribute('aria-selected', String(trigger.active));
-    target.setAttribute('tabindex', trigger.active ? '0' : '-1');
-  }
-
-  @bind
-  protected _onTriggerStateChange(event: CustomEvent) {
-    const trigger = event.target;
-    if (!(trigger instanceof ESLTab)) return;
-    this.updateA11y(trigger);
-  }
 }
 
 export default ESLTabsContainer;

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

@@ -159,7 +159,7 @@ export class ESLTrigger extends ESLBaseElement {
     const clsTarget = TraversingQuery.first(this.activeClassTarget, this) as HTMLElement;
     clsTarget && CSSUtil.toggleClsTo(clsTarget, this.activeClass, this.active);
     this.updateA11y();
-    this.$$fire('activestatechange');
+    this.$$fire('change:active');
   }
 
   protected get showDelayValue(): number | undefined {