angular-perfect-select 2.0.0 → 2.2.0

package/README.md

@@ -21,7 +21,15 @@ A modern, feature-rich, and fully accessible select component for Angular applic
 
 ### Advanced Features
 
-#### v2.0.0 Features 🆕
+#### 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
+
+#### v2.1.0 Features
+- **Drag & Drop Reordering** - Reorder selected tags in multi-select mode with intuitive drag handles
+- **Option Pinning** - Pin frequently used options to the top with persistence support
+
+#### v2.0.0 Features
 - **Virtual Scrolling** - Handle 10,000+ options without performance degradation using Angular CDK
 - **Custom Option Templates** - Full control over option rendering with ng-template support
 - **Validation States** - Visual error, warning, success, and info states with custom messages
@@ -126,6 +134,87 @@ export class AppModule { }
 
 ## Usage Examples
 
+### Search Result Highlighting (v2.2.0)
+
+Highlight matching text in options during search:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [enableSearchHighlight]="true"
+  [searchHighlightColor]="'#ffeb3b'"
+  [searchHighlightTextColor]="'#000'"
+  [isSearchable]="true"
+  placeholder="Search with highlighting..."
+/>
+```
+
+### Tag Overflow Management (v2.2.0)
+
+Show "+N more" when tags exceed limit:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [maxVisibleTags]="3"
+  [showMoreTagsText]="'+{count} more'"
+  placeholder="Select multiple..."
+/>
+
+// With collapsible tags
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [maxVisibleTags]="3"
+  [collapsibleTags]="true"
+  [showAllTagsText]="'Show all'"
+  [showLessTagsText]="'Show less'"
+  placeholder="Select multiple (collapsible)..."
+/>
+```
+
+### Drag & Drop Reordering (v2.1.0)
+
+Reorder selected tags in multi-select mode with drag-and-drop:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [enableDragDrop]="true"
+  [dragDropPlaceholder]="'Drop here'"
+  [dragDropAnimation]="200"
+  (reorder)="handleReorder($event)"
+/>
+
+// In your component
+handleReorder(event: SelectReorderEvent) {
+  console.log('Reordered from', event.previousIndex, 'to', event.currentIndex);
+  console.log('New order:', event.values);
+}
+```
+
+### Option Pinning (v2.1.0)
+
+Pin frequently used options to the top of the dropdown:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [enablePinning]="true"
+  [maxPinnedOptions]="3"
+  [persistPinnedOptions]="true"
+  [pinnedOptionsLabel]="'Favorites'"
+  (pin)="handlePin($event)"
+/>
+
+// In your component
+handlePin(event: SelectPinEvent) {
+  console.log('Option', event.option.label, event.pinned ? 'pinned' : 'unpinned');
+}
+```
+
 ### Max Selection Limit (v1.1.0)
 
 Limit the number of selections in multi-select mode:

package/dist/README.md

@@ -21,7 +21,15 @@ A modern, feature-rich, and fully accessible select component for Angular applic
 
 ### Advanced Features
 
-#### v2.0.0 Features 🆕
+#### 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
+
+#### v2.1.0 Features
+- **Drag & Drop Reordering** - Reorder selected tags in multi-select mode with intuitive drag handles
+- **Option Pinning** - Pin frequently used options to the top with persistence support
+
+#### v2.0.0 Features
 - **Virtual Scrolling** - Handle 10,000+ options without performance degradation using Angular CDK
 - **Custom Option Templates** - Full control over option rendering with ng-template support
 - **Validation States** - Visual error, warning, success, and info states with custom messages
@@ -126,6 +134,87 @@ export class AppModule { }
 
 ## Usage Examples
 
+### Search Result Highlighting (v2.2.0)
+
+Highlight matching text in options during search:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [enableSearchHighlight]="true"
+  [searchHighlightColor]="'#ffeb3b'"
+  [searchHighlightTextColor]="'#000'"
+  [isSearchable]="true"
+  placeholder="Search with highlighting..."
+/>
+```
+
+### Tag Overflow Management (v2.2.0)
+
+Show "+N more" when tags exceed limit:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [maxVisibleTags]="3"
+  [showMoreTagsText]="'+{count} more'"
+  placeholder="Select multiple..."
+/>
+
+// With collapsible tags
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [maxVisibleTags]="3"
+  [collapsibleTags]="true"
+  [showAllTagsText]="'Show all'"
+  [showLessTagsText]="'Show less'"
+  placeholder="Select multiple (collapsible)..."
+/>
+```
+
+### Drag & Drop Reordering (v2.1.0)
+
+Reorder selected tags in multi-select mode with drag-and-drop:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [isMulti]="true"
+  [enableDragDrop]="true"
+  [dragDropPlaceholder]="'Drop here'"
+  [dragDropAnimation]="200"
+  (reorder)="handleReorder($event)"
+/>
+
+// In your component
+handleReorder(event: SelectReorderEvent) {
+  console.log('Reordered from', event.previousIndex, 'to', event.currentIndex);
+  console.log('New order:', event.values);
+}
+```
+
+### Option Pinning (v2.1.0)
+
+Pin frequently used options to the top of the dropdown:
+
+```typescript
+<angular-perfect-select
+  [options]="options"
+  [enablePinning]="true"
+  [maxPinnedOptions]="3"
+  [persistPinnedOptions]="true"
+  [pinnedOptionsLabel]="'Favorites'"
+  (pin)="handlePin($event)"
+/>
+
+// In your component
+handlePin(event: SelectPinEvent) {
+  console.log('Option', event.option.label, event.pinned ? 'pinned' : 'unpinned');
+}
+```
+
 ### Max Selection Limit (v1.1.0)
 
 Limit the number of selections in multi-select mode: