angular-perfect-select 1.0.0

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

@@ -0,0 +1,807 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, HostListener, Output, Directive, inject, DestroyRef, signal, computed, effect, forwardRef, ViewChild, Input, Component } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
+import { trigger, transition, style, animate, query, stagger } from '@angular/animations';
+
+const dropdownAnimation = trigger('dropdown', [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(-10px)' }),
+        animate('200ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 1, transform: 'translateY(0)' }))
+    ]),
+    transition(':leave', [
+        animate('150ms ease-out', style({ opacity: 0 }))
+    ])
+]);
+const tagAnimation = trigger('tag', [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'scale(0.8)' }),
+        animate('200ms cubic-bezier(0.34, 1.56, 0.64, 1)', style({ opacity: 1, transform: 'scale(1)' }))
+    ]),
+    transition(':leave', [
+        animate('150ms ease-out', style({ opacity: 0, transform: 'scale(0.8)' }))
+    ])
+]);
+const optionListAnimation = trigger('optionList', [
+    transition(':enter', [
+        query('.option', [
+            style({ opacity: 0, transform: 'translateY(-5px)' }),
+            stagger(15, [
+                animate('150ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
+            ])
+        ], { optional: true })
+    ])
+]);
+const selectAnimations = [dropdownAnimation, tagAnimation, optionListAnimation];
+
+class ClickOutsideDirective {
+    elementRef;
+    clickOutside = new EventEmitter();
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    onClick(event) {
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            this.clickOutside.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[clickOutside]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { clickOutside: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+const THEMES = {
+    blue: {
+        primary: '#2684FF',
+        secondary: '#DEEBFF',
+        tag: '#E6F2FF',
+        tagText: '#0052CC',
+        tagBorder: '#CCE0FF'
+    },
+    purple: {
+        primary: '#9333EA',
+        secondary: '#F3E8FF',
+        tag: '#FAF5FF',
+        tagText: '#7E22CE',
+        tagBorder: '#E9D5FF'
+    },
+    green: {
+        primary: '#10B981',
+        secondary: '#D1FAE5',
+        tag: '#ECFDF5',
+        tagText: '#059669',
+        tagBorder: '#A7F3D0'
+    },
+    red: {
+        primary: '#EF4444',
+        secondary: '#FEE2E2',
+        tag: '#FEF2F2',
+        tagText: '#DC2626',
+        tagBorder: '#FECACA'
+    },
+    orange: {
+        primary: '#F97316',
+        secondary: '#FFEDD5',
+        tag: '#FFF7ED',
+        tagText: '#EA580C',
+        tagBorder: '#FED7AA'
+    },
+    pink: {
+        primary: '#EC4899',
+        secondary: '#FCE7F3',
+        tag: '#FDF2F8',
+        tagText: '#DB2777',
+        tagBorder: '#FBCFE8'
+    },
+    dark: {
+        primary: '#1F2937',
+        secondary: '#E5E7EB',
+        tag: '#F3F4F6',
+        tagText: '#111827',
+        tagBorder: '#D1D5DB'
+    }
+};
+
+class PerfectSelectComponent {
+    destroyRef = inject(DestroyRef);
+    sanitizer = inject(DomSanitizer);
+    // Core Props
+    options = [];
+    placeholder = 'Select...';
+    // React-Select Compatible Props (dual naming)
+    isMulti = false;
+    set multiple(value) { this.isMulti = value; }
+    isSearchable = true;
+    set searchable(value) { this.isSearchable = value; }
+    isClearable = true;
+    set clearable(value) { this.isClearable = value; }
+    isDisabled = false;
+    set disabled(value) { this.isDisabled = value; }
+    isLoading = false;
+    set loading(value) { this.isLoading = value; }
+    isRtl = false;
+    closeMenuOnSelect = true;
+    hideSelectedOptions = false;
+    // Creatable Mode
+    isCreatable = false;
+    allowCreateWhileLoading = false;
+    createOptionPosition = 'last';
+    formatCreateLabel = (inputValue) => `Create "${inputValue}"`;
+    // Async Loading
+    loadOptions = null;
+    cacheOptions = true;
+    defaultOptions = false;
+    // Styling & Theming
+    selectSize = 'medium';
+    containerSize = 'md';
+    theme = 'blue';
+    borderRadius = '8px';
+    customStyles = {};
+    maxHeight = '300px';
+    menuPlacement = 'auto';
+    menuPosition = 'absolute';
+    // Option Customization
+    getOptionLabel = (option) => option.label || String(option.value);
+    getOptionValue = (option) => option.id || option.value;
+    isOptionDisabled = (option) => option.disabled || false;
+    filterOption = null;
+    // Grouping
+    isGrouped = false;
+    groupBy = null;
+    // Advanced Features
+    showSelectAll = false;
+    selectAllText = 'Select All';
+    deselectAllText = 'Deselect All';
+    showOptionIcons = false;
+    showOptionBadges = false;
+    maxOptionsDisplay = 1000;
+    optionHeight = 40;
+    emptyStateText = 'No options available';
+    emptySearchText = 'No results found';
+    // Behavior
+    name = 'angular-perfect-select';
+    id = 'angular-perfect-select';
+    autoFocus = false;
+    openMenuOnFocus = false;
+    openMenuOnClick = true;
+    tabSelectsValue = true;
+    backspaceRemovesValue = true;
+    escapeClearsValue = false;
+    noOptionsMessage = () => 'No options';
+    loadingMessage = () => 'Loading...';
+    // Events
+    change = new EventEmitter();
+    clear = new EventEmitter();
+    focus = new EventEmitter();
+    blur = new EventEmitter();
+    menuOpen = new EventEmitter();
+    menuClose = new EventEmitter();
+    inputChange = new EventEmitter();
+    createOption = new EventEmitter();
+    optionsLoaded = new EventEmitter();
+    loadError = new EventEmitter();
+    // ViewChildren
+    selectContainerRef;
+    searchInputRef;
+    menuElementRef;
+    // Signals for reactive state
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+    internalValue = signal(this.isMulti ? [] : null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    internalOptions = signal([], ...(ngDevMode ? [{ debugName: "internalOptions" }] : []));
+    isLoadingAsync = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingAsync" }] : []));
+    optionsCache = new Map();
+    // Computed signals
+    currentTheme = computed(() => THEMES[this.theme] || THEMES.blue, ...(ngDevMode ? [{ debugName: "currentTheme" }] : []));
+    filteredOptions = computed(() => {
+        const term = this.searchTerm();
+        const opts = this.internalOptions();
+        if (!term)
+            return opts;
+        return opts.filter(option => {
+            if (this.filterOption) {
+                return this.filterOption(option, term);
+            }
+            const label = this.getOptionLabel(option);
+            return label.toLowerCase().includes(term.toLowerCase());
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    selectedOptions = computed(() => {
+        const value = this.internalValue();
+        if (!value)
+            return [];
+        const allOptions = this.internalOptions();
+        if (this.isMulti) {
+            const values = Array.isArray(value) ? value : [];
+            // Map values to option objects
+            return values.map(v => {
+                const found = allOptions.find(opt => this.getOptionValue(opt) === v);
+                return found || { id: v, label: String(v), value: v };
+            });
+        }
+        // Single select - find the option by value
+        const found = allOptions.find(opt => this.getOptionValue(opt) === value);
+        return found ? [found] : [];
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    displayText = computed(() => {
+        const selected = this.selectedOptions();
+        if (selected.length === 0) {
+            return this.placeholder;
+        }
+        if (this.isMulti) {
+            return `${selected.length} selected`;
+        }
+        return this.getOptionLabel(selected[0]);
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    groupedOptions = computed(() => {
+        if (!this.isGrouped || !this.groupBy) {
+            return null;
+        }
+        const opts = this.filteredOptions();
+        const groups = {};
+        opts.forEach(option => {
+            const group = this.groupBy(option);
+            if (!groups[group]) {
+                groups[group] = [];
+            }
+            groups[group].push(option);
+        });
+        return groups;
+    }, ...(ngDevMode ? [{ debugName: "groupedOptions" }] : []));
+    displayOptions = computed(() => {
+        let opts = this.filteredOptions();
+        if (this.isCreatable && this.searchTerm() && !this.isLoadingAsync()) {
+            const term = this.searchTerm();
+            const exactMatch = opts.some(opt => this.getOptionLabel(opt).toLowerCase() === term.toLowerCase());
+            if (!exactMatch) {
+                const createOption = {
+                    id: '__create__',
+                    label: this.formatCreateLabel(term),
+                    value: term,
+                    __isCreate__: true
+                };
+                if (this.createOptionPosition === 'first') {
+                    opts = [createOption, ...opts];
+                }
+                else {
+                    opts = [...opts, createOption];
+                }
+            }
+        }
+        return opts;
+    }, ...(ngDevMode ? [{ debugName: "displayOptions" }] : []));
+    allOptionsSelected = computed(() => {
+        if (!this.isMulti)
+            return false;
+        const opts = this.filteredOptions().filter(opt => !this.isOptionDisabled(opt));
+        const selected = this.selectedOptions();
+        return opts.length > 0 && opts.every(opt => selected.some(s => this.getOptionValue(s) === this.getOptionValue(opt)));
+    }, ...(ngDevMode ? [{ debugName: "allOptionsSelected" }] : []));
+    someOptionsSelected = computed(() => {
+        if (!this.isMulti)
+            return false;
+        const opts = this.filteredOptions().filter(opt => !this.isOptionDisabled(opt));
+        const selected = this.selectedOptions();
+        const selectedCount = opts.filter(opt => selected.some(s => this.getOptionValue(s) === this.getOptionValue(opt))).length;
+        return selectedCount > 0 && selectedCount < opts.length;
+    }, ...(ngDevMode ? [{ debugName: "someOptionsSelected" }] : []));
+    // Helper method for template
+    getEnabledOptionsCount() {
+        return this.filteredOptions().filter(opt => !this.isOptionDisabled(opt)).length;
+    }
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Update closeMenuOnSelect based on isMulti
+        effect(() => {
+            if (this.isMulti && this.closeMenuOnSelect === true) {
+                this.closeMenuOnSelect = false;
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        // Update internal options when the options input changes
+        if (changes['options'] && this.options.length > 0 && !this.loadOptions) {
+            this.internalOptions.set([...this.options]);
+        }
+    }
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled = disabled;
+    }
+    ngOnInit() {
+        // Initialize options
+        if (this.options.length > 0) {
+            this.internalOptions.set([...this.options]);
+        }
+        // Load default options if async
+        if (this.loadOptions && this.defaultOptions) {
+            this.handleLoadOptions('');
+        }
+        // Auto-focus if needed
+        if (this.autoFocus) {
+            setTimeout(() => {
+                if (this.searchInputRef) {
+                    this.searchInputRef.nativeElement.focus();
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        // Cleanup handled by DestroyRef
+    }
+    // Keyboard Navigation
+    handleKeydown(event) {
+        if (this.isDisabled)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen()) {
+                    this.toggleDropdown();
+                }
+                else {
+                    this.moveHighlight(1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveHighlight(-1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    const index = this.highlightedIndex();
+                    const opts = this.displayOptions();
+                    if (index >= 0 && index < opts.length) {
+                        this.selectOption(opts[index]);
+                    }
+                }
+                else {
+                    this.toggleDropdown();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                if (this.isOpen()) {
+                    this.closeDropdown();
+                }
+                if (this.escapeClearsValue) {
+                    this.clearSelection(event);
+                }
+                break;
+            case 'Tab':
+                if (this.isOpen() && this.tabSelectsValue) {
+                    const index = this.highlightedIndex();
+                    const opts = this.displayOptions();
+                    if (index >= 0 && index < opts.length) {
+                        event.preventDefault();
+                        this.selectOption(opts[index]);
+                    }
+                }
+                if (this.isOpen()) {
+                    this.closeDropdown();
+                }
+                break;
+            case 'Backspace':
+                if (this.backspaceRemovesValue && this.isMulti && !this.searchTerm()) {
+                    const selected = this.selectedOptions();
+                    if (selected.length > 0) {
+                        event.preventDefault();
+                        this.removeOption(selected[selected.length - 1], event);
+                    }
+                }
+                break;
+        }
+    }
+    // Toggle dropdown
+    toggleDropdown() {
+        if (this.isDisabled)
+            return;
+        if (this.isOpen()) {
+            this.closeDropdown();
+        }
+        else {
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        this.isOpen.set(true);
+        this.menuOpen.emit();
+        // Focus search input
+        setTimeout(() => {
+            if (this.isSearchable && this.searchInputRef) {
+                this.searchInputRef.nativeElement.focus();
+            }
+        });
+    }
+    closeDropdown() {
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+        this.highlightedIndex.set(-1);
+        this.menuClose.emit();
+        this.onTouched();
+    }
+    // Select option
+    selectOption(option) {
+        if (this.isOptionDisabled(option))
+            return;
+        // Handle create option
+        if (option.__isCreate__) {
+            const newOption = {
+                id: Date.now().toString(),
+                label: this.searchTerm(),
+                value: this.searchTerm(),
+                __isNew__: true
+            };
+            this.internalOptions.update(opts => [...opts, newOption]);
+            this.createOption.emit({ option: newOption });
+            option = newOption;
+        }
+        const optionValue = this.getOptionValue(option);
+        if (this.isMulti) {
+            const currentValue = Array.isArray(this.internalValue()) ? [...this.internalValue()] : [];
+            const exists = currentValue.includes(optionValue);
+            let newValue;
+            if (exists) {
+                newValue = currentValue.filter((v) => v !== optionValue);
+            }
+            else {
+                newValue = [...currentValue, optionValue];
+            }
+            this.internalValue.set(newValue);
+            this.onChange(newValue);
+            this.change.emit({
+                value: newValue,
+                option,
+                action: exists ? 'remove-value' : 'select-option'
+            });
+        }
+        else {
+            this.internalValue.set(optionValue);
+            this.onChange(optionValue);
+            this.change.emit({
+                value: optionValue,
+                option,
+                action: 'select-option'
+            });
+        }
+        if (this.closeMenuOnSelect) {
+            this.closeDropdown();
+        }
+        this.searchTerm.set('');
+    }
+    // Remove option (multi-select)
+    removeOption(option, event) {
+        event.stopPropagation();
+        const currentValue = Array.isArray(this.internalValue()) ? [...this.internalValue()] : [];
+        const optionValue = this.getOptionValue(option);
+        const newValue = currentValue.filter((v) => v !== optionValue);
+        this.internalValue.set(newValue);
+        this.onChange(newValue);
+        this.change.emit({
+            value: newValue,
+            option,
+            action: 'remove-value'
+        });
+    }
+    // Clear selection
+    clearSelection(event) {
+        event.stopPropagation();
+        const newValue = this.isMulti ? [] : null;
+        this.internalValue.set(newValue);
+        this.onChange(newValue);
+        this.change.emit({
+            value: newValue,
+            action: 'clear'
+        });
+        this.clear.emit();
+    }
+    // Select All / Deselect All
+    selectAll() {
+        const opts = this.filteredOptions().filter(opt => !this.isOptionDisabled(opt));
+        const values = opts.map(opt => this.getOptionValue(opt));
+        this.internalValue.set(values);
+        this.onChange(values);
+        this.change.emit({
+            value: values,
+            option: opts,
+            action: 'select-all'
+        });
+    }
+    deselectAll() {
+        this.internalValue.set([]);
+        this.onChange([]);
+        this.change.emit({
+            value: [],
+            action: 'deselect-all'
+        });
+    }
+    // Search input change
+    onSearchChange(term) {
+        this.searchTerm.set(term);
+        this.highlightedIndex.set(0);
+        this.inputChange.emit({
+            value: term,
+            action: 'input-change'
+        });
+        // Trigger async loading if configured
+        if (this.loadOptions) {
+            this.handleLoadOptions(term);
+        }
+    }
+    // Async loading
+    async handleLoadOptions(inputValue) {
+        if (!this.loadOptions)
+            return;
+        // Check cache
+        if (this.cacheOptions && this.optionsCache.has(inputValue)) {
+            this.internalOptions.set(this.optionsCache.get(inputValue));
+            return;
+        }
+        this.isLoadingAsync.set(true);
+        try {
+            const options = await this.loadOptions(inputValue);
+            this.internalOptions.set(options);
+            if (this.cacheOptions) {
+                this.optionsCache.set(inputValue, options);
+            }
+            this.optionsLoaded.emit({ options });
+        }
+        catch (error) {
+            this.loadError.emit({ error: error });
+        }
+        finally {
+            this.isLoadingAsync.set(false);
+        }
+    }
+    // Move highlight index
+    moveHighlight(direction) {
+        const opts = this.displayOptions();
+        if (opts.length === 0)
+            return;
+        let newIndex = this.highlightedIndex() + direction;
+        if (newIndex < 0)
+            newIndex = 0;
+        if (newIndex >= opts.length)
+            newIndex = opts.length - 1;
+        this.highlightedIndex.set(newIndex);
+        this.scrollHighlightedIntoView();
+    }
+    // Scroll highlighted option into view
+    scrollHighlightedIntoView() {
+        setTimeout(() => {
+            if (!this.menuElementRef)
+                return;
+            const menu = this.menuElementRef.nativeElement;
+            const highlighted = menu.querySelector('.option.highlighted');
+            if (highlighted) {
+                const menuRect = menu.getBoundingClientRect();
+                const optionRect = highlighted.getBoundingClientRect();
+                if (optionRect.bottom > menuRect.bottom) {
+                    menu.scrollTop += optionRect.bottom - menuRect.bottom;
+                }
+                else if (optionRect.top < menuRect.top) {
+                    menu.scrollTop -= menuRect.top - optionRect.top;
+                }
+            }
+        });
+    }
+    // Click outside handler
+    onClickOutside() {
+        if (this.isOpen()) {
+            this.closeDropdown();
+            this.blur.emit();
+        }
+    }
+    // Check if option is selected
+    isSelected(option) {
+        const selected = this.selectedOptions();
+        const optionValue = this.getOptionValue(option);
+        return selected.some(s => this.getOptionValue(s) === optionValue);
+    }
+    // Sanitize HTML for icons
+    sanitizeHtml(html) {
+        return this.sanitizer.bypassSecurityTrustHtml(html);
+    }
+    // Track by function for ngFor
+    trackByValue(index, option) {
+        return this.getOptionValue(option);
+    }
+    trackByGroup(index, item) {
+        return item[0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PerfectSelectComponent, deps: [], 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", 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" }, host: { listeners: { "keydown": "handleKeydown($event)" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PerfectSelectComponent),
+                multi: true
+            }], 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 }], usesOnChanges: true, ngImport: i0, template: "<div\n  #selectContainer\n  class=\"select-container {{selectSize}} {{containerSize}} theme-{{theme}}\"\n  [class.disabled]=\"isDisabled\"\n  [class.rtl]=\"isRtl\"\n  (clickOutside)=\"onClickOutside()\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-controls]=\"'options-list'\"\n  [attr.aria-expanded]=\"isOpen()\"\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        <div class=\"tags\">\n          @for (option of selectedOptions(); 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      } @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 class=\"options-list\" id=\"options-list\">\n        @if (isLoadingAsync()) {\n          <div class=\"loading-message\">{{loadingMessage()}}</div>\n        } @else if (displayOptions().length === 0) {\n          <div class=\"no-options\">\n            {{searchTerm() ? emptySearchText : emptyStateText}}\n          </div>\n        } @else {\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)\"\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)\"\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\">{{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                    <!-- 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            <!-- Regular (Ungrouped) Options -->\n            @for (option of 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)\"\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)\"\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\">{{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                <!-- 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          }\n        }\n      </div>\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}.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}.no-options,.loading-message{padding:16px 12px;text-align:center;color:#999;font-size:.95em}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }, { kind: "pipe", type: i2.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], animations: selectAnimations, providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PerfectSelectComponent),
+                            multi: true
+                        }], template: "<div\n  #selectContainer\n  class=\"select-container {{selectSize}} {{containerSize}} theme-{{theme}}\"\n  [class.disabled]=\"isDisabled\"\n  [class.rtl]=\"isRtl\"\n  (clickOutside)=\"onClickOutside()\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-controls]=\"'options-list'\"\n  [attr.aria-expanded]=\"isOpen()\"\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        <div class=\"tags\">\n          @for (option of selectedOptions(); 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      } @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 class=\"options-list\" id=\"options-list\">\n        @if (isLoadingAsync()) {\n          <div class=\"loading-message\">{{loadingMessage()}}</div>\n        } @else if (displayOptions().length === 0) {\n          <div class=\"no-options\">\n            {{searchTerm() ? emptySearchText : emptyStateText}}\n          </div>\n        } @else {\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)\"\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)\"\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\">{{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                    <!-- 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            <!-- Regular (Ungrouped) Options -->\n            @for (option of 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)\"\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)\"\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\">{{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                <!-- 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          }\n        }\n      </div>\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}.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}.no-options,.loading-message{padding:16px 12px;text-align:center;color:#999;font-size:.95em}.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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], isMulti: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], isSearchable: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], isClearable: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], isRtl: [{
+                type: Input
+            }], closeMenuOnSelect: [{
+                type: Input
+            }], hideSelectedOptions: [{
+                type: Input
+            }], isCreatable: [{
+                type: Input
+            }], allowCreateWhileLoading: [{
+                type: Input
+            }], createOptionPosition: [{
+                type: Input
+            }], formatCreateLabel: [{
+                type: Input
+            }], loadOptions: [{
+                type: Input
+            }], cacheOptions: [{
+                type: Input
+            }], defaultOptions: [{
+                type: Input
+            }], selectSize: [{
+                type: Input
+            }], containerSize: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], customStyles: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], menuPlacement: [{
+                type: Input
+            }], menuPosition: [{
+                type: Input
+            }], getOptionLabel: [{
+                type: Input
+            }], getOptionValue: [{
+                type: Input
+            }], isOptionDisabled: [{
+                type: Input
+            }], filterOption: [{
+                type: Input
+            }], isGrouped: [{
+                type: Input
+            }], groupBy: [{
+                type: Input
+            }], showSelectAll: [{
+                type: Input
+            }], selectAllText: [{
+                type: Input
+            }], deselectAllText: [{
+                type: Input
+            }], showOptionIcons: [{
+                type: Input
+            }], showOptionBadges: [{
+                type: Input
+            }], maxOptionsDisplay: [{
+                type: Input
+            }], optionHeight: [{
+                type: Input
+            }], emptyStateText: [{
+                type: Input
+            }], emptySearchText: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], openMenuOnFocus: [{
+                type: Input
+            }], openMenuOnClick: [{
+                type: Input
+            }], tabSelectsValue: [{
+                type: Input
+            }], backspaceRemovesValue: [{
+                type: Input
+            }], escapeClearsValue: [{
+                type: Input
+            }], noOptionsMessage: [{
+                type: Input
+            }], loadingMessage: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], clear: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], menuOpen: [{
+                type: Output
+            }], menuClose: [{
+                type: Output
+            }], inputChange: [{
+                type: Output
+            }], createOption: [{
+                type: Output
+            }], optionsLoaded: [{
+                type: Output
+            }], loadError: [{
+                type: Output
+            }], selectContainerRef: [{
+                type: ViewChild,
+                args: ['selectContainer']
+            }], searchInputRef: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], menuElementRef: [{
+                type: ViewChild,
+                args: ['menuRef']
+            }], handleKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/*
+ * Public API Surface of angular-perfect-select
+ */
+// Main Component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ClickOutsideDirective, PerfectSelectComponent, THEMES, dropdownAnimation, optionListAnimation, selectAnimations, tagAnimation };
+//# sourceMappingURL=angular-perfect-select.mjs.map