Angular Drag and Drop Interface

Build an interactive Angular component that allows users to drag and drop items between two distinct lists. This is a fundamental UI pattern used in many applications for reordering, categorization, and data management.

Problem Description

Your task is to create an Angular component that implements drag and drop functionality. Users should be able to select an item from a "Source List" and drag it to a "Target List". Once dropped, the item should be removed from the Source List and added to the Target List. The component should visually indicate when an item is being dragged and where it can be dropped.

Key Requirements:

• Two Lists: Display two distinct lists of items. For simplicity, these can be represented as arrays of strings or simple objects.
• Draggable Items: Items in the Source List should be draggable.
• Droppable Areas: The Target List should be a droppable area.
• Visual Feedback:
  • When an item is being dragged, it should have a distinct visual style (e.g., a shadow, reduced opacity).
  • The Target List should provide visual feedback when a draggable item is hovering over it (e.g., a border change, a background highlight).
• Item Transfer: Upon successful drop, the dragged item must be removed from its original position in the Source List and appended to the Target List.
• Maintain Order: The order of items within each list should be preserved after dragging.

Expected Behavior:

1. User clicks and holds on an item in the Source List.
2. The item visually detaches from the list and can be moved.
3. As the item hovers over the Target List, the Target List provides visual cues indicating it's a valid drop zone.
4. User releases the mouse button over the Target List.
5. The item is removed from the Source List and appears in the Target List.

Edge Cases to Consider:

• Dragging an item but dropping it outside the Target List (it should return to its original position).
• Handling empty lists.

Examples

Example 1: Basic Drag and Drop

Input:
Source List: ['Apple', 'Banana', 'Cherry']
Target List: []

Output:
(UI Representation)
Source List: ['Banana', 'Cherry']
Target List: ['Apple']
Explanation: The user drags 'Apple' from the Source List and drops it into the Target List.

Example 2: Dragging to a Non-Empty Target List

Input:
Source List: ['Date', 'Elderberry']
Target List: ['Fig', 'Grape']

Output:
(UI Representation)
Source List: ['Elderberry']
Target List: ['Fig', 'Grape', 'Date']
Explanation: The user drags 'Date' from the Source List and drops it at the end of the Target List.

Example 3: Dropping Outside Target

Input:
Source List: ['Honeydew', 'Imbe']
Target List: []

Output:
(UI Representation)
Source List: ['Honeydew', 'Imbe']
Target List: []
Explanation: The user attempts to drag 'Honeydew' but drops it outside the Target List. The item snaps back to its original position.

Constraints

• The solution must be implemented using Angular and TypeScript.
• Utilize Angular's built-in CDK Drag and Drop module for implementing the drag and drop functionality.
• The initial data for the lists can be hardcoded within the component or passed via @Input.
• No external libraries other than Angular and its CDK are permitted.
• The component should be performant, handling a reasonable number of items (e.g., up to 50) without noticeable lag.

Notes

• The Angular CDK Drag and Drop module provides directives (cdkDropList, cdkDrag) and services that simplify this process significantly.
• Focus on correctly implementing the drag start, drag over, and drop events.
• Consider how to manage the state of your lists (the source and target arrays) when items are moved.
• Think about accessibility – while not explicitly a requirement for this challenge, consider how keyboard users might interact with such a component.