feat: Add max selection limit, search debounce, and min search length

Author: ishansasika

src/lib/components/perfect-select/perfect-select.component.html

@@ -110,13 +110,33 @@
 
       <!-- Options List -->
       <div class="options-list" id="options-list">
+        <!-- Max Selection Message -->
+        @if (isMaxSelectionReached()) {
+          <div class="info-message max-selection">
+            <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z"/>
+            </svg>
+            {{maxSelectedMessage}}
+          </div>
+        }
+
+        <!-- Min Search Length Message -->
+        @if (showMinSearchMessage()) {
+          <div class="info-message min-search">
+            <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm1 15H9v-2h2v2zm0-4H9V5h2v6z"/>
+            </svg>
+            {{minSearchMessage}} ({{searchTerm().length}}/{{minSearchLength}})
+          </div>
+        }
+
         @if (isLoadingAsync()) {
           <div class="loading-message">{{loadingMessage()}}</div>
-        } @else if (displayOptions().length === 0) {
+        } @else if (displayOptions().length === 0 && !showMinSearchMessage()) {
           <div class="no-options">
             {{searchTerm() ? emptySearchText : emptyStateText}}
           </div>
-        } @else {
+        } @else if (!showMinSearchMessage()) {
           <!-- Select All (Multi-select only) -->
           @if (isMulti && showSelectAll && !searchTerm()) {
             <div class="select-all-container">
@@ -153,14 +173,14 @@
                     class="option"
                     [class.selected]="isSelected(option)"
                     [class.highlighted]="idx === highlightedIndex()"
-                    [class.disabled]="isOptionDisabled(option)"
+                    [class.disabled]="isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))"
                     [class.hidden]="hideSelectedOptions && isSelected(option)"
                     [class.create-option]="option.__isCreate__"
                     (click)="selectOption(option)"
                     (keydown)="$event.key === 'Enter' && selectOption(option)"
                     role="option"
                     [attr.aria-selected]="isSelected(option)"
-                    [attr.aria-disabled]="isOptionDisabled(option)"
+                    [attr.aria-disabled]="isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))"
                     tabindex="-1"
                   >
                     <!-- Checkbox for multi-select -->
@@ -220,14 +240,14 @@
                 class="option"
                 [class.selected]="isSelected(option)"
                 [class.highlighted]="idx === highlightedIndex()"
-                [class.disabled]="isOptionDisabled(option)"
+                [class.disabled]="isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))"
                 [class.hidden]="hideSelectedOptions && isSelected(option)"
                 [class.create-option]="option.__isCreate__"
                 (click)="selectOption(option)"
                 (keydown)="$event.key === 'Enter' && selectOption(option)"
                 role="option"
                 [attr.aria-selected]="isSelected(option)"
-                [attr.aria-disabled]="isOptionDisabled(option)"
+                [attr.aria-disabled]="isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))"
                 tabindex="-1"
               >
                 <!-- Checkbox for multi-select -->

src/lib/components/perfect-select/perfect-select.component.scss

@@ -473,6 +473,33 @@
   font-size: 0.95em;
 }
 
+/* v1.0.1 - Info Messages */
+.info-message {
+  padding: 12px;
+  margin: 8px;
+  border-radius: 6px;
+  font-size: 0.9em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &.max-selection {
+    background: #FFF4E5;
+    color: #F57C00;
+    border: 1px solid #FFE0B2;
+  }
+
+  &.min-search {
+    background: #E3F2FD;
+    color: #1976D2;
+    border: 1px solid #BBDEFB;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
 /* RTL Support */
 .rtl .select-actions {
   flex-direction: row-reverse;

src/lib/components/perfect-select/perfect-select.component.ts

@@ -110,6 +110,13 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
   @Input() emptyStateText = 'No options available';
   @Input() emptySearchText = 'No results found';
 
+  // v1.0.1 Features
+  @Input() maxSelectedOptions: number | null = null;
+  @Input() maxSelectedMessage: string = 'Maximum selections reached';
+  @Input() debounceTime: number = 300;
+  @Input() minSearchLength: number = 0;
+  @Input() minSearchMessage: string = 'Type to search...';
+
   // Behavior
   @Input() name = 'angular-perfect-select';
   @Input() id = 'angular-perfect-select';
@@ -147,6 +154,7 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
   internalOptions = signal<SelectOption[]>([]);
   isLoadingAsync = signal(false);
   private optionsCache = new Map<string, SelectOption[]>();
+  private debounceTimeout: any = null;
 
   // Computed signals
   currentTheme = computed(() => THEMES[this.theme] || THEMES.blue);
@@ -155,6 +163,11 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
     const term = this.searchTerm();
     const opts = this.internalOptions();
 
+    // Check min search length
+    if (this.minSearchLength > 0 && term.length < this.minSearchLength) {
+      return [];
+    }
+
     if (!term) return opts;
 
     return opts.filter(option => {
@@ -265,6 +278,19 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
     return selectedCount > 0 && selectedCount < opts.length;
   });
 
+  // v1.0.1 Computed signals
+  isMaxSelectionReached = computed(() => {
+    if (!this.isMulti || this.maxSelectedOptions === null) return false;
+    const selected = this.selectedOptions();
+    return selected.length >= this.maxSelectedOptions;
+  });
+
+  showMinSearchMessage = computed(() => {
+    if (this.minSearchLength === 0) return false;
+    const term = this.searchTerm();
+    return this.isOpen() && term.length > 0 && term.length < this.minSearchLength;
+  });
+
   // Helper method for template
   getEnabledOptionsCount(): number {
     return this.filteredOptions().filter(opt => !this.isOptionDisabled(opt)).length;
@@ -331,7 +357,10 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
   }
 
   ngOnDestroy(): void {
-    // Cleanup handled by DestroyRef
+    // Clear debounce timeout
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
+    }
   }
 
   // Keyboard Navigation
@@ -461,6 +490,10 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
       if (exists) {
         newValue = currentValue.filter((v: any) => v !== optionValue);
       } else {
+        // Check max selection limit
+        if (this.maxSelectedOptions !== null && currentValue.length >= this.maxSelectedOptions) {
+          return; // Don't allow selection beyond max
+        }
         newValue = [...currentValue, optionValue];
       }
 
@@ -521,7 +554,13 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
 
   // Select All / Deselect All
   selectAll(): void {
-    const opts = this.filteredOptions().filter(opt => !this.isOptionDisabled(opt));
+    let opts = this.filteredOptions().filter(opt => !this.isOptionDisabled(opt));
+
+    // Respect max selection limit
+    if (this.maxSelectedOptions !== null && opts.length > this.maxSelectedOptions) {
+      opts = opts.slice(0, this.maxSelectedOptions);
+    }
+
     const values = opts.map(opt => this.getOptionValue(opt));
     this.internalValue.set(values);
     this.onChange(values);
@@ -550,9 +589,17 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
       action: 'input-change'
     });
 
-    // Trigger async loading if configured
+    // Trigger async loading if configured with debounce
     if (this.loadOptions) {
-      this.handleLoadOptions(term);
+      // Clear existing timeout
+      if (this.debounceTimeout) {
+        clearTimeout(this.debounceTimeout);
+      }
+
+      // Set new timeout for debounced loading
+      this.debounceTimeout = setTimeout(() => {
+        this.handleLoadOptions(term);
+      }, this.debounceTime);
     }
   }