From e19d6c655a3195eb25eb38f08ae75a479da8e45c Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Tue, 15 Oct 2024 02:13:41 -0300
Subject: [PATCH 1/3] implementation feature blur in window

---
 .../src/lib/up-window-angular.component.html                  | 1 +
 .../src/lib/up-window-angular.component.scss                  | 4 ++++
 .../up-window-angular/src/lib/up-window-angular.component.ts  | 2 ++
 3 files changed, 7 insertions(+)

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 f408336..b3a6d47 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
@@ -2,6 +2,7 @@
   #modal
   class="overlay"
   [class.active]="isOpen()"
+  [class.blur]="blur"
   role="dialog"
   aria-labelledby="dialog-title"
   aria-describedby="dialog-description"
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 2373fc5..223e110 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
@@ -17,6 +17,10 @@
     display: flex;
     opacity: 1;
   }
+
+  &.blur {
+    backdrop-filter: blur(6px);
+  }
 }
 
 .up-window {
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 879bbca..cff9f27 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
@@ -32,6 +32,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   @Input() animation: string = 'fade';
   @Input() restrictMode: boolean = false;
   @Input() fullScreen: boolean = false;
+  @Input() blur: boolean = false;
   @Input() confirmText: string = 'Confirm';
   @Input() cancelText: string = 'Cancel';
   @Input() confirmType: string = 'primary';
@@ -147,6 +148,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
       [`${this.animation}-out`]: this.closingAnimation,
       shake: this.shakeAnimation,
       fullscreen: this.fullScreen,
+      blur: this.blur,
     };
   }
 

From 6e93d7020b24e46ab98abec19aa659427be17e4e Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Tue, 15 Oct 2024 02:13:55 -0300
Subject: [PATCH 2/3] add example blur

---
 src/app/app.component.html | 15 +++++++++++++++
 src/app/app.component.ts   |  5 +++++
 2 files changed, 20 insertions(+)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 944cb48..ae095c9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -159,6 +159,21 @@ <h2 class="content-title">Mode</h2>
         >
           Mode FullScreen content!
         </up-window-angular>
+        <button
+          class="button-modal-example"
+          type="button"
+          (click)="openWindowExample('blur')"
+        >
+        <span class="material-symbols-outlined"> deblur </span> Blur
+        </button>
+        <up-window-angular
+          [isOpen]="isWindowOpenBlur"
+          title="Blur Window"
+          subtitle="This window mode Blur."
+          [blur]="true"
+        >
+          Mode Blur content!
+        </up-window-angular>
       </div>
     </div>
   </main>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3e79c7b..eadc895 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -36,6 +36,7 @@ export class AppComponent {
   isWindowOpenScale: WritableSignal<boolean> = signal(false);
   isWindowOpenRestrict: WritableSignal<boolean> = signal(false);
   isWindowOpenFullScreen: WritableSignal<boolean> = signal(false);
+  isWindowOpenBlur: WritableSignal<boolean> = signal(false);
 
   openWindowExample(type: string) {
     this.isWindowOpenFade.set(false);
@@ -46,6 +47,7 @@ export class AppComponent {
     this.isWindowOpenScale.set(false);
     this.isWindowOpenRestrict.set(false);
     this.isWindowOpenFullScreen.set(false);
+    this.isWindowOpenBlur.set(false);
 
     switch (type) {
       case 'fade':
@@ -72,6 +74,9 @@ export class AppComponent {
       case 'fullscreen':
         this.isWindowOpenFullScreen.set(true);
         break;
+      case 'blur':
+        this.isWindowOpenBlur.set(true);
+        break;
     }
   }
 

From 0bcd787c5f0d38c223ca54133cb93e613d4b2df3 Mon Sep 17 00:00:00 2001
From: lucasferreiralimax <lucasferreiralimax@gmail.com>
Date: Tue, 15 Oct 2024 02:19:47 -0300
Subject: [PATCH 3/3] test(unit): add spec for blur mode

---
 .../src/lib/up-window-angular.component.spec.ts  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

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 97f80c5..4c0f7c8 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
@@ -167,4 +167,20 @@ describe('UpWindowAngularComponent', () => {
     const windowElement = fixture.debugElement.query(By.css('.up-window'));
     expect(windowElement.classes['fullscreen']).toBeFalsy();
   });
+
+  it('should apply blur class when blur input is true', () => {
+    component.blur = true;
+    fixture.detectChanges();
+
+    const overlayElement = fixture.debugElement.query(By.css('.overlay'));
+    expect(overlayElement.classes['blur']).toBeTrue();
+  });
+
+  it('should not apply blur class when blur input is false', () => {
+    component.blur = false;
+    fixture.detectChanges();
+
+    const overlayElement = fixture.debugElement.query(By.css('.overlay'));
+    expect(overlayElement.classes['blur']).toBeFalsy();
+  });
 });