Merge pull request #1 from ishansasika/release/v2.3.0-comprehensive-features

Release/v2.3.0 comprehensive features

Author: ishansasika

CHANGELOG.md

@@ -5,6 +5,120 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.3.0] - 2026-01-14
+
+### ✨ New Features
+
+#### Fuzzy Search
+- Advanced search algorithm supporting acronym-style matching (e.g., "fb" matches "Facebook")
+- Scores and ranks results by relevance with consecutive match bonuses
+- Word boundary detection for better acronym matching
+- Configurable threshold and case sensitivity
+- Props: `enableFuzzySearch`, `fuzzySearchThreshold`, `fuzzySearchCaseSensitive`
+- New utility: `fuzzyMatch()` and `sortByFuzzyScore()` exported for external use
+
+#### Dark Mode
+- Automatic system dark mode detection via CSS media queries
+- Uses Angular signals for reactive theme switching
+- Manual override with `colorScheme` prop ('auto', 'light', 'dark')
+- Dedicated dark theme with proper contrast and readability
+- New provider: `DarkModeProvider` service for theme management
+- Props: `enableAutoThemeDetection`, `colorScheme`, `darkModeTheme`, `lightModeTheme`
+
+#### Loading Skeleton
+- Modern shimmer skeleton UI during async loading operations
+- Customizable item count, height, and animation delay
+- Smooth gradient animation with configurable timing
+- Props: `enableLoadingSkeleton`, `skeletonItemCount`, `skeletonItemHeight`, `skeletonAnimationDelay`
+
+#### Compact Mode
+- Ultra-dense layout variant for dashboards and data-heavy UIs
+- Reduced padding, font sizes, and gaps throughout component
+- Works with all existing features (multi-select, validation, etc.)
+- Single prop activation: `compactMode`
+
+#### Custom Tag Templates
+- Full control over multi-select tag rendering via ng-template
+- Support custom layouts, avatars, badges, and styling
+- Template context includes option data and selection state
+- Usage: `<ng-template #tagTemplate let-option>...</ng-template>`
+
+#### Option Checkbox Mode
+- Visual checkboxes next to options for better selection feedback
+- Three style variants: default, filled, outlined
+- Configurable left/right position
+- Enhanced accessibility with proper ARIA attributes
+- Props: `showOptionCheckboxes`, `checkboxPosition`, `checkboxStyle`
+
+#### Bulk Actions
+- Action buttons for performing operations on selected options
+- Three position options: above, below, or floating
+- Configurable label and disabled states
+- Event emission for custom handling
+- Props: `bulkActions`, `enableBulkActions`, `bulkActionsPosition`, `bulkActionsLabel`
+- New event: `bulkActionSelected`
+- New interface: `BulkAction`
+
+#### Option Sorting
+- Multiple built-in sort modes: alphabetical (asc/desc), recently-used
+- Custom comparator function support for advanced sorting
+- Recently used tracking with configurable limit
+- Integrates seamlessly with existing filtering and pinning
+- Props: `sortMode`, `customSortComparator`, `recentlyUsedLimit`
+- New utility: `sortOptions()` exported for external use
+
+### 📦 New Exports
+
+- `DarkModeProvider` - Injectable service for dark mode management
+- `ColorScheme` - Type for color scheme preference
+- `BulkAction` - Interface for bulk action configuration
+- `SelectBulkActionEvent` - Event interface for bulk actions
+- `fuzzyMatch()` - Utility function for fuzzy string matching
+- `FuzzyMatchResult` - Interface for fuzzy match results
+- `sortByFuzzyScore()` - Utility to sort items by fuzzy score
+- `sortOptions()` - Utility function for option sorting
+- `SortMode` - Type for sorting modes
+- `SortConfig` - Interface for sort configuration
+
+### 🔧 Improvements
+
+- Added `resolvedTheme` computed signal for automatic theme resolution
+- Added `hasBulkActions` computed signal for conditional rendering
+- Added `recentlyUsedIds` signal for tracking usage history
+- Enhanced `filteredOptions` to support fuzzy search and sorting
+- Better separation of concerns with new utility modules
+
+### 🎨 Styles
+
+- Added ~350 lines of new SCSS for all v2.3.0 features
+- Complete dark mode styling with CSS custom properties
+- Skeleton loader animations with shimmer effect
+- Compact mode adjustments for all component parts
+- Checkbox styles for all three variants
+- Bulk actions bar with multiple position options
+- Responsive design for all new features
+
+### 📊 Statistics
+
+- **27 new @Input properties**
+- **1 new @Output event**
+- **1 new @ContentChild template**
+- **4 new utility files**
+- **1 new provider**
+- **1 new interface file**
+- **~500 lines of new TypeScript**
+- **~350 lines of new SCSS**
+- **~50 lines of template updates**
+
+### 🔄 Demo App Updates
+
+- Added 14 new examples showcasing v2.3.0 features
+- Updated metadata with 23 new prop definitions
+- Added `v2.3-features` category
+- Combined feature examples demonstrating integration
+
+---
+
 ## [2.2.0] - 2026-01-09
 
 ### ✨ New Features

