@ethlete/core 0.2.0-next.24 → 0.2.0-next.25

package/fesm2020/ethlete-core.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, Injectable, ElementRef, Inject, Optional, EventEmitter, Directive, Output, NgZone, Pipe, QueryList } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, Injectable, ElementRef, Inject, Optional, 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, take } from 'rxjs';
 import { coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { fromEvent, Observable, Subject, startWith, map, takeUntil, distinctUntilChanged, BehaviorSubject, filter, combineLatest, pairwise, debounceTime, shareReplay, tap, take } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { __decorate, __metadata } from 'tslib';
@@ -346,6 +346,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: ResizeObserverFactory }]; } });
 
+const nextFrame = (cb) => {
+    requestAnimationFrame(() => {
+        requestAnimationFrame(cb);
+    });
+};
+const forceReflow = (element = document.body) => {
+    return element.offsetHeight;
+};
+
 const clamp = (value, min = 0, max = 100) => {
     return Math.max(min, Math.min(max, value));
 };
@@ -998,6 +1007,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                     type: Optional
                 }] }, { type: i1.BreakpointObserver }]; }, propDecorators: { _getViewportSize: [], _buildMediaQuery: [] } });
 
+const ANIMATABLE_TOKEN = new InjectionToken('ANIMATABLE_DIRECTIVE_TOKEN');
+class AnimatableDirective {
+    constructor() {
+        this._didEmitStart = false;
+        this._parent = inject(ANIMATABLE_TOKEN, { optional: true, skipSelf: true });
+        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._elementRef = inject(ElementRef);
+        this._animationStart$ = new Subject();
+        this._animationEnd$ = new Subject();
+        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));
+    }
+    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);
+        }), takeUntil(this._destroy$))
+            .subscribe();
+        this._totalActiveAnimationCount$
+            .pipe(tap((count) => {
+            if (count > 0 && !this._didEmitStart) {
+                this._animationStart$.next();
+                this._didEmitStart = true;
+            }
+            else if (count === 0) {
+                this._animationEnd$.next();
+                this._didEmitStart = false;
+            }
+        }), takeUntil(this._destroy$))
+            .subscribe();
+        if (this._parent) {
+            this._parent._hostActiveAnimationCount$
+                .pipe(takeUntil(this._destroy$), tap((count) => {
+                this._totalActiveAnimationCount$.next(count + this._hostActiveAnimationCount$.value);
+            }))
+                .subscribe();
+        }
+    }
+}
+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: [
+        {
+            provide: ANIMATABLE_TOKEN,
+            useExisting: AnimatableDirective,
+        },
+        DestroyService,
+    ], exportAs: ["etAnimatable"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AnimatableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etAnimatable]',
+                    exportAs: 'etAnimatable',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: ANIMATABLE_TOKEN,
+                            useExisting: AnimatableDirective,
+                        },
+                        DestroyService,
+                    ],
+                }]
+        }] });
+
+const ANIMATED_LIFECYCLE_TOKEN = new InjectionToken('ANIMATED_LIFECYCLE_DIRECTIVE_TOKEN');
+const ANIMATION_CLASSES = {
+    enterFrom: 'et-animation-enter-from',
+    enterActive: 'et-animation-enter-active',
+    enterTo: 'et-animation-enter-to',
+    leaveFrom: 'et-animation-leave-from',
+    leaveActive: 'et-animation-leave-active',
+    leaveTo: 'et-animation-leave-to',
+};
+class AnimatedLifecycleDirective {
+    constructor() {
+        this._destroy$ = inject(DestroyService, { host: true }).destroy$;
+        this._elementRef = inject(ElementRef);
+        this._animatable = inject(ANIMATABLE_TOKEN);
+        this._classList = this._elementRef.nativeElement.classList;
+        this._state$ = new BehaviorSubject('init');
+        this.state$ = this._state$.asObservable();
+    }
+    get state() {
+        return this._state$.value;
+    }
+    get _opacity() {
+        return this._state$.value === 'init' ? '0 !important' : '';
+    }
+    enter(config) {
+        this._state$.next('entering');
+        if (!config?.onlyTransition) {
+            this._classList.add(ANIMATION_CLASSES.enterFrom);
+        }
+        forceReflow();
+        this._classList.add(ANIMATION_CLASSES.enterActive);
+        nextFrame(() => {
+            if (!config?.onlyTransition) {
+                this._classList.remove(ANIMATION_CLASSES.enterFrom);
+                this._classList.add(ANIMATION_CLASSES.enterTo);
+            }
+            this._animatable.animationEnd$
+                .pipe(takeUntil(this._destroy$), take(1), tap(() => {
+                this._state$.next('entered');
+                this._classList.remove(ANIMATION_CLASSES.enterActive);
+                if (!config?.onlyTransition) {
+                    this._classList.remove(ANIMATION_CLASSES.enterTo);
+                }
+            }))
+                .subscribe();
+        });
+    }
+    leave(config) {
+        if (this._classList.contains(ANIMATION_CLASSES.enterFrom) ||
+            this._classList.contains(ANIMATION_CLASSES.enterActive) ||
+            this._classList.contains(ANIMATION_CLASSES.enterTo)) {
+            this._classList.remove(ANIMATION_CLASSES.enterFrom);
+            this._classList.remove(ANIMATION_CLASSES.enterActive);
+            this._classList.remove(ANIMATION_CLASSES.enterTo);
+        }
+        this._state$.next('leaving');
+        if (!config?.onlyTransition) {
+            this._classList.add(ANIMATION_CLASSES.leaveFrom);
+        }
+        forceReflow();
+        this._classList.add(ANIMATION_CLASSES.leaveActive);
+        nextFrame(() => {
+            if (!config?.onlyTransition) {
+                this._classList.remove(ANIMATION_CLASSES.leaveFrom);
+                this._classList.add(ANIMATION_CLASSES.leaveTo);
+            }
+            this._animatable.animationEnd$
+                .pipe(takeUntil(this._destroy$), take(1), tap(() => {
+                this._state$.next('left');
+                this._classList.remove(ANIMATION_CLASSES.leaveActive);
+                if (!config?.onlyTransition) {
+                    this._classList.remove(ANIMATION_CLASSES.leaveTo);
+                }
+            }))
+                .subscribe();
+        });
+    }
+}
+AnimatedLifecycleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AnimatedLifecycleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.4", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", host: { properties: { "style.opacity": "this._opacity" } }, providers: [
+        {
+            provide: ANIMATED_LIFECYCLE_TOKEN,
+            useExisting: AnimatedLifecycleDirective,
+        },
+        DestroyService,
+    ], exportAs: ["etAnimatedLifecycle"], hostDirectives: [{ directive: AnimatableDirective }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AnimatedLifecycleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etAnimatedLifecycle]',
+                    exportAs: 'etAnimatedLifecycle',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: ANIMATED_LIFECYCLE_TOKEN,
+                            useExisting: AnimatedLifecycleDirective,
+                        },
+                        DestroyService,
+                    ],
+                    hostDirectives: [AnimatableDirective],
+                }]
+        }], propDecorators: { _opacity: [{
+                type: HostBinding,
+                args: ['style.opacity']
+            }] } });
+
 class ClickOutsideDirective {
     constructor() {
         this._elementRef = inject(ElementRef);
@@ -2210,5 +2400,5 @@ const Validators = {
  * Generated bundle index. Do not edit.
  */
 
-export { ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DestroyService, FocusVisibleService, IS_ARRAY_NOT_EMPTY, IS_EMAIL, IsArrayNotEmpty, IsEmail, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RouterStateService, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SeoDirective, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, Validators, ViewportService, clamp, clone, createMediaQueryObservable, createReactiveBindings, deleteCookie, elementCanScroll, equal, getCookie, getDomain, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, hasCookie, isGroupMatch, isKnockoutMatch, mergeSeoConfig, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, provideViewportConfig, routerDisableScrollTop, setCookie, toArray, toArrayTrackByFn };
+export { ANIMATABLE_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AnimatableDirective, AnimatedLifecycleDirective, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DestroyService, FocusVisibleService, IS_ARRAY_NOT_EMPTY, IS_EMAIL, IsArrayNotEmpty, IsEmail, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RouterStateService, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SeoDirective, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, Validators, ViewportService, clamp, clone, createMediaQueryObservable, createReactiveBindings, deleteCookie, elementCanScroll, equal, forceReflow, getCookie, getDomain, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, hasCookie, isGroupMatch, isKnockoutMatch, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, provideViewportConfig, routerDisableScrollTop, setCookie, toArray, toArrayTrackByFn };
 //# sourceMappingURL=ethlete-core.mjs.map