Add Blur Effect Option to Modal Background

[lucasferreiralimax]

This pull request adds an optional blur effect to the modal background in the UpWindowAngularComponent. The blur effect is controlled via a new @Input() property blur, which, when set to true, applies a subtle background blur to the modal's overlay, enhancing the visual appearance.

Changes Implemented

1. New Input Property:

   • Added a new input property: blur (boolean), defaulting to false. This allows users of the modal component to enable or disable the blur effect on the background overlay.

2. CSS Changes:

   • The overlay class has been updated to include a blur modifier, which applies a backdrop-filter: blur(6px) effect when active.

3. HTML Updates:

   • The modal's div structure now includes a conditional blur class binding to control when the blur effect is applied.

4. TypeScript Logic:

   • The getClass() method now includes logic to conditionally add the blur class based on the blur input.

Testing

• Tested the blur effect on various screen sizes and browsers to ensure proper performance and rendering.
• Verified that the blur effect does not interfere with modal functionality such as focus trapping or keyboard navigation.
• Ensured the modal works as expected with or without the blur effect based on the input value.

[github-actions]

Visit the preview URL for this PR (updated for commit 0bcd787):

https://up-window-angular--pr11-blur-feature-hj0al1j6.web.app

_{(expires Tue, 22 Oct 2024 05:20:25 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 7822e0d6e40bbbcb5ceaa0eda2c38488d7b613f8}