From 6ffb4a9f6a3cef46eee35c5f8e9bc0f2d1c01281 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Mon, 14 Oct 2024 17:08:38 -0300
Subject: [PATCH 1/5] adjustment template for mode restricted

---
 .../src/lib/up-window-angular.component.html              | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.html b/projects/up-window-angular/src/lib/up-window-angular.component.html
index 65400ec..561e017 100644
--- a/projects/up-window-angular/src/lib/up-window-angular.component.html
+++ b/projects/up-window-angular/src/lib/up-window-angular.component.html
@@ -7,9 +7,15 @@
   aria-describedby="dialog-description"
   aria-modal="true"
   [attr.aria-hidden]="!isOpen()"
+  (click)="!restrictMode && closeWindow()"
 >
-  <div class="up-window" [ngClass]="getClass()">
+  <div
+    class="up-window"
+    [ngClass]="getClass()"
+    (click)="$event.stopPropagation()"
+  >
     <button
+      *ngIf="!restrictMode"
       class="close-window"
       aria-label="Close window"
       (click)="closeWindow()"

From 50b13ba28f9e1716383c0f7e02b87bd2330cf182 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Mon, 14 Oct 2024 17:08:54 -0300
Subject: [PATCH 2/5] add restrictMode in component

---
 .../up-window-angular/src/lib/up-window-angular.component.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.ts b/projects/up-window-angular/src/lib/up-window-angular.component.ts
index 75fcca5..1550c55 100644
--- a/projects/up-window-angular/src/lib/up-window-angular.component.ts
+++ b/projects/up-window-angular/src/lib/up-window-angular.component.ts
@@ -25,6 +25,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   @Input() class: string | undefined;
   @Input() isOpen: WritableSignal<boolean> = signal(false);
   @Input() animation: string = 'fade';
+  @Input() restrictMode: boolean = false;
   @Input() confirmText: string = 'Confirm';
   @Input() cancelText: string = 'Cancel';
   @Input() confirmType: string = 'primary';
@@ -61,7 +62,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   }
 
   handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape' && this.isOpen()) {
+    if (event.key === 'Escape' && this.isOpen() && !this.restrictMode) {
       this.closeWindow();
     }
 

From cc8167a247b313f7e4485e96e41002a2452afe58 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Mon, 14 Oct 2024 17:09:08 -0300
Subject: [PATCH 3/5] adjustment example with new mode for window

---
 src/app/app.component.html | 12 ++++++++++++
 src/app/app.component.ts   |  9 +++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 25da571..a1fc967 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -99,6 +99,18 @@
       >
         Scale Example content!
       </up-window-angular>
