@ethlete/core 1.1.0 → 1.2.0

package/fesm2020/ethlete-core.mjs

@@ -362,6 +362,73 @@ const fromNextFrame = () => {
 const forceReflow = (element = document.body) => {
     return element.offsetHeight;
 };
+const createFlipAnimation = (config) => {
+    const { element: el, duration = 250, easing = 'cubic-bezier(0.4, 0, 0.2, 1)' } = config;
+    let initialRect = el.getBoundingClientRect();
+    let animation = null;
+    const onStart$ = new Subject();
+    const onFinish$ = new Subject();
+    const onCancel$ = new Subject();
+    const onAnimationFinish = () => {
+        cleanup();
+        onFinish$.next();
+    };
+    const onAnimationCancel = () => {
+        cleanup();
+        onCancel$.next();
+    };
+    const cleanup = () => {
+        if (!animation) {
+            return;
+        }
+        animation.removeEventListener('finish', onAnimationFinish);
+        animation.removeEventListener('cancel', onAnimationCancel);
+    };
+    const updateInit = () => {
+        initialRect = el.getBoundingClientRect();
+    };
+    const play = () => {
+        const lastRect = el.getBoundingClientRect();
+        const delta = {
+            x: initialRect.left - lastRect.left,
+            y: initialRect.top - lastRect.top,
+            scaleX: initialRect.width / lastRect.width,
+            scaleY: initialRect.height / lastRect.height,
+        };
+        animation = el.animate([
+            {
+                transformOrigin: 'top left',
+                transform: `
+          translate(${delta.x}px, ${delta.y}px)
+          scale(${delta.scaleX}, ${delta.scaleY})
+        `,
+            },
+            {
+                transformOrigin: 'top left',
+                transform: 'none',
+            },
+        ], {
+            duration,
+            easing,
+            fill: 'both',
+        });
+        animation.addEventListener('finish', onAnimationFinish);
+        animation.addEventListener('cancel', onAnimationCancel);
+        onStart$.next();
+    };
+    const cancel = () => {
+        animation?.cancel();
+        cleanup();
+    };
+    return {
+        updateInit,
+        play,
+        cancel,
+        onStart$: onStart$.asObservable(),
+        onFinish$: onFinish$.asObservable(),
+        onCancel$: onCancel$.asObservable(),
+    };
+};
 
 const clamp = (value, min = 0, max = 100) => {
     return Math.max(min, Math.min(max, value));
@@ -1061,14 +1128,16 @@ class AnimatableDirective {
             this._totalActiveAnimationCount$.next(this._totalActiveAnimationCount$.value - this._hostActiveAnimationCount$.value);
             this._hostActiveAnimationCount$.next(0);
             merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionstart'))
-                .pipe(tap(() => {
+                .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(tap(() => {
+                .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);
@@ -2444,5 +2513,5 @@ const Validators = {
  * Generated bundle index. Do not edit.
  */
 
-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, fromNextFrame, getCookie, getDomain, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, hasCookie, isGroupMatch, isKnockoutMatch, mergeSeoConfig, nextFrame, 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, createFlipAnimation, createMediaQueryObservable, createReactiveBindings, deleteCookie, elementCanScroll, equal, forceReflow, fromNextFrame, 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