@ethlete/core 1.0.0 → 1.1.1

package/fesm2020/ethlete-core.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, Injectable, ElementRef, Inject, Optional, Directive, isDevMode, EventEmitter, Output, NgZone, Pipe, QueryList } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, Injectable, ElementRef, Inject, Optional, isDevMode, Directive, EventEmitter, Output, NgZone, Pipe, QueryList } from '@angular/core';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
-import { fromEvent, Observable, Subject, startWith, map, takeUntil, distinctUntilChanged, BehaviorSubject, filter, combineLatest, pairwise, debounceTime, shareReplay, merge, tap, switchMap, take } from 'rxjs';
+import { fromEvent, Observable, Subject, startWith, map, takeUntil, distinctUntilChanged, BehaviorSubject, filter, combineLatest, pairwise, debounceTime, shareReplay, tap, merge, skip, switchMap, take } from 'rxjs';
 import { coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { DOCUMENT } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
@@ -1024,25 +1024,58 @@ class AnimatableDirective {
         this._elementRef = inject(ElementRef);
         this._animationStart$ = new Subject();
         this._animationEnd$ = new Subject();
+        this._animatedElement$ = new BehaviorSubject(this._elementRef.nativeElement);
         this.animationStart$ = this._animationStart$.asObservable().pipe(debounceTime(0));
         this.animationEnd$ = this._animationEnd$.asObservable().pipe(debounceTime(0));
         this._hostActiveAnimationCount$ = new BehaviorSubject(0);
         this._totalActiveAnimationCount$ = new BehaviorSubject(0);
         this.isAnimating$ = this._totalActiveAnimationCount$.pipe(map((count) => count > 0), debounceTime(0));
     }
+    set animatedElement(value) {
+        let newElement = null;
+        if (value === null || value === undefined) {
+            newElement = this._elementRef.nativeElement;
+        }
+        else if (typeof value === 'string') {
+            const el = document.querySelector(value);
+            if (el) {
+                newElement = el;
+            }
+            else {
+                if (isDevMode()) {
+                    console.warn(`Element with selector ${value} not found. Animatable directive will use host element.`);
+                }
+                newElement = this._elementRef.nativeElement;
+            }
+        }
+        else {
+            newElement = value;
+        }
+        if (this._animatedElement$.value !== newElement) {
+            this._animatedElement$.next(newElement);
+        }
+    }
     ngOnInit() {
-        merge(fromEvent(this._elementRef.nativeElement, 'animationstart'), fromEvent(this._elementRef.nativeElement, 'transitionstart'))
-            .pipe(tap(() => {
-            const count = this._hostActiveAnimationCount$.value + 1;
-            this._hostActiveAnimationCount$.next(count);
-            this._totalActiveAnimationCount$.next(count);
-        }), takeUntil(this._destroy$))
-            .subscribe();
-        merge(fromEvent(this._elementRef.nativeElement, 'animationend'), fromEvent(this._elementRef.nativeElement, 'animationcancel'), fromEvent(this._elementRef.nativeElement, 'transitionend'), fromEvent(this._elementRef.nativeElement, 'transitioncancel'))
-            .pipe(tap(() => {
-            const count = this._hostActiveAnimationCount$.value - 1;
-            this._hostActiveAnimationCount$.next(count);
-            this._totalActiveAnimationCount$.next(count);
+        this._animatedElement$
+            .pipe(tap((el) => {
+            this._totalActiveAnimationCount$.next(this._totalActiveAnimationCount$.value - this._hostActiveAnimationCount$.value);
+            this._hostActiveAnimationCount$.next(0);
+            merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionstart'))
+                .pipe(filter((e) => e.target === el), // skip events from children
+            tap(() => {
+                const count = this._hostActiveAnimationCount$.value + 1;
+                this._hostActiveAnimationCount$.next(count);
+                this._totalActiveAnimationCount$.next(count);
+            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
+                .subscribe();
+            merge(fromEvent(el, 'animationend'), fromEvent(el, 'animationcancel'), fromEvent(el, 'transitionend'), fromEvent(el, 'transitioncancel'))
+                .pipe(filter((e) => e.target === el), // skip events from children
+            tap(() => {
+                const count = this._hostActiveAnimationCount$.value - 1;
+                this._hostActiveAnimationCount$.next(count);
+                this._totalActiveAnimationCount$.next(count);
+            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
+                .subscribe();
         }), takeUntil(this._destroy$))
             .subscribe();
         this._totalActiveAnimationCount$
@@ -1067,7 +1100,7 @@ class AnimatableDirective {
     }
 }
 AnimatableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AnimatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AnimatableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: AnimatableDirective, isStandalone: true, selector: "[etAnimatable]", providers: [
+AnimatableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: AnimatableDirective, isStandalone: true, selector: "[etAnimatable]", inputs: { animatedElement: ["etAnimatable", "animatedElement"] }, providers: [
         {
             provide: ANIMATABLE_TOKEN,
             useExisting: AnimatableDirective,
@@ -1088,7 +1121,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                         DestroyService,
                     ],
                 }]
-        }] });
+        }], propDecorators: { animatedElement: [{
+                type: Input,
+                args: ['etAnimatable']
+            }] } });
 
 const ANIMATED_LIFECYCLE_TOKEN = new InjectionToken('ANIMATED_LIFECYCLE_DIRECTIVE_TOKEN');
 const ANIMATION_CLASSES = {
@@ -1117,7 +1153,7 @@ class AnimatedLifecycleDirective {
     }
     enter(config) {
         if (this.state !== 'init' && this.state !== 'left' && isDevMode()) {
-            throw new Error('Tried to enter but the element is not in the initial state.');
+            console.warn('Tried to enter but the element is not in the initial state. This may result in unexpected behavior.', this);
         }
         this._state$.next('entering');
         if (!config?.onlyTransition) {
@@ -1142,7 +1178,7 @@ class AnimatedLifecycleDirective {
     }
     leave(config) {
         if (this.state !== 'entered' && this.state !== 'entering' && isDevMode()) {
-            throw new Error('Tried to leave while already leaving or left');
+            console.warn('Tried to leave while already leaving or left. This may result in unexpected behavior.', this);
         }
         if (this._classList.contains(ANIMATION_CLASSES.enterFrom) ||
             this._classList.contains(ANIMATION_CLASSES.enterActive) ||