+      <hr />
+      <button class="button-modal-example" type="button" (click)="openWindowExample('restrict')">
+        Open Mode Restrict Example
+      </button>
+      <up-window-angular
+        [isOpen]="isWindowOpenRestrict"
+        title="Restrict Window"
+        subtitle="This window mode Restrict."
+        [restrictMode]="true"
+      >
+        Mode Restrict Example content!
+      </up-window-angular>
     </div>
   </main>
   <app-footer></app-footer>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 956662a..39f6976 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -34,16 +34,18 @@ export class AppComponent {
   isWindowOpenSlideUp: WritableSignal<boolean> = signal(false);
   isWindowOpenSlideDown: WritableSignal<boolean> = signal(false);
   isWindowOpenScale: WritableSignal<boolean> = signal(false);
+  isWindowOpenRestrict: WritableSignal<boolean> = signal(false);
 
-  openWindowExample(animation: string) {
+  openWindowExample(type: string) {
     this.isWindowOpenFade.set(false);
     this.isWindowOpenSlideLeft.set(false);
     this.isWindowOpenSlideRight.set(false);
     this.isWindowOpenSlideUp.set(false);
     this.isWindowOpenSlideDown.set(false);
     this.isWindowOpenScale.set(false);
+    this.isWindowOpenRestrict.set(false);
 
-    switch (animation) {
+    switch (type) {
       case 'fade':
         this.isWindowOpenFade.set(true);
         break;
@@ -62,6 +64,9 @@ export class AppComponent {
       case 'scale':
         this.isWindowOpenScale.set(true);
         break;
+      case 'restrict':
+        this.isWindowOpenRestrict.set(true);
+        break;
     }
   }
 

From 7fb97f90895d52b270d7ac4b19de3c3149b5bda1 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Mon, 14 Oct 2024 17:32:50 -0300
Subject: [PATCH 4/5] test(unit): update spec of up-window

---
 .../src/lib/up-window-angular.component.html  |  4 +-
 .../lib/up-window-angular.component.spec.ts   | 91 +++++++++++++++----
 2 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.html b/projects/up-window-angular/src/lib/up-window-angular.component.html
index 561e017..05d8f2d 100644
--- a/projects/up-window-angular/src/lib/up-window-angular.component.html
+++ b/projects/up-window-angular/src/lib/up-window-angular.component.html
@@ -33,7 +33,7 @@ <h4 id="dialog-description" class="up-window-subtitle">
     </div>
     <div class="up-window-footer" [ngClass]="'align-' + buttonAlignment">
       <button
-        class="btn"
+        class="btn btn-cancel"
         [ngClass]="getButtonClass(cancelType)"
         (click)="onCancel()"
         [attr.aria-label]="cancelText"
@@ -41,7 +41,7 @@ <h4 id="dialog-description" class="up-window-subtitle">
         {{ cancelText }}
       </button>
       <button
-        class="btn"
+        class="btn btn-confirm"
         [ngClass]="getButtonClass(confirmType)"
         (click)="onConfirm()"
         [attr.aria-label]="confirmText"
diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.spec.ts b/projects/up-window-angular/src/lib/up-window-angular.component.spec.ts
index 37cd0ff..3ba7ce9 100644
--- a/projects/up-window-angular/src/lib/up-window-angular.component.spec.ts
+++ b/projects/up-window-angular/src/lib/up-window-angular.component.spec.ts
@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing';
 import { UpWindowAngularComponent } from './up-window-angular.component';
 import { By } from '@angular/platform-browser';
 
@@ -25,14 +30,18 @@ describe('UpWindowAngularComponent', () => {
     component.subtitle = 'Test Subtitle';
     fixture.detectChanges();
 
-    const titleElement = fixture.debugElement.query(By.css('.up-window-title')).nativeElement;
-    const subtitleElement = fixture.debugElement.query(By.css('.up-window-subtitle')).nativeElement;
+    const titleElement = fixture.debugElement.query(
+      By.css('.up-window-title')
+    ).nativeElement;
+    const subtitleElement = fixture.debugElement.query(
+      By.css('.up-window-subtitle')
+    ).nativeElement;
 
     expect(titleElement.textContent).toContain('Test Title');
     expect(subtitleElement.textContent).toContain('Test Subtitle');
   });
 
-  it('should apply the correct animation class when opening and closing the window', () => {
+  it('should apply the correct animation class when opening and closing the window', fakeAsync(() => {
     component.animation = 'slide';
     component.isOpen.set(true);
     fixture.detectChanges();
@@ -43,26 +52,48 @@ describe('UpWindowAngularComponent', () => {
     component.closeWindow();
     fixture.detectChanges();
 
-    setTimeout(() => {
-      windowElement = fixture.debugElement.query(By.css('.up-window'));
-      expect(windowElement.classes['slide-out']).toBeTruthy();
-      expect(component.isOpen()).toBeFalse();
-    }, 300);
-  });
+    tick(300); // Simulate the passage of time for the animation duration
+
+    windowElement = fixture.debugElement.query(By.css('.up-window'));
+    expect(windowElement.classes['slide-out']).toBeTruthy();
+    expect(component.isOpen()).toBeFalse();
+  }));
 
-  it('should trigger onConfirm and onCancel when buttons are clicked', () => {
+  it('should trigger onConfirm and onCancel when buttons are clicked', async () => {
     spyOn(component, 'onConfirm').and.callThrough();
     spyOn(component, 'onCancel').and.callThrough();
 
-    const confirmButton = fixture.debugElement.query(By.css('.btn-confirm')).nativeElement;
-    const cancelButton = fixture.debugElement.query(By.css('.btn-cancel')).nativeElement;
+    component.isOpen.set(true); // Open the modal
+    fixture.detectChanges(); // Trigger change detection
+
+    await fixture.whenStable(); // Wait for any asynchronous tasks to finish
+    fixture.detectChanges(); // Re-render the component
+
+    // Check if buttons are present
+    const confirmButton = fixture.debugElement.query(By.css('.btn-confirm'));
+    const cancelButton = fixture.debugElement.query(By.css('.btn-cancel'));
+
+    expect(confirmButton).toBeTruthy(); // Ensure confirm button exists
+    expect(cancelButton).toBeTruthy(); // Ensure cancel button exists
 
-    confirmButton.click();
+    // Simulate click on confirm button
+    confirmButton.nativeElement.click();
+    await fixture.whenStable(); // Wait for any asynchronous tasks
     expect(component.onConfirm).toHaveBeenCalled();
+    expect(component.isOpen()).toBeFalse(); // Check if modal is closed
 
-    cancelButton.click();
+    // Reset state and check cancel
+    component.isOpen.set(true); // Re-open the modal
+    fixture.detectChanges();
+
+    await fixture.whenStable(); // Wait for any asynchronous tasks
+    cancelButton.nativeElement.click();
+    await fixture.whenStable(); // Wait for any asynchronous tasks
     expect(component.onCancel).toHaveBeenCalled();
-  });
+    expect(component.isOpen()).toBeFalse(); // Check if modal is closed
+});
+
+
 
   it('should apply custom class from @Input', () => {
     component.class = 'custom-class';
@@ -77,15 +108,35 @@ describe('UpWindowAngularComponent', () => {
     expect(component.isOpen()).toBeTrue();
   });
 
-  it('should set isOpen to false after closeWindow is called', () => {
+  it('should set isOpen to false after closeWindow is called', fakeAsync(() => {
     component.isOpen.set(true);
     fixture.detectChanges();
 
     component.closeWindow();
     fixture.detectChanges();
 
-    setTimeout(() => {
-      expect(component.isOpen()).toBeFalse();
-    }, 300);
+    tick(300); // Wait for the closing animation
+    expect(component.isOpen()).toBeFalse();
+  }));
+
+  it('should not display close button in restricted mode', () => {
+    component.isOpen.set(true);
+    component.restrictMode = true; // Enable restricted mode
+    fixture.detectChanges();
+
+    const closeButton = fixture.debugElement.query(By.css('.close-window'));
+    expect(closeButton).toBeFalsy(); // Close button should not be present
   });
+
+  it('should prevent closing when clicking on the overlay in restricted mode', fakeAsync(() => {
+    component.isOpen.set(true);
+    component.restrictMode = true; // Enable restricted mode
+    fixture.detectChanges();
+
+    const overlay = fixture.debugElement.query(
+      By.css('.overlay')
+    ).nativeElement;
+    overlay.click(); // Click on the overlay
+    expect(component.isOpen()).toBeTrue(); // Modal should still be open
+  }));
 });

From ab5767ee32d6931e633d29c1ccc9c5ca8a9e01e1 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Mon, 14 Oct 2024 18:23:44 -0300
Subject: [PATCH 5/5] add shake in window and adjustment sart and close
 animation

---
 .../src/lib/up-window-angular.component.html  |  2 +-
 .../src/lib/up-window-angular.component.scss  | 12 +++++
 .../src/lib/up-window-angular.component.ts    | 47 ++++++++++++++++---
 3 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.html b/projects/up-window-angular/src/lib/up-window-angular.component.html
index 05d8f2d..5f96073 100644
--- a/projects/up-window-angular/src/lib/up-window-angular.component.html
+++ b/projects/up-window-angular/src/lib/up-window-angular.component.html
@@ -7,7 +7,7 @@
   aria-describedby="dialog-description"
   aria-modal="true"
   [attr.aria-hidden]="!isOpen()"
-  (click)="!restrictMode && closeWindow()"
+  (click)="closeWindow('overlay')"
 >
   <div
     class="up-window"
diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.scss b/projects/up-window-angular/src/lib/up-window-angular.component.scss
index efedc40..b0da926 100644
--- a/projects/up-window-angular/src/lib/up-window-angular.component.scss
+++ b/projects/up-window-angular/src/lib/up-window-angular.component.scss
@@ -52,6 +52,10 @@ body {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin: 1rem;
 
+  &.shake {
+    animation: shake 0.3s !important;
+  }
+
   &.fade {
     animation: up-window-fadeIn 0.3s forwards;
   }
@@ -304,3 +308,11 @@ body {
     transform: translateY(-100%);
   }
 }
+
+@keyframes shake {
+  0% { transform: translate(0); }
+  25% { transform: translate(-5px); }
+  50% { transform: translate(5px); }
+  75% { transform: translate(-5px); }
+  100% { transform: translate(0); }
+}
diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.ts b/projects/up-window-angular/src/lib/up-window-angular.component.ts
index 1550c55..d6b7025 100644
--- a/projects/up-window-angular/src/lib/up-window-angular.component.ts
+++ b/projects/up-window-angular/src/lib/up-window-angular.component.ts
@@ -10,6 +10,7 @@ import {
   OnDestroy,
   ElementRef,
   ViewChild,
+  effect,
 } from '@angular/core';
 
 @Component({
@@ -38,12 +39,22 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   @Output() cancel = new EventEmitter<void>();
 
   closingAnimation: boolean = false;
+  openingAnimation: boolean = false;
+  shakeAnimation: boolean = false;
   focusableElements!: NodeListOf<HTMLElement>;
   firstFocusableElement!: HTMLElement;
   lastFocusableElement!: HTMLElement;
 
   @ViewChild('modal') modal!: ElementRef;
 
+  constructor() {
+    effect(() => {
+      this.isOpen()
+        ? this.startOpeningAnimation()
+        : this.startClosingAnimation();
+    });
+  }
+
   ngOnInit(): void {
     document.addEventListener('keydown', this.handleKeydown.bind(this));
   }
@@ -64,6 +75,8 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   handleKeydown(event: KeyboardEvent) {
     if (event.key === 'Escape' && this.isOpen() && !this.restrictMode) {
       this.closeWindow();
+    } else if (event.key === 'Escape' && this.isOpen() && this.restrictMode) {
+      this.triggerShakeAnimation();
     }
 
     if (event.key === 'Tab' && this.isOpen()) {
@@ -71,6 +84,13 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
     }
   }
 
+  triggerShakeAnimation() {
+    this.shakeAnimation = true;
+    setTimeout(() => {
+      this.shakeAnimation = false;
+    }, 500);
+  }
+
   trapFocus(event: KeyboardEvent) {
     const isShiftPressed = event.shiftKey;
     const activeElement = document.activeElement as HTMLElement;
@@ -88,24 +108,39 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
     document.removeEventListener('keydown', this.handleKeydown.bind(this));
   }
 
-  openWindow() {
-    this.isOpen.set(true);
+  startOpeningAnimation() {
+    this.openingAnimation = true;
+    setTimeout(() => {
+      this.openingAnimation = false;
+    }, 300);
   }
 
-  closeWindow() {
+  startClosingAnimation() {
     this.closingAnimation = true;
-
     setTimeout(() => {
-      this.isOpen.set(false);
       this.closingAnimation = false;
     }, 300);
   }
 
+  closeWindow(from?: string) {
+    if (from == 'overlay' && this.restrictMode) {
+      this.triggerShakeAnimation();
+    } else {
+      this.closingAnimation = true;
+
+      setTimeout(() => {
+        this.isOpen.set(false);
+        this.closingAnimation = false;
+      }, 300);
+    }
+  }
+
   getClass() {
     return {
       ...(this.class ? { [this.class]: true } : {}),
-      [this.animation]: !this.closingAnimation,
+      [this.animation]: !this.closingAnimation && this.openingAnimation,
       [`${this.animation}-out`]: this.closingAnimation,
+      shake: this.shakeAnimation,
     };
   }