Merge pull request #19 from criar-art/grayscale-mode

Implement Grayscale Mode in `UpWindowAngular`

README.md

@@ -3,6 +3,7 @@
 An Angular library designed to create dynamic, customizable windows and window-based components for web applications. With a simple and intuitive API, UpWindow enables developers to easily integrate responsive windows, popups, and floating windows into their projects. It provides full control over window size, position, animations, and behavior, offering a flexible solution for creating engaging user interfaces.
 
 ## Install
+
 ```bash
 npm install up-window-angular
 ```
@@ -44,6 +45,7 @@ export class WindowExampleComponent {
 ```
 
 ### Component Setup
+
 - In the `WindowExampleComponent`, a `WritableSignal<boolean>` named `isWindowOpenExample` is defined, initialized to `false`.
 - The `openWindowExample` method sets `isWindowOpenExample` to `true`, which opens the window.
 
@@ -143,6 +145,18 @@ export class WindowExampleComponent {
    <up-window-angular [hiddenActions]="true" />
    ```
 
+- **`@Input() blur: boolean = false;`**
+   - Example: Enable blur effect for the window.
+   ```html
+   <up-window-angular [blur]="true" />
+   ```
+
+- **`@Input() grayscale: boolean = false;`**
+   - Example: Enable grayscale effect for the window.
+   ```html
+   <up-window-angular [grayscale]="true" />
+   ```
+
 ### Outputs
 
 - **`@Output() confirm = new EventEmitter<void>();`**

projects/up-window-angular/README.md

@@ -3,6 +3,7 @@
 An Angular library designed to create dynamic, customizable windows and window-based components for web applications. With a simple and intuitive API, UpWindow enables developers to easily integrate responsive windows, popups, and floating windows into their projects. It provides full control over window size, position, animations, and behavior, offering a flexible solution for creating engaging user interfaces.
 
 ## Install
+
 ```bash
 npm install up-window-angular
 ```
@@ -44,6 +45,7 @@ export class WindowExampleComponent {
 ```
 
 ### Component Setup
+
 - In the `WindowExampleComponent`, a `WritableSignal<boolean>` named `isWindowOpenExample` is defined, initialized to `false`.
 - The `openWindowExample` method sets `isWindowOpenExample` to `true`, which opens the window.
 
@@ -143,6 +145,18 @@ export class WindowExampleComponent {
    <up-window-angular [hiddenActions]="true" />
    ```
 
+- **`@Input() blur: boolean = false;`**
+   - Example: Enable blur effect for the window.
+   ```html
+   <up-window-angular [blur]="true" />
+   ```
+
+- **`@Input() grayscale: boolean = false;`**
+   - Example: Enable grayscale effect for the window.
+   ```html
+   <up-window-angular [grayscale]="true" />
+   ```
+
 ### Outputs
 
 - **`@Output() confirm = new EventEmitter<void>();`**

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

@@ -3,6 +3,7 @@
   class="overlay"
   [class.active]="isOpen()"
   [class.blur]="blur"
+  [class.grayscale]="grayscale"
   role="dialog"
   aria-labelledby="dialog-title"
   aria-describedby="dialog-description"

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

@@ -21,6 +21,14 @@
   &.blur {
     backdrop-filter: blur(6px);
   }
+
+  &.grayscale {
+    backdrop-filter: grayscale(1);
+  }
+
+  &.blur.grayscale {
+    backdrop-filter: blur(6px) grayscale(1);
+  }
 }
 
 .up-window {

projects/up-window-angular/src/lib/up-window-angular.component.spec.ts

@@ -214,6 +214,22 @@ describe('UpWindowAngularComponent', () => {
     expect(overlayElement.classes['blur']).toBeFalsy();
   });
 
+  it('should apply grayscale class when grayscale input is true', () => {
+    component.grayscale = true;
+    fixture.detectChanges();
+
+    const overlayElement = fixture.debugElement.query(By.css('.overlay'));
+    expect(overlayElement.classes['grayscale']).toBeTrue();
+  });
+
+  it('should not apply grayscale class when grayscale input is false', () => {
+    component.grayscale = false;
+    fixture.detectChanges();
+
+    const overlayElement = fixture.debugElement.query(By.css('.overlay'));
+    expect(overlayElement.classes['grayscale']).toBeFalsy();
+  });
+
   it('should not show confirm and cancel buttons if hiddenActions is true', () => {
     component.hiddenActions = true;
     component.isOpen.set(true);

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

@@ -33,6 +33,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   @Input() restrictMode: boolean = false;
   @Input() fullScreen: boolean = false;
   @Input() blur: boolean = false;
+  @Input() grayscale: boolean = false;
   @Input() hiddenActions: boolean = false;
   @Input() confirmText: string = 'Confirm';
   @Input() cancelText: string = 'Cancel';
@@ -169,6 +170,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
       shake: this.shakeAnimation,
       fullscreen: this.fullScreen,
       blur: this.blur,
+      grayscale: this.grayscale,
     };
   }
 

src/app/examples/mode/mode.component.html

@@ -124,5 +124,41 @@ <h2 class="fullscreen-subtitle">Additional Tips for Fullscreen Mode</h2>
     >
       Mode Blur content!
     </up-window-angular>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('grayscale')"
+    >
+      <span class="material-symbols-outlined"> &#xe3f6; </span> Grayscale
+    </button>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenGrayscale"
+      title="Grayscale Window"
+      subtitle="This window mode Grayscale."
+      [grayscale]="true"
+    >
+      Mode Grayscale content!
+    </up-window-angular>
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('blurGrayscale')"
+    >
+      <span class="material-symbols-outlined"> &#xeb77; </span> Blur
+      <span class="material-symbols-outlined plus"> &#xe145; </span>
+      <span class="material-symbols-outlined"> &#xe3f6; </span> Grayscale
+    </button>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenBlurGrayscale"
+      title="Blur + Grayscale Window"
+      subtitle="This window combines blur and grayscale modes."
+      [blur]="true"
+      [grayscale]="true"
+    >
+      Content with both blur and grayscale effects!
+    </up-window-angular>
   </div>
 </div>

src/app/examples/mode/mode.component.ts

@@ -6,17 +6,21 @@ import { UpWindowAngularModule } from '../../../../projects/up-window-angular/sr
   standalone: true,
   imports: [UpWindowAngularModule],
   templateUrl: './mode.component.html',
-  styleUrl: './mode.component.scss'
+  styleUrl: './mode.component.scss',
 })
 export class ModeComponent {
   isWindowOpenRestrict: WritableSignal<boolean> = signal(false);
   isWindowOpenFullScreen: WritableSignal<boolean> = signal(false);
   isWindowOpenBlur: WritableSignal<boolean> = signal(false);
+  isWindowOpenGrayscale: WritableSignal<boolean> = signal(false);
+  isWindowOpenBlurGrayscale: WritableSignal<boolean> = signal(false);
 
   openWindowExample(type: string) {
     this.isWindowOpenRestrict.set(false);
     this.isWindowOpenFullScreen.set(false);
     this.isWindowOpenBlur.set(false);
+    this.isWindowOpenGrayscale.set(false);
+    this.isWindowOpenBlurGrayscale.set(false);
 
     switch (type) {
       case 'restrict':
@@ -28,6 +32,12 @@ export class ModeComponent {
       case 'blur':
         this.isWindowOpenBlur.set(true);
         break;
+      case 'grayscale':
+        this.isWindowOpenGrayscale.set(true);
+        break;
+      case 'blurGrayscale':
+        this.isWindowOpenBlurGrayscale.set(true);
+        break;
     }
   }
 }

src/styles.scss

@@ -160,12 +160,13 @@ h2 {
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 1rem;
-  min-width: 100px;
-  max-width: 200px;
   white-space: nowrap;
   .material-symbols-outlined {
     margin-right: 0.5rem;
   }
+  .material-symbols-outlined.plus {
+    margin: 0 0.5rem;
+  }
 }
 
 .input-search {