We need to enhance the up-window-angular component by allowing for a customizable footer. This will enable developers to specify actions directly in the modal's footer, enhancing its flexibility and usability.

Acceptance Criteria:

• Add a <div footer> section within the up-window-angular component.
• If the footer content is provided, render it instead of the default footer buttons.
• Ensure that when footer content is present, the default footer buttons (Close and Perform Action) are not displayed.
• Apply appropriate styling to the custom buttons in the footer using the following styles:
  • .close button should have a red background color.
  • .confirm button should have a blue background color.
• Add hover effects for both button types:
  • .close: Darker red on hover.
  • .confirm: Darker blue on hover.

Implementation Steps:

1. Update the up-window-angular Component:

   • Modify the HTML to include a conditional check for the presence of footer content.
   • If footer content exists, render that content and skip rendering the default footer buttons.

2. Add Styling:

   • Create SASS styles for .close and .confirm buttons with the specified colors and hover effects.

3. Update Documentation:

   • Update the component documentation to include examples of how to use the custom footer functionality.

4. Testing:

   • Write unit tests to ensure that the custom footer renders correctly and the default buttons are not shown when custom footer content is provided.

Example Usage:

<up-window-angular
  [isOpen]="isWindowOpenFooter"
  title="Custom Footer Example"
  subtitle="Choose an action below"
>
  <div footer>
    <button class="custom-btn close" (click)="isWindowOpenFooter.set(false)">
      Close
    </button>
    <button class="custom-btn confirm" (click)="performCustomAction()">
      Perform Action
    </button>
  </div>
</up-window-angular>