+
+ @if (enableBulkActions && hasBulkActions() && bulkActionsPosition === 'above') {
+
number) | null = null;
+ @Input() recentlyUsedLimit: number = 10;
+
// Behavior
@Input() name = 'angular-perfect-select';
@Input() id = 'angular-perfect-select';
@@ -226,6 +266,9 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
@Output() reorder = new EventEmitter
();
@Output() pin = new EventEmitter();
+ // v2.3.0 Events
+ @Output() bulkActionSelected = new EventEmitter();
+
// ViewChildren
@ViewChild('selectContainer', { static: false }) selectContainerRef!: ElementRef;
@ViewChild('searchInput', { static: false }) searchInputRef!: ElementRef;
@@ -235,6 +278,7 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
// ContentChildren - Custom Templates
@ContentChild('optionTemplate', { read: TemplateRef, static: false }) optionTemplate?: TemplateRef;
@ContentChild('selectedOptionTemplate', { read: TemplateRef, static: false }) selectedOptionTemplate?: TemplateRef;
+ @ContentChild('tagTemplate', { read: TemplateRef, static: false }) tagTemplate?: TemplateRef;
// Signals for reactive state
isOpen = signal(false);
@@ -268,6 +312,10 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
// v2.2.0 Signals
tagsExpanded = signal(false);
+ // v2.3.0 Signals
+ isDarkMode = signal(false);
+ recentlyUsedIds = signal>(new Set());
+
// Computed signals
currentTheme = computed(() => THEMES[this.theme] || THEMES.blue);
@@ -281,13 +329,40 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
return [];
}
- let filtered = !term ? opts : opts.filter(option => {
- if (this.filterOption) {
- return this.filterOption(option, term);
- }
- const label = this.getOptionLabel(option);
- return label.toLowerCase().includes(term.toLowerCase());
- });
+ let filtered: SelectOption[];
+
+ // v2.3.0: Fuzzy search if enabled
+ if (this.enableFuzzySearch && term) {
+ filtered = sortByFuzzyScore(
+ opts,
+ term,
+ this.getOptionLabel,
+ {
+ caseSensitive: this.fuzzySearchCaseSensitive,
+ threshold: this.fuzzySearchThreshold
+ }
+ );
+ } else {
+ // Standard filtering
+ filtered = !term ? opts : opts.filter(option => {
+ if (this.filterOption) {
+ return this.filterOption(option, term);
+ }
+ const label = this.getOptionLabel(option);
+ return label.toLowerCase().includes(term.toLowerCase());
+ });
+ }
+
+ // v2.3.0: Apply sorting if configured
+ if (this.sortMode !== 'none' && !term) {
+ const sortConfig: SortConfig = {
+ mode: this.sortMode,
+ customComparator: this.customSortComparator || undefined,
+ getLabel: this.getOptionLabel,
+ recentlyUsedIds: this.recentlyUsedIds()
+ };
+ filtered = sortOptions(filtered, sortConfig);
+ }
// v2.1.0: Sort pinned options to the top
if (this.enablePinning && pinned.length > 0) {
@@ -351,6 +426,20 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
return selected.length - visible.length;
});
+ // v2.3.0 Computed signals
+ resolvedTheme = computed(() => {
+ if (this.enableAutoThemeDetection) {
+ return this.isDarkMode() ? this.darkModeTheme : this.lightModeTheme;
+ }
+ return this.theme;
+ });
+
+ hasBulkActions = computed(() => {
+ return this.enableBulkActions &&
+ this.bulkActions.length > 0 &&
+ this.selectedOptions().length > 0;
+ });
+
groupedOptions = computed(() => {
if (!this.isGrouped || !this.groupBy) {
return null;
@@ -469,7 +558,10 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
private onChange: any = () => {};
private onTouched: any = () => {};
- constructor(private sanitizer: DomSanitizer) {}
+ constructor(
+ private sanitizer: DomSanitizer,
+ private darkModeProvider: DarkModeProvider
+ ) {}
ngOnChanges(changes: SimpleChanges): void {
// Update internal options when the options input changes
@@ -527,6 +619,14 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
this.loadPinnedOptions();
}
+ // v2.3.0: Initialize dark mode detection
+ if (this.enableAutoThemeDetection) {
+ effect(() => {
+ const darkMode = this.darkModeProvider.isDarkMode();
+ this.isDarkMode.set(darkMode);
+ });
+ }
+
// Auto-focus if needed
if (this.autoFocus) {
setTimeout(() => {
@@ -760,6 +860,11 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
if (!exists && this.showRecentSelections) {
this.addToRecentSelections(option);
}
+
+ // v2.3.0: Track recently used for sorting
+ if (!exists && this.sortMode === 'recently-used') {
+ this.trackRecentlyUsed(option);
+ }
} else {
this.internalValue.set(optionValue);
this.onChange(optionValue);
@@ -773,6 +878,11 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
if (this.showRecentSelections) {
this.addToRecentSelections(option);
}
+
+ // v2.3.0: Track recently used for sorting
+ if (this.sortMode === 'recently-used') {
+ this.trackRecentlyUsed(option);
+ }
}
if (this.closeMenuOnSelect) {
@@ -1264,4 +1374,50 @@ export class PerfectSelectComponent implements ControlValueAccessor, OnInit, OnC
getValidationClass(): string {
return `validation-${this.validationState}`;
}
+
+ // v2.3.0 Methods
+
+ // Track recently used options for sorting
+ trackRecentlyUsed(option: SelectOption): void {
+ const ids = this.recentlyUsedIds();
+ const newIds = new Set(ids);
+ newIds.add(option.id);
+
+ // Maintain limit
+ if (newIds.size > this.recentlyUsedLimit) {
+ const idsArray = Array.from(newIds);
+ const limitedIds = new Set(idsArray.slice(-this.recentlyUsedLimit));
+ this.recentlyUsedIds.set(limitedIds);
+ } else {
+ this.recentlyUsedIds.set(newIds);
+ }
+ }
+
+ // Check if option is selected (for checkbox mode)
+ isOptionSelected(option: SelectOption): boolean {
+ const selected = this.selectedOptions();
+ const optionValue = this.getOptionValue(option);
+ return selected.some(s => this.getOptionValue(s) === optionValue);
+ }
+
+ // Execute bulk action
+ executeBulkAction(action: BulkAction): void {
+ if (action.disabled || this.selectedOptions().length === 0) return;
+
+ const selectedOptions = this.selectedOptions();
+
+ // Execute action callback
+ action.action(selectedOptions);
+
+ // Emit event
+ this.bulkActionSelected.emit({
+ action,
+ selectedOptions
+ });
+ }
+
+ // Get skeleton items array for loading state
+ getSkeletonItems(): number[] {
+ return Array.from({ length: this.skeletonItemCount }, (_, i) => i);
+ }
}
diff --git a/src/lib/models/bulk-actions.interface.ts b/src/lib/models/bulk-actions.interface.ts
new file mode 100644
index 0000000..d58dde8
--- /dev/null
+++ b/src/lib/models/bulk-actions.interface.ts
@@ -0,0 +1,18 @@
+/**
+ * Bulk actions for multi-select mode
+ */
+
+import { SelectOption } from './select-option.interface';
+
+export interface BulkAction {
+ id: string;
+ label: string;
+ icon?: string;
+ disabled?: boolean;
+ action: (selectedOptions: SelectOption[]) => void;
+}
+
+export interface SelectBulkActionEvent {
+ action: BulkAction;
+ selectedOptions: SelectOption[];
+}
diff --git a/src/lib/providers/dark-mode.provider.ts b/src/lib/providers/dark-mode.provider.ts
new file mode 100644
index 0000000..1fba5bd
--- /dev/null
+++ b/src/lib/providers/dark-mode.provider.ts
@@ -0,0 +1,74 @@
+/**
+ * Dark mode detection and management provider
+ * Uses CSS media queries to detect system dark mode preference
+ */
+
+import { Injectable, signal, computed, effect, PLATFORM_ID, inject } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+export type ColorScheme = 'light' | 'dark' | 'auto';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DarkModeProvider {
+ private platformId = inject(PLATFORM_ID);
+ private isBrowser = isPlatformBrowser(this.platformId);
+
+ // User preference (auto follows system, or manual light/dark)
+ private preferredScheme = signal('auto');
+
+ // System dark mode detection
+ private systemPrefersDark = signal(false);
+
+ // Computed: final resolved dark mode state
+ isDarkMode = computed(() => {
+ const preferred = this.preferredScheme();
+ if (preferred === 'auto') {
+ return this.systemPrefersDark();
+ }
+ return preferred === 'dark';
+ });
+
+ constructor() {
+ if (this.isBrowser) {
+ this.initDarkModeDetection();
+ }
+ }
+
+ /**
+ * Initialize system dark mode detection
+ */
+ private initDarkModeDetection(): void {
+ // Check initial system preference
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ this.systemPrefersDark.set(mediaQuery.matches);
+
+ // Listen for system theme changes
+ mediaQuery.addEventListener('change', (e) => {
+ this.systemPrefersDark.set(e.matches);
+ });
+ }
+
+ /**
+ * Set user's color scheme preference
+ */
+ setColorScheme(scheme: ColorScheme): void {
+ this.preferredScheme.set(scheme);
+ }
+
+ /**
+ * Get current color scheme preference
+ */
+ getColorScheme(): ColorScheme {
+ return this.preferredScheme();
+ }
+
+ /**
+ * Toggle between light and dark mode
+ */
+ toggleDarkMode(): void {
+ const current = this.isDarkMode();
+ this.preferredScheme.set(current ? 'light' : 'dark');
+ }
+}
diff --git a/src/lib/utils/fuzzy-search.util.ts b/src/lib/utils/fuzzy-search.util.ts
new file mode 100644
index 0000000..fb44f1a
--- /dev/null
+++ b/src/lib/utils/fuzzy-search.util.ts
@@ -0,0 +1,141 @@
+/**
+ * Fuzzy search utility for flexible string matching
+ * Supports acronym-style matching (e.g., 'fb' matches 'Facebook')
+ * and partial substring matching with scoring
+ */
+
+export interface FuzzyMatchResult {
+ matches: boolean;
+ score: number;
+ matchedIndices: number[];
+}
+
+/**
+ * Performs fuzzy search matching
+ * @param searchTerm The search query
+ * @param targetString The string to search in
+ * @param options Configuration options
+ * @returns Match result with score and matched character indices
+ */
+export function fuzzyMatch(
+ searchTerm: string,
+ targetString: string,
+ options: {
+ caseSensitive?: boolean;
+ threshold?: number;
+ } = {}
+): FuzzyMatchResult {
+ const { caseSensitive = false, threshold = 0 } = options;
+
+ // Normalize strings
+ const search = caseSensitive ? searchTerm : searchTerm.toLowerCase();
+ const target = caseSensitive ? targetString : targetString.toLowerCase();
+
+ if (search.length === 0) {
+ return { matches: true, score: 1, matchedIndices: [] };
+ }
+
+ if (target.length === 0) {
+ return { matches: false, score: 0, matchedIndices: [] };
+ }
+
+ // Check for exact match first (highest score)
+ if (target === search) {
+ return {
+ matches: true,
+ score: 1.0,
+ matchedIndices: Array.from({ length: search.length }, (_, i) => i)
+ };
+ }
+
+ // Check for substring match (high score)
+ const substringIndex = target.indexOf(search);
+ if (substringIndex !== -1) {
+ const score = 0.8 - (substringIndex * 0.01); // Earlier matches score higher
+ return {
+ matches: true,
+ score: Math.max(0.5, score),
+ matchedIndices: Array.from({ length: search.length }, (_, i) => substringIndex + i)
+ };
+ }
+
+ // Fuzzy matching algorithm (supports acronyms and scattered matches)
+ let searchIndex = 0;
+ let matchedIndices: number[] = [];
+ let consecutiveMatches = 0;
+ let totalScore = 0;
+
+ for (let targetIndex = 0; targetIndex < target.length; targetIndex++) {
+ if (search[searchIndex] === target[targetIndex]) {
+ matchedIndices.push(targetIndex);
+ consecutiveMatches++;
+
+ // Bonus points for consecutive matches
+ totalScore += consecutiveMatches > 1 ? 2 : 1;
+
+ // Bonus for matching at word boundaries
+ if (targetIndex === 0 || target[targetIndex - 1] === ' ' || target[targetIndex - 1] === '-') {
+ totalScore += 2;
+ }
+
+ searchIndex++;
+
+ if (searchIndex === search.length) {
+ break;
+ }
+ } else {
+ consecutiveMatches = 0;
+ }
+ }
+
+ // Check if all search characters were found
+ const matches = searchIndex === search.length;
+
+ if (!matches) {
+ return { matches: false, score: 0, matchedIndices: [] };
+ }
+
+ // Calculate final score (0-1 range, excluding exact/substring matches)
+ const maxPossibleScore = search.length * 4; // Max points if all chars match at word boundaries consecutively
+ let normalizedScore = totalScore / maxPossibleScore;
+
+ // Penalty for scattered matches
+ const spreadPenalty = (matchedIndices[matchedIndices.length - 1] - matchedIndices[0]) / target.length;
+ normalizedScore *= (1 - spreadPenalty * 0.3);
+
+ // Cap fuzzy matches below substring matches
+ normalizedScore = Math.min(0.49, normalizedScore);
+
+ // Apply threshold
+ if (normalizedScore < threshold) {
+ return { matches: false, score: 0, matchedIndices: [] };
+ }
+
+ return { matches, score: normalizedScore, matchedIndices };
+}
+
+/**
+ * Sorts options by fuzzy match score
+ */
+export function sortByFuzzyScore(
+ items: T[],
+ searchTerm: string,
+ getLabel: (item: T) => string,
+ options?: { caseSensitive?: boolean; threshold?: number }
+): T[] {
+ if (!searchTerm) {
+ return items;
+ }
+
+ const itemsWithScores = items.map(item => {
+ const label = getLabel(item);
+ const result = fuzzyMatch(searchTerm, label, options);
+ return { item, score: result.score, matches: result.matches };
+ });
+
+ // Filter non-matches and sort by score descending
+ return itemsWithScores
+ .filter(({ matches }) => matches)
+ .sort((a, b) => b.score - a.score)
+ .map(({ item }) => item);
+}
diff --git a/src/lib/utils/sort-options.util.ts b/src/lib/utils/sort-options.util.ts
new file mode 100644
index 0000000..9b1d925
--- /dev/null
+++ b/src/lib/utils/sort-options.util.ts
@@ -0,0 +1,71 @@
+/**
+ * Utility functions for sorting select options
+ */
+
+import { SelectOption } from '../models/select-option.interface';
+
+export type SortMode = 'none' | 'alphabetical-asc' | 'alphabetical-desc' | 'recently-used' | 'custom';
+
+export interface SortConfig {
+ mode: SortMode;
+ customComparator?: (a: SelectOption, b: SelectOption) => number;
+ getLabel?: (option: SelectOption) => string;
+ recentlyUsedIds?: Set;
+}
+
+/**
+ * Sorts options based on the specified mode
+ */
+export function sortOptions(
+ options: SelectOption[],
+ config: SortConfig
+): SelectOption[] {
+ const { mode, customComparator, getLabel, recentlyUsedIds } = config;
+
+ if (mode === 'none') {
+ return options;
+ }
+
+ const sorted = [...options];
+
+ switch (mode) {
+ case 'alphabetical-asc':
+ sorted.sort((a, b) => {
+ const labelA = getLabel ? getLabel(a) : (a.label || String(a.value));
+ const labelB = getLabel ? getLabel(b) : (b.label || String(b.value));
+ return labelA.localeCompare(labelB);
+ });
+ break;
+
+ case 'alphabetical-desc':
+ sorted.sort((a, b) => {
+ const labelA = getLabel ? getLabel(a) : (a.label || String(a.value));
+ const labelB = getLabel ? getLabel(b) : (b.label || String(b.value));
+ return labelB.localeCompare(labelA);
+ });
+ break;
+
+ case 'recently-used':
+ if (recentlyUsedIds && recentlyUsedIds.size > 0) {
+ sorted.sort((a, b) => {
+ const aRecent = recentlyUsedIds.has(a.id);
+ const bRecent = recentlyUsedIds.has(b.id);
+
+ if (aRecent && !bRecent) return -1;
+ if (!aRecent && bRecent) return 1;
+
+ // If both or neither are recent, maintain original order
+ return 0;
+ });
+ }
+ break;
+
+ case 'custom':
+ if (customComparator) {
+ sorted.sort(customComparator);
+ }
+ break;
+ }
+
+ return sorted;
+}
diff --git a/src/public-api.ts b/src/public-api.ts
index 3cbbb45..a6f3116 100644
--- a/src/public-api.ts
+++ b/src/public-api.ts
@@ -9,6 +9,7 @@ export * from './lib/components/perfect-select/perfect-select.component';
export * from './lib/models/select-option.interface';
export * from './lib/models/select-events.interface';
export * from './lib/models/validation.types';
+export * from './lib/models/bulk-actions.interface';
// Constants & Themes
export * from './lib/constants/themes.constant';
@@ -21,3 +22,8 @@ export * from './lib/directives/click-outside.directive';
// Providers
export * from './lib/providers/perfect-select.providers';
+export * from './lib/providers/dark-mode.provider';
+
+// Utilities
+export * from './lib/utils/fuzzy-search.util';
+export * from './lib/utils/sort-options.util';