## Overview

This widget provides a comprehensive demonstration and testing page for three specialized dropdown components from the 2lForge Toolbar plugin. It showcases reusable selection UI elements designed for form-based data entry, filtering interfaces, and interactive selection scenarios.

The widget serves primarily as a demo/test page displaying working examples of:
- **Single Dropdown**: Select one value from a list
- **Multi Dropdown**: Select multiple values from a list
- **Draggable Dropdown**: Select and reorder multiple values via drag-and-drop

All dropdown components feature consistent Bootstrap-based styling, type-safe implementation, and rich configurability including optional search/filter functionality, reset capabilities, change tracking, and custom CSS styling per entry.

## Use Cases

### 1. Simple Form Selection
Select a single option from a predefined list (status, priority, category). The single dropdown component provides visual selection indicators and optional reset functionality for clearing selections.

### 2. Multi-Criteria Filtering
Filter data by selecting multiple values simultaneously (tags, departments, project phases). The multi dropdown component intelligently displays either a single label or a count (e.g., "3 elements") based on the number of selections.

### 3. Large List Navigation with Search
Select from extensive lists using the built-in search/filter functionality (countries, products, users). The searchable dropdown automatically focuses the filter input and provides real-time filtering by label text.

### 4. Prioritized Selection and Ordering
Select and arrange multiple items in priority order using drag-and-drop interaction (task prioritization, step sequences, preference ranking). The draggable dropdown maintains selection order as a significant part of the data model.

### 5. Color-Coded Options
Differentiate option types visually using custom CSS classes per entry (severity levels, status indicators, risk classifications). Each entry can include CSS classes for custom styling.

### 6. Resettable Optional Fields
Explicitly clear selections using the reset functionality (unassigning tickets, clearing optional filters). The reset-active mode allows clicking the current selection to deselect it.

### 7. Component Testing and Development
Test and demonstrate dropdown functionality with working code examples. The widget serves as a comprehensive demo page showing all configuration options, edge cases, and integration patterns for developers building forms with the 2lForge Toolbar components.

## Design Considerations

### Component Selection
- Use **Single Dropdown** for mutually exclusive choices where one value must be selected
- Use **Multi Dropdown** when multiple selections are needed but order doesn't matter
- Use **Draggable Dropdown** when the order of selections is significant and users need to prioritize/sequence items

### Search Functionality
Enable the optional `searchable` attribute for lists with more than ~10-15 items to improve user experience. The search component automatically focuses on dropdown open and clears on close.

### Type Safety
All dropdown components support generic types (string, number, boolean, custom) with automatic type inference from the first entry. Explicitly declare types when entries are empty or ambiguous.

### Default Values
Configure defaults using either `defaultRef` (object reference) or `defaultString` (parsed string). For multi/draggable dropdowns, use the `defaultStringSeparator` to customize parsing of comma-separated value strings.

## Related Widgets

### Within ToolbarPlugin
- **DatePickerWidgetDefinition** (`de.2lforge.toolbar.datePickerWidget`): Companion date selection components with similar toolbar-based UI patterns
- **MiscWidgetDefinition** (`de.2lforge.toolbar.miscWidget`): Other complementary toolbar UI elements

### Alternative Selection Patterns
Consider standard cplace form widgets for basic selection needs when the advanced features of these toolbar dropdowns (search, drag-drop, custom styling) are not required.