CLAUDE.md

@@ -250,7 +250,7 @@ Target: >85% coverage
 - **Async Caching**: Uses Map for O(1) cache lookups
 - **Signals**: Automatic change detection optimization
 - **Animations**: Use `@angular/animations` for GPU-accelerated transforms
-- **Virtual Scrolling**: Not currently implemented (consider for v2.0)
+- **Virtual Scrolling**: Implemented in v2.0 using Angular CDK
 
 ## Accessibility Notes
 - All interactive elements have ARIA labels
@@ -261,6 +261,11 @@ Target: >85% coverage
 - High contrast mode support
 
 ## Version History
+- **v2.3.0** (2026-01-14): Fuzzy search, dark mode, loading skeleton, compact mode, custom tag templates, option checkboxes, bulk actions, option sorting
+- **v2.2.0** (2026-01-09): Search result highlighting, tag overflow management
+- **v2.1.0** (2026-01-09): Drag & drop reordering, option pinning
+- **v2.0.0** (2026-01-08): Virtual scrolling, validation states, tooltips, recent selections, infinite scroll, advanced keyboard, copy/paste
+- **v1.1.0** (2026-01-07): Max selection limit, search debounce, min search length
 - **v1.0.0** (2025-12-31): Initial release with full react-select API parity
 
 ## Resources

README.md

@@ -21,7 +21,17 @@ A modern, feature-rich, and fully accessible select component for Angular applic
 
 ### Advanced Features
 
-#### v2.2.0 Features 🆕
+#### v2.3.0 Features 🎉 NEW
+- **Fuzzy Search** - Advanced search algorithm supporting acronym-style matching (e.g., 'fb' matches 'Facebook')
+- **Dark Mode** - Automatic dark mode detection with manual override and dedicated dark theme
+- **Loading Skeleton** - Modern shimmer skeleton UI while loading async options
+- **Compact Mode** - Ultra-dense layout variant with reduced padding for data-heavy UIs
+- **Custom Tag Templates** - Full control over multi-select tag rendering with ng-template
+- **Option Checkbox Mode** - Display checkboxes next to options for better visual selection feedback
+- **Bulk Actions** - Action buttons for performing operations on all selected options
+- **Option Sorting** - Built-in sorting modes (alphabetical, recently used, custom comparator)
+
+#### v2.2.0 Features
 - **Search Result Highlighting** - Automatically highlights matching text in options with customizable colors
 - **Tag Overflow Management** - Show "+N more" or collapsible tags when exceeding visible limit
 
@@ -134,6 +144,171 @@ export class AppModule { }
 
 ## Usage Examples
 
