@shival99/z-ui 1.0.1 → 1.0.2

package/fesm2022/shival99-z-ui-components-z-select.mjs

@@ -0,0 +1,998 @@
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, Pipe, input, contentChild, output, viewChild, signal, Injector, DestroyRef, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { NgControl, PristineChangeEvent, TouchedChangeEvent, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
+import { Subject, debounceTime, merge, filter, isObservable, takeUntil, catchError, of, firstValueFrom } from 'rxjs';
+import { cva } from 'class-variance-authority';
+import { zRemoveVietnamese, zMergeClasses, zTransform, zGenerateId } from '@shival99/z-ui/utils';
+import { ZHighlightPipe, ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZLoadingComponent } from '@shival99/z-ui/components/z-loading';
+import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
+import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+
+class ZSelectOptionDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ZSelectOptionDirective, isStandalone: true, selector: "[z-select-option], [zSelectOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSelectOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-select-option], [zSelectOption]',
+                    standalone: true,
+                }]
+        }] });
+
+class ZSelectSelectedDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSelectSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ZSelectSelectedDirective, isStandalone: true, selector: "[z-select-selected], [zSelectSelected]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSelectSelectedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-select-selected], [zSelectSelected]',
+                    standalone: true,
+                }]
+        }] });
+
+class ZIsSelectedPipe {
+    transform(option, value, isMultipleMode) {
+        if (isMultipleMode) {
+            const current = value ?? [];
+            return current.includes(option.value);
+        }
+        return value === option.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZIsSelectedPipe, isStandalone: true, name: "zIsSelected" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZIsSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zIsSelected',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+const zSelectVariants = cva([
+    'flex w-full items-center rounded-[6px] border border-input bg-white shadow-xs cursor-pointer',
+    'transition-[border-color,box-shadow,background-color,color,opacity] duration-200',
+    'dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+    'outline-none',
+    'text-sm',
+], {
+    variants: {
+        zSize: {
+            sm: 'min-h-8 px-2 py-1 gap-2 text-sm',
+            default: 'min-h-9 px-2 py-1.5 gap-2 text-sm',
+            lg: 'min-h-10 px-2 py-2 gap-2.5 text-sm',
+        },
+        zStatus: {
+            default: 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+            open: 'border-ring ring-ring/50 ring-[3px]',
+            error: 'border-destructive! ring-destructive/20 ring-[3px] focus-within:border-destructive! focus-within:ring-destructive/30',
+            disabled: 'opacity-50 cursor-not-allowed bg-muted! text-muted-foreground',
+            readonly: 'cursor-default bg-muted/50 text-muted-foreground',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+        zStatus: 'default',
+    },
+});
+const zSelectTagVariants = cva('inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-xs font-medium transition-colors', {
+    variants: {
+        zSize: {
+            sm: 'text-[10px] px-1 py-0',
+            default: 'text-xs px-1.5 py-0.5',
+            lg: 'text-xs px-2 py-1',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+    },
+});
+const zSelectOptionVariants = cva('flex items-center gap-2 px-2 py-1.5 cursor-pointer transition-colors text-sm rounded-[4px] outline-none whitespace-nowrap', {
+    variants: {
+        selected: {
+            true: 'bg-primary/15 text-primary',
+            false: 'hover:bg-primary/10 hover:text-foreground',
+        },
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed pointer-events-none',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        selected: false,
+        disabled: false,
+    },
+});
+
+class ZOptionClassesPipe {
+    transform(isSelected, isDisabled) {
+        return zSelectOptionVariants({
+            selected: isSelected,
+            disabled: isDisabled ?? false,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZOptionClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZOptionClassesPipe, isStandalone: true, name: "zOptionClasses" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZOptionClassesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zOptionClasses',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+const TAG_COLORS = [
+    {
+        bg: 'bg-blue-100 dark:bg-blue-950',
+        text: 'text-blue-700 dark:text-blue-300',
+        border: 'border-blue-300 dark:border-blue-800',
+    },
+    {
+        bg: 'bg-green-100 dark:bg-green-950',
+        text: 'text-green-700 dark:text-green-300',
+        border: 'border-green-300 dark:border-green-800',
+    },
+    {
+        bg: 'bg-purple-100 dark:bg-purple-950',
+        text: 'text-purple-700 dark:text-purple-300',
+        border: 'border-purple-300 dark:border-purple-800',
+    },
+    {
+        bg: 'bg-orange-100 dark:bg-orange-950',
+        text: 'text-orange-700 dark:text-orange-300',
+        border: 'border-orange-300 dark:border-orange-800',
+    },
+    {
+        bg: 'bg-pink-100 dark:bg-pink-950',
+        text: 'text-pink-700 dark:text-pink-300',
+        border: 'border-pink-300 dark:border-pink-800',
+    },
+    {
+        bg: 'bg-cyan-100 dark:bg-cyan-950',
+        text: 'text-cyan-700 dark:text-cyan-300',
+        border: 'border-cyan-300 dark:border-cyan-800',
+    },
+    {
+        bg: 'bg-yellow-100 dark:bg-yellow-950',
+        text: 'text-yellow-700 dark:text-yellow-300',
+        border: 'border-yellow-300 dark:border-yellow-800',
+    },
+    {
+        bg: 'bg-red-100 dark:bg-red-950',
+        text: 'text-red-700 dark:text-red-300',
+        border: 'border-red-300 dark:border-red-800',
+    },
+    {
+        bg: 'bg-indigo-100 dark:bg-indigo-950',
+        text: 'text-indigo-700 dark:text-indigo-300',
+        border: 'border-indigo-300 dark:border-indigo-800',
+    },
+    {
+        bg: 'bg-teal-100 dark:bg-teal-950',
+        text: 'text-teal-700 dark:text-teal-300',
+        border: 'border-teal-300 dark:border-teal-800',
+    },
+];
+
+const colorCache = new Map();
+function getTagColor(value) {
+    const key = String(value);
+    const cached = colorCache.get(key);
+    if (cached) {
+        return cached;
+    }
+    let hash = 0;
+    for (let i = 0; i < key.length; i++) {
+        hash = (hash << 5) - hash + key.charCodeAt(i);
+        hash = hash & hash;
+    }
+    const index = Math.abs(hash) % TAG_COLORS.length;
+    const color = TAG_COLORS[index];
+    colorCache.set(key, color);
+    return color;
+}
+function filterOptions(options, searchText) {
+    const query = searchText.trim();
+    if (!query) {
+        return options;
+    }
+    const normalizedQuery = zRemoveVietnamese(query.toLowerCase());
+    return options.filter(opt => {
+        const normalizedLabel = zRemoveVietnamese(opt.label.toLowerCase());
+        return normalizedLabel.includes(normalizedQuery);
+    });
+}
+
+class ZTagClassesPipe {
+    transform(option, size, isTagsMode) {
+        const baseClasses = zSelectTagVariants({ zSize: size });
+        if (isTagsMode) {
+            const color = getTagColor(option.value);
+            return zMergeClasses(baseClasses, color.bg, color.text, color.border);
+        }
+        return zMergeClasses(baseClasses, 'bg-muted text-foreground border-border');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTagClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTagClassesPipe, isStandalone: true, name: "zTagClasses" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTagClassesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'zTagClasses',
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class ZSelectComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zMode = input('single', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
+    zLabelClass = input('', ...(ngDevMode ? [{ debugName: "zLabelClass" }] : []));
+    zPlaceholder = input('Select...', ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : []));
+    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : {}), transform: zTransform });
+    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
+    zPrefix = input('', ...(ngDevMode ? [{ debugName: "zPrefix" }] : []));
+    zAllowClear = input(false, { ...(ngDevMode ? { debugName: "zAllowClear" } : {}), transform: zTransform });
+    zWrap = input(true, { ...(ngDevMode ? { debugName: "zWrap" } : {}), transform: zTransform });
+    zShowSearch = input(true, { ...(ngDevMode ? { debugName: "zShowSearch" } : {}), transform: zTransform });
+    zPlaceholderSearch = input('Search...', ...(ngDevMode ? [{ debugName: "zPlaceholderSearch" }] : []));
+    zDebounce = input(300, ...(ngDevMode ? [{ debugName: "zDebounce" }] : []));
+    zNotFoundText = input('No results found', ...(ngDevMode ? [{ debugName: "zNotFoundText" }] : []));
+    zEmptyText = input('No data', ...(ngDevMode ? [{ debugName: "zEmptyText" }] : []));
+    zEmptyIcon = input('lucideInbox', ...(ngDevMode ? [{ debugName: "zEmptyIcon" }] : []));
+    zMaxTagCount = input(3, ...(ngDevMode ? [{ debugName: "zMaxTagCount" }] : []));
+    zDropdownMaxHeight = input(256, ...(ngDevMode ? [{ debugName: "zDropdownMaxHeight" }] : []));
+    zOptionHeight = input(32, ...(ngDevMode ? [{ debugName: "zOptionHeight" }] : []));
+    zVirtualScroll = input(false, { ...(ngDevMode ? { debugName: "zVirtualScroll" } : {}), transform: zTransform });
+    zShowAction = input(false, { ...(ngDevMode ? { debugName: "zShowAction" } : {}), transform: zTransform });
+    zOptions = input([], ...(ngDevMode ? [{ debugName: "zOptions" }] : []));
+    zKey = input('', ...(ngDevMode ? [{ debugName: "zKey" }] : []));
+    zSearchServer = input(false, { ...(ngDevMode ? { debugName: "zSearchServer" } : {}), transform: zTransform });
+    zLoadingMore = input(false, { ...(ngDevMode ? { debugName: "zLoadingMore" } : {}), transform: zTransform });
+    zEnableLoadMore = input(false, { ...(ngDevMode ? { debugName: "zEnableLoadMore" } : {}), transform: zTransform });
+    zScrollDistance = input(2, ...(ngDevMode ? [{ debugName: "zScrollDistance" }] : []));
+    zSelectedTemplate = input(null, ...(ngDevMode ? [{ debugName: "zSelectedTemplate" }] : []));
+    zOptionTemplate = input(null, ...(ngDevMode ? [{ debugName: "zOptionTemplate" }] : []));
+    zActionTemplate = input(null, ...(ngDevMode ? [{ debugName: "zActionTemplate" }] : []));
+    customSelectedDirective = contentChild((ZSelectSelectedDirective), ...(ngDevMode ? [{ debugName: "customSelectedDirective" }] : []));
+    customOptionDirective = contentChild((ZSelectOptionDirective), ...(ngDevMode ? [{ debugName: "customOptionDirective" }] : []));
+    zOnSearch = output();
+    zOnLoadMore = output();
+    zControl = output();
+    zAsyncValidators = input([], ...(ngDevMode ? [{ debugName: "zAsyncValidators" }] : []));
+    zAsyncDebounce = input(300, ...(ngDevMode ? [{ debugName: "zAsyncDebounce" }] : []));
+    zAsyncValidateOn = input('change', ...(ngDevMode ? [{ debugName: "zAsyncValidateOn" }] : []));
+    zValidators = input([], ...(ngDevMode ? [{ debugName: "zValidators" }] : []));
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
+    searchInputRef = viewChild('dropdownSearchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : []));
+    dropdownTpl = viewChild('dropdownTpl', ...(ngDevMode ? [{ debugName: "dropdownTpl" }] : []));
+    optionsContainerRef = viewChild('optionsContainer', ...(ngDevMode ? [{ debugName: "optionsContainerRef" }] : []));
+    virtualScrollRef = viewChild('virtualScrollElement', ...(ngDevMode ? [{ debugName: "virtualScrollRef" }] : []));
+    loadMoreSentinelRef = viewChild('loadMoreSentinel', ...(ngDevMode ? [{ debugName: "loadMoreSentinelRef" }] : []));
+    selectId = zGenerateId('z-select');
+    dropdownId = `${this.selectId}-dropdown`;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
+    hasScrollShadow = signal(false, ...(ngDevMode ? [{ debugName: "hasScrollShadow" }] : []));
+    _popoverControl = signal(null, ...(ngDevMode ? [{ debugName: "_popoverControl" }] : []));
+    _searchSubject = new Subject();
+    _loadMoreObserver = null;
+    _allKnownOptions = signal([], ...(ngDevMode ? [{ debugName: "_allKnownOptions" }] : []));
+    _optionGap = 3;
+    virtualizer = injectVirtualizer(() => ({
+        scrollElement: this.virtualScrollRef(),
+        count: this.filteredOptions().length,
+        estimateSize: () => this.zOptionHeight() + this._optionGap,
+        overscan: 5,
+    }));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    currentValue = this._value.asReadonly();
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
+    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
+    _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
+    _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    _onChange = () => void 0;
+    _onTouched = () => void 0;
+    _ngControl = null;
+    isValidating = signal(false, ...(ngDevMode ? [{ debugName: "isValidating" }] : []));
+    _asyncErrors = signal(new Map(), ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : []));
+    _asyncCancelSubject = new Subject();
+    _asyncValidationSubject = new Subject();
+    _asyncValidationAbortController = null;
+    isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isReadonly = computed(() => this.zReadonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
+    isInteractionDisabled = computed(() => this.isDisabled() || this.isReadonly() || this.zLoading(), ...(ngDevMode ? [{ debugName: "isInteractionDisabled" }] : []));
+    isMultipleMode = computed(() => {
+        const mode = this.zMode();
+        return mode === 'multiple' || mode === 'tags';
+    }, ...(ngDevMode ? [{ debugName: "isMultipleMode" }] : []));
+    isTagsMode = computed(() => this.zMode() === 'tags', ...(ngDevMode ? [{ debugName: "isTagsMode" }] : []));
+    effectiveSelectedTemplate = computed(() => {
+        const directive = this.customSelectedDirective();
+        if (directive) {
+            return directive.templateRef;
+        }
+        return this.zSelectedTemplate();
+    }, ...(ngDevMode ? [{ debugName: "effectiveSelectedTemplate" }] : []));
+    effectiveOptionTemplate = computed(() => {
+        const directive = this.customOptionDirective();
+        if (directive) {
+            return directive.templateRef;
+        }
+        return this.zOptionTemplate();
+    }, ...(ngDevMode ? [{ debugName: "effectiveOptionTemplate" }] : []));
+    shouldUseVirtualScroll = computed(() => {
+        if (this.zVirtualScroll()) {
+            return true;
+        }
+        if (this.zEnableLoadMore()) {
+            return false;
+        }
+        return this.zOptions().length > 50;
+    }, ...(ngDevMode ? [{ debugName: "shouldUseVirtualScroll" }] : []));
+    selectedOption = computed(() => {
+        if (this.isMultipleMode()) {
+            return null;
+        }
+        const value = this._value();
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const options = this.zSearchServer() ? this._allKnownOptions() : this.zOptions();
+        return options.find(opt => opt.value === value) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
+    selectedOptions = computed(() => {
+        if (!this.isMultipleMode()) {
+            return [];
+        }
+        const value = this._value();
+        if (!Array.isArray(value)) {
+            return [];
+        }
+        const options = this.zSearchServer() ? this._allKnownOptions() : this.zOptions();
+        return value
+            .map(v => options.find(opt => opt.value === v))
+            .filter((opt) => opt !== undefined);
+    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    displayedTags = computed(() => {
+        const selected = this.selectedOptions();
+        const max = this.zMaxTagCount();
+        return selected.slice(0, max);
+    }, ...(ngDevMode ? [{ debugName: "displayedTags" }] : []));
+    remainingCount = computed(() => {
+        const selected = this.selectedOptions();
+        const max = this.zMaxTagCount();
+        return Math.max(0, selected.length - max);
+    }, ...(ngDevMode ? [{ debugName: "remainingCount" }] : []));
+    hasValue = computed(() => {
+        const value = this._value();
+        if (Array.isArray(value)) {
+            return value.length > 0;
+        }
+        return value !== null && value !== undefined;
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    filteredOptions = computed(() => {
+        if (this.zSearchServer()) {
+            return this.zOptions();
+        }
+        return filterOptions(this.zOptions(), this.searchText());
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    isEmptyData = computed(() => {
+        if (this.zSearchServer() && this.searchText().trim()) {
+            return false;
+        }
+        return this.zOptions().length === 0;
+    }, ...(ngDevMode ? [{ debugName: "isEmptyData" }] : []));
+    isNoSearchResults = computed(() => {
+        if (this.zSearchServer() && this.searchText().trim()) {
+            return this.zOptions().length === 0;
+        }
+        const noFiltered = this.filteredOptions().length === 0;
+        const hasOptions = this.zOptions().length > 0;
+        const hasSearch = this.searchText().trim() !== '';
+        return noFiltered && hasOptions && hasSearch;
+    }, ...(ngDevMode ? [{ debugName: "isNoSearchResults" }] : []));
+    optionsMaxHeight = computed(() => {
+        const total = this.zDropdownMaxHeight();
+        const searchHeight = this.zShowSearch() ? 44 : 0;
+        const actionHeight = this.zShowAction() && this.isMultipleMode() ? 40 : 0;
+        return total - searchHeight - actionHeight;
+    }, ...(ngDevMode ? [{ debugName: "optionsMaxHeight" }] : []));
+    currentStatus = computed(() => {
+        if (this.isDisabled()) {
+            return 'disabled';
+        }
+        if (this.isReadonly()) {
+            return 'readonly';
+        }
+        if (this.isOpen()) {
+            return 'open';
+        }
+        if (this.hasError()) {
+            return 'error';
+        }
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
+    _shouldShowValidation = computed(() => {
+        const control = this._formControl();
+        this._formStateVersion();
+        if (control) {
+            return control.dirty;
+        }
+        return this._dirty() || this._touched();
+    }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
+    hasError = computed(() => {
+        const asyncErrors = this._asyncErrors();
+        if (asyncErrors.size > 0 && this._shouldShowValidation()) {
+            return true;
+        }
+        const customErrors = this._getValidationErrors();
+        if (customErrors.length > 0) {
+            return true;
+        }
+        const control = this._formControl();
+        this._formStateVersion();
+        if (!control) {
+            return false;
+        }
+        return control.invalid && this._shouldShowValidation();
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    showError = computed(() => this.hasError(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    errorMessage = computed(() => {
+        const asyncErrors = this._asyncErrors();
+        if (asyncErrors.size > 0) {
+            return asyncErrors.values().next().value;
+        }
+        const customErrors = this._getValidationErrors();
+        if (customErrors.length > 0) {
+            return customErrors[0];
+        }
+        const control = this._formControl();
+        const errors = control?.errors;
+        if (!errors) {
+            return '';
+        }
+        const validators = this.zValidators();
+        for (const validator of validators) {
+            if (errors[validator.error]) {
+                return validator.message;
+            }
+        }
+        if (errors['required']) {
+            return 'Vui lòng chọn giá trị';
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    selectClasses = computed(() => zMergeClasses(zSelectVariants({
+        zSize: this.zSize(),
+        zStatus: this.currentStatus(),
+    }), 
+    // prettier-ignore
+    !this.zWrap() &&
+        this.isMultipleMode() && {
+        'h-8': this.zSize() === 'sm',
+        'h-9': this.zSize() === 'default',
+        'h-10': this.zSize() === 'lg',
+    }, this.class()), ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
+    constructor() {
+        effect(() => {
+            if (!this.zSearchServer()) {
+                return;
+            }
+            const newOpts = this.zOptions();
+            const known = this._allKnownOptions();
+            const knownValues = new Set(known.map(o => o.value));
+            const toAdd = newOpts.filter(o => !knownValues.has(o.value));
+            if (toAdd.length > 0) {
+                this._allKnownOptions.set([...known, ...toAdd]);
+            }
+        });
+        effect(() => {
+            const isOpen = this.isOpen();
+            const useVirtual = this.shouldUseVirtualScroll();
+            if (!isOpen) {
+                return;
+            }
+            const getScrollElement = () => {
+                if (useVirtual) {
+                    return this.virtualScrollRef()?.nativeElement ?? null;
+                }
+                return this.optionsContainerRef()?.nativeElement ?? null;
+            };
+            const handleScroll = () => {
+                const el = getScrollElement();
+                if (!el) {
+                    return;
+                }
+                const isScrollable = el.scrollHeight > el.clientHeight;
+                this.hasScrollShadow.set(isScrollable);
+            };
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    handleScroll();
+                    const el = getScrollElement();
+                    if (el) {
+                        el.addEventListener('scroll', handleScroll);
+                    }
+                });
+            });
+            return () => {
+                const el = getScrollElement();
+                if (el) {
+                    el.removeEventListener('scroll', handleScroll);
+                }
+            };
+        });
+        effect(() => {
+            const sentinel = this.loadMoreSentinelRef();
+            const isOpen = this.isOpen();
+            const optionsCount = this.filteredOptions().length;
+            if (!sentinel || !isOpen || optionsCount === 0) {
+                this._cleanupLoadMoreObserver();
+                return;
+            }
+            this._setupLoadMoreObserver();
+        });
+    }
+    ngOnInit() {
+        this._searchSubject.pipe(debounceTime(this.zDebounce()), takeUntilDestroyed(this._destroyRef)).subscribe(value => {
+            this.searchText.set(value);
+            this.zOnSearch.emit(value);
+        });
+        const asyncValidators = this.zAsyncValidators();
+        if (asyncValidators.length > 0) {
+            const debounceMs = this.zAsyncDebounce() || 300;
+            this._asyncValidationSubject
+                .pipe(debounceTime(debounceMs), takeUntilDestroyed(this._destroyRef))
+                .subscribe(value => {
+                void this._runAsyncValidation(value);
+            });
+        }
+        void Promise.resolve().then(() => {
+            try {
+                this._ngControl = this._injector.get(NgControl, null);
+                if (!this._ngControl?.control) {
+                    return;
+                }
+                const { control } = this._ngControl;
+                this._formControl.set(control);
+                merge(control.statusChanges, control.valueChanges, control.events.pipe(filter(event => event instanceof PristineChangeEvent || event instanceof TouchedChangeEvent)))
+                    .pipe(takeUntilDestroyed(this._destroyRef))
+                    .subscribe(() => {
+                    this._formStateVersion.update(v => v + 1);
+                });
+            }
+            catch {
+                this._ngControl = null;
+            }
+        });
+        setTimeout(() => this._emitControl());
+    }
+    writeValue(value) {
+        const fieldKey = this.zKey();
+        if (!fieldKey) {
+            this._value.set(value);
+            return;
+        }
+        if (value === null || value === undefined) {
+            this._value.set(value);
+            return;
+        }
+        if (Array.isArray(value)) {
+            const extractedValues = value.map(item => {
+                if (typeof item === 'object' && item !== null && fieldKey in item) {
+                    return item[fieldKey];
+                }
+                return item;
+            });
+            this._value.set(extractedValues);
+            return;
+        }
+        if (typeof value === 'object' && value !== null && fieldKey in value) {
+            const extractedValue = value[fieldKey];
+            this._value.set(extractedValue);
+            return;
+        }
+        this._value.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    onTriggerKeydown(event) {
+        if (this.isInteractionDisabled()) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleDropdown();
+            return;
+        }
+        if (event.key === 'Escape' && this.isOpen()) {
+            this._popoverControl()?.close();
+        }
+    }
+    onTriggerMousedown() {
+        const triggerEl = this.triggerRef()?.nativeElement;
+        if (triggerEl) {
+            this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);
+        }
+    }
+    toggleDropdown() {
+        this.onTriggerMousedown();
+        this._popoverControl()?.toggle();
+    }
+    onPopoverControl(control) {
+        this._popoverControl.set(control);
+    }
+    onPopoverShow() {
+        this.isOpen.set(true);
+        this.searchText.set('');
+        this.zOnSearch.emit('');
+        if (this.zShowSearch()) {
+            setTimeout(() => {
+                this.searchInputRef()?.nativeElement.focus();
+            }, 100);
+        }
+    }
+    onPopoverHideStart() {
+        this.isOpen.set(false);
+        this.hasScrollShadow.set(false);
+        if (this._dirty()) {
+            this._touched.set(true);
+        }
+        this._onTouched();
+    }
+    onPopoverHideEnd() {
+        if (this.zSearchServer()) {
+            this.searchText.set('');
+            this.zOnSearch.emit('');
+        }
+    }
+    onSearchChange(value) {
+        this._searchSubject.next(value);
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.checkScrollShadow();
+            });
+        });
+    }
+    checkScrollShadow() {
+        const container = this.optionsContainerRef()?.nativeElement;
+        if (!container) {
+            this.hasScrollShadow.set(false);
+            return;
+        }
+        const isScrollable = container.scrollHeight > container.clientHeight;
+        this.hasScrollShadow.set(isScrollable);
+    }
+    _setupLoadMoreObserver() {
+        this._cleanupLoadMoreObserver();
+        const sentinel = this.loadMoreSentinelRef()?.nativeElement;
+        const container = this.optionsContainerRef()?.nativeElement;
+        if (!sentinel || !container) {
+            return;
+        }
+        this._loadMoreObserver = new IntersectionObserver(entries => {
+            const entry = entries[0];
+            if (entry?.isIntersecting && !this.zLoadingMore()) {
+                const currentCount = this.filteredOptions().length;
+                this.zOnLoadMore.emit({
+                    currentCount,
+                    scrollTop: container.scrollTop,
+                });
+            }
+        }, {
+            root: container,
+            rootMargin: '100px',
+            threshold: 0,
+        });
+        this._loadMoreObserver.observe(sentinel);
+    }
+    _cleanupLoadMoreObserver() {
+        if (this._loadMoreObserver) {
+            this._loadMoreObserver.disconnect();
+            this._loadMoreObserver = null;
+        }
+    }
+    selectOption(option, closeFn) {
+        if (option.disabled) {
+            return;
+        }
+        if (this.isMultipleMode()) {
+            const current = this._value() ?? [];
+            const isSelected = current.includes(option.value);
+            const newValue = isSelected ? current.filter(v => v !== option.value) : [...current, option.value];
+            this._value.set(newValue);
+            this._dirty.set(true);
+            this._onChange(newValue);
+            this._triggerAsyncValidation(newValue
+                .map(v => this.zOptions().find(o => o.value === v))
+                .filter((o) => o !== undefined));
+            return;
+        }
+        this._value.set(option.value);
+        this._dirty.set(true);
+        this._onChange(option.value);
+        this._triggerAsyncValidation(option);
+        this._popoverControl()?.close();
+        if (closeFn) {
+            closeFn();
+        }
+    }
+    removeOption(event, option) {
+        event.stopPropagation();
+        const current = this._value() ?? [];
+        const newValue = current.filter(v => v !== option.value);
+        this._value.set(newValue);
+        this._dirty.set(true);
+        this._onChange(newValue);
+    }
+    clearAll(event) {
+        event.stopPropagation();
+        if (this.isMultipleMode()) {
+            this._value.set([]);
+            this._dirty.set(true);
+            this._onChange([]);
+            return;
+        }
+        this._value.set(null);
+        this._dirty.set(true);
+        this._onChange(null);
+    }
+    selectAll() {
+        if (!this.isMultipleMode()) {
+            return;
+        }
+        const enabledOptions = this.zOptions().filter(opt => !opt.disabled);
+        const allValues = enabledOptions.map(opt => opt.value);
+        this._value.set(allValues);
+        this._dirty.set(true);
+        this._onChange(allValues);
+    }
+    removeAll() {
+        if (!this.isMultipleMode()) {
+            return;
+        }
+        this._value.set([]);
+        this._dirty.set(true);
+        this._onChange([]);
+    }
+    reset() {
+        if (this.isMultipleMode()) {
+            this._value.set([]);
+            this._onChange([]);
+        }
+        if (!this.isMultipleMode()) {
+            this._value.set(null);
+            this._onChange(null);
+        }
+        this._touched.set(false);
+        this._dirty.set(false);
+        this.searchText.set('');
+        if (!this._ngControl?.control) {
+            return;
+        }
+        this._ngControl.control.markAsPristine();
+        this._ngControl.control.markAsUntouched();
+    }
+    focus() {
+        this.triggerRef()?.nativeElement.focus();
+    }
+    blur() {
+        this.triggerRef()?.nativeElement.blur();
+    }
+    markAsTouched() {
+        this._touched.set(true);
+        this._onTouched();
+    }
+    markAsUntouched() {
+        this._touched.set(false);
+    }
+    markAsDirty() {
+        this._dirty.set(true);
+    }
+    markAsPristine() {
+        this._dirty.set(false);
+    }
+    validate() {
+        this._touched.set(true);
+        this._dirty.set(true);
+        this._onTouched();
+        if (this._ngControl?.control) {
+            this._ngControl.control.markAsDirty();
+            this._ngControl.control.markAsTouched();
+        }
+    }
+    _emitControl() {
+        this.zControl.emit({
+            validate: () => this.validate(),
+            reset: () => this.reset(),
+            focus: () => this.focus(),
+            blur: () => this.blur(),
+            markAsTouched: () => this.markAsTouched(),
+            markAsUntouched: () => this.markAsUntouched(),
+            markAsDirty: () => this.markAsDirty(),
+            markAsPristine: () => this.markAsPristine(),
+            hasError: this.hasError,
+            isValidating: this.isValidating,
+            isOpen: this.isOpen.asReadonly(),
+            value: this._value.asReadonly(),
+            selectedOption: this.selectedOption,
+            selectedOptions: this.selectedOptions,
+            errorMessage: this.errorMessage,
+        });
+    }
+    trackByValue = (_index, option) => {
+        const key = this.zKey();
+        if (key && key in option) {
+            return option[key];
+        }
+        return option.value;
+    };
+    _getValidationErrors() {
+        const validators = this.zValidators();
+        const errors = [];
+        if (!this._shouldShowValidation()) {
+            return errors;
+        }
+        const selectedValue = this.isMultipleMode() ? this.selectedOptions() : this.selectedOption();
+        const isRequired = this.zRequired() || this._formControl()?.errors?.['required'];
+        if (isRequired && !this.hasValue()) {
+            errors.push('Vui lòng chọn giá trị');
+        }
+        for (const validator of validators) {
+            if (!validator.validate(selectedValue)) {
+                errors.push(validator.message);
+            }
+        }
+        return errors;
+    }
+    async _runAsyncValidation(value) {
+        const asyncValidators = this.zAsyncValidators();
+        if (asyncValidators.length === 0) {
+            return;
+        }
+        if (value === null || value === undefined) {
+            this._asyncErrors.set(new Map());
+            this.isValidating.set(false);
+            return;
+        }
+        this._cancelAsyncValidation();
+        this._asyncValidationAbortController = new AbortController();
+        const { signal } = this._asyncValidationAbortController;
+        this.isValidating.set(true);
+        const errors = new Map();
+        try {
+            const validationPromises = asyncValidators.map(async (validator) => {
+                if (signal.aborted) {
+                    return null;
+                }
+                try {
+                    const result = validator.validate(value);
+                    if (!isObservable(result)) {
+                        const isValid = await result;
+                        if (signal.aborted) {
+                            return null;
+                        }
+                        return { validator, isValid };
+                    }
+                    const safeResult$ = result.pipe(takeUntil(this._asyncCancelSubject), catchError(err => {
+                        console.error(`Async validation error for ${validator.error}:`, err);
+                        return of(false);
+                    }));
+                    const isValid = await firstValueFrom(safeResult$);
+                    if (signal.aborted) {
+                        return null;
+                    }
+                    return { validator, isValid };
+                }
+                catch (error) {
+                    if (!signal.aborted) {
+                        console.error(`Async validation error for ${validator.error}:`, error);
+                        return { validator, isValid: false };
+                    }
+                    return null;
+                }
+            });
+            const results = await Promise.all(validationPromises);
+            if (signal.aborted) {
+                return;
+            }
+            for (const result of results) {
+                if (result && !result.isValid) {
+                    errors.set(result.validator.error, result.validator.message);
+                }
+            }
+            this._asyncErrors.set(errors);
+        }
+        catch (error) {
+            if (!signal.aborted) {
+                console.error('Async validation error:', error);
+            }
+        }
+        finally {
+            if (!signal.aborted) {
+                this.isValidating.set(false);
+            }
+        }
+    }
+    _cancelAsyncValidation() {
+        if (this._asyncValidationAbortController) {
+            this._asyncValidationAbortController.abort();
+            this._asyncValidationAbortController = null;
+        }
+        this._asyncCancelSubject.next();
+    }
+    _triggerAsyncValidation(value) {
+        if (this.zAsyncValidators().length > 0 && this.zAsyncValidateOn() === 'change') {
+            this._asyncValidationSubject.next(value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZSelectComponent, isStandalone: true, selector: "z-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zWrap: { classPropertyName: "zWrap", publicName: "zWrap", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholderSearch: { classPropertyName: "zPlaceholderSearch", publicName: "zPlaceholderSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zNotFoundText: { classPropertyName: "zNotFoundText", publicName: "zNotFoundText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zMaxTagCount: { classPropertyName: "zMaxTagCount", publicName: "zMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, zDropdownMaxHeight: { classPropertyName: "zDropdownMaxHeight", publicName: "zDropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, zOptionHeight: { classPropertyName: "zOptionHeight", publicName: "zOptionHeight", isSignal: true, isRequired: false, transformFunction: null }, zVirtualScroll: { classPropertyName: "zVirtualScroll", publicName: "zVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, zShowAction: { classPropertyName: "zShowAction", publicName: "zShowAction", isSignal: true, isRequired: false, transformFunction: null }, zOptions: { classPropertyName: "zOptions", publicName: "zOptions", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zSearchServer: { classPropertyName: "zSearchServer", publicName: "zSearchServer", isSignal: true, isRequired: false, transformFunction: null }, zLoadingMore: { classPropertyName: "zLoadingMore", publicName: "zLoadingMore", isSignal: true, isRequired: false, transformFunction: null }, zEnableLoadMore: { classPropertyName: "zEnableLoadMore", publicName: "zEnableLoadMore", isSignal: true, isRequired: false, transformFunction: null }, zScrollDistance: { classPropertyName: "zScrollDistance", publicName: "zScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, zSelectedTemplate: { classPropertyName: "zSelectedTemplate", publicName: "zSelectedTemplate", isSignal: true, isRequired: false, transformFunction: null }, zOptionTemplate: { classPropertyName: "zOptionTemplate", publicName: "zOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, zActionTemplate: { classPropertyName: "zActionTemplate", publicName: "zActionTemplate", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnLoadMore: "zOnLoadMore", zControl: "zControl" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ZSelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    [id]=\"selectId\"\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"6\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zTrigger=\"click\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"isOpen()\"\n    (mousedown)=\"onTriggerMousedown()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground\">{{ zPlaceholder() }}</span>\n        } @else {\n          @for (opt of displayedTags(); track opt.value) {\n            <span #tagEl [class]=\"opt | zTagClasses: zSize() : isTagsMode()\" class=\"z-select-tag\">\n              @if (effectiveSelectedTemplate()) {\n                <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n              } @else {\n                <span\n                  class=\"max-w-25 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zHideDelay]=\"0\"\n                  [zOffset]=\"6\"\n                  [zTriggerElement]=\"tagEl\">\n                  {{ opt.label }}\n                </span>\n              }\n              @if (zAllowClear() && !isDisabled()) {\n                <button\n                  type=\"button\"\n                  class=\"-mr-0.5 flex size-3.5 items-center justify-center rounded-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground\">{{ zPlaceholder() }}</span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (isValidating()) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"isOpen()\" />\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"zPlaceholderSearch()\"\n          [ngModel]=\"searchText()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          spellcheck=\"false\" />\n      </div>\n    }\n\n    @if (zLoading()) {\n      <div class=\"flex flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\n        <div class=\"flex flex-col items-center justify-center py-8\">\n          @if (isEmptyData()) {\n            <z-icon [zType]=\"zEmptyIcon()\" zSize=\"40\" class=\"text-muted-foreground/50 mb-2\" />\n            <span class=\"text-muted-foreground text-sm\">{{ zEmptyText() }}</span>\n          } @else {\n            <z-icon zType=\"lucideSearch\" zSize=\"40\" class=\"text-muted-foreground/50 mb-2\" />\n            <span class=\"text-muted-foreground text-sm\">{{ zNotFoundText() }}</span>\n          }\n        </div>\n      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" />\n            Select All\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n            Remove All\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1);transition:transform .15s ease}.z-select-tag:hover{transform:translateY(-1px)}.z-select-tag:active{transform:scale(.95)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-select', imports: [
+                        FormsModule,
+                        NgClass,
+                        ZIconComponent,
+                        ZPopoverDirective,
+                        NgTemplateOutlet,
+                        ZButtonComponent,
+                        ZTooltipDirective,
+                        ZIsSelectedPipe,
+                        ZOptionClassesPipe,
+                        ZTagClassesPipe,
+                        ZLoadingComponent,
+                        ZHighlightPipe,
+                        ZSafeHtmlPipe,
+                    ], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ZSelectComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    [id]=\"selectId\"\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"6\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zTrigger=\"click\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"isOpen()\"\n    (mousedown)=\"onTriggerMousedown()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground\">{{ zPlaceholder() }}</span>\n        } @else {\n          @for (opt of displayedTags(); track opt.value) {\n            <span #tagEl [class]=\"opt | zTagClasses: zSize() : isTagsMode()\" class=\"z-select-tag\">\n              @if (effectiveSelectedTemplate()) {\n                <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n              } @else {\n                <span\n                  class=\"max-w-25 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zHideDelay]=\"0\"\n                  [zOffset]=\"6\"\n                  [zTriggerElement]=\"tagEl\">\n                  {{ opt.label }}\n                </span>\n              }\n              @if (zAllowClear() && !isDisabled()) {\n                <button\n                  type=\"button\"\n                  class=\"-mr-0.5 flex size-3.5 items-center justify-center rounded-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground\">{{ zPlaceholder() }}</span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (isValidating()) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"isOpen()\" />\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"zPlaceholderSearch()\"\n          [ngModel]=\"searchText()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          spellcheck=\"false\" />\n      </div>\n    }\n\n    @if (zLoading()) {\n      <div class=\"flex flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\n        <div class=\"flex flex-col items-center justify-center py-8\">\n          @if (isEmptyData()) {\n            <z-icon [zType]=\"zEmptyIcon()\" zSize=\"40\" class=\"text-muted-foreground/50 mb-2\" />\n            <span class=\"text-muted-foreground text-sm\">{{ zEmptyText() }}</span>\n          } @else {\n            <z-icon zType=\"lucideSearch\" zSize=\"40\" class=\"text-muted-foreground/50 mb-2\" />\n            <span class=\"text-muted-foreground text-sm\">{{ zNotFoundText() }}</span>\n          }\n        </div>\n      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" />\n            Select All\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n            Remove All\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1);transition:transform .15s ease}.z-select-tag:hover{transform:translateY(-1px)}.z-select-tag:active{transform:scale(.95)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWrap", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zPlaceholderSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholderSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zNotFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNotFoundText", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxTagCount", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zShowAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowAction", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zSearchServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchServer", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zSelectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedTemplate", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zActionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zActionTemplate", required: false }] }], customSelectedDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectSelectedDirective), { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectOptionDirective), { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['dropdownSearchInput', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TAG_COLORS, ZIsSelectedPipe, ZOptionClassesPipe, ZSelectComponent, ZSelectOptionDirective, ZSelectSelectedDirective, ZTagClassesPipe, filterOptions, getTagColor, zSelectOptionVariants, zSelectTagVariants, zSelectVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-select.mjs.map