Angular Bottom Sheet Implementation

This challenge focuses on building a reusable bottom sheet component in Angular. Bottom sheets are commonly used for presenting options, details, or actions in a modal overlay that slides up from the bottom of the screen, providing a clean and intuitive user experience, especially on mobile devices. Your task is to create a component that can be easily integrated into different parts of an Angular application to display content in this bottom sheet format.

Problem Description

You need to implement an Angular component that functions as a bottom sheet. The component should accept content to display, a title (optional), and a close button (optional). It should slide up from the bottom of the screen when opened and slide down when closed. The component should be reusable and configurable, allowing developers to easily integrate it into various parts of their application.

Key Requirements:

• Opening and Closing: The component must have a method (openBottomSheet()) that, when called from a parent component, displays the bottom sheet. It must also have a method (closeBottomSheet()) to hide the bottom sheet.
• Content Display: The component should accept a @Input() property called content which will be the HTML content to display within the bottom sheet.
• Title (Optional): The component should accept an optional @Input() property called title to display a title above the content.
• Close Button (Optional): The component should accept an optional @Input() property called showCloseButton (boolean). If true, a close button ("Close") should be displayed in the top right corner of the bottom sheet. Clicking this button should call the closeBottomSheet() method.
• Animation: The bottom sheet should smoothly slide up and down using Angular's animation capabilities.
• Overlay: The bottom sheet should be displayed over a darkened overlay to visually separate it from the rest of the application.
• Accessibility: Ensure the bottom sheet is accessible (e.g., proper ARIA attributes).

Expected Behavior:

• When openBottomSheet() is called, the bottom sheet should appear with a smooth slide-up animation, and the overlay should darken the background.
• When closeBottomSheet() is called, the bottom sheet should disappear with a smooth slide-down animation, and the overlay should disappear.
• The content provided via the content input should be rendered correctly within the bottom sheet.
• If title is provided, it should be displayed above the content.
• If showCloseButton is true, a close button should be displayed, and clicking it should close the bottom sheet.

Edge Cases to Consider:

• What happens if the content input is empty? (Should display nothing or a placeholder).
• How to handle different screen sizes and ensure the bottom sheet doesn't overflow. (Consider using CSS to control height and overflow).
• What happens if the parent component is destroyed while the bottom sheet is open? (Consider unsubscribing from any relevant subscriptions).

Examples

Example 1:

Input: Parent component calls openBottomSheet() with content: "<h1>Welcome!</h1><p>This is the bottom sheet content.</p>" and title: "My Title".
Output: A bottom sheet slides up from the bottom, displaying "My Title" above the content "<h1>Welcome!</h1><p>This is the bottom sheet content.</p>".  A darkened overlay appears behind the bottom sheet.
Explanation: The component correctly renders the provided content and title, and the animation is triggered.

Example 2:

Input: Parent component calls openBottomSheet() with content: "<button (click)=\"closeBottomSheet()\">Close</button>" and showCloseButton: false.
Output: A bottom sheet slides up from the bottom, displaying the button. Clicking the button calls the closeBottomSheet() method from the parent component.
Explanation: The component renders the provided content, and the parent component's method is correctly invoked.

Example 3: (Edge Case)

Input: Parent component calls openBottomSheet() with content: "" and title: null and showCloseButton: false.
Output: A bottom sheet slides up from the bottom, displaying nothing within the sheet. The overlay appears.
Explanation: The component handles the empty content gracefully.

Constraints

• The component should be written in TypeScript.
• Use Angular's built-in animation capabilities.
• The component should be reusable and easily integrable into different parts of an Angular application.
• The component should be responsive and adapt to different screen sizes.
• The component should not rely on any external libraries beyond Angular itself.
• The animation duration should be reasonably fast (e.g., 300ms).

Notes

• Consider using Angular's ComponentRef and ViewContainerRef to dynamically create and manage the bottom sheet.
• Think about how to handle the focus when the bottom sheet opens (e.g., setting focus to the first focusable element within the bottom sheet).
• You can use CSS to style the bottom sheet and overlay as needed.
• Focus on creating a clean, well-structured, and reusable component.
• Remember to handle the lifecycle of the bottom sheet properly to avoid memory leaks.