Feature: Add Blur Effect to Modal Background

[lucasferreiralimax]

The request is to implement a blur effect on the modal background overlay in the UpWindowAngularComponent. This will allow the background to be blurred when the modal is open, enhancing the visual aesthetics of the component.

Proposed Solution

• Add a new @Input() property, blur, which defaults to false. When set to true, the background of the modal overlay will apply a blur effect.
• Modify the modal's CSS to handle the blur effect when the blur class is applied.
• Update the getClass() method to include the blur class conditionally based on the blur input.

Code Changes

Component TypeScript Changes

@Input() blur: boolean = false;

getClass() {
  return {
    ...(this.class ? { [this.class]: true } : {}),
    [this.animation]: this.openingAnimation && !this.closingAnimation,
    [`${this.animation}-out`]: this.closingAnimation,
    shake: this.shakeAnimation,
    fullscreen: this.fullScreen,
    blur: this.blur, // Add this to toggle the blur class
  };
}

Component HTML Changes

<div
  #modal
  class="overlay"
  [class.active]="isOpen()"
  [class.blur]="blur"  <!-- Add this to conditionally apply the blur class -->
  role="dialog"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-description"
>
  <!-- Modal content -->
</div>

CSS Changes

.overlay {
  &.blur {
    backdrop-filter: blur(6px);  // Apply blur effect
  }
}

Benefits

• Enhances the visual quality of the modal by blurring the background when the modal is open.
• Provides an additional customization option for developers using the component.