+### Fuzzy Search (v2.3.0)
+
+Enable intelligent fuzzy search for better option matching:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [enableFuzzySearch]="true"
+  [fuzzySearchThreshold]="0.3"
+  [fuzzySearchCaseSensitive]="false"
+  [isSearchable]="true"
+  placeholder="Try searching 'fb' to find 'Facebook'..."
+/>
+```
+
+### Dark Mode (v2.3.0)
+
+Automatic dark mode detection with system preference:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [enableAutoThemeDetection]="true"
+  [darkModeTheme]="'dark'"
+  [lightModeTheme]="'blue'"
+  [colorScheme]="'auto'"
+  placeholder="Auto dark mode..."
+/>
+
+// Manual dark mode override
+<angular-perfect-select
+  [options]="options"
+  [colorScheme]="'dark'"
+  placeholder="Always dark mode..."
+/>
+```
+
+### Loading Skeleton (v2.3.0)
+
+Show modern skeleton UI while loading:
+
+```typescript
+<angular-perfect-select
+  [loadOptions]="loadRemoteData"
+  [enableLoadingSkeleton]="true"
+  [skeletonItemCount]="5"
+  [skeletonItemHeight]="40"
+  [skeletonAnimationDelay]="800"
+  placeholder="Loading with skeleton..."
+/>
+```
+
+### Compact Mode (v2.3.0)
+
+Dense layout for dashboards and data grids:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [compactMode]="true"
+  placeholder="Compact select..."
+/>
+```
+
+### Custom Tag Templates (v2.3.0)
+
+Fully customize how multi-select tags are rendered:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [(ngModel)]="selectedValues"
+>
+  <ng-template #tagTemplate let-option>
+    <div class="custom-tag">
+      <img [src]="option.avatar" alt="" class="tag-avatar" />
+      <span>{{option.label}}</span>
+      <span class="tag-badge">{{option.role}}</span>
+    </div>
+  </ng-template>
+</angular-perfect-select>
+```
+
+### Option Checkbox Mode (v2.3.0)
+
+Display checkboxes for better visual feedback:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [showOptionCheckboxes]="true"
+  [checkboxPosition]="'left'"
+  [checkboxStyle]="'filled'"
+  placeholder="Select with checkboxes..."
+/>
+```
+
+### Bulk Actions (v2.3.0)
+
+Add action buttons for selected options:
+
+```typescript
+// Component
+bulkActions: BulkAction[] = [
+  {
+    id: 'export',
+    label: 'Export',
+    icon: '/assets/export.svg',
+    action: (selectedOptions) => this.exportSelected(selectedOptions)
+  },
+  {
+    id: 'delete',
+    label: 'Delete All',
+    action: (selectedOptions) => this.deleteSelected(selectedOptions)
+  }
+];
+
+// Template
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [enableBulkActions]="true"
+  [bulkActions]="bulkActions"
+  [bulkActionsPosition]="'above'"
+  [bulkActionsLabel]="'Actions:'"
+  (bulkActionSelected)="onBulkAction($event)"
+/>
+```
+
+### Option Sorting (v2.3.0)
+
+Sort options automatically:
+
+```typescript
+// Alphabetical sorting
+<angular-perfect-select
+  [options]="options"
+  [sortMode]="'alphabetical-asc'"
+  placeholder="Sorted A-Z..."
+/>
+
+// Recently used sorting
+<angular-perfect-select
+  [options]="options"
+  [sortMode]="'recently-used'"
+  [recentlyUsedLimit]="10"
+  placeholder="Recently used first..."
+/>
+
+// Custom sorting
+<angular-perfect-select
+  [options]="options"
+  [sortMode]="'custom'"
+  [customSortComparator]="customSort"
+  placeholder="Custom sorted..."
+/>
+
+// Component
+customSort = (a: SelectOption, b: SelectOption) => {
+  return a.priority - b.priority;
+};
+```
+
 ### Search Result Highlighting (v2.2.0)
 
 Highlight matching text in options during search:

demo/angular.json

@@ -32,8 +32,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "10kB",
-                  "maximumError": "20kB"
+                  "maximumWarning": "20kB",
+                  "maximumError": "30kB"
                 }
               ],
               "outputHashing": "all"