Merge pull request #21 from criar-art/refactory-overlay

Refactor Modal to Use `up-window-container`

projects/up-window-angular/src/lib/up-window-angular.component.html

@@ -1,68 +1,70 @@
 <div
   #modal
-  class="overlay"
+  class="up-window-container"
   [class.active]="isOpen()"
-  [class.blur]="blur"
-  [class.grayscale]="grayscale"
   role="dialog"
   aria-labelledby="dialog-title"
   aria-describedby="dialog-description"
   aria-modal="true"
   [attr.aria-hidden]="!isOpen()"
-  (click)="closeWindow('overlay')"
 >
   <div
     class="up-window"
     [ngClass]="getClass()"
     (click)="$event.stopPropagation()"
   >
     @if(!restrictMode || hiddenActions) {
-      <button
-        class="close-window"
-        aria-label="Close window"
-        (click)="closeWindow()"
-      >
-        &times;
-      </button>
-    }
-
-    @if(title || subtitle) {
-      <div class="up-window-header">
-        @if(title) {
-          <h3 id="dialog-title" class="up-window-title">{{ title }}</h3>
-        }
-
-        @if(subtitle) {
-          <h4 id="dialog-description" class="up-window-subtitle">
-            {{ subtitle }}
-          </h4>
-        }
-      </div>
+    <button
+      class="close-window"
+      aria-label="Close window"
+      (click)="closeWindow()"
+    >
+      &times;
+    </button>
+    } @if(title || subtitle) {
+    <div class="up-window-header">
+      @if(title) {
+      <h3 id="dialog-title" class="up-window-title">{{ title }}</h3>
+      } @if(subtitle) {
+      <h4 id="dialog-description" class="up-window-subtitle">
+        {{ subtitle }}
+      </h4>
+      }
+    </div>
     }
 
     <div class="up-window-body">
       <ng-content></ng-content>
     </div>
 
     @if(!hiddenActions) {
-      <div class="up-window-footer" [ngClass]="'align-' + buttonAlignment">
-        <button
-          class="btn btn-cancel"
-          [ngClass]="getButtonClass(cancelType)"
-          (click)="onCancel()"
-          [attr.aria-label]="cancelText"
-        >
-          {{ cancelText }}
-        </button>
-        <button
-          class="btn btn-confirm"
-          [ngClass]="getButtonClass(confirmType)"
-          (click)="onConfirm()"
-          [attr.aria-label]="confirmText"
-        >
-          {{ confirmText }}
-        </button>
-      </div>
+    <div class="up-window-footer" [ngClass]="'align-' + buttonAlignment">
+      <button
+        class="btn btn-cancel"
+        [ngClass]="getButtonClass(cancelType)"
+        (click)="onCancel()"
+        [attr.aria-label]="cancelText"
+      >
+        {{ cancelText }}
+      </button>
+      <button
+        class="btn btn-confirm"
+        [ngClass]="getButtonClass(confirmType)"
+        (click)="onConfirm()"
+        [attr.aria-label]="confirmText"
+      >
+        {{ confirmText }}
+      </button>
+    </div>
     }
   </div>
+  <div
+    class="overlay"
+    (click)="closeWindow('overlay')"
+    [class.fade]="openingAnimation"
+    [class.fade-out]="closingAnimation"
+    [class.active]="isOpen()"
+    [class.blur]="blur"
+    [class.grayscale]="grayscale"
+  ></div>
 </div>

projects/up-window-angular/src/lib/up-window-angular.component.scss

@@ -1,22 +1,45 @@
-.overlay {
+.up-window-container {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  transition: opacity 0.5s ease-in-out;
   opacity: 0;
-  z-index: 999;
 
   &.active {
     display: flex;
     opacity: 1;
   }
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+  display: flex;
+  opacity: 0;
+  z-index: 1;
+  transition: all 0.5s;
+
+  &.active {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+
+  &.fade {
+    animation: up-window-fadeIn 0.3s forwards;
+  }
+
+  &.fade-out {
+    animation: up-window-fadeOut 0.5s forwards;
+  }
 
   &.blur {
     backdrop-filter: blur(6px);
@@ -40,6 +63,8 @@
   padding: 20px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin: 1rem;
+  z-index: 99;
+
   &.fullscreen {
     position: fixed;
     top: 0;