feat: add animation for taskOverlayEdit transition and fix bugs in OverlayComponent

src/app/shared/components/overlay/overlay.component.html

@@ -7,31 +7,31 @@
     @if (overlayType === "taskOverlay") {
     <app-task-overlay
       [overlayData]="overlayData"
-      (closeDialogEmitter)="onCloseOverlay($event)"
+      (closeDialogEmitter)="onCloseOverlay()"
     ></app-task-overlay>
     } @if (overlayType === "taskOverlayEdit") {
     <app-task-edit-overlay
       [overlayData]="overlayData"
       [overlayType]="overlayType"
-      (closeDialogEmitter)="onCloseOverlay($event)"
+      (closeDialogEmitter)="onCloseOverlay()"
     ></app-task-edit-overlay>
     } @if (overlayType === "newTaskOverlay") {
     <app-task-edit-overlay
       [overlayData]="overlayData"
       [overlayType]="overlayType"
-      (closeDialogEmitter)="onCloseOverlay($event)"
+      (closeDialogEmitter)="onCloseOverlay()"
     ></app-task-edit-overlay>
     } @if (overlayType === "dialogOverlay") {
     <app-dialog-overlay
       [overlayData]="overlayData"
       [overlayType]="overlayType"
-      (closeDialogEmitter)="onCloseOverlay($event)"
+      (closeDialogEmitter)="onCloseOverlay()"
     ></app-dialog-overlay>
     } @if (overlayType === "contactOverlay") {
     <app-contact-overlay
       [overlayData]="overlayData"
       [overlayType]="overlayType"
-      (closeDialogEmitter)="onCloseOverlay($event)"
+      (closeDialogEmitter)="onCloseOverlay()"
     ></app-contact-overlay>
     }
   </div>

src/app/shared/components/overlay/overlay.component.scss

@@ -24,7 +24,7 @@
       transform: scale(1) translateY(0);
       opacity: 1;
       transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
-        opacity 0.4s ease-out;
+        opacity 0.3s ease-out;
     }
   }
 
@@ -35,7 +35,7 @@
     & > .overlay-content {
       transform: scale(0.95) translateY(20px);
       opacity: 0;
-      transition: transform 0.4s ease-in, opacity 0.4s ease-out;
+      transition: transform 0.3s ease-in, opacity 0.3s ease-out;
     }
   }
 }
@@ -43,5 +43,5 @@
 .overlay-content {
   transform: scale(0.95) translateY(20px);
   opacity: 0;
-  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
 }

src/app/shared/components/overlay/overlay.component.ts

@@ -3,7 +3,6 @@ import { OverlayService } from '../../../services/overlay.service';
 import { CommonModule } from '@angular/common';
 import { TaskOverlayComponent } from './task-overlay/task-overlay.component';
 import { TaskEditOverlayComponent } from './task-edit-overlay/task-edit-overlay.component';
-import { Router } from '@angular/router';
 import { DialogOverlayComponent } from './dialog-overlay/dialog-overlay.component';
 import { ContactOverlayComponent } from './contact-overlay/contact-overlay.component';
 import { Subject, takeUntil } from 'rxjs';
@@ -35,7 +34,7 @@ export class OverlayComponent implements OnInit, OnDestroy {
 
   private destroy$ = new Subject<void>();
 
-  constructor(private overlayService: OverlayService, private router: Router) {}
+  constructor(private overlayService: OverlayService) {}
 
   /**
    * Checks the overlay data observable from the OverlayService and subscribes to it.
@@ -53,22 +52,21 @@ export class OverlayComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Subscribes to the overlay data observable from the OverlayService.
+   * Listens to the overlay data observable from the OverlayService
-   * Updates the overlay type and data when new data is received.
+   * and handles the changes accordingly.
-   * Sets the overlay as visible with a slight delay if data is present.
-   * Marks the overlay as closing and invisible if no data is present.
    */
   listenToOverlayChanges() {
     this.overlayService.overlayData$
       .pipe(takeUntil(this.destroy$))
       .subscribe((data) => {
         if (data) {
-          this.overlayType = data.overlay;
+          if (data.overlay === 'taskOverlayEdit') {
-          this.overlayData = data.data;
+            this.startClosingAnimation(() => {
-          this.isClosingAnimation = false;
+              this.updateOverlayData(data);
-          requestAnimationFrame(() => {
-            this.shouldShowOverlay = true;
             });
+          } else {
+            this.updateOverlayData(data);
+          }
         } else {
           this.isClosingAnimation = true;
           this.shouldShowOverlay = false;
@@ -76,12 +74,35 @@ export class OverlayComponent implements OnInit, OnDestroy {
       });
   }
 
+  /**
+   * Updates the overlay data from the given data object.
+   * @param {any} data the data object containing the overlay type and data
+   */
+  updateOverlayData(data: any) {
+    this.overlayType = data.overlay;
+    this.overlayData = data.data;
+    this.isClosingAnimation = false;
+    this.shouldShowOverlay = true;
+  }
+
+  /**
+   * Starts the closing animation and calls the given callback function after the animation has finished.
+   * @param {() => void} callback the callback function to be called after the animation has finished
+   */
+  startClosingAnimation(callback: () => void) {
+    this.isClosingAnimation = true;
+
+    setTimeout(() => {
+      callback();
+      this.isClosingAnimation = false;
+    }, 300);
+  }
+
   /**
    * Closes the overlay by clearing the overlay data from the service.
    * @param {boolean} close Indicates the close event.
    */
-  onCloseOverlay(close: boolean) {
+  onCloseOverlay() {
-    this.overlayData = close;
     this.overlayService.clearOverlayData();
   }
 
@@ -93,8 +114,12 @@ export class OverlayComponent implements OnInit, OnDestroy {
   onDocumentClick(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
 
-    if (targetElement && targetElement.classList.contains('overlay')) {
+    if (
-      this.onCloseOverlay(false);
+      targetElement &&
+      targetElement.classList.contains('overlay') &&
+      !targetElement.closest('.overlay-content')
+    ) {
+      this.onCloseOverlay();
     }
   }
 }