angular-perfect-select 2.2.0 → 2.3.0

package/dist/fesm2022/angular-perfect-select.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, Directive, signal, computed, SecurityContext, TemplateRef, forwardRef, ContentChild, ViewChild, Input, Component } from '@angular/core';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
+import { EventEmitter, HostListener, Output, Directive, inject, PLATFORM_ID, signal, computed, Injectable, effect, SecurityContext, TemplateRef, forwardRef, ContentChild, ViewChild, Input, Component, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
+import * as i3 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i4 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i4 from '@angular/cdk/scrolling';
+import * as i5 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import * as i5 from '@angular/cdk/drag-drop';
+import * as i6 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { trigger, transition, style, animate, query, stagger } from '@angular/animations';
 import * as i1 from '@angular/platform-browser';
@@ -121,8 +121,227 @@ const THEMES = {
     }
 };
 
+/**
+ * Fuzzy search utility for flexible string matching
+ * Supports acronym-style matching (e.g., 'fb' matches 'Facebook')
+ * and partial substring matching with scoring
+ */
+/**
+ * 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
+ */
+function fuzzyMatch(searchTerm, targetString, options = {}) {
+    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 = [];
+    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
+ */
+function sortByFuzzyScore(items, searchTerm, getLabel, options) {
+    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);
+}
+
+/**
+ * Utility functions for sorting select options
+ */
+/**
+ * Sorts options based on the specified mode
+ */
+function sortOptions(options, config) {
+    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;
+}
+
+/**
+ * Dark mode detection and management provider
+ * Uses CSS media queries to detect system dark mode preference
+ */
+class DarkModeProvider {
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    // User preference (auto follows system, or manual light/dark)
+    preferredScheme = signal('auto', ...(ngDevMode ? [{ debugName: "preferredScheme" }] : []));
+    // System dark mode detection
+    systemPrefersDark = signal(false, ...(ngDevMode ? [{ debugName: "systemPrefersDark" }] : []));
+    // Computed: final resolved dark mode state
+    isDarkMode = computed(() => {
+        const preferred = this.preferredScheme();
+        if (preferred === 'auto') {
+            return this.systemPrefersDark();
+        }
+        return preferred === 'dark';
+    }, ...(ngDevMode ? [{ debugName: "isDarkMode" }] : []));
+    constructor() {
+        if (this.isBrowser) {
+            this.initDarkModeDetection();
+        }
+    }
+    /**
+     * Initialize system dark mode detection
+     */
+    initDarkModeDetection() {
+        // 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) {
+        this.preferredScheme.set(scheme);
+    }
+    /**
+     * Get current color scheme preference
+     */
+    getColorScheme() {
+        return this.preferredScheme();
+    }
+    /**
+     * Toggle between light and dark mode
+     */
+    toggleDarkMode() {
+        const current = this.isDarkMode();
+        this.preferredScheme.set(current ? 'light' : 'dark');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DarkModeProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DarkModeProvider, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DarkModeProvider, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class PerfectSelectComponent {
     sanitizer;
+    darkModeProvider;
     // Core Props
     options = [];
     placeholder = 'Select...';
@@ -229,6 +448,35 @@ class PerfectSelectComponent {
     collapsibleTags = false;
     showAllTagsText = 'Show all';
     showLessTagsText = 'Show less';
+    // v2.3.0 Features - Fuzzy Search
+    enableFuzzySearch = false;
+    fuzzySearchThreshold = 0;
+    fuzzySearchCaseSensitive = false;
+    // v2.3.0 Features - Dark Mode
+    enableAutoThemeDetection = false;
+    colorScheme = 'auto';
+    darkModeTheme = 'dark';
+    lightModeTheme = 'blue';
+    // v2.3.0 Features - Loading Skeleton
+    enableLoadingSkeleton = true;
+    skeletonItemCount = 5;
+    skeletonItemHeight = 40;
+    skeletonAnimationDelay = 800;
+    // v2.3.0 Features - Compact Mode
+    compactMode = false;
+    // v2.3.0 Features - Option Checkboxes
+    showOptionCheckboxes = false;
+    checkboxPosition = 'left';
+    checkboxStyle = 'default';
+    // v2.3.0 Features - Bulk Actions
+    bulkActions = [];
+    enableBulkActions = false;
+    bulkActionsPosition = 'above';
+    bulkActionsLabel = 'Actions:';
+    // v2.3.0 Features - Option Sorting
+    sortMode = 'none';
+    customSortComparator = null;
+    recentlyUsedLimit = 10;
     // Behavior
     name = 'angular-perfect-select';
     id = 'angular-perfect-select';
@@ -258,6 +506,8 @@ class PerfectSelectComponent {
     // v2.1.0 Events
     reorder = new EventEmitter();
     pin = new EventEmitter();
+    // v2.3.0 Events
+    bulkActionSelected = new EventEmitter();
     // ViewChildren
     selectContainerRef;
     searchInputRef;
@@ -266,6 +516,7 @@ class PerfectSelectComponent {
     // ContentChildren - Custom Templates
     optionTemplate;
     selectedOptionTemplate;
+    tagTemplate;
     // Signals for reactive state
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
@@ -292,6 +543,9 @@ class PerfectSelectComponent {
     pinnedOptionsStorageKey = '';
     // v2.2.0 Signals
     tagsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "tagsExpanded" }] : []));
+    // v2.3.0 Signals
+    isDarkMode = signal(false, ...(ngDevMode ? [{ debugName: "isDarkMode" }] : []));
+    recentlyUsedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "recentlyUsedIds" }] : []));
     // Computed signals
     currentTheme = computed(() => THEMES[this.theme] || THEMES.blue, ...(ngDevMode ? [{ debugName: "currentTheme" }] : []));
     filteredOptions = computed(() => {
@@ -302,13 +556,34 @@ class PerfectSelectComponent {
         if (this.minSearchLength > 0 && term.length < this.minSearchLength) {
             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;
+        // 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 = {
+                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) {
             const pinnedIds = new Set(pinned.map(p => p.id));
@@ -359,6 +634,18 @@ class PerfectSelectComponent {
         const visible = this.visibleTags();
         return selected.length - visible.length;
     }, ...(ngDevMode ? [{ debugName: "hiddenTagsCount" }] : []));
+    // v2.3.0 Computed signals
+    resolvedTheme = computed(() => {
+        if (this.enableAutoThemeDetection) {
+            return this.isDarkMode() ? this.darkModeTheme : this.lightModeTheme;
+        }
+        return this.theme;
+    }, ...(ngDevMode ? [{ debugName: "resolvedTheme" }] : []));
+    hasBulkActions = computed(() => {
+        return this.enableBulkActions &&
+            this.bulkActions.length > 0 &&
+            this.selectedOptions().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasBulkActions" }] : []));
     groupedOptions = computed(() => {
         if (!this.isGrouped || !this.groupBy) {
             return null;
@@ -454,8 +741,9 @@ class PerfectSelectComponent {
     // ControlValueAccessor
     onChange = () => { };
     onTouched = () => { };
-    constructor(sanitizer) {
+    constructor(sanitizer, darkModeProvider) {
         this.sanitizer = sanitizer;
+        this.darkModeProvider = darkModeProvider;
     }
     ngOnChanges(changes) {
         // Update internal options when the options input changes
@@ -502,6 +790,13 @@ class PerfectSelectComponent {
             this.pinnedOptionsStorageKey = `ps-pinned-${this.name || this.id}`;
             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(() => {
@@ -712,6 +1007,10 @@ class PerfectSelectComponent {
             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);
@@ -725,6 +1024,10 @@ class PerfectSelectComponent {
             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) {
             this.closeDropdown();
@@ -1144,21 +1447,66 @@ class PerfectSelectComponent {
     getValidationClass() {
         return `validation-${this.validationState}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PerfectSelectComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PerfectSelectComponent, isStandalone: true, selector: "ng-perfect-select", inputs: { options: "options", placeholder: "placeholder", isMulti: "isMulti", multiple: "multiple", isSearchable: "isSearchable", searchable: "searchable", isClearable: "isClearable", clearable: "clearable", isDisabled: "isDisabled", disabled: "disabled", isLoading: "isLoading", loading: "loading", isRtl: "isRtl", closeMenuOnSelect: "closeMenuOnSelect", hideSelectedOptions: "hideSelectedOptions", isCreatable: "isCreatable", allowCreateWhileLoading: "allowCreateWhileLoading", createOptionPosition: "createOptionPosition", formatCreateLabel: "formatCreateLabel", loadOptions: "loadOptions", cacheOptions: "cacheOptions", defaultOptions: "defaultOptions", selectSize: "selectSize", containerSize: "containerSize", theme: "theme", borderRadius: "borderRadius", customStyles: "customStyles", maxHeight: "maxHeight", menuPlacement: "menuPlacement", menuPosition: "menuPosition", getOptionLabel: "getOptionLabel", getOptionValue: "getOptionValue", isOptionDisabled: "isOptionDisabled", filterOption: "filterOption", isGrouped: "isGrouped", groupBy: "groupBy", showSelectAll: "showSelectAll", selectAllText: "selectAllText", deselectAllText: "deselectAllText", showOptionIcons: "showOptionIcons", showOptionBadges: "showOptionBadges", maxOptionsDisplay: "maxOptionsDisplay", optionHeight: "optionHeight", emptyStateText: "emptyStateText", emptySearchText: "emptySearchText", maxSelectedOptions: "maxSelectedOptions", maxSelectedMessage: "maxSelectedMessage", debounceTime: "debounceTime", minSearchLength: "minSearchLength", minSearchMessage: "minSearchMessage", enableVirtualScroll: "enableVirtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollMinBufferPx: "virtualScrollMinBufferPx", virtualScrollMaxBufferPx: "virtualScrollMaxBufferPx", validationState: "validationState", validationMessage: "validationMessage", showValidationIcon: "showValidationIcon", showTooltips: "showTooltips", tooltipDelay: "tooltipDelay", getOptionTooltip: "getOptionTooltip", showRecentSelections: "showRecentSelections", recentSelectionsLimit: "recentSelectionsLimit", recentSelectionsLabel: "recentSelectionsLabel", enableRecentSelectionsPersistence: "enableRecentSelectionsPersistence", enableInfiniteScroll: "enableInfiniteScroll", infiniteScrollThreshold: "infiniteScrollThreshold", totalOptionsCount: "totalOptionsCount", enableAdvancedKeyboard: "enableAdvancedKeyboard", typeAheadDelay: "typeAheadDelay", enableCopyPaste: "enableCopyPaste", copyDelimiter: "copyDelimiter", pasteDelimiter: "pasteDelimiter", enableDragDrop: "enableDragDrop", dragDropPlaceholder: "dragDropPlaceholder", dragDropAnimation: "dragDropAnimation", enablePinning: "enablePinning", maxPinnedOptions: "maxPinnedOptions", pinnedOptionsLabel: "pinnedOptionsLabel", persistPinnedOptions: "persistPinnedOptions", enableSearchHighlight: "enableSearchHighlight", searchHighlightColor: "searchHighlightColor", searchHighlightTextColor: "searchHighlightTextColor", maxVisibleTags: "maxVisibleTags", showMoreTagsText: "showMoreTagsText", collapsibleTags: "collapsibleTags", showAllTagsText: "showAllTagsText", showLessTagsText: "showLessTagsText", name: "name", id: "id", autoFocus: "autoFocus", openMenuOnFocus: "openMenuOnFocus", openMenuOnClick: "openMenuOnClick", tabSelectsValue: "tabSelectsValue", backspaceRemovesValue: "backspaceRemovesValue", escapeClearsValue: "escapeClearsValue", noOptionsMessage: "noOptionsMessage", loadingMessage: "loadingMessage" }, outputs: { change: "change", clear: "clear", focus: "focus", blur: "blur", menuOpen: "menuOpen", menuClose: "menuClose", inputChange: "inputChange", createOption: "createOption", optionsLoaded: "optionsLoaded", loadError: "loadError", copy: "copy", paste: "paste", scrollEnd: "scrollEnd", reorder: "reorder", pin: "pin" }, host: { listeners: { "keydown": "handleKeydown($event)", "paste": "handlePaste($event)" } }, providers: [{
+    // v2.3.0 Methods
+    // Track recently used options for sorting
+    trackRecentlyUsed(option) {
+        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) {
+        const selected = this.selectedOptions();
+        const optionValue = this.getOptionValue(option);
+        return selected.some(s => this.getOptionValue(s) === optionValue);
+    }
+    // Execute bulk action
+    executeBulkAction(action) {
+        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() {
+        return Array.from({ length: this.skeletonItemCount }, (_, i) => i);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PerfectSelectComponent, deps: [{ token: i1.DomSanitizer }, { token: DarkModeProvider }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PerfectSelectComponent, isStandalone: true, selector: "ng-perfect-select", inputs: { options: "options", placeholder: "placeholder", isMulti: "isMulti", multiple: "multiple", isSearchable: "isSearchable", searchable: "searchable", isClearable: "isClearable", clearable: "clearable", isDisabled: "isDisabled", disabled: "disabled", isLoading: "isLoading", loading: "loading", isRtl: "isRtl", closeMenuOnSelect: "closeMenuOnSelect", hideSelectedOptions: "hideSelectedOptions", isCreatable: "isCreatable", allowCreateWhileLoading: "allowCreateWhileLoading", createOptionPosition: "createOptionPosition", formatCreateLabel: "formatCreateLabel", loadOptions: "loadOptions", cacheOptions: "cacheOptions", defaultOptions: "defaultOptions", selectSize: "selectSize", containerSize: "containerSize", theme: "theme", borderRadius: "borderRadius", customStyles: "customStyles", maxHeight: "maxHeight", menuPlacement: "menuPlacement", menuPosition: "menuPosition", getOptionLabel: "getOptionLabel", getOptionValue: "getOptionValue", isOptionDisabled: "isOptionDisabled", filterOption: "filterOption", isGrouped: "isGrouped", groupBy: "groupBy", showSelectAll: "showSelectAll", selectAllText: "selectAllText", deselectAllText: "deselectAllText", showOptionIcons: "showOptionIcons", showOptionBadges: "showOptionBadges", maxOptionsDisplay: "maxOptionsDisplay", optionHeight: "optionHeight", emptyStateText: "emptyStateText", emptySearchText: "emptySearchText", maxSelectedOptions: "maxSelectedOptions", maxSelectedMessage: "maxSelectedMessage", debounceTime: "debounceTime", minSearchLength: "minSearchLength", minSearchMessage: "minSearchMessage", enableVirtualScroll: "enableVirtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollMinBufferPx: "virtualScrollMinBufferPx", virtualScrollMaxBufferPx: "virtualScrollMaxBufferPx", validationState: "validationState", validationMessage: "validationMessage", showValidationIcon: "showValidationIcon", showTooltips: "showTooltips", tooltipDelay: "tooltipDelay", getOptionTooltip: "getOptionTooltip", showRecentSelections: "showRecentSelections", recentSelectionsLimit: "recentSelectionsLimit", recentSelectionsLabel: "recentSelectionsLabel", enableRecentSelectionsPersistence: "enableRecentSelectionsPersistence", enableInfiniteScroll: "enableInfiniteScroll", infiniteScrollThreshold: "infiniteScrollThreshold", totalOptionsCount: "totalOptionsCount", enableAdvancedKeyboard: "enableAdvancedKeyboard", typeAheadDelay: "typeAheadDelay", enableCopyPaste: "enableCopyPaste", copyDelimiter: "copyDelimiter", pasteDelimiter: "pasteDelimiter", enableDragDrop: "enableDragDrop", dragDropPlaceholder: "dragDropPlaceholder", dragDropAnimation: "dragDropAnimation", enablePinning: "enablePinning", maxPinnedOptions: "maxPinnedOptions", pinnedOptionsLabel: "pinnedOptionsLabel", persistPinnedOptions: "persistPinnedOptions", enableSearchHighlight: "enableSearchHighlight", searchHighlightColor: "searchHighlightColor", searchHighlightTextColor: "searchHighlightTextColor", maxVisibleTags: "maxVisibleTags", showMoreTagsText: "showMoreTagsText", collapsibleTags: "collapsibleTags", showAllTagsText: "showAllTagsText", showLessTagsText: "showLessTagsText", enableFuzzySearch: "enableFuzzySearch", fuzzySearchThreshold: "fuzzySearchThreshold", fuzzySearchCaseSensitive: "fuzzySearchCaseSensitive", enableAutoThemeDetection: "enableAutoThemeDetection", colorScheme: "colorScheme", darkModeTheme: "darkModeTheme", lightModeTheme: "lightModeTheme", enableLoadingSkeleton: "enableLoadingSkeleton", skeletonItemCount: "skeletonItemCount", skeletonItemHeight: "skeletonItemHeight", skeletonAnimationDelay: "skeletonAnimationDelay", compactMode: "compactMode", showOptionCheckboxes: "showOptionCheckboxes", checkboxPosition: "checkboxPosition", checkboxStyle: "checkboxStyle", bulkActions: "bulkActions", enableBulkActions: "enableBulkActions", bulkActionsPosition: "bulkActionsPosition", bulkActionsLabel: "bulkActionsLabel", sortMode: "sortMode", customSortComparator: "customSortComparator", recentlyUsedLimit: "recentlyUsedLimit", name: "name", id: "id", autoFocus: "autoFocus", openMenuOnFocus: "openMenuOnFocus", openMenuOnClick: "openMenuOnClick", tabSelectsValue: "tabSelectsValue", backspaceRemovesValue: "backspaceRemovesValue", escapeClearsValue: "escapeClearsValue", noOptionsMessage: "noOptionsMessage", loadingMessage: "loadingMessage" }, outputs: { change: "change", clear: "clear", focus: "focus", blur: "blur", menuOpen: "menuOpen", menuClose: "menuClose", inputChange: "inputChange", createOption: "createOption", optionsLoaded: "optionsLoaded", loadError: "loadError", copy: "copy", paste: "paste", scrollEnd: "scrollEnd", reorder: "reorder", pin: "pin", bulkActionSelected: "bulkActionSelected" }, host: { listeners: { "keydown": "handleKeydown($event)", "paste": "handlePaste($event)" } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PerfectSelectComponent),
                 multi: true
-            }], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "selectContainerRef", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "menuElementRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #selectContainer\n  class=\"select-container {{selectSize}} {{containerSize}} theme-{{theme}} {{getValidationClass()}}\"\n  [class.disabled]=\"isDisabled\"\n  [class.rtl]=\"isRtl\"\n  [class.has-validation]=\"validationState !== 'default'\"\n  (clickOutside)=\"onClickOutside()\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-controls]=\"'options-list'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-invalid]=\"validationState === 'error'\"\n  (focus)=\"openMenuOnFocus && !isOpen() && toggleDropdown(); focus.emit()\"\n  [style]=\"customStyles.container || ''\"\n>\n  <!-- Main Select Trigger -->\n  <div\n    class=\"select-trigger\"\n    [class.open]=\"isOpen()\"\n    [class.focused]=\"isOpen()\"\n    (click)=\"openMenuOnClick && toggleDropdown()\"\n    [attr.tabindex]=\"isDisabled ? -1 : 0\"\n    role=\"button\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"placeholder\"\n  >\n    <!-- Selected Value Display -->\n    <div class=\"select-value\">\n      <!-- Multi-select Tags -->\n      @if (isMulti && selectedOptions().length > 0) {\n        <!-- v2.1.0: Drag-drop enabled tags -->\n        @if (enableDragDrop) {\n          <div class=\"tags\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onTagsReorder($event)\" [class.dragging]=\"isDragging()\">\n            @for (option of visibleTags(); track trackByValue($index, option)) {\n              <span class=\"tag\" [class.disabled]=\"isDisabled\" cdkDrag (cdkDragStarted)=\"onDragStart()\" (cdkDragEnded)=\"onDragEnd()\" [@tag]>\n                <div class=\"drag-handle\" cdkDragHandle>\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M9 3h2v2H9V3zm0 4h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-16h2v2h-2V3zm0 4h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z\"/>\n                  </svg>\n                </div>\n                <span class=\"tag-label\">{{getOptionLabel(option)}}</span>\n                @if (!isDisabled) {\n                  <button\n                    class=\"tag-remove\"\n                    (click)=\"removeOption(option, $event)\"\n                    [attr.aria-label]=\"'Remove ' + getOptionLabel(option)\"\n                    type=\"button\"\n                  >\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                      <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n                    </svg>\n                  </button>\n                }\n                <div *cdkDragPlaceholder class=\"drag-placeholder\">{{dragDropPlaceholder}}</div>\n              </span>\n            }\n          </div>\n        } @else {\n          <div class=\"tags\">\n            @for (option of visibleTags(); track trackByValue($index, option)) {\n              <span class=\"tag\" [class.disabled]=\"isDisabled\" [@tag]>\n                <span class=\"tag-label\">{{getOptionLabel(option)}}</span>\n                @if (!isDisabled) {\n                  <button\n                    class=\"tag-remove\"\n                    (click)=\"removeOption(option, $event)\"\n                    [attr.aria-label]=\"'Remove ' + getOptionLabel(option)\"\n                    type=\"button\"\n                  >\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                      <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n                    </svg>\n                  </button>\n                }\n              </span>\n            }\n          </div>\n        }\n\n        <!-- v2.2.0: Tag overflow indicator -->\n        @if (hiddenTagsCount() > 0) {\n          @if (collapsibleTags) {\n            <button\n              class=\"tags-toggle\"\n              (click)=\"toggleTagsExpanded()\"\n              [attr.aria-label]=\"tagsExpanded() ? showLessTagsText : showAllTagsText\"\n              type=\"button\"\n            >\n              {{ tagsExpanded() ? showLessTagsText : showAllTagsText }}\n            </button>\n          } @else {\n            <span class=\"tags-overflow-indicator\">\n              {{ getMoreTagsText() }}\n            </span>\n          }\n        }\n      } @else {\n        <!-- Single Select or Placeholder -->\n        <span class=\"placeholder\" [class.has-value]=\"selectedOptions().length > 0\">\n          {{displayText()}}\n        </span>\n      }\n    </div>\n\n    <!-- Actions (Clear, Loading, Arrow) -->\n    <div class=\"select-actions\">\n      @if (isLoading || isLoadingAsync()) {\n        <div class=\"spinner\"></div>\n      }\n      @if (isClearable && selectedOptions().length > 0 && !isDisabled && !isLoading && !isLoadingAsync()) {\n        <button\n          class=\"clear-button\"\n          (click)=\"clearSelection($event)\"\n          aria-label=\"Clear selection\"\n          type=\"button\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n            <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n          </svg>\n        </button>\n      }\n      <span class=\"separator\"></span>\n      <span class=\"arrow\" [class.open]=\"isOpen()\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n          <path d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"></path>\n        </svg>\n      </span>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      #menuRef\n      class=\"dropdown {{menuPlacement}}\"\n      [class.fixed]=\"menuPosition === 'fixed'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"isMulti\"\n      [@dropdown]\n    >\n      <!-- Search Input -->\n      @if (isSearchable) {\n        <div class=\"search-container\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"search-input\"\n            placeholder=\"Search...\"\n            [value]=\"searchTerm()\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n            aria-label=\"Search options\"\n            aria-autocomplete=\"list\"\n          />\n        </div>\n      }\n\n      <!-- Options List -->\n      <div\n        class=\"options-list\"\n        id=\"options-list\"\n        (scroll)=\"onOptionsScroll($event)\"\n      >\n        <!-- Max Selection Message -->\n        @if (isMaxSelectionReached()) {\n          <div class=\"info-message max-selection\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n            {{maxSelectedMessage}}\n          </div>\n        }\n\n        <!-- Min Search Length Message -->\n        @if (showMinSearchMessage()) {\n          <div class=\"info-message min-search\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n            {{minSearchMessage}} ({{searchTerm().length}}/{{minSearchLength}})\n          </div>\n        }\n\n        @if (isLoadingAsync()) {\n          <div class=\"loading-message\">{{loadingMessage()}}</div>\n        } @else if (displayOptions().length === 0 && !showMinSearchMessage()) {\n          <div class=\"no-options\">\n            {{searchTerm() ? emptySearchText : emptyStateText}}\n          </div>\n        } @else if (!showMinSearchMessage()) {\n          <!-- Select All (Multi-select only) -->\n          @if (isMulti && showSelectAll && !searchTerm()) {\n            <div class=\"select-all-container\">\n              <button\n                class=\"select-all-button\"\n                (click)=\"allOptionsSelected() ? deselectAll() : selectAll()\"\n                type=\"button\"\n              >\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"allOptionsSelected()\"\n                  [indeterminate]=\"someOptionsSelected()\"\n                  tabindex=\"-1\"\n                  aria-hidden=\"true\"\n                  readonly\n                />\n                <span class=\"select-all-text\">\n                  {{allOptionsSelected() ? deselectAllText : selectAllText}}\n                </span>\n                <span class=\"select-all-count\">\n                  ({{selectedOptions().length}}/{{getEnabledOptionsCount()}})\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Grouped Options -->\n          @if (isGrouped && groupedOptions()) {\n            @for (group of groupedOptions() | keyvalue; track trackByGroup($index, [$any(group.key), $any(group.value)])) {\n              <div class=\"option-group\">\n                <div class=\"option-group-label\">{{group.key}}</div>\n                @for (option of $any(group.value); track trackByValue($index, option); let idx = $index) {\n                  <div\n                    class=\"option\"\n                    [class.selected]=\"isSelected(option)\"\n                    [class.highlighted]=\"idx === highlightedIndex()\"\n                    [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                    [class.create-option]=\"option.__isCreate__\"\n                    (click)=\"selectOption(option)\"\n                    (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(option)\"\n                    [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    tabindex=\"-1\"\n                  >\n                    <!-- Checkbox for multi-select -->\n                    @if (isMulti) {\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"isSelected(option)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                        readonly\n                      />\n                    }\n\n                    <!-- Option Icon -->\n                    @if (showOptionIcons && option.icon) {\n                      <div class=\"option-icon\">\n                        @if (option.icon.includes('<')) {\n                          <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                        } @else {\n                          <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                        }\n                      </div>\n                    }\n\n                    <!-- Option Content -->\n                    <div class=\"option-content\">\n                      <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                      @if (option.description) {\n                        <div class=\"option-description\">{{option.description}}</div>\n                      }\n                    </div>\n\n                    <!-- Option Badge -->\n                    @if (showOptionBadges && option.badge) {\n                      <span\n                        class=\"option-badge\"\n                        [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                      >\n                        {{option.badge}}\n                      </span>\n                    }\n\n                    <!-- v2.1.0: Pin button -->\n                    @if (enablePinning) {\n                      <button\n                        class=\"pin-button\"\n                        [class.pinned]=\"isPinned(option)\"\n                        (click)=\"togglePin(option, $event)\"\n                        [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                        type=\"button\"\n                      >\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                          @if (isPinned(option)) {\n                            <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                          } @else {\n                            <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                          }\n                        </svg>\n                      </button>\n                    }\n\n                    <!-- Check Icon for selected -->\n                    @if (!isMulti && isSelected(option)) {\n                      <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                        <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                      </svg>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            <!-- v1.2.0: Recent Selections Header -->\n            @if (showRecentSelections && !searchTerm() && recentSelections().length > 0) {\n              <div class=\"section-header\">{{recentSelectionsLabel}}</div>\n            }\n\n            <!-- Regular (Ungrouped) Options - Virtual Scroll or Standard -->\n            @if (enableVirtualScroll) {\n              <!-- Virtual Scroll Mode -->\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize\"\n                [minBufferPx]=\"virtualScrollMinBufferPx\"\n                [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n                [style.height.px]=\"maxHeight\"\n                class=\"virtual-scroll-viewport\"\n              >\n                @for (option of (showRecentSelections ? displayOptionsWithRecent() : displayOptions()); track trackByValue($index, option); let idx = $index) {\n                  <div\n                    class=\"option\"\n                    [class.selected]=\"isSelected(option)\"\n                    [class.highlighted]=\"idx === highlightedIndex()\"\n                    [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                    [class.create-option]=\"option.__isCreate__\"\n                    [class.recent-option]=\"option.__isRecent__\"\n                    (click)=\"selectOption(option)\"\n                    (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                    (mouseenter)=\"showTooltip(option, idx)\"\n                    (mouseleave)=\"hideTooltip()\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(option)\"\n                    [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [attr.title]=\"showTooltips ? getTooltipContent(option) : null\"\n                    tabindex=\"-1\"\n                  >\n                    <!-- Custom Template or Default Rendering -->\n                    @if (optionTemplate) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, index: idx, selected: isSelected(option) }\"\n                      ></ng-container>\n                    } @else {\n                      <!-- Default Option Content (same as before) -->\n                      @if (isMulti) {\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isSelected(option)\"\n                          tabindex=\"-1\"\n                          aria-hidden=\"true\"\n                          readonly\n                        />\n                      }\n\n                      @if (showOptionIcons && option.icon) {\n                        <div class=\"option-icon\">\n                          @if (option.icon.includes('<')) {\n                            <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                          } @else {\n                            <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                          }\n                        </div>\n                      }\n\n                      <div class=\"option-content\">\n                        <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                        @if (option.description) {\n                          <div class=\"option-description\">{{option.description}}</div>\n                        }\n                      </div>\n\n                      @if (showOptionBadges && option.badge) {\n                        <span\n                          class=\"option-badge\"\n                          [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                        >\n                          {{option.badge}}\n                        </span>\n                      }\n\n                      <!-- v2.1.0: Pin button -->\n                      @if (enablePinning) {\n                        <button\n                          class=\"pin-button\"\n                          [class.pinned]=\"isPinned(option)\"\n                          (click)=\"togglePin(option, $event)\"\n                          [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                          type=\"button\"\n                        >\n                          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                            @if (isPinned(option)) {\n                              <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                            } @else {\n                              <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                            }\n                          </svg>\n                        </button>\n                      }\n\n                      @if (!isMulti && isSelected(option)) {\n                        <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                          <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                        </svg>\n                      }\n                    }\n                  </div>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <!-- Standard Rendering (Non-Virtual Scroll) -->\n              @for (option of (showRecentSelections ? displayOptionsWithRecent() : displayOptions()); track trackByValue($index, option); let idx = $index) {\n                <div\n                  class=\"option\"\n                  [class.selected]=\"isSelected(option)\"\n                  [class.highlighted]=\"idx === highlightedIndex()\"\n                  [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                  [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                  [class.create-option]=\"option.__isCreate__\"\n                  [class.recent-option]=\"option.__isRecent__\"\n                  (click)=\"selectOption(option)\"\n                  (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                  (mouseenter)=\"showTooltip(option, idx)\"\n                  (mouseleave)=\"hideTooltip()\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option)\"\n                  [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                  [attr.title]=\"showTooltips ? getTooltipContent(option) : null\"\n                  tabindex=\"-1\"\n                >\n                <!-- Custom Template or Default Rendering -->\n                @if (optionTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, index: idx, selected: isSelected(option) }\"\n                  ></ng-container>\n                } @else {\n                  <!-- Default Option Content -->\n                  @if (isMulti) {\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(option)\"\n                      tabindex=\"-1\"\n                      aria-hidden=\"true\"\n                      readonly\n                    />\n                  }\n\n                  @if (showOptionIcons && option.icon) {\n                    <div class=\"option-icon\">\n                      @if (option.icon.includes('<')) {\n                        <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                      } @else {\n                        <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                      }\n                    </div>\n                  }\n\n                  <div class=\"option-content\">\n                    <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                    @if (option.description) {\n                      <div class=\"option-description\">{{option.description}}</div>\n                    }\n                  </div>\n\n                  @if (showOptionBadges && option.badge) {\n                    <span\n                      class=\"option-badge\"\n                      [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                    >\n                      {{option.badge}}\n                    </span>\n                  }\n\n                  <!-- v2.1.0: Pin button -->\n                  @if (enablePinning) {\n                    <button\n                      class=\"pin-button\"\n                      [class.pinned]=\"isPinned(option)\"\n                      (click)=\"togglePin(option, $event)\"\n                      [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                      type=\"button\"\n                    >\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        @if (isPinned(option)) {\n                          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                        } @else {\n                          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                        }\n                      </svg>\n                    </button>\n                  }\n\n                  @if (!isMulti && isSelected(option)) {\n                    <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                      <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                    </svg>\n                  }\n                }\n              </div>\n            }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- v1.2.0: Validation Message -->\n  @if (validationMessage && validationState !== 'default') {\n    <div class=\"validation-message {{getValidationClass()}}\">\n      @if (showValidationIcon) {\n        <span class=\"validation-icon\">\n          @if (validationState === 'error') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n          } @else if (validationState === 'warning') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n          } @else if (validationState === 'success') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path d=\"M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm-1.707 13.707l-3.5-3.5 1.414-1.414L9 11.586l5.293-5.293 1.414 1.414-6.5 6.5z\"/>\n            </svg>\n          } @else if (validationState === 'info') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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-6h2v6zm0-8H9V5h2v2z\"/>\n            </svg>\n          }\n        </span>\n      }\n      <span class=\"validation-text\">{{validationMessage}}</span>\n    </div>\n  }\n</div>\n\n<!-- Hidden native select for form compatibility -->\n@if (isMulti) {\n  <select [name]=\"name\" [id]=\"id\" multiple style=\"display: none;\" [attr.aria-hidden]=\"true\">\n    @for (option of selectedOptions(); track trackByValue($index, option)) {\n      <option [value]=\"getOptionValue(option)\" selected>{{getOptionLabel(option)}}</option>\n    }\n  </select>\n} @else {\n  @if (selectedOptions().length > 0) {\n    <select [name]=\"name\" [id]=\"id\" style=\"display: none;\" [attr.aria-hidden]=\"true\">\n      <option [value]=\"getOptionValue(selectedOptions()[0])\" selected>{{getOptionLabel(selectedOptions()[0])}}</option>\n    </select>\n  }\n}\n", styles: [":host{display:block;width:100%}.select-container{position:relative;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.smaller{font-size:11px}.small{font-size:13px}.medium{font-size:14px}.large{font-size:16px}.larger{font-size:18px}.xs .select-trigger{min-height:28px;padding:4px 8px}.sm .select-trigger{min-height:32px;padding:6px 10px}.md .select-trigger{min-height:40px;padding:8px 12px}.lg .select-trigger{min-height:48px;padding:10px 14px}.xl .select-trigger{min-height:56px;padding:12px 16px}.select-container.disabled{opacity:.6;cursor:not-allowed}.select-container.rtl{direction:rtl}.select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#fff;border:1.5px solid #D1D5DB;border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:38px;gap:8px;box-shadow:0 1px 2px #0000000d}.select-trigger:hover:not(.disabled){border-color:#9ca3af;box-shadow:0 2px 4px #00000014}.select-trigger:focus,.select-trigger.focused{outline:none;border-color:#2684ff;box-shadow:0 0 0 3px #2684ff1a,0 1px 2px #0000000d}.select-trigger.open{border-color:#2684ff;box-shadow:0 0 0 3px #2684ff1a,0 1px 2px #0000000d}.select-value{flex:1;display:flex;align-items:center;min-width:0;gap:4px}.placeholder{color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.placeholder.has-value{color:#333}.tags{display:flex;flex-wrap:wrap;gap:4px;flex:1}.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#e6f2ff;color:#0052cc;border-radius:6px;font-size:.875em;font-weight:500;white-space:nowrap;border:1px solid #CCE0FF;box-shadow:0 1px 2px #0000000d}.tag.disabled{background:#f0f0f0;color:#666;border-color:#d9d9d9}.tag-label{line-height:1.2}.tag-remove{background:none;border:none;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:all .15s}.tag-remove:hover{background:#0052cc26}.tag-remove svg{fill:currentColor}.tags.dragging .tag{cursor:move}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:move;padding:0;margin-left:-4px;opacity:.5;transition:opacity .15s}.drag-handle svg{fill:currentColor}.drag-handle:hover{opacity:.8}.cdk-drag-preview{box-shadow:0 5px 15px #0003;opacity:.8}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:#0052cc1a;border:2px dashed var(--ps-primary, #0052cc);border-radius:6px;padding:4px 8px;min-height:28px;display:flex;align-items:center;justify-content:center;color:var(--ps-primary, #0052cc);font-size:.75em;opacity:.6}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.tags-toggle{background:none;border:none;color:var(--ps-primary, #0052cc);cursor:pointer;font-size:.875em;font-weight:500;padding:4px 8px;border-radius:4px;transition:all .15s;white-space:nowrap}.tags-toggle:hover{background:#0052cc1a;text-decoration:underline}.tags-toggle:focus{outline:2px solid var(--ps-primary, #0052cc);outline-offset:2px}.tags-overflow-indicator{display:inline-flex;align-items:center;padding:4px 8px;background:#f3f4f6;color:#6b7280;border-radius:6px;font-size:.875em;font-weight:500;white-space:nowrap;border:1px solid #d1d5db}.option-label mark{background-color:#ffeb3b;color:#000;padding:0 2px;border-radius:2px;font-weight:600}.select-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.clear-button{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s}.clear-button:hover{color:#333;background:#f0f0f0}.clear-button svg{fill:currentColor}.separator{width:1px;height:24px;background:#ccc;align-self:stretch}.arrow{color:#999;transition:transform .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;padding:4px}.arrow svg{fill:currentColor}.arrow.open{transform:rotate(180deg)}.spinner{width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #2684FF;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fffffffa;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d;z-index:1000;overflow:hidden;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%)}.dropdown.fixed{position:fixed}.dropdown.top{top:auto;bottom:calc(100% + 4px)}.search-container{padding:8px;border-bottom:1px solid #f0f0f0;background:#fff}.search-input{width:100%;padding:6px 8px;border:1px solid #cccccc;border-radius:3px;font-size:inherit;outline:none;transition:border-color .15s}.search-input:focus{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.options-list{max-height:inherit;overflow-y:auto;overflow-x:hidden;padding:4px 0}.options-list::-webkit-scrollbar{width:8px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:4px}.options-list::-webkit-scrollbar-thumb:hover{background:#b3b3b3}.select-all-container{padding:8px;border-bottom:1px solid #E5E7EB;background:#f9fafb}.select-all-button{width:100%;display:flex;align-items:center;gap:8px;padding:6px 8px;background:#fff;border:1px solid #D1D5DB;border-radius:6px;cursor:pointer;transition:all .15s;font-size:inherit;color:inherit;font-family:inherit}.select-all-button:hover{background:#f3f4f6;border-color:#9ca3af}.select-all-button input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:#2684FF}.select-all-text{flex:1;text-align:left;font-weight:500}.select-all-count{color:#6b7280;font-size:.9em}.option-group{margin:4px 0}.option-group-label{padding:8px 12px 4px;font-size:.75em;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;background:#f9fafb;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:1}.option-group .option{padding-left:20px}.option{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;min-height:40px}.option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.option-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#f3f4f6}.option-icon img{width:100%;height:100%;object-fit:cover}.option-badge{padding:2px 8px;border-radius:12px;font-size:.75em;font-weight:500;color:#374151;background:#e5e7eb;flex-shrink:0;white-space:nowrap}.option:hover:not(.disabled):not(.create-option){background:#deebff}.option.highlighted{background:#deebff}.option.selected:not(.create-option){background:#e6f2ff;font-weight:500}.option.disabled{opacity:.5;cursor:not-allowed;background:transparent!important}.option.hidden{display:none}.option.create-option{color:#2684ff;font-weight:500;background:#f0f6ff}.option.create-option:hover{background:#e6f2ff}.option input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:#2684FF}.option-label{font-weight:500;color:#1f2937;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.option-description{font-size:.875em;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.check-icon{color:#2684ff;display:flex;align-items:center;margin-left:auto}.check-icon svg{fill:currentColor}.pin-button{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s;margin-left:auto;opacity:.5}.pin-button svg{fill:currentColor}.pin-button:hover{opacity:1;background:#0000000d}.pin-button.pinned{color:var(--ps-primary, #0052cc);opacity:1}.option.pinned-option{background:#0052cc0d;border-left:3px solid var(--ps-primary, #0052cc);padding-left:9px}.no-options,.loading-message{padding:16px 12px;text-align:center;color:#999;font-size:.95em}.info-message{padding:12px;margin:8px;border-radius:6px;font-size:.9em;display:flex;align-items:center;gap:8px}.info-message.max-selection{background:#fff4e5;color:#f57c00;border:1px solid #FFE0B2}.info-message.min-search{background:#e3f2fd;color:#1976d2;border:1px solid #BBDEFB}.info-message svg{flex-shrink:0}.rtl .select-actions,.rtl .tags,.rtl .option{flex-direction:row-reverse}.theme-blue .select-trigger:focus,.theme-blue .select-trigger.focused,.theme-blue .select-trigger.open{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.theme-blue .option:hover:not(.disabled):not(.create-option),.theme-blue .option.highlighted{background:#deebff}.theme-blue .option.selected:not(.create-option){background:#e6f2ff}.theme-blue .tag{background:#e6f2ff;color:#0052cc;border-color:#cce0ff}.theme-blue .check-icon,.theme-blue .option.create-option{color:#2684ff}.theme-blue .spinner{border-top-color:#2684ff}.theme-blue .search-input:focus{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.theme-purple .select-trigger:focus,.theme-purple .select-trigger.focused,.theme-purple .select-trigger.open{border-color:#9333ea;box-shadow:0 0 0 1px #9333ea}.theme-purple .option:hover:not(.disabled):not(.create-option),.theme-purple .option.highlighted{background:#f3e8ff}.theme-purple .option.selected:not(.create-option){background:#faf5ff}.theme-purple .tag{background:#faf5ff;color:#7e22ce;border-color:#e9d5ff}.theme-purple .check-icon,.theme-purple .option.create-option{color:#9333ea}.theme-purple .spinner{border-top-color:#9333ea}.theme-purple .search-input:focus{border-color:#9333ea;box-shadow:0 0 0 1px #9333ea}.theme-green .select-trigger:focus,.theme-green .select-trigger.focused,.theme-green .select-trigger.open{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.theme-green .option:hover:not(.disabled):not(.create-option),.theme-green .option.highlighted{background:#d1fae5}.theme-green .option.selected:not(.create-option){background:#ecfdf5}.theme-green .tag{background:#ecfdf5;color:#059669;border-color:#a7f3d0}.theme-green .check-icon,.theme-green .option.create-option{color:#10b981}.theme-green .spinner{border-top-color:#10b981}.theme-green .search-input:focus{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.theme-red .select-trigger:focus,.theme-red .select-trigger.focused,.theme-red .select-trigger.open{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.theme-red .option:hover:not(.disabled):not(.create-option),.theme-red .option.highlighted{background:#fee2e2}.theme-red .option.selected:not(.create-option){background:#fef2f2}.theme-red .tag{background:#fef2f2;color:#dc2626;border-color:#fecaca}.theme-red .check-icon,.theme-red .option.create-option{color:#ef4444}.theme-red .spinner{border-top-color:#ef4444}.theme-red .search-input:focus{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.theme-orange .select-trigger:focus,.theme-orange .select-trigger.focused,.theme-orange .select-trigger.open{border-color:#f97316;box-shadow:0 0 0 1px #f97316}.theme-orange .option:hover:not(.disabled):not(.create-option),.theme-orange .option.highlighted{background:#ffedd5}.theme-orange .option.selected:not(.create-option){background:#fff7ed}.theme-orange .tag{background:#fff7ed;color:#ea580c;border-color:#fed7aa}.theme-orange .check-icon,.theme-orange .option.create-option{color:#f97316}.theme-orange .spinner{border-top-color:#f97316}.theme-orange .search-input:focus{border-color:#f97316;box-shadow:0 0 0 1px #f97316}.theme-pink .select-trigger:focus,.theme-pink .select-trigger.focused,.theme-pink .select-trigger.open{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899}.theme-pink .option:hover:not(.disabled):not(.create-option),.theme-pink .option.highlighted{background:#fce7f3}.theme-pink .option.selected:not(.create-option){background:#fdf2f8}.theme-pink .tag{background:#fdf2f8;color:#db2777;border-color:#fbcfe8}.theme-pink .check-icon,.theme-pink .option.create-option{color:#ec4899}.theme-pink .spinner{border-top-color:#ec4899}.theme-pink .search-input:focus{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899}.theme-dark .select-trigger:focus,.theme-dark .select-trigger.focused,.theme-dark .select-trigger.open{border-color:#1f2937;box-shadow:0 0 0 1px #1f2937}.theme-dark .option:hover:not(.disabled):not(.create-option),.theme-dark .option.highlighted{background:#e5e7eb}.theme-dark .option.selected:not(.create-option){background:#f3f4f6}.theme-dark .tag{background:#f3f4f6;color:#111827;border-color:#d1d5db}.theme-dark .check-icon,.theme-dark .option.create-option{color:#1f2937}.theme-dark .spinner{border-top-color:#1f2937}.theme-dark .search-input:focus{border-color:#1f2937;box-shadow:0 0 0 1px #1f2937}.select-container.has-validation .select-trigger{transition:all .2s cubic-bezier(.4,0,.2,1)}.select-container.validation-error .select-trigger{border-color:#ef4444!important}.select-container.validation-error .select-trigger:focus,.select-container.validation-error .select-trigger.focused,.select-container.validation-error .select-trigger.open{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441a,0 1px 2px #0000000d}.select-container.validation-warning .select-trigger{border-color:#f59e0b!important}.select-container.validation-warning .select-trigger:focus,.select-container.validation-warning .select-trigger.focused,.select-container.validation-warning .select-trigger.open{border-color:#f59e0b!important;box-shadow:0 0 0 3px #f59e0b1a,0 1px 2px #0000000d}.select-container.validation-success .select-trigger{border-color:#10b981!important}.select-container.validation-success .select-trigger:focus,.select-container.validation-success .select-trigger.focused,.select-container.validation-success .select-trigger.open{border-color:#10b981!important;box-shadow:0 0 0 3px #10b9811a,0 1px 2px #0000000d}.select-container.validation-info .select-trigger{border-color:#3b82f6!important}.select-container.validation-info .select-trigger:focus,.select-container.validation-info .select-trigger.focused,.select-container.validation-info .select-trigger.open{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a,0 1px 2px #0000000d}.validation-message{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;line-height:1.4;padding:4px 8px;border-radius:6px;transition:all .2s ease}.validation-message .validation-icon{display:flex;align-items:center;flex-shrink:0}.validation-message .validation-icon svg{display:block}.validation-message .validation-text{flex:1}.validation-message.validation-error{color:#dc2626;background:#fef2f2;border-left:3px solid #EF4444}.validation-message.validation-warning{color:#d97706;background:#fffbeb;border-left:3px solid #F59E0B}.validation-message.validation-success{color:#059669;background:#f0fdf4;border-left:3px solid #10B981}.validation-message.validation-info{color:#2563eb;background:#eff6ff;border-left:3px solid #3B82F6}.option.recent-option{position:relative;background:#fafbfc}.option.recent-option:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,#2684ff,#0052cc);border-radius:0 3px 3px 0}.option.recent-option:hover:not(.disabled){background:#f4f5f7!important}.option.recent-option.selected{background:#e6f2ff!important}.option.recent-option.selected:hover:not(.disabled){background:#d4e8ff!important}.section-header{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#6b7280;background:#f9fafb;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:2}.virtual-scroll-viewport{width:100%}.virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{width:100%}.virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-spacer{display:none}.virtual-scroll-viewport .option{width:100%;box-sizing:border-box}@keyframes copyFlash{0%,to{background:transparent}50%{background:#2684ff1a}}.select-container.copying{animation:copyFlash .5s ease}.options-list.scrolling{position:relative}.options-list.scrolling:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:20px;height:20px;border:2px solid #E5E7EB;border-top-color:#2684ff;border-radius:50%;animation:spin .8s linear infinite}.option[title]{cursor:help}.option.highlighted{position:relative}.option.highlighted:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:2px;background:#2684ff}@keyframes typeAheadPulse{0%,to{opacity:1}50%{opacity:.7}}.options-list.type-ahead-active .option.highlighted{animation:typeAheadPulse 1s ease-in-out}.select-container:focus-visible{outline:2px solid #2684FF;outline-offset:2px}@media (prefers-contrast: high){.select-trigger{border-width:2px}.option.highlighted{outline:2px solid currentColor;outline-offset:-2px}.validation-message{border-width:2px}}@media (prefers-reduced-motion: reduce){.select-trigger,.option,.tag,.dropdown,.validation-message{transition:none!important;animation:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }], animations: selectAnimations });
+            }], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "selectContainerRef", first: true, predicate: ["selectContainer"], descendants: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "menuElementRef", first: true, predicate: ["menuRef"], descendants: true }, { propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #selectContainer\n  class=\"select-container {{selectSize}} {{containerSize}} theme-{{resolvedTheme()}} {{getValidationClass()}}\"\n  [class.disabled]=\"isDisabled\"\n  [class.rtl]=\"isRtl\"\n  [class.has-validation]=\"validationState !== 'default'\"\n  [class.compact]=\"compactMode\"\n  [class.dark-mode]=\"isDarkMode()\"\n  (clickOutside)=\"onClickOutside()\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-controls]=\"'options-list'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-invalid]=\"validationState === 'error'\"\n  (focus)=\"openMenuOnFocus && !isOpen() && toggleDropdown(); focus.emit()\"\n  [style]=\"customStyles.container || ''\"\n>\n  <!-- v2.3.0: Bulk Actions Bar (Above Position) -->\n  @if (enableBulkActions && hasBulkActions() && bulkActionsPosition === 'above') {\n    <div class=\"bulk-actions position-above\">\n      <span class=\"bulk-label\">{{bulkActionsLabel}}</span>\n      <div class=\"bulk-buttons\">\n        @for (action of bulkActions; track action.id) {\n          <button\n            class=\"bulk-action-btn\"\n            [disabled]=\"action.disabled || selectedOptions().length === 0\"\n            (click)=\"executeBulkAction(action)\"\n            [attr.aria-label]=\"action.label\"\n            type=\"button\"\n          >\n            @if (action.icon) {\n              <img [src]=\"action.icon\" alt=\"\" class=\"action-icon\" />\n            }\n            <span>{{action.label}}</span>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  <!-- Main Select Trigger -->\n  <div\n    class=\"select-trigger\"\n    [class.open]=\"isOpen()\"\n    [class.focused]=\"isOpen()\"\n    (click)=\"openMenuOnClick && toggleDropdown()\"\n    [attr.tabindex]=\"isDisabled ? -1 : 0\"\n    role=\"button\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"placeholder\"\n  >\n    <!-- Selected Value Display -->\n    <div class=\"select-value\">\n      <!-- Multi-select Tags -->\n      @if (isMulti && selectedOptions().length > 0) {\n        <!-- v2.1.0: Drag-drop enabled tags -->\n        @if (enableDragDrop) {\n          <div class=\"tags\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onTagsReorder($event)\" [class.dragging]=\"isDragging()\">\n            @for (option of visibleTags(); track trackByValue($index, option)) {\n              <span class=\"tag\" [class.disabled]=\"isDisabled\" cdkDrag (cdkDragStarted)=\"onDragStart()\" (cdkDragEnded)=\"onDragEnd()\" [@tag]>\n                <div class=\"drag-handle\" cdkDragHandle>\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M9 3h2v2H9V3zm0 4h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-16h2v2h-2V3zm0 4h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z\"/>\n                  </svg>\n                </div>\n                <span class=\"tag-label\">{{getOptionLabel(option)}}</span>\n                @if (!isDisabled) {\n                  <button\n                    class=\"tag-remove\"\n                    (click)=\"removeOption(option, $event)\"\n                    [attr.aria-label]=\"'Remove ' + getOptionLabel(option)\"\n                    type=\"button\"\n                  >\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                      <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n                    </svg>\n                  </button>\n                }\n                <div *cdkDragPlaceholder class=\"drag-placeholder\">{{dragDropPlaceholder}}</div>\n              </span>\n            }\n          </div>\n        } @else {\n          <div class=\"tags\">\n            @for (option of visibleTags(); track trackByValue($index, option)) {\n              <span class=\"tag\" [class.disabled]=\"isDisabled\" [@tag]>\n                <span class=\"tag-label\">{{getOptionLabel(option)}}</span>\n                @if (!isDisabled) {\n                  <button\n                    class=\"tag-remove\"\n                    (click)=\"removeOption(option, $event)\"\n                    [attr.aria-label]=\"'Remove ' + getOptionLabel(option)\"\n                    type=\"button\"\n                  >\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                      <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n                    </svg>\n                  </button>\n                }\n              </span>\n            }\n          </div>\n        }\n\n        <!-- v2.2.0: Tag overflow indicator -->\n        @if (hiddenTagsCount() > 0) {\n          @if (collapsibleTags) {\n            <button\n              class=\"tags-toggle\"\n              (click)=\"toggleTagsExpanded()\"\n              [attr.aria-label]=\"tagsExpanded() ? showLessTagsText : showAllTagsText\"\n              type=\"button\"\n            >\n              {{ tagsExpanded() ? showLessTagsText : showAllTagsText }}\n            </button>\n          } @else {\n            <span class=\"tags-overflow-indicator\">\n              {{ getMoreTagsText() }}\n            </span>\n          }\n        }\n      } @else {\n        <!-- Single Select or Placeholder -->\n        <span class=\"placeholder\" [class.has-value]=\"selectedOptions().length > 0\">\n          {{displayText()}}\n        </span>\n      }\n    </div>\n\n    <!-- Actions (Clear, Loading, Arrow) -->\n    <div class=\"select-actions\">\n      @if (isLoading || isLoadingAsync()) {\n        <div class=\"spinner\"></div>\n      }\n      @if (isClearable && selectedOptions().length > 0 && !isDisabled && !isLoading && !isLoadingAsync()) {\n        <button\n          class=\"clear-button\"\n          (click)=\"clearSelection($event)\"\n          aria-label=\"Clear selection\"\n          type=\"button\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n            <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n          </svg>\n        </button>\n      }\n      <span class=\"separator\"></span>\n      <span class=\"arrow\" [class.open]=\"isOpen()\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n          <path d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"></path>\n        </svg>\n      </span>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      #menuRef\n      class=\"dropdown {{menuPlacement}}\"\n      [class.fixed]=\"menuPosition === 'fixed'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"isMulti\"\n      [@dropdown]\n    >\n      <!-- Search Input -->\n      @if (isSearchable) {\n        <div class=\"search-container\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"search-input\"\n            placeholder=\"Search...\"\n            [value]=\"searchTerm()\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n            aria-label=\"Search options\"\n            aria-autocomplete=\"list\"\n          />\n        </div>\n      }\n\n      <!-- Options List -->\n      <div\n        class=\"options-list\"\n        id=\"options-list\"\n        (scroll)=\"onOptionsScroll($event)\"\n      >\n        <!-- Max Selection Message -->\n        @if (isMaxSelectionReached()) {\n          <div class=\"info-message max-selection\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n            {{maxSelectedMessage}}\n          </div>\n        }\n\n        <!-- Min Search Length Message -->\n        @if (showMinSearchMessage()) {\n          <div class=\"info-message min-search\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n            {{minSearchMessage}} ({{searchTerm().length}}/{{minSearchLength}})\n          </div>\n        }\n\n        @if (isLoadingAsync()) {\n          <div class=\"loading-message\">{{loadingMessage()}}</div>\n        } @else if (displayOptions().length === 0 && !showMinSearchMessage()) {\n          <div class=\"no-options\">\n            {{searchTerm() ? emptySearchText : emptyStateText}}\n          </div>\n        } @else if (!showMinSearchMessage()) {\n          <!-- Select All (Multi-select only) -->\n          @if (isMulti && showSelectAll && !searchTerm()) {\n            <div class=\"select-all-container\">\n              <button\n                class=\"select-all-button\"\n                (click)=\"allOptionsSelected() ? deselectAll() : selectAll()\"\n                type=\"button\"\n              >\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"allOptionsSelected()\"\n                  [indeterminate]=\"someOptionsSelected()\"\n                  tabindex=\"-1\"\n                  aria-hidden=\"true\"\n                  readonly\n                />\n                <span class=\"select-all-text\">\n                  {{allOptionsSelected() ? deselectAllText : selectAllText}}\n                </span>\n                <span class=\"select-all-count\">\n                  ({{selectedOptions().length}}/{{getEnabledOptionsCount()}})\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Grouped Options -->\n          @if (isGrouped && groupedOptions()) {\n            @for (group of groupedOptions() | keyvalue; track trackByGroup($index, [$any(group.key), $any(group.value)])) {\n              <div class=\"option-group\">\n                <div class=\"option-group-label\">{{group.key}}</div>\n                @for (option of $any(group.value); track trackByValue($index, option); let idx = $index) {\n                  <div\n                    class=\"option\"\n                    [class.selected]=\"isSelected(option)\"\n                    [class.highlighted]=\"idx === highlightedIndex()\"\n                    [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                    [class.create-option]=\"option.__isCreate__\"\n                    (click)=\"selectOption(option)\"\n                    (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(option)\"\n                    [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    tabindex=\"-1\"\n                  >\n                    <!-- Checkbox for multi-select -->\n                    @if (isMulti) {\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"isSelected(option)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                        readonly\n                      />\n                    }\n\n                    <!-- Option Icon -->\n                    @if (showOptionIcons && option.icon) {\n                      <div class=\"option-icon\">\n                        @if (option.icon.includes('<')) {\n                          <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                        } @else {\n                          <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                        }\n                      </div>\n                    }\n\n                    <!-- Option Content -->\n                    <div class=\"option-content\">\n                      <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                      @if (option.description) {\n                        <div class=\"option-description\">{{option.description}}</div>\n                      }\n                    </div>\n\n                    <!-- Option Badge -->\n                    @if (showOptionBadges && option.badge) {\n                      <span\n                        class=\"option-badge\"\n                        [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                      >\n                        {{option.badge}}\n                      </span>\n                    }\n\n                    <!-- v2.1.0: Pin button -->\n                    @if (enablePinning) {\n                      <button\n                        class=\"pin-button\"\n                        [class.pinned]=\"isPinned(option)\"\n                        (click)=\"togglePin(option, $event)\"\n                        [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                        type=\"button\"\n                      >\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                          @if (isPinned(option)) {\n                            <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                          } @else {\n                            <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                          }\n                        </svg>\n                      </button>\n                    }\n\n                    <!-- Check Icon for selected -->\n                    @if (!isMulti && isSelected(option)) {\n                      <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                        <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                      </svg>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            <!-- v1.2.0: Recent Selections Header -->\n            @if (showRecentSelections && !searchTerm() && recentSelections().length > 0) {\n              <div class=\"section-header\">{{recentSelectionsLabel}}</div>\n            }\n\n            <!-- Regular (Ungrouped) Options - Virtual Scroll or Standard -->\n            @if (enableVirtualScroll) {\n              <!-- Virtual Scroll Mode -->\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize\"\n                [minBufferPx]=\"virtualScrollMinBufferPx\"\n                [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n                [style.height.px]=\"maxHeight\"\n                class=\"virtual-scroll-viewport\"\n              >\n                @for (option of (showRecentSelections ? displayOptionsWithRecent() : displayOptions()); track trackByValue($index, option); let idx = $index) {\n                  <div\n                    class=\"option\"\n                    [class.selected]=\"isSelected(option)\"\n                    [class.highlighted]=\"idx === highlightedIndex()\"\n                    [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                    [class.create-option]=\"option.__isCreate__\"\n                    [class.recent-option]=\"option.__isRecent__\"\n                    (click)=\"selectOption(option)\"\n                    (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                    (mouseenter)=\"showTooltip(option, idx)\"\n                    (mouseleave)=\"hideTooltip()\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(option)\"\n                    [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [attr.title]=\"showTooltips ? getTooltipContent(option) : null\"\n                    tabindex=\"-1\"\n                  >\n                    <!-- Custom Template or Default Rendering -->\n                    @if (optionTemplate) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, index: idx, selected: isSelected(option) }\"\n                      ></ng-container>\n                    } @else {\n                      <!-- Default Option Content (same as before) -->\n                      @if (isMulti) {\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isSelected(option)\"\n                          tabindex=\"-1\"\n                          aria-hidden=\"true\"\n                          readonly\n                        />\n                      }\n\n                      @if (showOptionIcons && option.icon) {\n                        <div class=\"option-icon\">\n                          @if (option.icon.includes('<')) {\n                            <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                          } @else {\n                            <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                          }\n                        </div>\n                      }\n\n                      <div class=\"option-content\">\n                        <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                        @if (option.description) {\n                          <div class=\"option-description\">{{option.description}}</div>\n                        }\n                      </div>\n\n                      @if (showOptionBadges && option.badge) {\n                        <span\n                          class=\"option-badge\"\n                          [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                        >\n                          {{option.badge}}\n                        </span>\n                      }\n\n                      <!-- v2.1.0: Pin button -->\n                      @if (enablePinning) {\n                        <button\n                          class=\"pin-button\"\n                          [class.pinned]=\"isPinned(option)\"\n                          (click)=\"togglePin(option, $event)\"\n                          [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                          type=\"button\"\n                        >\n                          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                            @if (isPinned(option)) {\n                              <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                            } @else {\n                              <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                            }\n                          </svg>\n                        </button>\n                      }\n\n                      @if (!isMulti && isSelected(option)) {\n                        <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                          <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                        </svg>\n                      }\n                    }\n                  </div>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <!-- Standard Rendering (Non-Virtual Scroll) -->\n              @for (option of (showRecentSelections ? displayOptionsWithRecent() : displayOptions()); track trackByValue($index, option); let idx = $index) {\n                <div\n                  class=\"option\"\n                  [class.selected]=\"isSelected(option)\"\n                  [class.highlighted]=\"idx === highlightedIndex()\"\n                  [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                  [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                  [class.create-option]=\"option.__isCreate__\"\n                  [class.recent-option]=\"option.__isRecent__\"\n                  (click)=\"selectOption(option)\"\n                  (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                  (mouseenter)=\"showTooltip(option, idx)\"\n                  (mouseleave)=\"hideTooltip()\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option)\"\n                  [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                  [attr.title]=\"showTooltips ? getTooltipContent(option) : null\"\n                  tabindex=\"-1\"\n                >\n                <!-- Custom Template or Default Rendering -->\n                @if (optionTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, index: idx, selected: isSelected(option) }\"\n                  ></ng-container>\n                } @else {\n                  <!-- Default Option Content -->\n                  @if (isMulti) {\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(option)\"\n                      tabindex=\"-1\"\n                      aria-hidden=\"true\"\n                      readonly\n                    />\n                  }\n\n                  @if (showOptionIcons && option.icon) {\n                    <div class=\"option-icon\">\n                      @if (option.icon.includes('<')) {\n                        <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                      } @else {\n                        <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                      }\n                    </div>\n                  }\n\n                  <div class=\"option-content\">\n                    <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                    @if (option.description) {\n                      <div class=\"option-description\">{{option.description}}</div>\n                    }\n                  </div>\n\n                  @if (showOptionBadges && option.badge) {\n                    <span\n                      class=\"option-badge\"\n                      [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                    >\n                      {{option.badge}}\n                    </span>\n                  }\n\n                  <!-- v2.1.0: Pin button -->\n                  @if (enablePinning) {\n                    <button\n                      class=\"pin-button\"\n                      [class.pinned]=\"isPinned(option)\"\n                      (click)=\"togglePin(option, $event)\"\n                      [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                      type=\"button\"\n                    >\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        @if (isPinned(option)) {\n                          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                        } @else {\n                          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                        }\n                      </svg>\n                    </button>\n                  }\n\n                  @if (!isMulti && isSelected(option)) {\n                    <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                      <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                    </svg>\n                  }\n                }\n              </div>\n            }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- v1.2.0: Validation Message -->\n  @if (validationMessage && validationState !== 'default') {\n    <div class=\"validation-message {{getValidationClass()}}\">\n      @if (showValidationIcon) {\n        <span class=\"validation-icon\">\n          @if (validationState === 'error') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n          } @else if (validationState === 'warning') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n          } @else if (validationState === 'success') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path d=\"M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm-1.707 13.707l-3.5-3.5 1.414-1.414L9 11.586l5.293-5.293 1.414 1.414-6.5 6.5z\"/>\n            </svg>\n          } @else if (validationState === 'info') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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-6h2v6zm0-8H9V5h2v2z\"/>\n            </svg>\n          }\n        </span>\n      }\n      <span class=\"validation-text\">{{validationMessage}}</span>\n    </div>\n  }\n</div>\n\n<!-- Hidden native select for form compatibility -->\n@if (isMulti) {\n  <select [name]=\"name\" [id]=\"id\" multiple style=\"display: none;\" [attr.aria-hidden]=\"true\">\n    @for (option of selectedOptions(); track trackByValue($index, option)) {\n      <option [value]=\"getOptionValue(option)\" selected>{{getOptionLabel(option)}}</option>\n    }\n  </select>\n} @else {\n  @if (selectedOptions().length > 0) {\n    <select [name]=\"name\" [id]=\"id\" style=\"display: none;\" [attr.aria-hidden]=\"true\">\n      <option [value]=\"getOptionValue(selectedOptions()[0])\" selected>{{getOptionLabel(selectedOptions()[0])}}</option>\n    </select>\n  }\n}\n", styles: [":host{display:block;width:100%}.select-container{position:relative;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.smaller{font-size:11px}.small{font-size:13px}.medium{font-size:14px}.large{font-size:16px}.larger{font-size:18px}.xs .select-trigger{min-height:28px;padding:4px 8px}.sm .select-trigger{min-height:32px;padding:6px 10px}.md .select-trigger{min-height:40px;padding:8px 12px}.lg .select-trigger{min-height:48px;padding:10px 14px}.xl .select-trigger{min-height:56px;padding:12px 16px}.select-container.disabled{opacity:.6;cursor:not-allowed}.select-container.rtl{direction:rtl}.select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#fff;border:1.5px solid #D1D5DB;border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:38px;gap:8px;box-shadow:0 1px 2px #0000000d}.select-trigger:hover:not(.disabled){border-color:#9ca3af;box-shadow:0 2px 4px #00000014}.select-trigger:focus,.select-trigger.focused{outline:none;border-color:#2684ff;box-shadow:0 0 0 3px #2684ff1a,0 1px 2px #0000000d}.select-trigger.open{border-color:#2684ff;box-shadow:0 0 0 3px #2684ff1a,0 1px 2px #0000000d}.select-value{flex:1;display:flex;align-items:center;min-width:0;gap:4px}.placeholder{color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.placeholder.has-value{color:#333}.tags{display:flex;flex-wrap:wrap;gap:4px;flex:1}.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#e6f2ff;color:#0052cc;border-radius:6px;font-size:.875em;font-weight:500;white-space:nowrap;border:1px solid #CCE0FF;box-shadow:0 1px 2px #0000000d}.tag.disabled{background:#f0f0f0;color:#666;border-color:#d9d9d9}.tag-label{line-height:1.2}.tag-remove{background:none;border:none;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:all .15s}.tag-remove:hover{background:#0052cc26}.tag-remove svg{fill:currentColor}.tags.dragging .tag{cursor:move}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:move;padding:0;margin-left:-4px;opacity:.5;transition:opacity .15s}.drag-handle svg{fill:currentColor}.drag-handle:hover{opacity:.8}.cdk-drag-preview{box-shadow:0 5px 15px #0003;opacity:.8}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:#0052cc1a;border:2px dashed var(--ps-primary, #0052cc);border-radius:6px;padding:4px 8px;min-height:28px;display:flex;align-items:center;justify-content:center;color:var(--ps-primary, #0052cc);font-size:.75em;opacity:.6}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.tags-toggle{background:none;border:none;color:var(--ps-primary, #0052cc);cursor:pointer;font-size:.875em;font-weight:500;padding:4px 8px;border-radius:4px;transition:all .15s;white-space:nowrap}.tags-toggle:hover{background:#0052cc1a;text-decoration:underline}.tags-toggle:focus{outline:2px solid var(--ps-primary, #0052cc);outline-offset:2px}.tags-overflow-indicator{display:inline-flex;align-items:center;padding:4px 8px;background:#f3f4f6;color:#6b7280;border-radius:6px;font-size:.875em;font-weight:500;white-space:nowrap;border:1px solid #d1d5db}.option-label mark{background-color:#ffeb3b;color:#000;padding:0 2px;border-radius:2px;font-weight:600}.select-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.clear-button{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s}.clear-button:hover{color:#333;background:#f0f0f0}.clear-button svg{fill:currentColor}.separator{width:1px;height:24px;background:#ccc;align-self:stretch}.arrow{color:#999;transition:transform .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;padding:4px}.arrow svg{fill:currentColor}.arrow.open{transform:rotate(180deg)}.spinner{width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #2684FF;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fffffffa;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d;z-index:1000;overflow:hidden;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%)}.dropdown.fixed{position:fixed}.dropdown.top{top:auto;bottom:calc(100% + 4px)}.search-container{padding:8px;border-bottom:1px solid #f0f0f0;background:#fff}.search-input{width:100%;padding:6px 8px;border:1px solid #cccccc;border-radius:3px;font-size:inherit;outline:none;transition:border-color .15s}.search-input:focus{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.options-list{max-height:inherit;overflow-y:auto;overflow-x:hidden;padding:4px 0}.options-list::-webkit-scrollbar{width:8px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:4px}.options-list::-webkit-scrollbar-thumb:hover{background:#b3b3b3}.select-all-container{padding:8px;border-bottom:1px solid #E5E7EB;background:#f9fafb}.select-all-button{width:100%;display:flex;align-items:center;gap:8px;padding:6px 8px;background:#fff;border:1px solid #D1D5DB;border-radius:6px;cursor:pointer;transition:all .15s;font-size:inherit;color:inherit;font-family:inherit}.select-all-button:hover{background:#f3f4f6;border-color:#9ca3af}.select-all-button input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:#2684FF}.select-all-text{flex:1;text-align:left;font-weight:500}.select-all-count{color:#6b7280;font-size:.9em}.option-group{margin:4px 0}.option-group-label{padding:8px 12px 4px;font-size:.75em;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;background:#f9fafb;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:1}.option-group .option{padding-left:20px}.option{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;min-height:40px}.option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.option-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#f3f4f6}.option-icon img{width:100%;height:100%;object-fit:cover}.option-badge{padding:2px 8px;border-radius:12px;font-size:.75em;font-weight:500;color:#374151;background:#e5e7eb;flex-shrink:0;white-space:nowrap}.option:hover:not(.disabled):not(.create-option){background:#deebff}.option.highlighted{background:#deebff}.option.selected:not(.create-option){background:#e6f2ff;font-weight:500}.option.disabled{opacity:.5;cursor:not-allowed;background:transparent!important}.option.hidden{display:none}.option.create-option{color:#2684ff;font-weight:500;background:#f0f6ff}.option.create-option:hover{background:#e6f2ff}.option input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:#2684FF}.option-label{font-weight:500;color:#1f2937;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.option-description{font-size:.875em;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.check-icon{color:#2684ff;display:flex;align-items:center;margin-left:auto}.check-icon svg{fill:currentColor}.pin-button{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s;margin-left:auto;opacity:.5}.pin-button svg{fill:currentColor}.pin-button:hover{opacity:1;background:#0000000d}.pin-button.pinned{color:var(--ps-primary, #0052cc);opacity:1}.option.pinned-option{background:#0052cc0d;border-left:3px solid var(--ps-primary, #0052cc);padding-left:9px}.no-options,.loading-message{padding:16px 12px;text-align:center;color:#999;font-size:.95em}.info-message{padding:12px;margin:8px;border-radius:6px;font-size:.9em;display:flex;align-items:center;gap:8px}.info-message.max-selection{background:#fff4e5;color:#f57c00;border:1px solid #FFE0B2}.info-message.min-search{background:#e3f2fd;color:#1976d2;border:1px solid #BBDEFB}.info-message svg{flex-shrink:0}.rtl .select-actions,.rtl .tags,.rtl .option{flex-direction:row-reverse}.theme-blue .select-trigger:focus,.theme-blue .select-trigger.focused,.theme-blue .select-trigger.open{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.theme-blue .option:hover:not(.disabled):not(.create-option),.theme-blue .option.highlighted{background:#deebff}.theme-blue .option.selected:not(.create-option){background:#e6f2ff}.theme-blue .tag{background:#e6f2ff;color:#0052cc;border-color:#cce0ff}.theme-blue .check-icon,.theme-blue .option.create-option{color:#2684ff}.theme-blue .spinner{border-top-color:#2684ff}.theme-blue .search-input:focus{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.theme-purple .select-trigger:focus,.theme-purple .select-trigger.focused,.theme-purple .select-trigger.open{border-color:#9333ea;box-shadow:0 0 0 1px #9333ea}.theme-purple .option:hover:not(.disabled):not(.create-option),.theme-purple .option.highlighted{background:#f3e8ff}.theme-purple .option.selected:not(.create-option){background:#faf5ff}.theme-purple .tag{background:#faf5ff;color:#7e22ce;border-color:#e9d5ff}.theme-purple .check-icon,.theme-purple .option.create-option{color:#9333ea}.theme-purple .spinner{border-top-color:#9333ea}.theme-purple .search-input:focus{border-color:#9333ea;box-shadow:0 0 0 1px #9333ea}.theme-green .select-trigger:focus,.theme-green .select-trigger.focused,.theme-green .select-trigger.open{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.theme-green .option:hover:not(.disabled):not(.create-option),.theme-green .option.highlighted{background:#d1fae5}.theme-green .option.selected:not(.create-option){background:#ecfdf5}.theme-green .tag{background:#ecfdf5;color:#059669;border-color:#a7f3d0}.theme-green .check-icon,.theme-green .option.create-option{color:#10b981}.theme-green .spinner{border-top-color:#10b981}.theme-green .search-input:focus{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.theme-red .select-trigger:focus,.theme-red .select-trigger.focused,.theme-red .select-trigger.open{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.theme-red .option:hover:not(.disabled):not(.create-option),.theme-red .option.highlighted{background:#fee2e2}.theme-red .option.selected:not(.create-option){background:#fef2f2}.theme-red .tag{background:#fef2f2;color:#dc2626;border-color:#fecaca}.theme-red .check-icon,.theme-red .option.create-option{color:#ef4444}.theme-red .spinner{border-top-color:#ef4444}.theme-red .search-input:focus{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.theme-orange .select-trigger:focus,.theme-orange .select-trigger.focused,.theme-orange .select-trigger.open{border-color:#f97316;box-shadow:0 0 0 1px #f97316}.theme-orange .option:hover:not(.disabled):not(.create-option),.theme-orange .option.highlighted{background:#ffedd5}.theme-orange .option.selected:not(.create-option){background:#fff7ed}.theme-orange .tag{background:#fff7ed;color:#ea580c;border-color:#fed7aa}.theme-orange .check-icon,.theme-orange .option.create-option{color:#f97316}.theme-orange .spinner{border-top-color:#f97316}.theme-orange .search-input:focus{border-color:#f97316;box-shadow:0 0 0 1px #f97316}.theme-pink .select-trigger:focus,.theme-pink .select-trigger.focused,.theme-pink .select-trigger.open{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899}.theme-pink .option:hover:not(.disabled):not(.create-option),.theme-pink .option.highlighted{background:#fce7f3}.theme-pink .option.selected:not(.create-option){background:#fdf2f8}.theme-pink .tag{background:#fdf2f8;color:#db2777;border-color:#fbcfe8}.theme-pink .check-icon,.theme-pink .option.create-option{color:#ec4899}.theme-pink .spinner{border-top-color:#ec4899}.theme-pink .search-input:focus{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899}.theme-dark .select-trigger:focus,.theme-dark .select-trigger.focused,.theme-dark .select-trigger.open{border-color:#1f2937;box-shadow:0 0 0 1px #1f2937}.theme-dark .option:hover:not(.disabled):not(.create-option),.theme-dark .option.highlighted{background:#e5e7eb}.theme-dark .option.selected:not(.create-option){background:#f3f4f6}.theme-dark .tag{background:#f3f4f6;color:#111827;border-color:#d1d5db}.theme-dark .check-icon,.theme-dark .option.create-option{color:#1f2937}.theme-dark .spinner{border-top-color:#1f2937}.theme-dark .search-input:focus{border-color:#1f2937;box-shadow:0 0 0 1px #1f2937}.select-container.has-validation .select-trigger{transition:all .2s cubic-bezier(.4,0,.2,1)}.select-container.validation-error .select-trigger{border-color:#ef4444!important}.select-container.validation-error .select-trigger:focus,.select-container.validation-error .select-trigger.focused,.select-container.validation-error .select-trigger.open{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441a,0 1px 2px #0000000d}.select-container.validation-warning .select-trigger{border-color:#f59e0b!important}.select-container.validation-warning .select-trigger:focus,.select-container.validation-warning .select-trigger.focused,.select-container.validation-warning .select-trigger.open{border-color:#f59e0b!important;box-shadow:0 0 0 3px #f59e0b1a,0 1px 2px #0000000d}.select-container.validation-success .select-trigger{border-color:#10b981!important}.select-container.validation-success .select-trigger:focus,.select-container.validation-success .select-trigger.focused,.select-container.validation-success .select-trigger.open{border-color:#10b981!important;box-shadow:0 0 0 3px #10b9811a,0 1px 2px #0000000d}.select-container.validation-info .select-trigger{border-color:#3b82f6!important}.select-container.validation-info .select-trigger:focus,.select-container.validation-info .select-trigger.focused,.select-container.validation-info .select-trigger.open{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a,0 1px 2px #0000000d}.validation-message{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;line-height:1.4;padding:4px 8px;border-radius:6px;transition:all .2s ease}.validation-message .validation-icon{display:flex;align-items:center;flex-shrink:0}.validation-message .validation-icon svg{display:block}.validation-message .validation-text{flex:1}.validation-message.validation-error{color:#dc2626;background:#fef2f2;border-left:3px solid #EF4444}.validation-message.validation-warning{color:#d97706;background:#fffbeb;border-left:3px solid #F59E0B}.validation-message.validation-success{color:#059669;background:#f0fdf4;border-left:3px solid #10B981}.validation-message.validation-info{color:#2563eb;background:#eff6ff;border-left:3px solid #3B82F6}.option.recent-option{position:relative;background:#fafbfc}.option.recent-option:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,#2684ff,#0052cc);border-radius:0 3px 3px 0}.option.recent-option:hover:not(.disabled){background:#f4f5f7!important}.option.recent-option.selected{background:#e6f2ff!important}.option.recent-option.selected:hover:not(.disabled){background:#d4e8ff!important}.section-header{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#6b7280;background:#f9fafb;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:2}.virtual-scroll-viewport{width:100%}.virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{width:100%}.virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-spacer{display:none}.virtual-scroll-viewport .option{width:100%;box-sizing:border-box}@keyframes copyFlash{0%,to{background:transparent}50%{background:#2684ff1a}}.select-container.copying{animation:copyFlash .5s ease}.options-list.scrolling{position:relative}.options-list.scrolling:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:20px;height:20px;border:2px solid #E5E7EB;border-top-color:#2684ff;border-radius:50%;animation:spin .8s linear infinite}.option[title]{cursor:help}.option.highlighted{position:relative}.option.highlighted:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:2px;background:#2684ff}@keyframes typeAheadPulse{0%,to{opacity:1}50%{opacity:.7}}.options-list.type-ahead-active .option.highlighted{animation:typeAheadPulse 1s ease-in-out}.select-container:focus-visible{outline:2px solid #2684FF;outline-offset:2px}@media (prefers-contrast: high){.select-trigger{border-width:2px}.option.highlighted{outline:2px solid currentColor;outline-offset:-2px}.validation-message{border-width:2px}}@media (prefers-reduced-motion: reduce){.select-trigger,.option,.tag,.dropdown,.validation-message{transition:none!important;animation:none!important}}.select-container.dark-mode{--ps-bg: #1f2937;--ps-bg-hover: #374151;--ps-border: #4b5563;--ps-text: #f3f4f6;--ps-text-secondary: #d1d5db;--ps-placeholder: #9ca3af;--ps-disabled-bg: #111827;--ps-disabled-text: #6b7280;--ps-shadow: 0 4px 6px rgba(0, 0, 0, .3)}.select-container.dark-mode .select-trigger{background:var(--ps-bg);border-color:var(--ps-border);color:var(--ps-text)}.select-container.dark-mode .select-trigger:hover:not(.disabled){background:var(--ps-bg-hover);border-color:#6b7280}.select-container.dark-mode .menu{background:var(--ps-bg);border-color:var(--ps-border);box-shadow:var(--ps-shadow)}.select-container.dark-mode .option{color:var(--ps-text)}.select-container.dark-mode .option:hover:not(.disabled){background:var(--ps-bg-hover)}.select-container.dark-mode .option.highlighted{background:var(--ps-bg-hover)}.select-container.dark-mode .option.selected{background:#3b82f633}.select-container.dark-mode .tag{background:var(--ps-bg-hover);color:var(--ps-text);border-color:var(--ps-border)}.select-container.dark-mode .empty-state,.select-container.dark-mode .min-search-message{color:var(--ps-text-secondary)}.select-container.dark-mode .group-label{background:var(--ps-bg);color:var(--ps-text-secondary);border-bottom-color:var(--ps-border)}.skeleton-loader{padding:8px 0}.skeleton-loader .skeleton-item{padding:8px 12px;display:flex;flex-direction:column;gap:6px}.skeleton-loader .skeleton-line{background:linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;height:12px}.skeleton-loader .skeleton-line.skeleton-title{width:80%;height:14px}.skeleton-loader .skeleton-line.skeleton-subtitle{width:60%;height:10px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.select-container.dark-mode .skeleton-line{background:linear-gradient(90deg,#374151,#4b5563,#374151);background-size:200% 100%}.select-container.compact .select-trigger{min-height:32px;padding:4px 8px;gap:4px}.select-container.compact .tag{padding:2px 6px;font-size:.75rem;gap:4px;height:24px}.select-container.compact .tag .tag-label{font-size:.75rem}.select-container.compact .tag-remove{width:12px;height:12px}.select-container.compact .tag-remove svg{width:10px;height:10px}.select-container.compact .option{min-height:32px;padding:6px 10px;font-size:.875rem}.select-container.compact .menu{max-height:250px}.select-container.compact .select-all-container{padding:6px 10px}.select-container.compact .group-label{padding:6px 10px;font-size:.75rem}.select-container.compact .empty-state,.select-container.compact .min-search-message{padding:12px;font-size:.875rem}.select-container.compact .search-input input{font-size:.875rem;padding:4px 0}.select-container.compact .indicators{gap:4px}.select-container.compact .indicators .indicator{width:14px;height:14px}.select-container.compact .indicators .indicator svg{width:12px;height:12px}.option-checkbox{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;margin-right:8px;transition:all .2s ease}.option-checkbox.checkbox-default{border:2px solid #d1d5db;border-radius:4px;background:#fff}.option-checkbox.checkbox-default svg{color:#10b981}.option-checkbox.checkbox-filled{background:var(--ps-primary);border-radius:4px;border:none}.option-checkbox.checkbox-filled svg{color:#fff}.option-checkbox.checkbox-outlined{border:2px solid var(--ps-primary);border-radius:4px;background:transparent}.option-checkbox.checkbox-outlined svg{color:var(--ps-primary)}.option-checkbox .checkbox-empty{width:12px;height:12px;border-radius:2px;background:transparent}.option.with-checkbox{display:flex;align-items:center;gap:10px}.option.with-checkbox.checkbox-right{flex-direction:row-reverse}.option.with-checkbox.checkbox-right .option-checkbox{margin-right:0;margin-left:8px}.select-container.dark-mode .option-checkbox.checkbox-default{border-color:#6b7280;background:#374151}.bulk-actions{padding:12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:12px;border-radius:8px 8px 0 0;flex-wrap:wrap}.bulk-actions.position-above{border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;order:-1}.bulk-actions.position-below{border-top:1px solid #e5e7eb;border-bottom:none;border-radius:0 0 8px 8px;order:99}.bulk-actions.position-float{position:sticky;bottom:0;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;border-top:1px solid #e5e7eb;border-bottom:none}.bulk-actions .bulk-label{font-weight:600;color:#4b5563;font-size:.875rem;white-space:nowrap}.bulk-actions .bulk-buttons{display:flex;gap:8px;flex-wrap:wrap}.bulk-actions .bulk-action-btn{padding:6px 12px;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:500;color:#374151;transition:all .2s ease;white-space:nowrap}.bulk-actions .bulk-action-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.bulk-actions .bulk-action-btn:active:not(:disabled){transform:translateY(0);box-shadow:none}.bulk-actions .bulk-action-btn:disabled{opacity:.5;cursor:not-allowed}.bulk-actions .bulk-action-btn .action-icon{width:16px;height:16px;object-fit:contain}.select-container.dark-mode .bulk-actions{background:#1f2937;border-color:#4b5563}.select-container.dark-mode .bulk-actions.position-float{background:#1f2937f2}.select-container.dark-mode .bulk-actions .bulk-label{color:#d1d5db}.select-container.dark-mode .bulk-actions .bulk-action-btn{background:#374151;border-color:#4b5563;color:#f3f4f6}.select-container.dark-mode .bulk-actions .bulk-action-btn:hover:not(:disabled){background:#4b5563;border-color:#6b7280}.select-container.compact .bulk-actions{padding:8px;gap:8px}.select-container.compact .bulk-actions .bulk-label{font-size:.75rem}.select-container.compact .bulk-actions .bulk-action-btn{padding:4px 8px;font-size:.75rem}.select-container.compact .bulk-actions .bulk-action-btn .action-icon{width:14px;height:14px}.select-container.compact.dark-mode .skeleton-line{height:10px}.select-container.compact.dark-mode .skeleton-line.skeleton-title{height:12px}.select-container.compact.dark-mode .bulk-actions{padding:6px 8px}.select-container.compact.dark-mode .option-checkbox{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }], animations: selectAnimations });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PerfectSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-perfect-select', standalone: true, imports: [CommonModule, FormsModule, ClickOutsideDirective, ScrollingModule, DragDropModule], animations: selectAnimations, providers: [{
+            args: [{ selector: 'ng-perfect-select', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ClickOutsideDirective,
+                        ScrollingModule,
+                        DragDropModule
+                    ], animations: selectAnimations, providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PerfectSelectComponent),
                             multi: true
-                        }], template: "<div\n  #selectContainer\n  class=\"select-container {{selectSize}} {{containerSize}} theme-{{theme}} {{getValidationClass()}}\"\n  [class.disabled]=\"isDisabled\"\n  [class.rtl]=\"isRtl\"\n  [class.has-validation]=\"validationState !== 'default'\"\n  (clickOutside)=\"onClickOutside()\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-controls]=\"'options-list'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-invalid]=\"validationState === 'error'\"\n  (focus)=\"openMenuOnFocus && !isOpen() && toggleDropdown(); focus.emit()\"\n  [style]=\"customStyles.container || ''\"\n>\n  <!-- Main Select Trigger -->\n  <div\n    class=\"select-trigger\"\n    [class.open]=\"isOpen()\"\n    [class.focused]=\"isOpen()\"\n    (click)=\"openMenuOnClick && toggleDropdown()\"\n    [attr.tabindex]=\"isDisabled ? -1 : 0\"\n    role=\"button\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"placeholder\"\n  >\n    <!-- Selected Value Display -->\n    <div class=\"select-value\">\n      <!-- Multi-select Tags -->\n      @if (isMulti && selectedOptions().length > 0) {\n        <!-- v2.1.0: Drag-drop enabled tags -->\n        @if (enableDragDrop) {\n          <div class=\"tags\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onTagsReorder($event)\" [class.dragging]=\"isDragging()\">\n            @for (option of visibleTags(); track trackByValue($index, option)) {\n              <span class=\"tag\" [class.disabled]=\"isDisabled\" cdkDrag (cdkDragStarted)=\"onDragStart()\" (cdkDragEnded)=\"onDragEnd()\" [@tag]>\n                <div class=\"drag-handle\" cdkDragHandle>\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M9 3h2v2H9V3zm0 4h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-16h2v2h-2V3zm0 4h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z\"/>\n                  </svg>\n                </div>\n                <span class=\"tag-label\">{{getOptionLabel(option)}}</span>\n                @if (!isDisabled) {\n                  <button\n                    class=\"tag-remove\"\n                    (click)=\"removeOption(option, $event)\"\n                    [attr.aria-label]=\"'Remove ' + getOptionLabel(option)\"\n                    type=\"button\"\n                  >\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                      <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n                    </svg>\n                  </button>\n                }\n                <div *cdkDragPlaceholder class=\"drag-placeholder\">{{dragDropPlaceholder}}</div>\n              </span>\n            }\n          </div>\n        } @else {\n          <div class=\"tags\">\n            @for (option of visibleTags(); track trackByValue($index, option)) {\n              <span class=\"tag\" [class.disabled]=\"isDisabled\" [@tag]>\n                <span class=\"tag-label\">{{getOptionLabel(option)}}</span>\n                @if (!isDisabled) {\n                  <button\n                    class=\"tag-remove\"\n                    (click)=\"removeOption(option, $event)\"\n                    [attr.aria-label]=\"'Remove ' + getOptionLabel(option)\"\n                    type=\"button\"\n                  >\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                      <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n                    </svg>\n                  </button>\n                }\n              </span>\n            }\n          </div>\n        }\n\n        <!-- v2.2.0: Tag overflow indicator -->\n        @if (hiddenTagsCount() > 0) {\n          @if (collapsibleTags) {\n            <button\n              class=\"tags-toggle\"\n              (click)=\"toggleTagsExpanded()\"\n              [attr.aria-label]=\"tagsExpanded() ? showLessTagsText : showAllTagsText\"\n              type=\"button\"\n            >\n              {{ tagsExpanded() ? showLessTagsText : showAllTagsText }}\n            </button>\n          } @else {\n            <span class=\"tags-overflow-indicator\">\n              {{ getMoreTagsText() }}\n            </span>\n          }\n        }\n      } @else {\n        <!-- Single Select or Placeholder -->\n        <span class=\"placeholder\" [class.has-value]=\"selectedOptions().length > 0\">\n          {{displayText()}}\n        </span>\n      }\n    </div>\n\n    <!-- Actions (Clear, Loading, Arrow) -->\n    <div class=\"select-actions\">\n      @if (isLoading || isLoadingAsync()) {\n        <div class=\"spinner\"></div>\n      }\n      @if (isClearable && selectedOptions().length > 0 && !isDisabled && !isLoading && !isLoadingAsync()) {\n        <button\n          class=\"clear-button\"\n          (click)=\"clearSelection($event)\"\n          aria-label=\"Clear selection\"\n          type=\"button\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n            <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n          </svg>\n        </button>\n      }\n      <span class=\"separator\"></span>\n      <span class=\"arrow\" [class.open]=\"isOpen()\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n          <path d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"></path>\n        </svg>\n      </span>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      #menuRef\n      class=\"dropdown {{menuPlacement}}\"\n      [class.fixed]=\"menuPosition === 'fixed'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"isMulti\"\n      [@dropdown]\n    >\n      <!-- Search Input -->\n      @if (isSearchable) {\n        <div class=\"search-container\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"search-input\"\n            placeholder=\"Search...\"\n            [value]=\"searchTerm()\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n            aria-label=\"Search options\"\n            aria-autocomplete=\"list\"\n          />\n        </div>\n      }\n\n      <!-- Options List -->\n      <div\n        class=\"options-list\"\n        id=\"options-list\"\n        (scroll)=\"onOptionsScroll($event)\"\n      >\n        <!-- Max Selection Message -->\n        @if (isMaxSelectionReached()) {\n          <div class=\"info-message max-selection\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n            {{maxSelectedMessage}}\n          </div>\n        }\n\n        <!-- Min Search Length Message -->\n        @if (showMinSearchMessage()) {\n          <div class=\"info-message min-search\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n            {{minSearchMessage}} ({{searchTerm().length}}/{{minSearchLength}})\n          </div>\n        }\n\n        @if (isLoadingAsync()) {\n          <div class=\"loading-message\">{{loadingMessage()}}</div>\n        } @else if (displayOptions().length === 0 && !showMinSearchMessage()) {\n          <div class=\"no-options\">\n            {{searchTerm() ? emptySearchText : emptyStateText}}\n          </div>\n        } @else if (!showMinSearchMessage()) {\n          <!-- Select All (Multi-select only) -->\n          @if (isMulti && showSelectAll && !searchTerm()) {\n            <div class=\"select-all-container\">\n              <button\n                class=\"select-all-button\"\n                (click)=\"allOptionsSelected() ? deselectAll() : selectAll()\"\n                type=\"button\"\n              >\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"allOptionsSelected()\"\n                  [indeterminate]=\"someOptionsSelected()\"\n                  tabindex=\"-1\"\n                  aria-hidden=\"true\"\n                  readonly\n                />\n                <span class=\"select-all-text\">\n                  {{allOptionsSelected() ? deselectAllText : selectAllText}}\n                </span>\n                <span class=\"select-all-count\">\n                  ({{selectedOptions().length}}/{{getEnabledOptionsCount()}})\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Grouped Options -->\n          @if (isGrouped && groupedOptions()) {\n            @for (group of groupedOptions() | keyvalue; track trackByGroup($index, [$any(group.key), $any(group.value)])) {\n              <div class=\"option-group\">\n                <div class=\"option-group-label\">{{group.key}}</div>\n                @for (option of $any(group.value); track trackByValue($index, option); let idx = $index) {\n                  <div\n                    class=\"option\"\n                    [class.selected]=\"isSelected(option)\"\n                    [class.highlighted]=\"idx === highlightedIndex()\"\n                    [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                    [class.create-option]=\"option.__isCreate__\"\n                    (click)=\"selectOption(option)\"\n                    (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(option)\"\n                    [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    tabindex=\"-1\"\n                  >\n                    <!-- Checkbox for multi-select -->\n                    @if (isMulti) {\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"isSelected(option)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                        readonly\n                      />\n                    }\n\n                    <!-- Option Icon -->\n                    @if (showOptionIcons && option.icon) {\n                      <div class=\"option-icon\">\n                        @if (option.icon.includes('<')) {\n                          <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                        } @else {\n                          <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                        }\n                      </div>\n                    }\n\n                    <!-- Option Content -->\n                    <div class=\"option-content\">\n                      <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                      @if (option.description) {\n                        <div class=\"option-description\">{{option.description}}</div>\n                      }\n                    </div>\n\n                    <!-- Option Badge -->\n                    @if (showOptionBadges && option.badge) {\n                      <span\n                        class=\"option-badge\"\n                        [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                      >\n                        {{option.badge}}\n                      </span>\n                    }\n\n                    <!-- v2.1.0: Pin button -->\n                    @if (enablePinning) {\n                      <button\n                        class=\"pin-button\"\n                        [class.pinned]=\"isPinned(option)\"\n                        (click)=\"togglePin(option, $event)\"\n                        [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                        type=\"button\"\n                      >\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                          @if (isPinned(option)) {\n                            <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                          } @else {\n                            <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                          }\n                        </svg>\n                      </button>\n                    }\n\n                    <!-- Check Icon for selected -->\n                    @if (!isMulti && isSelected(option)) {\n                      <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                        <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                      </svg>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            <!-- v1.2.0: Recent Selections Header -->\n            @if (showRecentSelections && !searchTerm() && recentSelections().length > 0) {\n              <div class=\"section-header\">{{recentSelectionsLabel}}</div>\n            }\n\n            <!-- Regular (Ungrouped) Options - Virtual Scroll or Standard -->\n            @if (enableVirtualScroll) {\n              <!-- Virtual Scroll Mode -->\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize\"\n                [minBufferPx]=\"virtualScrollMinBufferPx\"\n                [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n                [style.height.px]=\"maxHeight\"\n                class=\"virtual-scroll-viewport\"\n              >\n                @for (option of (showRecentSelections ? displayOptionsWithRecent() : displayOptions()); track trackByValue($index, option); let idx = $index) {\n                  <div\n                    class=\"option\"\n                    [class.selected]=\"isSelected(option)\"\n                    [class.highlighted]=\"idx === highlightedIndex()\"\n                    [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                    [class.create-option]=\"option.__isCreate__\"\n                    [class.recent-option]=\"option.__isRecent__\"\n                    (click)=\"selectOption(option)\"\n                    (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                    (mouseenter)=\"showTooltip(option, idx)\"\n                    (mouseleave)=\"hideTooltip()\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(option)\"\n                    [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [attr.title]=\"showTooltips ? getTooltipContent(option) : null\"\n                    tabindex=\"-1\"\n                  >\n                    <!-- Custom Template or Default Rendering -->\n                    @if (optionTemplate) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, index: idx, selected: isSelected(option) }\"\n                      ></ng-container>\n                    } @else {\n                      <!-- Default Option Content (same as before) -->\n                      @if (isMulti) {\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isSelected(option)\"\n                          tabindex=\"-1\"\n                          aria-hidden=\"true\"\n                          readonly\n                        />\n                      }\n\n                      @if (showOptionIcons && option.icon) {\n                        <div class=\"option-icon\">\n                          @if (option.icon.includes('<')) {\n                            <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                          } @else {\n                            <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                          }\n                        </div>\n                      }\n\n                      <div class=\"option-content\">\n                        <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                        @if (option.description) {\n                          <div class=\"option-description\">{{option.description}}</div>\n                        }\n                      </div>\n\n                      @if (showOptionBadges && option.badge) {\n                        <span\n                          class=\"option-badge\"\n                          [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                        >\n                          {{option.badge}}\n                        </span>\n                      }\n\n                      <!-- v2.1.0: Pin button -->\n                      @if (enablePinning) {\n                        <button\n                          class=\"pin-button\"\n                          [class.pinned]=\"isPinned(option)\"\n                          (click)=\"togglePin(option, $event)\"\n                          [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                          type=\"button\"\n                        >\n                          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                            @if (isPinned(option)) {\n                              <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                            } @else {\n                              <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                            }\n                          </svg>\n                        </button>\n                      }\n\n                      @if (!isMulti && isSelected(option)) {\n                        <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                          <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                        </svg>\n                      }\n                    }\n                  </div>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <!-- Standard Rendering (Non-Virtual Scroll) -->\n              @for (option of (showRecentSelections ? displayOptionsWithRecent() : displayOptions()); track trackByValue($index, option); let idx = $index) {\n                <div\n                  class=\"option\"\n                  [class.selected]=\"isSelected(option)\"\n                  [class.highlighted]=\"idx === highlightedIndex()\"\n                  [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                  [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                  [class.create-option]=\"option.__isCreate__\"\n                  [class.recent-option]=\"option.__isRecent__\"\n                  (click)=\"selectOption(option)\"\n                  (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                  (mouseenter)=\"showTooltip(option, idx)\"\n                  (mouseleave)=\"hideTooltip()\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option)\"\n                  [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                  [attr.title]=\"showTooltips ? getTooltipContent(option) : null\"\n                  tabindex=\"-1\"\n                >\n                <!-- Custom Template or Default Rendering -->\n                @if (optionTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, index: idx, selected: isSelected(option) }\"\n                  ></ng-container>\n                } @else {\n                  <!-- Default Option Content -->\n                  @if (isMulti) {\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(option)\"\n                      tabindex=\"-1\"\n                      aria-hidden=\"true\"\n                      readonly\n                    />\n                  }\n\n                  @if (showOptionIcons && option.icon) {\n                    <div class=\"option-icon\">\n                      @if (option.icon.includes('<')) {\n                        <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                      } @else {\n                        <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                      }\n                    </div>\n                  }\n\n                  <div class=\"option-content\">\n                    <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                    @if (option.description) {\n                      <div class=\"option-description\">{{option.description}}</div>\n                    }\n                  </div>\n\n                  @if (showOptionBadges && option.badge) {\n                    <span\n                      class=\"option-badge\"\n                      [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                    >\n                      {{option.badge}}\n                    </span>\n                  }\n\n                  <!-- v2.1.0: Pin button -->\n                  @if (enablePinning) {\n                    <button\n                      class=\"pin-button\"\n                      [class.pinned]=\"isPinned(option)\"\n                      (click)=\"togglePin(option, $event)\"\n                      [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                      type=\"button\"\n                    >\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        @if (isPinned(option)) {\n                          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                        } @else {\n                          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                        }\n                      </svg>\n                    </button>\n                  }\n\n                  @if (!isMulti && isSelected(option)) {\n                    <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                      <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                    </svg>\n                  }\n                }\n              </div>\n            }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- v1.2.0: Validation Message -->\n  @if (validationMessage && validationState !== 'default') {\n    <div class=\"validation-message {{getValidationClass()}}\">\n      @if (showValidationIcon) {\n        <span class=\"validation-icon\">\n          @if (validationState === 'error') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n          } @else if (validationState === 'warning') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n          } @else if (validationState === 'success') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path d=\"M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm-1.707 13.707l-3.5-3.5 1.414-1.414L9 11.586l5.293-5.293 1.414 1.414-6.5 6.5z\"/>\n            </svg>\n          } @else if (validationState === 'info') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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-6h2v6zm0-8H9V5h2v2z\"/>\n            </svg>\n          }\n        </span>\n      }\n      <span class=\"validation-text\">{{validationMessage}}</span>\n    </div>\n  }\n</div>\n\n<!-- Hidden native select for form compatibility -->\n@if (isMulti) {\n  <select [name]=\"name\" [id]=\"id\" multiple style=\"display: none;\" [attr.aria-hidden]=\"true\">\n    @for (option of selectedOptions(); track trackByValue($index, option)) {\n      <option [value]=\"getOptionValue(option)\" selected>{{getOptionLabel(option)}}</option>\n    }\n  </select>\n} @else {\n  @if (selectedOptions().length > 0) {\n    <select [name]=\"name\" [id]=\"id\" style=\"display: none;\" [attr.aria-hidden]=\"true\">\n      <option [value]=\"getOptionValue(selectedOptions()[0])\" selected>{{getOptionLabel(selectedOptions()[0])}}</option>\n    </select>\n  }\n}\n", styles: [":host{display:block;width:100%}.select-container{position:relative;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.smaller{font-size:11px}.small{font-size:13px}.medium{font-size:14px}.large{font-size:16px}.larger{font-size:18px}.xs .select-trigger{min-height:28px;padding:4px 8px}.sm .select-trigger{min-height:32px;padding:6px 10px}.md .select-trigger{min-height:40px;padding:8px 12px}.lg .select-trigger{min-height:48px;padding:10px 14px}.xl .select-trigger{min-height:56px;padding:12px 16px}.select-container.disabled{opacity:.6;cursor:not-allowed}.select-container.rtl{direction:rtl}.select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#fff;border:1.5px solid #D1D5DB;border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:38px;gap:8px;box-shadow:0 1px 2px #0000000d}.select-trigger:hover:not(.disabled){border-color:#9ca3af;box-shadow:0 2px 4px #00000014}.select-trigger:focus,.select-trigger.focused{outline:none;border-color:#2684ff;box-shadow:0 0 0 3px #2684ff1a,0 1px 2px #0000000d}.select-trigger.open{border-color:#2684ff;box-shadow:0 0 0 3px #2684ff1a,0 1px 2px #0000000d}.select-value{flex:1;display:flex;align-items:center;min-width:0;gap:4px}.placeholder{color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.placeholder.has-value{color:#333}.tags{display:flex;flex-wrap:wrap;gap:4px;flex:1}.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#e6f2ff;color:#0052cc;border-radius:6px;font-size:.875em;font-weight:500;white-space:nowrap;border:1px solid #CCE0FF;box-shadow:0 1px 2px #0000000d}.tag.disabled{background:#f0f0f0;color:#666;border-color:#d9d9d9}.tag-label{line-height:1.2}.tag-remove{background:none;border:none;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:all .15s}.tag-remove:hover{background:#0052cc26}.tag-remove svg{fill:currentColor}.tags.dragging .tag{cursor:move}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:move;padding:0;margin-left:-4px;opacity:.5;transition:opacity .15s}.drag-handle svg{fill:currentColor}.drag-handle:hover{opacity:.8}.cdk-drag-preview{box-shadow:0 5px 15px #0003;opacity:.8}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:#0052cc1a;border:2px dashed var(--ps-primary, #0052cc);border-radius:6px;padding:4px 8px;min-height:28px;display:flex;align-items:center;justify-content:center;color:var(--ps-primary, #0052cc);font-size:.75em;opacity:.6}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.tags-toggle{background:none;border:none;color:var(--ps-primary, #0052cc);cursor:pointer;font-size:.875em;font-weight:500;padding:4px 8px;border-radius:4px;transition:all .15s;white-space:nowrap}.tags-toggle:hover{background:#0052cc1a;text-decoration:underline}.tags-toggle:focus{outline:2px solid var(--ps-primary, #0052cc);outline-offset:2px}.tags-overflow-indicator{display:inline-flex;align-items:center;padding:4px 8px;background:#f3f4f6;color:#6b7280;border-radius:6px;font-size:.875em;font-weight:500;white-space:nowrap;border:1px solid #d1d5db}.option-label mark{background-color:#ffeb3b;color:#000;padding:0 2px;border-radius:2px;font-weight:600}.select-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.clear-button{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s}.clear-button:hover{color:#333;background:#f0f0f0}.clear-button svg{fill:currentColor}.separator{width:1px;height:24px;background:#ccc;align-self:stretch}.arrow{color:#999;transition:transform .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;padding:4px}.arrow svg{fill:currentColor}.arrow.open{transform:rotate(180deg)}.spinner{width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #2684FF;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fffffffa;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d;z-index:1000;overflow:hidden;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%)}.dropdown.fixed{position:fixed}.dropdown.top{top:auto;bottom:calc(100% + 4px)}.search-container{padding:8px;border-bottom:1px solid #f0f0f0;background:#fff}.search-input{width:100%;padding:6px 8px;border:1px solid #cccccc;border-radius:3px;font-size:inherit;outline:none;transition:border-color .15s}.search-input:focus{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.options-list{max-height:inherit;overflow-y:auto;overflow-x:hidden;padding:4px 0}.options-list::-webkit-scrollbar{width:8px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:4px}.options-list::-webkit-scrollbar-thumb:hover{background:#b3b3b3}.select-all-container{padding:8px;border-bottom:1px solid #E5E7EB;background:#f9fafb}.select-all-button{width:100%;display:flex;align-items:center;gap:8px;padding:6px 8px;background:#fff;border:1px solid #D1D5DB;border-radius:6px;cursor:pointer;transition:all .15s;font-size:inherit;color:inherit;font-family:inherit}.select-all-button:hover{background:#f3f4f6;border-color:#9ca3af}.select-all-button input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:#2684FF}.select-all-text{flex:1;text-align:left;font-weight:500}.select-all-count{color:#6b7280;font-size:.9em}.option-group{margin:4px 0}.option-group-label{padding:8px 12px 4px;font-size:.75em;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;background:#f9fafb;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:1}.option-group .option{padding-left:20px}.option{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;min-height:40px}.option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.option-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#f3f4f6}.option-icon img{width:100%;height:100%;object-fit:cover}.option-badge{padding:2px 8px;border-radius:12px;font-size:.75em;font-weight:500;color:#374151;background:#e5e7eb;flex-shrink:0;white-space:nowrap}.option:hover:not(.disabled):not(.create-option){background:#deebff}.option.highlighted{background:#deebff}.option.selected:not(.create-option){background:#e6f2ff;font-weight:500}.option.disabled{opacity:.5;cursor:not-allowed;background:transparent!important}.option.hidden{display:none}.option.create-option{color:#2684ff;font-weight:500;background:#f0f6ff}.option.create-option:hover{background:#e6f2ff}.option input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:#2684FF}.option-label{font-weight:500;color:#1f2937;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.option-description{font-size:.875em;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.check-icon{color:#2684ff;display:flex;align-items:center;margin-left:auto}.check-icon svg{fill:currentColor}.pin-button{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s;margin-left:auto;opacity:.5}.pin-button svg{fill:currentColor}.pin-button:hover{opacity:1;background:#0000000d}.pin-button.pinned{color:var(--ps-primary, #0052cc);opacity:1}.option.pinned-option{background:#0052cc0d;border-left:3px solid var(--ps-primary, #0052cc);padding-left:9px}.no-options,.loading-message{padding:16px 12px;text-align:center;color:#999;font-size:.95em}.info-message{padding:12px;margin:8px;border-radius:6px;font-size:.9em;display:flex;align-items:center;gap:8px}.info-message.max-selection{background:#fff4e5;color:#f57c00;border:1px solid #FFE0B2}.info-message.min-search{background:#e3f2fd;color:#1976d2;border:1px solid #BBDEFB}.info-message svg{flex-shrink:0}.rtl .select-actions,.rtl .tags,.rtl .option{flex-direction:row-reverse}.theme-blue .select-trigger:focus,.theme-blue .select-trigger.focused,.theme-blue .select-trigger.open{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.theme-blue .option:hover:not(.disabled):not(.create-option),.theme-blue .option.highlighted{background:#deebff}.theme-blue .option.selected:not(.create-option){background:#e6f2ff}.theme-blue .tag{background:#e6f2ff;color:#0052cc;border-color:#cce0ff}.theme-blue .check-icon,.theme-blue .option.create-option{color:#2684ff}.theme-blue .spinner{border-top-color:#2684ff}.theme-blue .search-input:focus{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.theme-purple .select-trigger:focus,.theme-purple .select-trigger.focused,.theme-purple .select-trigger.open{border-color:#9333ea;box-shadow:0 0 0 1px #9333ea}.theme-purple .option:hover:not(.disabled):not(.create-option),.theme-purple .option.highlighted{background:#f3e8ff}.theme-purple .option.selected:not(.create-option){background:#faf5ff}.theme-purple .tag{background:#faf5ff;color:#7e22ce;border-color:#e9d5ff}.theme-purple .check-icon,.theme-purple .option.create-option{color:#9333ea}.theme-purple .spinner{border-top-color:#9333ea}.theme-purple .search-input:focus{border-color:#9333ea;box-shadow:0 0 0 1px #9333ea}.theme-green .select-trigger:focus,.theme-green .select-trigger.focused,.theme-green .select-trigger.open{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.theme-green .option:hover:not(.disabled):not(.create-option),.theme-green .option.highlighted{background:#d1fae5}.theme-green .option.selected:not(.create-option){background:#ecfdf5}.theme-green .tag{background:#ecfdf5;color:#059669;border-color:#a7f3d0}.theme-green .check-icon,.theme-green .option.create-option{color:#10b981}.theme-green .spinner{border-top-color:#10b981}.theme-green .search-input:focus{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.theme-red .select-trigger:focus,.theme-red .select-trigger.focused,.theme-red .select-trigger.open{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.theme-red .option:hover:not(.disabled):not(.create-option),.theme-red .option.highlighted{background:#fee2e2}.theme-red .option.selected:not(.create-option){background:#fef2f2}.theme-red .tag{background:#fef2f2;color:#dc2626;border-color:#fecaca}.theme-red .check-icon,.theme-red .option.create-option{color:#ef4444}.theme-red .spinner{border-top-color:#ef4444}.theme-red .search-input:focus{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.theme-orange .select-trigger:focus,.theme-orange .select-trigger.focused,.theme-orange .select-trigger.open{border-color:#f97316;box-shadow:0 0 0 1px #f97316}.theme-orange .option:hover:not(.disabled):not(.create-option),.theme-orange .option.highlighted{background:#ffedd5}.theme-orange .option.selected:not(.create-option){background:#fff7ed}.theme-orange .tag{background:#fff7ed;color:#ea580c;border-color:#fed7aa}.theme-orange .check-icon,.theme-orange .option.create-option{color:#f97316}.theme-orange .spinner{border-top-color:#f97316}.theme-orange .search-input:focus{border-color:#f97316;box-shadow:0 0 0 1px #f97316}.theme-pink .select-trigger:focus,.theme-pink .select-trigger.focused,.theme-pink .select-trigger.open{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899}.theme-pink .option:hover:not(.disabled):not(.create-option),.theme-pink .option.highlighted{background:#fce7f3}.theme-pink .option.selected:not(.create-option){background:#fdf2f8}.theme-pink .tag{background:#fdf2f8;color:#db2777;border-color:#fbcfe8}.theme-pink .check-icon,.theme-pink .option.create-option{color:#ec4899}.theme-pink .spinner{border-top-color:#ec4899}.theme-pink .search-input:focus{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899}.theme-dark .select-trigger:focus,.theme-dark .select-trigger.focused,.theme-dark .select-trigger.open{border-color:#1f2937;box-shadow:0 0 0 1px #1f2937}.theme-dark .option:hover:not(.disabled):not(.create-option),.theme-dark .option.highlighted{background:#e5e7eb}.theme-dark .option.selected:not(.create-option){background:#f3f4f6}.theme-dark .tag{background:#f3f4f6;color:#111827;border-color:#d1d5db}.theme-dark .check-icon,.theme-dark .option.create-option{color:#1f2937}.theme-dark .spinner{border-top-color:#1f2937}.theme-dark .search-input:focus{border-color:#1f2937;box-shadow:0 0 0 1px #1f2937}.select-container.has-validation .select-trigger{transition:all .2s cubic-bezier(.4,0,.2,1)}.select-container.validation-error .select-trigger{border-color:#ef4444!important}.select-container.validation-error .select-trigger:focus,.select-container.validation-error .select-trigger.focused,.select-container.validation-error .select-trigger.open{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441a,0 1px 2px #0000000d}.select-container.validation-warning .select-trigger{border-color:#f59e0b!important}.select-container.validation-warning .select-trigger:focus,.select-container.validation-warning .select-trigger.focused,.select-container.validation-warning .select-trigger.open{border-color:#f59e0b!important;box-shadow:0 0 0 3px #f59e0b1a,0 1px 2px #0000000d}.select-container.validation-success .select-trigger{border-color:#10b981!important}.select-container.validation-success .select-trigger:focus,.select-container.validation-success .select-trigger.focused,.select-container.validation-success .select-trigger.open{border-color:#10b981!important;box-shadow:0 0 0 3px #10b9811a,0 1px 2px #0000000d}.select-container.validation-info .select-trigger{border-color:#3b82f6!important}.select-container.validation-info .select-trigger:focus,.select-container.validation-info .select-trigger.focused,.select-container.validation-info .select-trigger.open{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a,0 1px 2px #0000000d}.validation-message{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;line-height:1.4;padding:4px 8px;border-radius:6px;transition:all .2s ease}.validation-message .validation-icon{display:flex;align-items:center;flex-shrink:0}.validation-message .validation-icon svg{display:block}.validation-message .validation-text{flex:1}.validation-message.validation-error{color:#dc2626;background:#fef2f2;border-left:3px solid #EF4444}.validation-message.validation-warning{color:#d97706;background:#fffbeb;border-left:3px solid #F59E0B}.validation-message.validation-success{color:#059669;background:#f0fdf4;border-left:3px solid #10B981}.validation-message.validation-info{color:#2563eb;background:#eff6ff;border-left:3px solid #3B82F6}.option.recent-option{position:relative;background:#fafbfc}.option.recent-option:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,#2684ff,#0052cc);border-radius:0 3px 3px 0}.option.recent-option:hover:not(.disabled){background:#f4f5f7!important}.option.recent-option.selected{background:#e6f2ff!important}.option.recent-option.selected:hover:not(.disabled){background:#d4e8ff!important}.section-header{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#6b7280;background:#f9fafb;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:2}.virtual-scroll-viewport{width:100%}.virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{width:100%}.virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-spacer{display:none}.virtual-scroll-viewport .option{width:100%;box-sizing:border-box}@keyframes copyFlash{0%,to{background:transparent}50%{background:#2684ff1a}}.select-container.copying{animation:copyFlash .5s ease}.options-list.scrolling{position:relative}.options-list.scrolling:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:20px;height:20px;border:2px solid #E5E7EB;border-top-color:#2684ff;border-radius:50%;animation:spin .8s linear infinite}.option[title]{cursor:help}.option.highlighted{position:relative}.option.highlighted:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:2px;background:#2684ff}@keyframes typeAheadPulse{0%,to{opacity:1}50%{opacity:.7}}.options-list.type-ahead-active .option.highlighted{animation:typeAheadPulse 1s ease-in-out}.select-container:focus-visible{outline:2px solid #2684FF;outline-offset:2px}@media (prefers-contrast: high){.select-trigger{border-width:2px}.option.highlighted{outline:2px solid currentColor;outline-offset:-2px}.validation-message{border-width:2px}}@media (prefers-reduced-motion: reduce){.select-trigger,.option,.tag,.dropdown,.validation-message{transition:none!important;animation:none!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { options: [{
+                        }], template: "<div\n  #selectContainer\n  class=\"select-container {{selectSize}} {{containerSize}} theme-{{resolvedTheme()}} {{getValidationClass()}}\"\n  [class.disabled]=\"isDisabled\"\n  [class.rtl]=\"isRtl\"\n  [class.has-validation]=\"validationState !== 'default'\"\n  [class.compact]=\"compactMode\"\n  [class.dark-mode]=\"isDarkMode()\"\n  (clickOutside)=\"onClickOutside()\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-controls]=\"'options-list'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-invalid]=\"validationState === 'error'\"\n  (focus)=\"openMenuOnFocus && !isOpen() && toggleDropdown(); focus.emit()\"\n  [style]=\"customStyles.container || ''\"\n>\n  <!-- v2.3.0: Bulk Actions Bar (Above Position) -->\n  @if (enableBulkActions && hasBulkActions() && bulkActionsPosition === 'above') {\n    <div class=\"bulk-actions position-above\">\n      <span class=\"bulk-label\">{{bulkActionsLabel}}</span>\n      <div class=\"bulk-buttons\">\n        @for (action of bulkActions; track action.id) {\n          <button\n            class=\"bulk-action-btn\"\n            [disabled]=\"action.disabled || selectedOptions().length === 0\"\n            (click)=\"executeBulkAction(action)\"\n            [attr.aria-label]=\"action.label\"\n            type=\"button\"\n          >\n            @if (action.icon) {\n              <img [src]=\"action.icon\" alt=\"\" class=\"action-icon\" />\n            }\n            <span>{{action.label}}</span>\n          </button>\n        }\n      </div>\n    </div>\n  }\n  <!-- Main Select Trigger -->\n  <div\n    class=\"select-trigger\"\n    [class.open]=\"isOpen()\"\n    [class.focused]=\"isOpen()\"\n    (click)=\"openMenuOnClick && toggleDropdown()\"\n    [attr.tabindex]=\"isDisabled ? -1 : 0\"\n    role=\"button\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-label]=\"placeholder\"\n  >\n    <!-- Selected Value Display -->\n    <div class=\"select-value\">\n      <!-- Multi-select Tags -->\n      @if (isMulti && selectedOptions().length > 0) {\n        <!-- v2.1.0: Drag-drop enabled tags -->\n        @if (enableDragDrop) {\n          <div class=\"tags\" cdkDropList cdkDropListOrientation=\"horizontal\" (cdkDropListDropped)=\"onTagsReorder($event)\" [class.dragging]=\"isDragging()\">\n            @for (option of visibleTags(); track trackByValue($index, option)) {\n              <span class=\"tag\" [class.disabled]=\"isDisabled\" cdkDrag (cdkDragStarted)=\"onDragStart()\" (cdkDragEnded)=\"onDragEnd()\" [@tag]>\n                <div class=\"drag-handle\" cdkDragHandle>\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <path d=\"M9 3h2v2H9V3zm0 4h2v2H9V7zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm0 4h2v2H9v-2zm4-16h2v2h-2V3zm0 4h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z\"/>\n                  </svg>\n                </div>\n                <span class=\"tag-label\">{{getOptionLabel(option)}}</span>\n                @if (!isDisabled) {\n                  <button\n                    class=\"tag-remove\"\n                    (click)=\"removeOption(option, $event)\"\n                    [attr.aria-label]=\"'Remove ' + getOptionLabel(option)\"\n                    type=\"button\"\n                  >\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                      <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n                    </svg>\n                  </button>\n                }\n                <div *cdkDragPlaceholder class=\"drag-placeholder\">{{dragDropPlaceholder}}</div>\n              </span>\n            }\n          </div>\n        } @else {\n          <div class=\"tags\">\n            @for (option of visibleTags(); track trackByValue($index, option)) {\n              <span class=\"tag\" [class.disabled]=\"isDisabled\" [@tag]>\n                <span class=\"tag-label\">{{getOptionLabel(option)}}</span>\n                @if (!isDisabled) {\n                  <button\n                    class=\"tag-remove\"\n                    (click)=\"removeOption(option, $event)\"\n                    [attr.aria-label]=\"'Remove ' + getOptionLabel(option)\"\n                    type=\"button\"\n                  >\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 20 20\">\n                      <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n                    </svg>\n                  </button>\n                }\n              </span>\n            }\n          </div>\n        }\n\n        <!-- v2.2.0: Tag overflow indicator -->\n        @if (hiddenTagsCount() > 0) {\n          @if (collapsibleTags) {\n            <button\n              class=\"tags-toggle\"\n              (click)=\"toggleTagsExpanded()\"\n              [attr.aria-label]=\"tagsExpanded() ? showLessTagsText : showAllTagsText\"\n              type=\"button\"\n            >\n              {{ tagsExpanded() ? showLessTagsText : showAllTagsText }}\n            </button>\n          } @else {\n            <span class=\"tags-overflow-indicator\">\n              {{ getMoreTagsText() }}\n            </span>\n          }\n        }\n      } @else {\n        <!-- Single Select or Placeholder -->\n        <span class=\"placeholder\" [class.has-value]=\"selectedOptions().length > 0\">\n          {{displayText()}}\n        </span>\n      }\n    </div>\n\n    <!-- Actions (Clear, Loading, Arrow) -->\n    <div class=\"select-actions\">\n      @if (isLoading || isLoadingAsync()) {\n        <div class=\"spinner\"></div>\n      }\n      @if (isClearable && selectedOptions().length > 0 && !isDisabled && !isLoading && !isLoadingAsync()) {\n        <button\n          class=\"clear-button\"\n          (click)=\"clearSelection($event)\"\n          aria-label=\"Clear selection\"\n          type=\"button\"\n        >\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n            <path d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"></path>\n          </svg>\n        </button>\n      }\n      <span class=\"separator\"></span>\n      <span class=\"arrow\" [class.open]=\"isOpen()\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\">\n          <path d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"></path>\n        </svg>\n      </span>\n    </div>\n  </div>\n\n  <!-- Dropdown Menu -->\n  @if (isOpen()) {\n    <div\n      #menuRef\n      class=\"dropdown {{menuPlacement}}\"\n      [class.fixed]=\"menuPosition === 'fixed'\"\n      [style.max-height]=\"maxHeight\"\n      role=\"listbox\"\n      [attr.aria-multiselectable]=\"isMulti\"\n      [@dropdown]\n    >\n      <!-- Search Input -->\n      @if (isSearchable) {\n        <div class=\"search-container\">\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"search-input\"\n            placeholder=\"Search...\"\n            [value]=\"searchTerm()\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            (click)=\"$event.stopPropagation()\"\n            aria-label=\"Search options\"\n            aria-autocomplete=\"list\"\n          />\n        </div>\n      }\n\n      <!-- Options List -->\n      <div\n        class=\"options-list\"\n        id=\"options-list\"\n        (scroll)=\"onOptionsScroll($event)\"\n      >\n        <!-- Max Selection Message -->\n        @if (isMaxSelectionReached()) {\n          <div class=\"info-message max-selection\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n            {{maxSelectedMessage}}\n          </div>\n        }\n\n        <!-- Min Search Length Message -->\n        @if (showMinSearchMessage()) {\n          <div class=\"info-message min-search\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n            {{minSearchMessage}} ({{searchTerm().length}}/{{minSearchLength}})\n          </div>\n        }\n\n        @if (isLoadingAsync()) {\n          <div class=\"loading-message\">{{loadingMessage()}}</div>\n        } @else if (displayOptions().length === 0 && !showMinSearchMessage()) {\n          <div class=\"no-options\">\n            {{searchTerm() ? emptySearchText : emptyStateText}}\n          </div>\n        } @else if (!showMinSearchMessage()) {\n          <!-- Select All (Multi-select only) -->\n          @if (isMulti && showSelectAll && !searchTerm()) {\n            <div class=\"select-all-container\">\n              <button\n                class=\"select-all-button\"\n                (click)=\"allOptionsSelected() ? deselectAll() : selectAll()\"\n                type=\"button\"\n              >\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"allOptionsSelected()\"\n                  [indeterminate]=\"someOptionsSelected()\"\n                  tabindex=\"-1\"\n                  aria-hidden=\"true\"\n                  readonly\n                />\n                <span class=\"select-all-text\">\n                  {{allOptionsSelected() ? deselectAllText : selectAllText}}\n                </span>\n                <span class=\"select-all-count\">\n                  ({{selectedOptions().length}}/{{getEnabledOptionsCount()}})\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Grouped Options -->\n          @if (isGrouped && groupedOptions()) {\n            @for (group of groupedOptions() | keyvalue; track trackByGroup($index, [$any(group.key), $any(group.value)])) {\n              <div class=\"option-group\">\n                <div class=\"option-group-label\">{{group.key}}</div>\n                @for (option of $any(group.value); track trackByValue($index, option); let idx = $index) {\n                  <div\n                    class=\"option\"\n                    [class.selected]=\"isSelected(option)\"\n                    [class.highlighted]=\"idx === highlightedIndex()\"\n                    [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                    [class.create-option]=\"option.__isCreate__\"\n                    (click)=\"selectOption(option)\"\n                    (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(option)\"\n                    [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    tabindex=\"-1\"\n                  >\n                    <!-- Checkbox for multi-select -->\n                    @if (isMulti) {\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"isSelected(option)\"\n                        tabindex=\"-1\"\n                        aria-hidden=\"true\"\n                        readonly\n                      />\n                    }\n\n                    <!-- Option Icon -->\n                    @if (showOptionIcons && option.icon) {\n                      <div class=\"option-icon\">\n                        @if (option.icon.includes('<')) {\n                          <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                        } @else {\n                          <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                        }\n                      </div>\n                    }\n\n                    <!-- Option Content -->\n                    <div class=\"option-content\">\n                      <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                      @if (option.description) {\n                        <div class=\"option-description\">{{option.description}}</div>\n                      }\n                    </div>\n\n                    <!-- Option Badge -->\n                    @if (showOptionBadges && option.badge) {\n                      <span\n                        class=\"option-badge\"\n                        [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                      >\n                        {{option.badge}}\n                      </span>\n                    }\n\n                    <!-- v2.1.0: Pin button -->\n                    @if (enablePinning) {\n                      <button\n                        class=\"pin-button\"\n                        [class.pinned]=\"isPinned(option)\"\n                        (click)=\"togglePin(option, $event)\"\n                        [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                        type=\"button\"\n                      >\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                          @if (isPinned(option)) {\n                            <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                          } @else {\n                            <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                          }\n                        </svg>\n                      </button>\n                    }\n\n                    <!-- Check Icon for selected -->\n                    @if (!isMulti && isSelected(option)) {\n                      <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                        <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                      </svg>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            <!-- v1.2.0: Recent Selections Header -->\n            @if (showRecentSelections && !searchTerm() && recentSelections().length > 0) {\n              <div class=\"section-header\">{{recentSelectionsLabel}}</div>\n            }\n\n            <!-- Regular (Ungrouped) Options - Virtual Scroll or Standard -->\n            @if (enableVirtualScroll) {\n              <!-- Virtual Scroll Mode -->\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize\"\n                [minBufferPx]=\"virtualScrollMinBufferPx\"\n                [maxBufferPx]=\"virtualScrollMaxBufferPx\"\n                [style.height.px]=\"maxHeight\"\n                class=\"virtual-scroll-viewport\"\n              >\n                @for (option of (showRecentSelections ? displayOptionsWithRecent() : displayOptions()); track trackByValue($index, option); let idx = $index) {\n                  <div\n                    class=\"option\"\n                    [class.selected]=\"isSelected(option)\"\n                    [class.highlighted]=\"idx === highlightedIndex()\"\n                    [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                    [class.create-option]=\"option.__isCreate__\"\n                    [class.recent-option]=\"option.__isRecent__\"\n                    (click)=\"selectOption(option)\"\n                    (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                    (mouseenter)=\"showTooltip(option, idx)\"\n                    (mouseleave)=\"hideTooltip()\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(option)\"\n                    [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                    [attr.title]=\"showTooltips ? getTooltipContent(option) : null\"\n                    tabindex=\"-1\"\n                  >\n                    <!-- Custom Template or Default Rendering -->\n                    @if (optionTemplate) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, index: idx, selected: isSelected(option) }\"\n                      ></ng-container>\n                    } @else {\n                      <!-- Default Option Content (same as before) -->\n                      @if (isMulti) {\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isSelected(option)\"\n                          tabindex=\"-1\"\n                          aria-hidden=\"true\"\n                          readonly\n                        />\n                      }\n\n                      @if (showOptionIcons && option.icon) {\n                        <div class=\"option-icon\">\n                          @if (option.icon.includes('<')) {\n                            <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                          } @else {\n                            <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                          }\n                        </div>\n                      }\n\n                      <div class=\"option-content\">\n                        <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                        @if (option.description) {\n                          <div class=\"option-description\">{{option.description}}</div>\n                        }\n                      </div>\n\n                      @if (showOptionBadges && option.badge) {\n                        <span\n                          class=\"option-badge\"\n                          [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                        >\n                          {{option.badge}}\n                        </span>\n                      }\n\n                      <!-- v2.1.0: Pin button -->\n                      @if (enablePinning) {\n                        <button\n                          class=\"pin-button\"\n                          [class.pinned]=\"isPinned(option)\"\n                          (click)=\"togglePin(option, $event)\"\n                          [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                          type=\"button\"\n                        >\n                          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                            @if (isPinned(option)) {\n                              <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                            } @else {\n                              <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                            }\n                          </svg>\n                        </button>\n                      }\n\n                      @if (!isMulti && isSelected(option)) {\n                        <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                          <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                        </svg>\n                      }\n                    }\n                  </div>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <!-- Standard Rendering (Non-Virtual Scroll) -->\n              @for (option of (showRecentSelections ? displayOptionsWithRecent() : displayOptions()); track trackByValue($index, option); let idx = $index) {\n                <div\n                  class=\"option\"\n                  [class.selected]=\"isSelected(option)\"\n                  [class.highlighted]=\"idx === highlightedIndex()\"\n                  [class.disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                  [class.hidden]=\"hideSelectedOptions && isSelected(option)\"\n                  [class.create-option]=\"option.__isCreate__\"\n                  [class.recent-option]=\"option.__isRecent__\"\n                  (click)=\"selectOption(option)\"\n                  (keydown)=\"$event.key === 'Enter' && selectOption(option)\"\n                  (mouseenter)=\"showTooltip(option, idx)\"\n                  (mouseleave)=\"hideTooltip()\"\n                  role=\"option\"\n                  [attr.aria-selected]=\"isSelected(option)\"\n                  [attr.aria-disabled]=\"isOptionDisabled(option) || (isMaxSelectionReached() && !isSelected(option))\"\n                  [attr.title]=\"showTooltips ? getTooltipContent(option) : null\"\n                  tabindex=\"-1\"\n                >\n                <!-- Custom Template or Default Rendering -->\n                @if (optionTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option, index: idx, selected: isSelected(option) }\"\n                  ></ng-container>\n                } @else {\n                  <!-- Default Option Content -->\n                  @if (isMulti) {\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(option)\"\n                      tabindex=\"-1\"\n                      aria-hidden=\"true\"\n                      readonly\n                    />\n                  }\n\n                  @if (showOptionIcons && option.icon) {\n                    <div class=\"option-icon\">\n                      @if (option.icon.includes('<')) {\n                        <div [innerHTML]=\"sanitizeHtml(option.icon)\"></div>\n                      } @else {\n                        <img [src]=\"option.icon\" [alt]=\"getOptionLabel(option)\" />\n                      }\n                    </div>\n                  }\n\n                  <div class=\"option-content\">\n                    <div class=\"option-label\" [innerHTML]=\"highlightSearchTerm(getOptionLabel(option))\"></div>\n                    @if (option.description) {\n                      <div class=\"option-description\">{{option.description}}</div>\n                    }\n                  </div>\n\n                  @if (showOptionBadges && option.badge) {\n                    <span\n                      class=\"option-badge\"\n                      [style.background-color]=\"option.badgeColor || currentTheme().primary\"\n                    >\n                      {{option.badge}}\n                    </span>\n                  }\n\n                  <!-- v2.1.0: Pin button -->\n                  @if (enablePinning) {\n                    <button\n                      class=\"pin-button\"\n                      [class.pinned]=\"isPinned(option)\"\n                      (click)=\"togglePin(option, $event)\"\n                      [attr.aria-label]=\"isPinned(option) ? 'Unpin option' : 'Pin option'\"\n                      type=\"button\"\n                    >\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        @if (isPinned(option)) {\n                          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z\"/>\n                        } @else {\n                          <path d=\"M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12M8.8,14L10,12.8V4H14V12.8L15.2,14H8.8Z\"/>\n                        }\n                      </svg>\n                    </button>\n                  }\n\n                  @if (!isMulti && isSelected(option)) {\n                    <svg class=\"check-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 20 20\">\n                      <path d=\"M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z\"></path>\n                    </svg>\n                  }\n                }\n              </div>\n            }\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n\n  <!-- v1.2.0: Validation Message -->\n  @if (validationMessage && validationState !== 'default') {\n    <div class=\"validation-message {{getValidationClass()}}\">\n      @if (showValidationIcon) {\n        <span class=\"validation-icon\">\n          @if (validationState === 'error') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n          } @else if (validationState === 'warning') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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\"/>\n            </svg>\n          } @else if (validationState === 'success') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path d=\"M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm-1.707 13.707l-3.5-3.5 1.414-1.414L9 11.586l5.293-5.293 1.414 1.414-6.5 6.5z\"/>\n            </svg>\n          } @else if (validationState === 'info') {\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <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-6h2v6zm0-8H9V5h2v2z\"/>\n            </svg>\n          }\n        </span>\n      }\n      <span class=\"validation-text\">{{validationMessage}}</span>\n    </div>\n  }\n</div>\n\n<!-- Hidden native select for form compatibility -->\n@if (isMulti) {\n  <select [name]=\"name\" [id]=\"id\" multiple style=\"display: none;\" [attr.aria-hidden]=\"true\">\n    @for (option of selectedOptions(); track trackByValue($index, option)) {\n      <option [value]=\"getOptionValue(option)\" selected>{{getOptionLabel(option)}}</option>\n    }\n  </select>\n} @else {\n  @if (selectedOptions().length > 0) {\n    <select [name]=\"name\" [id]=\"id\" style=\"display: none;\" [attr.aria-hidden]=\"true\">\n      <option [value]=\"getOptionValue(selectedOptions()[0])\" selected>{{getOptionLabel(selectedOptions()[0])}}</option>\n    </select>\n  }\n}\n", styles: [":host{display:block;width:100%}.select-container{position:relative;width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.smaller{font-size:11px}.small{font-size:13px}.medium{font-size:14px}.large{font-size:16px}.larger{font-size:18px}.xs .select-trigger{min-height:28px;padding:4px 8px}.sm .select-trigger{min-height:32px;padding:6px 10px}.md .select-trigger{min-height:40px;padding:8px 12px}.lg .select-trigger{min-height:48px;padding:10px 14px}.xl .select-trigger{min-height:56px;padding:12px 16px}.select-container.disabled{opacity:.6;cursor:not-allowed}.select-container.rtl{direction:rtl}.select-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#fff;border:1.5px solid #D1D5DB;border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:38px;gap:8px;box-shadow:0 1px 2px #0000000d}.select-trigger:hover:not(.disabled){border-color:#9ca3af;box-shadow:0 2px 4px #00000014}.select-trigger:focus,.select-trigger.focused{outline:none;border-color:#2684ff;box-shadow:0 0 0 3px #2684ff1a,0 1px 2px #0000000d}.select-trigger.open{border-color:#2684ff;box-shadow:0 0 0 3px #2684ff1a,0 1px 2px #0000000d}.select-value{flex:1;display:flex;align-items:center;min-width:0;gap:4px}.placeholder{color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.placeholder.has-value{color:#333}.tags{display:flex;flex-wrap:wrap;gap:4px;flex:1}.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#e6f2ff;color:#0052cc;border-radius:6px;font-size:.875em;font-weight:500;white-space:nowrap;border:1px solid #CCE0FF;box-shadow:0 1px 2px #0000000d}.tag.disabled{background:#f0f0f0;color:#666;border-color:#d9d9d9}.tag-label{line-height:1.2}.tag-remove{background:none;border:none;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:all .15s}.tag-remove:hover{background:#0052cc26}.tag-remove svg{fill:currentColor}.tags.dragging .tag{cursor:move}.drag-handle{display:flex;align-items:center;justify-content:center;cursor:move;padding:0;margin-left:-4px;opacity:.5;transition:opacity .15s}.drag-handle svg{fill:currentColor}.drag-handle:hover{opacity:.8}.cdk-drag-preview{box-shadow:0 5px 15px #0003;opacity:.8}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:#0052cc1a;border:2px dashed var(--ps-primary, #0052cc);border-radius:6px;padding:4px 8px;min-height:28px;display:flex;align-items:center;justify-content:center;color:var(--ps-primary, #0052cc);font-size:.75em;opacity:.6}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.tags-toggle{background:none;border:none;color:var(--ps-primary, #0052cc);cursor:pointer;font-size:.875em;font-weight:500;padding:4px 8px;border-radius:4px;transition:all .15s;white-space:nowrap}.tags-toggle:hover{background:#0052cc1a;text-decoration:underline}.tags-toggle:focus{outline:2px solid var(--ps-primary, #0052cc);outline-offset:2px}.tags-overflow-indicator{display:inline-flex;align-items:center;padding:4px 8px;background:#f3f4f6;color:#6b7280;border-radius:6px;font-size:.875em;font-weight:500;white-space:nowrap;border:1px solid #d1d5db}.option-label mark{background-color:#ffeb3b;color:#000;padding:0 2px;border-radius:2px;font-weight:600}.select-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.clear-button{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s}.clear-button:hover{color:#333;background:#f0f0f0}.clear-button svg{fill:currentColor}.separator{width:1px;height:24px;background:#ccc;align-self:stretch}.arrow{color:#999;transition:transform .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;padding:4px}.arrow svg{fill:currentColor}.arrow.open{transform:rotate(180deg)}.spinner{width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #2684FF;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fffffffa;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a,0 0 0 1px #0000000d;z-index:1000;overflow:hidden;backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%)}.dropdown.fixed{position:fixed}.dropdown.top{top:auto;bottom:calc(100% + 4px)}.search-container{padding:8px;border-bottom:1px solid #f0f0f0;background:#fff}.search-input{width:100%;padding:6px 8px;border:1px solid #cccccc;border-radius:3px;font-size:inherit;outline:none;transition:border-color .15s}.search-input:focus{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.options-list{max-height:inherit;overflow-y:auto;overflow-x:hidden;padding:4px 0}.options-list::-webkit-scrollbar{width:8px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:4px}.options-list::-webkit-scrollbar-thumb:hover{background:#b3b3b3}.select-all-container{padding:8px;border-bottom:1px solid #E5E7EB;background:#f9fafb}.select-all-button{width:100%;display:flex;align-items:center;gap:8px;padding:6px 8px;background:#fff;border:1px solid #D1D5DB;border-radius:6px;cursor:pointer;transition:all .15s;font-size:inherit;color:inherit;font-family:inherit}.select-all-button:hover{background:#f3f4f6;border-color:#9ca3af}.select-all-button input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:#2684FF}.select-all-text{flex:1;text-align:left;font-weight:500}.select-all-count{color:#6b7280;font-size:.9em}.option-group{margin:4px 0}.option-group-label{padding:8px 12px 4px;font-size:.75em;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;background:#f9fafb;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:1}.option-group .option{padding-left:20px}.option{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;min-height:40px}.option-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.option-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:6px;overflow:hidden;background:#f3f4f6}.option-icon img{width:100%;height:100%;object-fit:cover}.option-badge{padding:2px 8px;border-radius:12px;font-size:.75em;font-weight:500;color:#374151;background:#e5e7eb;flex-shrink:0;white-space:nowrap}.option:hover:not(.disabled):not(.create-option){background:#deebff}.option.highlighted{background:#deebff}.option.selected:not(.create-option){background:#e6f2ff;font-weight:500}.option.disabled{opacity:.5;cursor:not-allowed;background:transparent!important}.option.hidden{display:none}.option.create-option{color:#2684ff;font-weight:500;background:#f0f6ff}.option.create-option:hover{background:#e6f2ff}.option input[type=checkbox]{cursor:pointer;width:16px;height:16px;margin:0;accent-color:#2684FF}.option-label{font-weight:500;color:#1f2937;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.option-description{font-size:.875em;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}.check-icon{color:#2684ff;display:flex;align-items:center;margin-left:auto}.check-icon svg{fill:currentColor}.pin-button{background:none;border:none;color:#999;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .15s;margin-left:auto;opacity:.5}.pin-button svg{fill:currentColor}.pin-button:hover{opacity:1;background:#0000000d}.pin-button.pinned{color:var(--ps-primary, #0052cc);opacity:1}.option.pinned-option{background:#0052cc0d;border-left:3px solid var(--ps-primary, #0052cc);padding-left:9px}.no-options,.loading-message{padding:16px 12px;text-align:center;color:#999;font-size:.95em}.info-message{padding:12px;margin:8px;border-radius:6px;font-size:.9em;display:flex;align-items:center;gap:8px}.info-message.max-selection{background:#fff4e5;color:#f57c00;border:1px solid #FFE0B2}.info-message.min-search{background:#e3f2fd;color:#1976d2;border:1px solid #BBDEFB}.info-message svg{flex-shrink:0}.rtl .select-actions,.rtl .tags,.rtl .option{flex-direction:row-reverse}.theme-blue .select-trigger:focus,.theme-blue .select-trigger.focused,.theme-blue .select-trigger.open{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.theme-blue .option:hover:not(.disabled):not(.create-option),.theme-blue .option.highlighted{background:#deebff}.theme-blue .option.selected:not(.create-option){background:#e6f2ff}.theme-blue .tag{background:#e6f2ff;color:#0052cc;border-color:#cce0ff}.theme-blue .check-icon,.theme-blue .option.create-option{color:#2684ff}.theme-blue .spinner{border-top-color:#2684ff}.theme-blue .search-input:focus{border-color:#2684ff;box-shadow:0 0 0 1px #2684ff}.theme-purple .select-trigger:focus,.theme-purple .select-trigger.focused,.theme-purple .select-trigger.open{border-color:#9333ea;box-shadow:0 0 0 1px #9333ea}.theme-purple .option:hover:not(.disabled):not(.create-option),.theme-purple .option.highlighted{background:#f3e8ff}.theme-purple .option.selected:not(.create-option){background:#faf5ff}.theme-purple .tag{background:#faf5ff;color:#7e22ce;border-color:#e9d5ff}.theme-purple .check-icon,.theme-purple .option.create-option{color:#9333ea}.theme-purple .spinner{border-top-color:#9333ea}.theme-purple .search-input:focus{border-color:#9333ea;box-shadow:0 0 0 1px #9333ea}.theme-green .select-trigger:focus,.theme-green .select-trigger.focused,.theme-green .select-trigger.open{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.theme-green .option:hover:not(.disabled):not(.create-option),.theme-green .option.highlighted{background:#d1fae5}.theme-green .option.selected:not(.create-option){background:#ecfdf5}.theme-green .tag{background:#ecfdf5;color:#059669;border-color:#a7f3d0}.theme-green .check-icon,.theme-green .option.create-option{color:#10b981}.theme-green .spinner{border-top-color:#10b981}.theme-green .search-input:focus{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.theme-red .select-trigger:focus,.theme-red .select-trigger.focused,.theme-red .select-trigger.open{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.theme-red .option:hover:not(.disabled):not(.create-option),.theme-red .option.highlighted{background:#fee2e2}.theme-red .option.selected:not(.create-option){background:#fef2f2}.theme-red .tag{background:#fef2f2;color:#dc2626;border-color:#fecaca}.theme-red .check-icon,.theme-red .option.create-option{color:#ef4444}.theme-red .spinner{border-top-color:#ef4444}.theme-red .search-input:focus{border-color:#ef4444;box-shadow:0 0 0 1px #ef4444}.theme-orange .select-trigger:focus,.theme-orange .select-trigger.focused,.theme-orange .select-trigger.open{border-color:#f97316;box-shadow:0 0 0 1px #f97316}.theme-orange .option:hover:not(.disabled):not(.create-option),.theme-orange .option.highlighted{background:#ffedd5}.theme-orange .option.selected:not(.create-option){background:#fff7ed}.theme-orange .tag{background:#fff7ed;color:#ea580c;border-color:#fed7aa}.theme-orange .check-icon,.theme-orange .option.create-option{color:#f97316}.theme-orange .spinner{border-top-color:#f97316}.theme-orange .search-input:focus{border-color:#f97316;box-shadow:0 0 0 1px #f97316}.theme-pink .select-trigger:focus,.theme-pink .select-trigger.focused,.theme-pink .select-trigger.open{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899}.theme-pink .option:hover:not(.disabled):not(.create-option),.theme-pink .option.highlighted{background:#fce7f3}.theme-pink .option.selected:not(.create-option){background:#fdf2f8}.theme-pink .tag{background:#fdf2f8;color:#db2777;border-color:#fbcfe8}.theme-pink .check-icon,.theme-pink .option.create-option{color:#ec4899}.theme-pink .spinner{border-top-color:#ec4899}.theme-pink .search-input:focus{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899}.theme-dark .select-trigger:focus,.theme-dark .select-trigger.focused,.theme-dark .select-trigger.open{border-color:#1f2937;box-shadow:0 0 0 1px #1f2937}.theme-dark .option:hover:not(.disabled):not(.create-option),.theme-dark .option.highlighted{background:#e5e7eb}.theme-dark .option.selected:not(.create-option){background:#f3f4f6}.theme-dark .tag{background:#f3f4f6;color:#111827;border-color:#d1d5db}.theme-dark .check-icon,.theme-dark .option.create-option{color:#1f2937}.theme-dark .spinner{border-top-color:#1f2937}.theme-dark .search-input:focus{border-color:#1f2937;box-shadow:0 0 0 1px #1f2937}.select-container.has-validation .select-trigger{transition:all .2s cubic-bezier(.4,0,.2,1)}.select-container.validation-error .select-trigger{border-color:#ef4444!important}.select-container.validation-error .select-trigger:focus,.select-container.validation-error .select-trigger.focused,.select-container.validation-error .select-trigger.open{border-color:#ef4444!important;box-shadow:0 0 0 3px #ef44441a,0 1px 2px #0000000d}.select-container.validation-warning .select-trigger{border-color:#f59e0b!important}.select-container.validation-warning .select-trigger:focus,.select-container.validation-warning .select-trigger.focused,.select-container.validation-warning .select-trigger.open{border-color:#f59e0b!important;box-shadow:0 0 0 3px #f59e0b1a,0 1px 2px #0000000d}.select-container.validation-success .select-trigger{border-color:#10b981!important}.select-container.validation-success .select-trigger:focus,.select-container.validation-success .select-trigger.focused,.select-container.validation-success .select-trigger.open{border-color:#10b981!important;box-shadow:0 0 0 3px #10b9811a,0 1px 2px #0000000d}.select-container.validation-info .select-trigger{border-color:#3b82f6!important}.select-container.validation-info .select-trigger:focus,.select-container.validation-info .select-trigger.focused,.select-container.validation-info .select-trigger.open{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a,0 1px 2px #0000000d}.validation-message{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;line-height:1.4;padding:4px 8px;border-radius:6px;transition:all .2s ease}.validation-message .validation-icon{display:flex;align-items:center;flex-shrink:0}.validation-message .validation-icon svg{display:block}.validation-message .validation-text{flex:1}.validation-message.validation-error{color:#dc2626;background:#fef2f2;border-left:3px solid #EF4444}.validation-message.validation-warning{color:#d97706;background:#fffbeb;border-left:3px solid #F59E0B}.validation-message.validation-success{color:#059669;background:#f0fdf4;border-left:3px solid #10B981}.validation-message.validation-info{color:#2563eb;background:#eff6ff;border-left:3px solid #3B82F6}.option.recent-option{position:relative;background:#fafbfc}.option.recent-option:after{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,#2684ff,#0052cc);border-radius:0 3px 3px 0}.option.recent-option:hover:not(.disabled){background:#f4f5f7!important}.option.recent-option.selected{background:#e6f2ff!important}.option.recent-option.selected:hover:not(.disabled){background:#d4e8ff!important}.section-header{padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#6b7280;background:#f9fafb;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:2}.virtual-scroll-viewport{width:100%}.virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-content-wrapper{width:100%}.virtual-scroll-viewport ::ng-deep .cdk-virtual-scroll-spacer{display:none}.virtual-scroll-viewport .option{width:100%;box-sizing:border-box}@keyframes copyFlash{0%,to{background:transparent}50%{background:#2684ff1a}}.select-container.copying{animation:copyFlash .5s ease}.options-list.scrolling{position:relative}.options-list.scrolling:after{content:\"\";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:20px;height:20px;border:2px solid #E5E7EB;border-top-color:#2684ff;border-radius:50%;animation:spin .8s linear infinite}.option[title]{cursor:help}.option.highlighted{position:relative}.option.highlighted:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:2px;background:#2684ff}@keyframes typeAheadPulse{0%,to{opacity:1}50%{opacity:.7}}.options-list.type-ahead-active .option.highlighted{animation:typeAheadPulse 1s ease-in-out}.select-container:focus-visible{outline:2px solid #2684FF;outline-offset:2px}@media (prefers-contrast: high){.select-trigger{border-width:2px}.option.highlighted{outline:2px solid currentColor;outline-offset:-2px}.validation-message{border-width:2px}}@media (prefers-reduced-motion: reduce){.select-trigger,.option,.tag,.dropdown,.validation-message{transition:none!important;animation:none!important}}.select-container.dark-mode{--ps-bg: #1f2937;--ps-bg-hover: #374151;--ps-border: #4b5563;--ps-text: #f3f4f6;--ps-text-secondary: #d1d5db;--ps-placeholder: #9ca3af;--ps-disabled-bg: #111827;--ps-disabled-text: #6b7280;--ps-shadow: 0 4px 6px rgba(0, 0, 0, .3)}.select-container.dark-mode .select-trigger{background:var(--ps-bg);border-color:var(--ps-border);color:var(--ps-text)}.select-container.dark-mode .select-trigger:hover:not(.disabled){background:var(--ps-bg-hover);border-color:#6b7280}.select-container.dark-mode .menu{background:var(--ps-bg);border-color:var(--ps-border);box-shadow:var(--ps-shadow)}.select-container.dark-mode .option{color:var(--ps-text)}.select-container.dark-mode .option:hover:not(.disabled){background:var(--ps-bg-hover)}.select-container.dark-mode .option.highlighted{background:var(--ps-bg-hover)}.select-container.dark-mode .option.selected{background:#3b82f633}.select-container.dark-mode .tag{background:var(--ps-bg-hover);color:var(--ps-text);border-color:var(--ps-border)}.select-container.dark-mode .empty-state,.select-container.dark-mode .min-search-message{color:var(--ps-text-secondary)}.select-container.dark-mode .group-label{background:var(--ps-bg);color:var(--ps-text-secondary);border-bottom-color:var(--ps-border)}.skeleton-loader{padding:8px 0}.skeleton-loader .skeleton-item{padding:8px 12px;display:flex;flex-direction:column;gap:6px}.skeleton-loader .skeleton-line{background:linear-gradient(90deg,#e5e7eb,#f3f4f6,#e5e7eb);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;height:12px}.skeleton-loader .skeleton-line.skeleton-title{width:80%;height:14px}.skeleton-loader .skeleton-line.skeleton-subtitle{width:60%;height:10px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.select-container.dark-mode .skeleton-line{background:linear-gradient(90deg,#374151,#4b5563,#374151);background-size:200% 100%}.select-container.compact .select-trigger{min-height:32px;padding:4px 8px;gap:4px}.select-container.compact .tag{padding:2px 6px;font-size:.75rem;gap:4px;height:24px}.select-container.compact .tag .tag-label{font-size:.75rem}.select-container.compact .tag-remove{width:12px;height:12px}.select-container.compact .tag-remove svg{width:10px;height:10px}.select-container.compact .option{min-height:32px;padding:6px 10px;font-size:.875rem}.select-container.compact .menu{max-height:250px}.select-container.compact .select-all-container{padding:6px 10px}.select-container.compact .group-label{padding:6px 10px;font-size:.75rem}.select-container.compact .empty-state,.select-container.compact .min-search-message{padding:12px;font-size:.875rem}.select-container.compact .search-input input{font-size:.875rem;padding:4px 0}.select-container.compact .indicators{gap:4px}.select-container.compact .indicators .indicator{width:14px;height:14px}.select-container.compact .indicators .indicator svg{width:12px;height:12px}.option-checkbox{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;margin-right:8px;transition:all .2s ease}.option-checkbox.checkbox-default{border:2px solid #d1d5db;border-radius:4px;background:#fff}.option-checkbox.checkbox-default svg{color:#10b981}.option-checkbox.checkbox-filled{background:var(--ps-primary);border-radius:4px;border:none}.option-checkbox.checkbox-filled svg{color:#fff}.option-checkbox.checkbox-outlined{border:2px solid var(--ps-primary);border-radius:4px;background:transparent}.option-checkbox.checkbox-outlined svg{color:var(--ps-primary)}.option-checkbox .checkbox-empty{width:12px;height:12px;border-radius:2px;background:transparent}.option.with-checkbox{display:flex;align-items:center;gap:10px}.option.with-checkbox.checkbox-right{flex-direction:row-reverse}.option.with-checkbox.checkbox-right .option-checkbox{margin-right:0;margin-left:8px}.select-container.dark-mode .option-checkbox.checkbox-default{border-color:#6b7280;background:#374151}.bulk-actions{padding:12px;background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:12px;border-radius:8px 8px 0 0;flex-wrap:wrap}.bulk-actions.position-above{border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;order:-1}.bulk-actions.position-below{border-top:1px solid #e5e7eb;border-bottom:none;border-radius:0 0 8px 8px;order:99}.bulk-actions.position-float{position:sticky;bottom:0;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;border-top:1px solid #e5e7eb;border-bottom:none}.bulk-actions .bulk-label{font-weight:600;color:#4b5563;font-size:.875rem;white-space:nowrap}.bulk-actions .bulk-buttons{display:flex;gap:8px;flex-wrap:wrap}.bulk-actions .bulk-action-btn{padding:6px 12px;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:500;color:#374151;transition:all .2s ease;white-space:nowrap}.bulk-actions .bulk-action-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.bulk-actions .bulk-action-btn:active:not(:disabled){transform:translateY(0);box-shadow:none}.bulk-actions .bulk-action-btn:disabled{opacity:.5;cursor:not-allowed}.bulk-actions .bulk-action-btn .action-icon{width:16px;height:16px;object-fit:contain}.select-container.dark-mode .bulk-actions{background:#1f2937;border-color:#4b5563}.select-container.dark-mode .bulk-actions.position-float{background:#1f2937f2}.select-container.dark-mode .bulk-actions .bulk-label{color:#d1d5db}.select-container.dark-mode .bulk-actions .bulk-action-btn{background:#374151;border-color:#4b5563;color:#f3f4f6}.select-container.dark-mode .bulk-actions .bulk-action-btn:hover:not(:disabled){background:#4b5563;border-color:#6b7280}.select-container.compact .bulk-actions{padding:8px;gap:8px}.select-container.compact .bulk-actions .bulk-label{font-size:.75rem}.select-container.compact .bulk-actions .bulk-action-btn{padding:4px 8px;font-size:.75rem}.select-container.compact .bulk-actions .bulk-action-btn .action-icon{width:14px;height:14px}.select-container.compact.dark-mode .skeleton-line{height:10px}.select-container.compact.dark-mode .skeleton-line.skeleton-title{height:12px}.select-container.compact.dark-mode .bulk-actions{padding:6px 8px}.select-container.compact.dark-mode .option-checkbox{width:16px;height:16px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: DarkModeProvider }], propDecorators: { options: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -1332,6 +1680,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], showLessTagsText: [{
                 type: Input
+            }], enableFuzzySearch: [{
+                type: Input
+            }], fuzzySearchThreshold: [{
+                type: Input
+            }], fuzzySearchCaseSensitive: [{
+                type: Input
+            }], enableAutoThemeDetection: [{
+                type: Input
+            }], colorScheme: [{
+                type: Input
+            }], darkModeTheme: [{
+                type: Input
+            }], lightModeTheme: [{
+                type: Input
+            }], enableLoadingSkeleton: [{
+                type: Input
+            }], skeletonItemCount: [{
+                type: Input
+            }], skeletonItemHeight: [{
+                type: Input
+            }], skeletonAnimationDelay: [{
+                type: Input
+            }], compactMode: [{
+                type: Input
+            }], showOptionCheckboxes: [{
+                type: Input
+            }], checkboxPosition: [{
+                type: Input
+            }], checkboxStyle: [{
+                type: Input
+            }], bulkActions: [{
+                type: Input
+            }], enableBulkActions: [{
+                type: Input
+            }], bulkActionsPosition: [{
+                type: Input
+            }], bulkActionsLabel: [{
+                type: Input
+            }], sortMode: [{
+                type: Input
+            }], customSortComparator: [{
+                type: Input
+            }], recentlyUsedLimit: [{
+                type: Input
             }], name: [{
                 type: Input
             }], id: [{
@@ -1382,24 +1774,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], pin: [{
                 type: Output
+            }], bulkActionSelected: [{
+                type: Output
             }], selectContainerRef: [{
                 type: ViewChild,
-                args: ['selectContainer']
+                args: ['selectContainer', { static: false }]
             }], searchInputRef: [{
                 type: ViewChild,
-                args: ['searchInput']
+                args: ['searchInput', { static: false }]
             }], menuElementRef: [{
                 type: ViewChild,
-                args: ['menuRef']
+                args: ['menuRef', { static: false }]
             }], virtualScrollViewport: [{
                 type: ViewChild,
-                args: [CdkVirtualScrollViewport]
+                args: [CdkVirtualScrollViewport, { static: false }]
             }], optionTemplate: [{
                 type: ContentChild,
-                args: ['optionTemplate', { read: TemplateRef }]
+                args: ['optionTemplate', { read: TemplateRef, static: false }]
             }], selectedOptionTemplate: [{
                 type: ContentChild,
-                args: ['selectedOptionTemplate', { read: TemplateRef }]
+                args: ['selectedOptionTemplate', { read: TemplateRef, static: false }]
+            }], tagTemplate: [{
+                type: ContentChild,
+                args: ['tagTemplate', { read: TemplateRef, static: false }]
             }], handleKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -1408,6 +1805,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['paste', ['$event']]
             }] } });
 
+/**
+ * Bulk actions for multi-select mode
+ */
+
+/**
+ * Provides necessary CDK modules for PerfectSelectComponent.
+ * Import this in your app configuration if you encounter production build issues.
+ *
+ * @example
+ * ```typescript
+ * import { providePerfectSelect } from 'angular-perfect-select';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     // ... other providers
+ *     providePerfectSelect()
+ *   ]
+ * });
+ * ```
+ */
+function providePerfectSelect() {
+    return makeEnvironmentProviders([
+        importProvidersFrom(ScrollingModule, DragDropModule)
+    ]);
+}
+
 /*
  * Public API Surface of angular-perfect-select
  */
@@ -1417,5 +1840,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ClickOutsideDirective, PerfectSelectComponent, THEMES, dropdownAnimation, optionListAnimation, selectAnimations, tagAnimation };
+export { ClickOutsideDirective, DarkModeProvider, PerfectSelectComponent, THEMES, dropdownAnimation, fuzzyMatch, optionListAnimation, providePerfectSelect, selectAnimations, sortByFuzzyScore, sortOptions, tagAnimation };
 //# sourceMappingURL=angular-perfect-select.mjs.map