implementation feature blur in window

criar-art · Oct 15, 2024 · e19d6c6 · e19d6c6
1 parent 4aa46b7
commit e19d6c6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 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
@@ -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
@@ -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
@@ -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,
     };
   }