@ethlete/core 4.29.9 → 4.30.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/core
 
+## 4.30.0
+
+### Minor Changes
+
+- [`0f5452d`](https://github.com/ethlete-io/ethdk/commit/0f5452d559063458aa83aa4dea2eb15b59117b4e) Thanks [@TomTomB](https://github.com/TomTomB)! - Add `et-animation-enter-done` and `et-animation-leave-done` classes to animated lifecycle directive to allow styling of elements after enter/leave animations complete.
+
 ## 4.29.9
 
 ### Patch Changes

package/fesm2022/ethlete-core.mjs

@@ -3624,9 +3624,11 @@ const ANIMATION_CLASSES = {
     enterFrom: 'et-animation-enter-from',
     enterActive: 'et-animation-enter-active',
     enterTo: 'et-animation-enter-to',
+    enterDone: 'et-animation-enter-done',
     leaveFrom: 'et-animation-leave-from',
     leaveActive: 'et-animation-leave-active',
     leaveTo: 'et-animation-leave-to',
+    leaveDone: 'et-animation-leave-done',
 };
 class AnimatedLifecycleDirective {
     get state() {
@@ -3657,13 +3659,14 @@ class AnimatedLifecycleDirective {
     ngAfterViewInit() {
         this._isConstructed = true;
     }
-    enter(config) {
+    enter() {
         if (this.state === 'entering')
             return;
         if ((this.state === 'init' && !this._isConstructed) || this.skipNextEnter()) {
             // Force the state to entered so that the element is not animated when it is first rendered.
             this._forceState('entered');
             this.skipNextEnter.set(false);
+            this._classList.add(ANIMATION_CLASSES.enterDone);
             return;
         }
         if (this.state === 'leaving') {
@@ -3672,14 +3675,13 @@ class AnimatedLifecycleDirective {
             this._classList.remove(ANIMATION_CLASSES.leaveTo);
         }
         this._state$.next('entering');
-        if (!config?.onlyTransition) {
-            this._classList.add(ANIMATION_CLASSES.enterFrom);
-        }
+        this._classList.remove(ANIMATION_CLASSES.leaveDone);
+        this._classList.add(ANIMATION_CLASSES.enterFrom);
         forceReflow();
         this._classList.add(ANIMATION_CLASSES.enterActive);
         fromNextFrame()
             .pipe(tap(() => {
-            if (!config?.onlyTransition && this.state === 'entering') {
+            if (this.state === 'entering') {
                 this._classList.remove(ANIMATION_CLASSES.enterFrom);
                 this._classList.add(ANIMATION_CLASSES.enterTo);
             }
@@ -3687,34 +3689,30 @@ class AnimatedLifecycleDirective {
             if (this.state !== 'entering')
                 return;
             this._state$.next('entered');
-            this._classList.remove(ANIMATION_CLASSES.enterActive);
-            if (!config?.onlyTransition) {
-                this._classList.remove(ANIMATION_CLASSES.enterTo);
-            }
+            this._classList.remove(ANIMATION_CLASSES.enterActive, ANIMATION_CLASSES.enterTo);
+            this._classList.add(ANIMATION_CLASSES.enterDone);
         }), takeUntil(this._destroy$), take(1))
             .subscribe();
     }
-    leave(config) {
+    leave() {
         if (this.state === 'leaving')
             return;
         if (this.state === 'init') {
             this._state$.next('left');
+            this._classList.add(ANIMATION_CLASSES.leaveDone);
             return;
         }
         if (this.state === 'entering') {
-            this._classList.remove(ANIMATION_CLASSES.enterFrom);
-            this._classList.remove(ANIMATION_CLASSES.enterActive);
-            this._classList.remove(ANIMATION_CLASSES.enterTo);
+            this._classList.remove(ANIMATION_CLASSES.enterFrom, ANIMATION_CLASSES.enterActive, ANIMATION_CLASSES.enterTo);
         }
         this._state$.next('leaving');
-        if (!config?.onlyTransition) {
-            this._classList.add(ANIMATION_CLASSES.leaveFrom);
-        }
+        this._classList.remove(ANIMATION_CLASSES.enterDone);
+        this._classList.add(ANIMATION_CLASSES.leaveFrom);
         forceReflow();
         this._classList.add(ANIMATION_CLASSES.leaveActive);
         fromNextFrame()
             .pipe(tap(() => {
-            if (!config?.onlyTransition && this.state === 'leaving') {
+            if (this.state === 'leaving') {
                 this._classList.remove(ANIMATION_CLASSES.leaveFrom);
                 this._classList.add(ANIMATION_CLASSES.leaveTo);
             }
@@ -3722,10 +3720,8 @@ class AnimatedLifecycleDirective {
             if (this.state !== 'leaving')
                 return;
             this._state$.next('left');
-            this._classList.remove(ANIMATION_CLASSES.leaveActive);
-            if (!config?.onlyTransition) {
-                this._classList.remove(ANIMATION_CLASSES.leaveTo);
-            }
+            this._classList.remove(ANIMATION_CLASSES.leaveActive, ANIMATION_CLASSES.leaveTo);
+            this._classList.add(ANIMATION_CLASSES.leaveDone);
         }), takeUntil(this._destroy$), take(1))
             .subscribe();
     }