@shival99/z-ui 2.1.29 → 2.1.31

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

@@ -0,0 +1,1081 @@
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, Injector, DestroyRef, viewChild, viewChildren, contentChild, input, output, signal, effect, computed, untracked, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { injectVirtualizer } from '@shival99/angular-virtual';
+import { ZEmptyComponent } from '@shival99/z-ui/components/z-empty';
+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';
+import { ZHighlightPipe, ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
+import { zTransform, zUuid, zResolveAsyncSelectedOptions, zMergeAsyncOptions, zRemoveVietnamese, zMergeClasses, zCreateEvent, Z_ASYNC_OPTIONS_DEFAULT_PAGE_SIZE, zToAsyncOptionsObservable, zResolveAsyncOptionsHasMore } from '@shival99/z-ui/utils';
+import { Subject, debounceTime, distinctUntilChanged, finalize } from 'rxjs';
+import { cva } from 'class-variance-authority';
+
+class ZAutocompleteOptionDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAutocompleteOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZAutocompleteOptionDirective, isStandalone: true, selector: "[z-autocomplete-option], [zAutocompleteOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAutocompleteOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-autocomplete-option], [zAutocompleteOption]',
+                    standalone: true,
+                }]
+        }] });
+
+const Z_AUTOCOMPLETE_DEFAULT_CONFIG = {
+    minLength: 1,
+    debounceTime: 0,
+    maxDisplayed: 0,
+    highlightMatch: true,
+    emptyMessage: 'i18n_z_ui_autocomplete_no_results',
+    noDataMessage: 'i18n_z_ui_autocomplete_no_data',
+    closeOnSelect: true,
+    optionHeight: 36,
+    dropdownMaxHeight: 280,
+    serverSearch: false,
+};
+
+const zAutocompleteInputVariants = cva([
+    'flex w-full items-center rounded-sm border border-input bg-white shadow-xs',
+    'transition-[border-color,box-shadow,background-color,color,opacity,border-radius] duration-200',
+    'dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+    'outline-none',
+    'text-sm',
+], {
+    variants: {
+        zSize: {
+            sm: 'h-8 px-2 gap-2 text-sm',
+            default: 'h-9 px-2.5 gap-2 text-sm',
+            lg: 'h-10 px-3 gap-2.5 text-sm',
+        },
+        zStatus: {
+            default: 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+            open: 'border-ring',
+            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 zAutocompleteOptionVariants = cva('px-2 py-1.5 cursor-pointer transition-colors text-sm rounded-sm outline-none', {
+    variants: {
+        customTemplate: {
+            true: 'block h-auto whitespace-normal',
+            false: 'flex items-center gap-2 whitespace-nowrap',
+        },
+        active: {
+            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: {
+        customTemplate: false,
+        active: false,
+        disabled: false,
+    },
+});
+
+class ZAutocompleteComponent {
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    _query$ = new Subject();
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    dropdownTpl = viewChild('dropdownTpl', ...(ngDevMode ? [{ debugName: "dropdownTpl" }] : []));
+    virtualScrollRef = viewChild('virtualScrollElement', ...(ngDevMode ? [{ debugName: "virtualScrollRef" }] : []));
+    optionsContainerRef = viewChild('optionsContainer', ...(ngDevMode ? [{ debugName: "optionsContainerRef" }] : []));
+    loadMoreSentinelRef = viewChild('loadMoreSentinel', ...(ngDevMode ? [{ debugName: "loadMoreSentinelRef" }] : []));
+    virtualOptionElements = viewChildren('virtualOptionEl', ...(ngDevMode ? [{ debugName: "virtualOptionElements" }] : []));
+    customOptionDirective = contentChild((ZAutocompleteOptionDirective), ...(ngDevMode ? [{ debugName: "customOptionDirective" }] : []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zOptions = input([], ...(ngDevMode ? [{ debugName: "zOptions" }] : []));
+    zConfig = input({}, ...(ngDevMode ? [{ debugName: "zConfig" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zType = input('default', ...(ngDevMode ? [{ debugName: "zType" }] : []));
+    zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
+    zLabelClass = input('', ...(ngDevMode ? [{ debugName: "zLabelClass" }] : []));
+    zPlaceholder = input('', ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : []));
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : {}), transform: zTransform });
+    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
+    zLoadingOutline = input(false, { ...(ngDevMode ? { debugName: "zLoadingOutline" } : {}), transform: zTransform });
+    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : {}), transform: zTransform });
+    zPrefix = input('', ...(ngDevMode ? [{ debugName: "zPrefix" }] : []));
+    zSuffix = input('', ...(ngDevMode ? [{ debugName: "zSuffix" }] : []));
+    zAllowClear = input(true, { ...(ngDevMode ? { debugName: "zAllowClear" } : {}), transform: zTransform });
+    zVirtualScroll = input(false, { ...(ngDevMode ? { debugName: "zVirtualScroll" } : {}), transform: zTransform });
+    zDynamicSize = input(true, { ...(ngDevMode ? { debugName: "zDynamicSize" } : {}), transform: zTransform });
+    zOptionHeight = input(36, ...(ngDevMode ? [{ debugName: "zOptionHeight" }] : []));
+    zDropdownMaxHeight = input(null, ...(ngDevMode ? [{ debugName: "zDropdownMaxHeight" }] : []));
+    /** @deprecated Dùng zDropdownMaxHeight để đồng nhất với z-select. */
+    zHeightExpand = input(null, ...(ngDevMode ? [{ debugName: "zHeightExpand" }] : []));
+    zMaxVisible = input(null, ...(ngDevMode ? [{ debugName: "zMaxVisible" }] : []));
+    zResetOnSelect = input(true, { ...(ngDevMode ? { debugName: "zResetOnSelect" } : {}), transform: zTransform });
+    zEmptyText = input('', ...(ngDevMode ? [{ debugName: "zEmptyText" }] : []));
+    zEmptyIcon = input('lucideSearchX', ...(ngDevMode ? [{ debugName: "zEmptyIcon" }] : []));
+    zNoDataText = input('', ...(ngDevMode ? [{ debugName: "zNoDataText" }] : []));
+    zNoDataIcon = input('lucidePackageOpen', ...(ngDevMode ? [{ debugName: "zNoDataIcon" }] : []));
+    zAllowCustomValue = input(false, { ...(ngDevMode ? { debugName: "zAllowCustomValue" } : {}), transform: zTransform });
+    zDebounceTime = input(200, ...(ngDevMode ? [{ debugName: "zDebounceTime" }] : []));
+    zLoadingMore = input(false, { ...(ngDevMode ? { debugName: "zLoadingMore" } : {}), transform: zTransform });
+    zEnableLoadMore = input(false, { ...(ngDevMode ? { debugName: "zEnableLoadMore" } : {}), transform: zTransform });
+    zScrollDistance = input(2, ...(ngDevMode ? [{ debugName: "zScrollDistance" }] : []));
+    zKey = input('', ...(ngDevMode ? [{ debugName: "zKey" }] : []));
+    zOptionTemplate = input(null, ...(ngDevMode ? [{ debugName: "zOptionTemplate" }] : []));
+    zOnSearch = output();
+    zOnLoadMore = output();
+    zOnSelect = output();
+    zOnEnter = output();
+    zOnCommit = output();
+    zValueChange = output();
+    zOnBlur = output();
+    zOnFocus = output();
+    zControl = output();
+    zEvent = output();
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
+    _popoverControl = signal(null, ...(ngDevMode ? [{ debugName: "_popoverControl" }] : []));
+    _selectedOption = signal(null, ...(ngDevMode ? [{ debugName: "_selectedOption" }] : []));
+    _asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "_asyncOptions" }] : []));
+    _asyncKeyword = signal('', ...(ngDevMode ? [{ debugName: "_asyncKeyword" }] : []));
+    _asyncPage = signal(1, ...(ngDevMode ? [{ debugName: "_asyncPage" }] : []));
+    _asyncHasMore = signal(false, ...(ngDevMode ? [{ debugName: "_asyncHasMore" }] : []));
+    _asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "_asyncLoading" }] : []));
+    _asyncLoadingMore = signal(false, ...(ngDevMode ? [{ debugName: "_asyncLoadingMore" }] : []));
+    uiState = signal({
+        isOpen: false,
+        isFocused: false,
+        touched: false,
+        dirty: false,
+    }, ...(ngDevMode ? [{ debugName: "uiState" }] : []));
+    actualPosition = signal('bottom', ...(ngDevMode ? [{ debugName: "actualPosition" }] : []));
+    autocompleteId = zUuid('z-autocomplete');
+    dropdownId = `${this.autocompleteId}-dropdown`;
+    inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+    debouncedQuery = signal('', ...(ngDevMode ? [{ debugName: "debouncedQuery" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
+    _pendingSearch = signal(false, ...(ngDevMode ? [{ debugName: "_pendingSearch" }] : []));
+    _localLoadingTimeout = null;
+    _loadMoreObserver = null;
+    _virtualScrollListener = null;
+    _asyncLoadSubscription = null;
+    _asyncRequestId = 0;
+    _lastFilteredOptionsLength = 0;
+    _shouldScrollActiveOption = false;
+    /** Stores input value before keyboard navigation for ESC revert */
+    _valueBeforeNavigation = null;
+    virtualizer = injectVirtualizer(() => ({
+        scrollElement: this.virtualScrollRef(),
+        count: this.filteredOptions().length,
+        estimateSize: () => this.effectiveOptionHeight(),
+        measureElement: (element) => element.getBoundingClientRect().height,
+        overscan: 5,
+    }));
+    _measureVirtualItems = effect(() => {
+        if (!this.zDynamicSize()) {
+            return;
+        }
+        const elements = this.virtualOptionElements();
+        for (const el of elements) {
+            this.virtualizer.measureElement(el.nativeElement);
+        }
+    }, ...(ngDevMode ? [{ debugName: "_measureVirtualItems" }] : []));
+    config = computed(() => ({
+        ...Z_AUTOCOMPLETE_DEFAULT_CONFIG,
+        ...this.zConfig(),
+    }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    hasAsyncOptions = computed(() => !!this.config().async?.load, ...(ngDevMode ? [{ debugName: "hasAsyncOptions" }] : []));
+    asyncSelectedOptions = computed(() => zResolveAsyncSelectedOptions(this.config().async), ...(ngDevMode ? [{ debugName: "asyncSelectedOptions" }] : []));
+    sourceOptions = computed(() => {
+        if (!this.hasAsyncOptions()) {
+            return this.zOptions();
+        }
+        return zMergeAsyncOptions(this._asyncOptions(), this.asyncSelectedOptions(), this.config().async?.dedupeBy);
+    }, ...(ngDevMode ? [{ debugName: "sourceOptions" }] : []));
+    isLoading = computed(() => this.zLoading() || this._asyncLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    isLoadingMore = computed(() => this.zLoadingMore() || this._asyncLoadingMore(), ...(ngDevMode ? [{ debugName: "isLoadingMore" }] : []));
+    canLoadMore = computed(() => this.hasAsyncOptions() ? this._asyncHasMore() : this.zEnableLoadMore(), ...(ngDevMode ? [{ debugName: "canLoadMore" }] : []));
+    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" }] : []));
+    effectiveOptionHeight = computed(() => this.zOptionHeight() || this.config().optionHeight, ...(ngDevMode ? [{ debugName: "effectiveOptionHeight" }] : []));
+    effectiveHeightExpand = computed(() => this.zDropdownMaxHeight() ?? this.zHeightExpand() ?? this.config().dropdownMaxHeight, ...(ngDevMode ? [{ debugName: "effectiveHeightExpand" }] : []));
+    effectiveEmptyText = computed(() => this.zEmptyText() || this.config().emptyMessage, ...(ngDevMode ? [{ debugName: "effectiveEmptyText" }] : []));
+    effectiveNoDataText = computed(() => this.zNoDataText() || this.config().noDataMessage, ...(ngDevMode ? [{ debugName: "effectiveNoDataText" }] : []));
+    effectiveDebounceTime = computed(() => this.zConfig().debounceTime ?? this.zDebounceTime(), ...(ngDevMode ? [{ debugName: "effectiveDebounceTime" }] : []));
+    effectiveOptionTemplate = computed(() => {
+        const directive = this.customOptionDirective();
+        if (directive) {
+            return directive.templateRef;
+        }
+        return this.zOptionTemplate();
+    }, ...(ngDevMode ? [{ debugName: "effectiveOptionTemplate" }] : []));
+    hasCustomOptionTemplate = computed(() => this.effectiveOptionTemplate() !== null, ...(ngDevMode ? [{ debugName: "hasCustomOptionTemplate" }] : []));
+    selected = computed(() => {
+        const option = this._selectedOption();
+        if (!option) {
+            return [];
+        }
+        return [option];
+    }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    highlightQuery = computed(() => this.zType() === 'address_bar' ? this.searchQuery() : this.debouncedQuery(), ...(ngDevMode ? [{ debugName: "highlightQuery" }] : []));
+    /**
+     * Local-mode loading state after debounce to avoid quick flicker.
+     * Server mode relies only on zLoading from parent.
+     */
+    isLoadingState = computed(() => {
+        if (this.config().serverSearch || this.hasAsyncOptions()) {
+            return false;
+        }
+        const hasInput = this.inputValue().trim() !== '';
+        return hasInput && this._pendingSearch();
+    }, ...(ngDevMode ? [{ debugName: "isLoadingState" }] : []));
+    isPositionTop = computed(() => {
+        const pos = this.actualPosition();
+        return pos.startsWith('top');
+    }, ...(ngDevMode ? [{ debugName: "isPositionTop" }] : []));
+    shouldUseVirtualScroll = computed(() => {
+        if (this.zVirtualScroll()) {
+            return true;
+        }
+        if (this.hasCustomOptionTemplate()) {
+            return false;
+        }
+        if (this.canLoadMore()) {
+            return false;
+        }
+        const maxVisible = this.zMaxVisible();
+        if (maxVisible !== null && this.sourceOptions().length > maxVisible) {
+            return true;
+        }
+        return this.sourceOptions().length > 50;
+    }, ...(ngDevMode ? [{ debugName: "shouldUseVirtualScroll" }] : []));
+    filteredOptions = computed(() => {
+        const options = this.sourceOptions();
+        const cfg = this.config();
+        const allowCustom = this.zAllowCustomValue();
+        const query = this.zType() === 'address_bar' ? this.searchQuery() : this.debouncedQuery();
+        // If server search is enabled, skip local filtering - just apply maxDisplayed limit
+        if (cfg.serverSearch || this.hasAsyncOptions()) {
+            let result = options;
+            if (cfg.maxDisplayed && options.length > cfg.maxDisplayed) {
+                result = options.slice(0, cfg.maxDisplayed);
+            }
+            // Allow custom value: if no results from server, show typed text as option
+            if (allowCustom && result.length === 0 && query.trim() !== '') {
+                return [{ label: query.trim(), value: query.trim() }];
+            }
+            return result;
+        }
+        if (!query || query.trim() === '') {
+            if (cfg.maxDisplayed && options.length > cfg.maxDisplayed) {
+                return options.slice(0, cfg.maxDisplayed);
+            }
+            return options;
+        }
+        const normalizedQuery = zRemoveVietnamese(query.toLowerCase());
+        let filtered = options.filter(opt => {
+            const normalizedLabel = zRemoveVietnamese(opt.label.toLowerCase());
+            return normalizedLabel.includes(normalizedQuery);
+        });
+        if (cfg.maxDisplayed && filtered.length > cfg.maxDisplayed) {
+            filtered = filtered.slice(0, cfg.maxDisplayed);
+        }
+        if (allowCustom && filtered.length === 0 && query.trim() !== '') {
+            return [{ label: query.trim(), value: query.trim() }];
+        }
+        return filtered;
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    optionViews = computed(() => this.filteredOptions().map((option, index) => ({
+        option,
+        index,
+        trackKey: `${String(this._getOptionKey(option))}::${index}`,
+    })), ...(ngDevMode ? [{ debugName: "optionViews" }] : []));
+    hasValue = computed(() => {
+        const value = this.inputValue();
+        return value !== null && value !== undefined && value.trim() !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    currentStatus = computed(() => {
+        if (this.isDisabled()) {
+            return 'disabled';
+        }
+        if (this.isReadonly()) {
+            return 'readonly';
+        }
+        if (this.uiState().isOpen) {
+            return 'open';
+        }
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
+    inputClasses = computed(() => zMergeClasses(zAutocompleteInputVariants({
+        zSize: this.zSize(),
+        zStatus: this.currentStatus(),
+    }), this.zLoading() && this.zLoadingOutline() ? 'z-loading-outline-active !ring-ring/50 !ring-[3px]' : '', this.class()), ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    state = computed(() => ({
+        focused: this.uiState().isFocused,
+        touched: this.uiState().touched,
+        dirty: this.uiState().dirty,
+        disabled: this.isDisabled(),
+        readonly: this.isReadonly(),
+        open: this.uiState().isOpen,
+    }), ...(ngDevMode ? [{ debugName: "state" }] : []));
+    _onChange = () => void 0;
+    _onTouched = () => void 0;
+    _ngControl = null;
+    _isNavigationFilling = false;
+    constructor() {
+        effect(onCleanup => {
+            const triggerEl = this.triggerRef()?.nativeElement;
+            if (!triggerEl) {
+                return;
+            }
+            const observer = new ResizeObserver(() => {
+                this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);
+            });
+            observer.observe(triggerEl);
+            this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);
+            onCleanup(() => {
+                observer.disconnect();
+            });
+        });
+        effect(() => {
+            const options = this.filteredOptions();
+            const { isOpen } = this.uiState();
+            if (!isOpen || options.length === 0) {
+                this._lastFilteredOptionsLength = options.length;
+                return;
+            }
+            const previousLength = this._lastFilteredOptionsLength;
+            const currentIndex = untracked(() => this.activeIndex());
+            this._lastFilteredOptionsLength = options.length;
+            if (currentIndex < 0 || currentIndex >= options.length || options.length <= previousLength) {
+                this.activeIndex.set(0);
+            }
+        });
+        effect(() => {
+            const idx = this.activeIndex();
+            const { isOpen } = this.uiState();
+            if (!isOpen || idx < 0) {
+                return;
+            }
+            if (!this._shouldScrollActiveOption || this.shouldUseVirtualScroll() || this.canLoadMore()) {
+                return;
+            }
+            this._shouldScrollActiveOption = false;
+            const container = this.optionsContainerRef()?.nativeElement;
+            if (!container) {
+                return;
+            }
+            const options = container.querySelectorAll('.z-autocomplete-option');
+            const activeOption = options[idx];
+            if (activeOption) {
+                activeOption.scrollIntoView({ block: 'nearest' });
+            }
+        });
+        effect(onCleanup => {
+            const sentinel = this.loadMoreSentinelRef();
+            const { isOpen } = this.uiState();
+            const optionsCount = this.filteredOptions().length;
+            if (!sentinel || !isOpen || optionsCount === 0 || !this.canLoadMore()) {
+                this._cleanupLoadMoreObserver();
+                return;
+            }
+            this._setupLoadMoreObserver();
+            onCleanup(() => {
+                this._cleanupLoadMoreObserver();
+            });
+        });
+        effect(onCleanup => {
+            const { isOpen } = this.uiState();
+            const useVirtual = this.shouldUseVirtualScroll();
+            const optionsCount = this.filteredOptions().length;
+            if (!isOpen || !useVirtual || optionsCount === 0) {
+                this._cleanupVirtualScrollListener();
+                return;
+            }
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this._setupVirtualScrollLoadMore();
+                });
+            });
+            onCleanup(() => {
+                this._cleanupVirtualScrollListener();
+            });
+        });
+    }
+    ngOnInit() {
+        this._setupDebounce();
+        this._emitControl();
+        queueMicrotask(() => {
+            try {
+                this._ngControl = this._injector.get(NgControl, null);
+                if (this._ngControl?.control) {
+                    this._formControl.set(this._ngControl.control);
+                }
+            }
+            catch {
+                this._ngControl = null;
+            }
+        });
+    }
+    writeValue(value) {
+        this._value.set(value ?? '');
+        this.inputValue.set(value ?? '');
+        this.debouncedQuery.set(value ?? '');
+        if (this.zType() === 'address_bar') {
+            this.searchQuery.set(value ?? '');
+        }
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    onInput(event) {
+        const { value } = event.target;
+        this._clearLocalLoadingTimer();
+        this._pendingSearch.set(false);
+        this.inputValue.set(value);
+        this._value.set(value);
+        this.uiState.update(s => ({ ...s, dirty: true }));
+        this._onChange(value);
+        if (!this._isNavigationFilling) {
+            this._query$.next(value);
+        }
+        this.zValueChange.emit(value);
+        if (!this.uiState().isOpen) {
+            this._openPanel();
+        }
+        this._selectedOption.set(null);
+    }
+    onFocus(event) {
+        if (this.isReadonly()) {
+            event.target.blur();
+            return;
+        }
+        this.uiState.update(s => ({ ...s, isFocused: true }));
+        this.zOnFocus.emit(event);
+        this.zEvent.emit(zCreateEvent('focus', event));
+        this._openPanel();
+    }
+    onInputClick() {
+        if (this.uiState().isOpen) {
+            return;
+        }
+        this._openPanel();
+    }
+    onBlur(event) {
+        this.uiState.update(s => ({ ...s, isFocused: false }));
+        this.zOnBlur.emit(event);
+        this.zEvent.emit(zCreateEvent('blur', event));
+        if (this.uiState().dirty) {
+            this.uiState.update(s => ({ ...s, touched: true }));
+        }
+        this._onTouched();
+        const currentValue = this.inputValue();
+        this.zOnCommit.emit({ value: currentValue, source: 'blur' });
+    }
+    onKeydown(event) {
+        if (this.isInteractionDisabled()) {
+            return;
+        }
+        const { isOpen } = this.uiState();
+        const options = this.filteredOptions();
+        const currentValue = this.inputValue();
+        const isAddressBarMode = this.zType() === 'address_bar';
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (!isOpen) {
+                this._openPanel();
+                return;
+            }
+            this._handleEnterKey(options, currentValue);
+            return;
+        }
+        if (!isOpen) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this._openPanel();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (this._valueBeforeNavigation === null) {
+                    this._valueBeforeNavigation = currentValue;
+                }
+                this._shouldScrollActiveOption = true;
+                this.activeIndex.update(i => (i < options.length - 1 ? i + 1 : 0));
+                if (isAddressBarMode) {
+                    this._fillInputFromActiveOption();
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this._valueBeforeNavigation === null) {
+                    this._valueBeforeNavigation = currentValue;
+                }
+                this._shouldScrollActiveOption = true;
+                this.activeIndex.update(i => (i > 0 ? i - 1 : options.length - 1));
+                if (isAddressBarMode) {
+                    this._fillInputFromActiveOption();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                if (isAddressBarMode && this._valueBeforeNavigation !== null) {
+                    this._revertToValueBeforeNavigation();
+                }
+                this._valueBeforeNavigation = null;
+                this._closePanel();
+                break;
+            case 'Tab':
+                this._valueBeforeNavigation = null;
+                this._closePanel();
+                break;
+        }
+    }
+    _handleEnterKey(options, currentValue) {
+        const trimmedValue = currentValue.trim();
+        this._valueBeforeNavigation = null;
+        this.zOnCommit.emit({ value: trimmedValue, source: 'enter' });
+        if (this.zType() === 'address_bar') {
+            this._closePanel();
+            return;
+        }
+        const idx = this.activeIndex();
+        if (options.length > 0) {
+            const selectedIdx = idx >= 0 && idx < options.length ? idx : 0;
+            this.selectOption(options[selectedIdx]);
+            return;
+        }
+        if (this.zAllowCustomValue() && trimmedValue) {
+            this.zOnEnter.emit(trimmedValue);
+            this._resetInput();
+        }
+    }
+    _fillInputFromActiveOption() {
+        const idx = this.activeIndex();
+        const options = this.filteredOptions();
+        if (idx < 0 || idx >= options.length) {
+            return;
+        }
+        const option = options[idx];
+        this._isNavigationFilling = true;
+        this.inputValue.set(option.label);
+        this._value.set(option.label);
+        this._onChange(option.label);
+        this.zValueChange.emit(option.label);
+        const inputEl = this.inputRef()?.nativeElement;
+        if (inputEl) {
+            inputEl.value = option.label;
+        }
+        setTimeout(() => {
+            this._isNavigationFilling = false;
+        }, 0);
+    }
+    _revertToValueBeforeNavigation() {
+        if (this._valueBeforeNavigation === null) {
+            return;
+        }
+        const value = this._valueBeforeNavigation;
+        this._isNavigationFilling = true;
+        this.inputValue.set(value);
+        this._value.set(value);
+        this._onChange(value);
+        this.zValueChange.emit(value);
+        if (this.zType() === 'address_bar') {
+            this.searchQuery.set(value);
+        }
+        const inputEl = this.inputRef()?.nativeElement;
+        if (inputEl) {
+            inputEl.value = value;
+        }
+        this._valueBeforeNavigation = null;
+        setTimeout(() => {
+            this._isNavigationFilling = false;
+        }, 0);
+    }
+    _resetInput() {
+        if (!this.zResetOnSelect()) {
+            this._closePanel();
+            this.activeIndex.set(-1);
+            return;
+        }
+        this.inputValue.set('');
+        this._value.set('');
+        this._onChange('');
+        this.zValueChange.emit('');
+        if (!this.hasAsyncOptions()) {
+            this._query$.next('');
+        }
+        this._closePanel();
+        this.activeIndex.set(-1);
+    }
+    onPopoverControl(control) {
+        this._popoverControl.set(control);
+    }
+    onPopoverShow() {
+        this.uiState.update(s => ({ ...s, isOpen: true }));
+        this._resetOptionsScrollTop();
+        this._loadAsyncOptionsOnFocus();
+        // Panel chỉ mở khi user focus/click thật, tức ancestor (vd. modal) đã hết animation transform —
+        // đo lại ở đây để tránh dùng width "đóng băng" từ lúc effect khởi tạo đo hụt giữa lúc scale().
+        const triggerEl = this.triggerRef()?.nativeElement;
+        if (triggerEl) {
+            this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);
+        }
+        setTimeout(() => {
+            this.inputRef()?.nativeElement.focus();
+        }, 50);
+    }
+    onPopoverHideStart() {
+        this.uiState.update(s => ({ ...s, isOpen: false }));
+        this.activeIndex.set(-1);
+        this._clearLocalLoadingTimer();
+        this._pendingSearch.set(false);
+        this.debouncedQuery.set('');
+        if (!this.hasAsyncOptions()) {
+            this._query$.next('');
+        }
+    }
+    onPopoverHideEnd() {
+        this.actualPosition.set('bottom');
+    }
+    onPositionChange(position) {
+        this.actualPosition.set(position);
+    }
+    selectOption(option) {
+        if (option.disabled) {
+            return;
+        }
+        this.uiState.update(s => ({ ...s, dirty: true }));
+        this.zOnSelect.emit(option);
+        this._selectedOption.set(option);
+        const newValue = this.zResetOnSelect() ? '' : option.label;
+        this.inputValue.set(newValue);
+        this._value.set(newValue);
+        this.debouncedQuery.set(newValue);
+        this._onChange(newValue);
+        this.zValueChange.emit(newValue);
+        this._valueBeforeNavigation = null;
+        if (this.config().closeOnSelect) {
+            this._closePanel();
+        }
+        this.activeIndex.set(-1);
+    }
+    clearInput(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.inputValue.set('');
+        this._value.set('');
+        this.uiState.update(s => ({ ...s, dirty: true }));
+        this._onChange('');
+        this.zValueChange.emit('');
+        this._selectedOption.set(null);
+        this._closePanel();
+        this._clearLocalLoadingTimer();
+        this._pendingSearch.set(false);
+        this.debouncedQuery.set('');
+        if (this.zType() === 'address_bar') {
+            this.searchQuery.set('');
+        }
+        if (!this.hasAsyncOptions()) {
+            this._query$.next('');
+        }
+        this.zOnCommit.emit({ value: '', source: 'blur' });
+        this._resetAsyncOptions();
+        setTimeout(() => {
+            this.inputRef()?.nativeElement.focus();
+        });
+    }
+    getOptionClasses(option, index) {
+        return zAutocompleteOptionVariants({
+            customTemplate: this.hasCustomOptionTemplate(),
+            active: this.activeIndex() === index,
+            disabled: option.disabled ?? false,
+        });
+    }
+    trackByValue = (index, option) => {
+        const key = this._getOptionKey(option);
+        return `${String(key)}::${index}`;
+    };
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    blur() {
+        this.inputRef()?.nativeElement.blur();
+    }
+    clear() {
+        this.inputValue.set('');
+        this._value.set('');
+        this.debouncedQuery.set('');
+        this._onChange('');
+        this.zValueChange.emit('');
+        this._selectedOption.set(null);
+        this._closePanel();
+        this._clearLocalLoadingTimer();
+        this._pendingSearch.set(false);
+        this._resetAsyncOptions();
+        if (this.zType() === 'address_bar') {
+            this.searchQuery.set('');
+        }
+    }
+    reset() {
+        this.clear();
+        this.uiState.update(s => ({ ...s, touched: false, dirty: false }));
+    }
+    open() {
+        this._openPanel();
+    }
+    close() {
+        this._closePanel();
+    }
+    setValue(value) {
+        this._value.set(value);
+        this.inputValue.set(value);
+        this.debouncedQuery.set(value);
+        this._selectedOption.set(null);
+        this._onChange(value);
+        if (this.zType() === 'address_bar') {
+            this.searchQuery.set(value);
+        }
+    }
+    _openPanel() {
+        if (this.isInteractionDisabled()) {
+            return;
+        }
+        this._popoverControl()?.show();
+    }
+    _closePanel() {
+        this._popoverControl()?.close();
+    }
+    _setupDebounce() {
+        this._query$
+            .pipe(debounceTime(this.effectiveDebounceTime()), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))
+            .subscribe(query => {
+            if (this.zType() === 'address_bar') {
+                this.searchQuery.set(query);
+            }
+            this.debouncedQuery.set(query);
+            this.zOnSearch.emit(query);
+            if (this.hasAsyncOptions()) {
+                this._loadAsyncOptions(query, false);
+                return;
+            }
+            if (this.config().serverSearch) {
+                return;
+            }
+            this._clearLocalLoadingTimer();
+            this._pendingSearch.set(true);
+            this._localLoadingTimeout = setTimeout(() => {
+                this._pendingSearch.set(false);
+                this._localLoadingTimeout = null;
+            }, 100);
+        });
+    }
+    _loadAsyncOptionsOnFocus() {
+        const asyncConfig = this.config().async;
+        if (!asyncConfig?.loadOnFocus) {
+            return;
+        }
+        const keyword = this.inputValue().trim();
+        if (this._asyncKeyword() === keyword && this._asyncOptions().length > 0) {
+            return;
+        }
+        this._loadAsyncOptions(keyword, false);
+    }
+    _loadAsyncOptions(keyword, append) {
+        const asyncConfig = this.config().async;
+        if (!asyncConfig) {
+            return;
+        }
+        const normalizedKeyword = keyword.trim();
+        const pageSize = asyncConfig.pageSize ?? Z_ASYNC_OPTIONS_DEFAULT_PAGE_SIZE;
+        const { minLength } = this.config();
+        const canLoadEmptyOnFocus = asyncConfig.loadOnFocus && normalizedKeyword.length === 0;
+        if (!append && normalizedKeyword.length < minLength && !canLoadEmptyOnFocus) {
+            this._resetAsyncOptions();
+            return;
+        }
+        if (append && (!this._asyncHasMore() || this._asyncLoading() || this._asyncLoadingMore())) {
+            return;
+        }
+        const page = append ? this._asyncPage() + 1 : 1;
+        const requestId = ++this._asyncRequestId;
+        const scrollTopBeforeAppend = append ? this._getAsyncOptionsScrollTop() : null;
+        if (!append) {
+            this._asyncLoadSubscription?.unsubscribe();
+            this._asyncKeyword.set(normalizedKeyword);
+            this._asyncLoading.set(true);
+            this._asyncHasMore.set(false);
+        }
+        else {
+            this._asyncLoadingMore.set(true);
+        }
+        let result;
+        try {
+            result = asyncConfig.load({
+                keyword: normalizedKeyword,
+                page,
+                pageSize,
+            });
+        }
+        catch (error) {
+            this._handleAsyncOptionsError(error, append);
+            return;
+        }
+        this._asyncLoadSubscription = zToAsyncOptionsObservable(result)
+            .pipe(finalize(() => {
+            if (requestId !== this._asyncRequestId) {
+                return;
+            }
+            this._asyncLoading.set(false);
+            this._asyncLoadingMore.set(false);
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: response => {
+                if (requestId !== this._asyncRequestId) {
+                    return;
+                }
+                const nextItems = response.items ?? [];
+                const previousCount = this._asyncOptions().length;
+                const mergedOptions = append
+                    ? zMergeAsyncOptions(this._asyncOptions(), nextItems, asyncConfig.dedupeBy)
+                    : zMergeAsyncOptions([], nextItems, asyncConfig.dedupeBy);
+                const hasNewItems = mergedOptions.length > previousCount;
+                if (append && !hasNewItems) {
+                    this._asyncHasMore.set(false);
+                    this._restoreAsyncOptionsScrollTop(scrollTopBeforeAppend);
+                    return;
+                }
+                this._asyncOptions.set(mergedOptions);
+                this._asyncPage.set(page);
+                this._asyncHasMore.set(append && !hasNewItems ? false : zResolveAsyncOptionsHasMore(response, pageSize, mergedOptions.length));
+                if (append) {
+                    this._restoreAsyncOptionsScrollTop(scrollTopBeforeAppend);
+                    return;
+                }
+                this._resetOptionsScrollTop();
+            },
+            error: error => {
+                if (requestId !== this._asyncRequestId) {
+                    return;
+                }
+                this._handleAsyncOptionsError(error, append);
+            },
+        });
+    }
+    _handleAsyncOptionsError(error, append) {
+        console.error('ZAutocomplete async options load failed:', error);
+        if (!append) {
+            this._asyncOptions.set([]);
+            this._asyncPage.set(1);
+        }
+        this._asyncHasMore.set(false);
+        this._asyncLoading.set(false);
+        this._asyncLoadingMore.set(false);
+    }
+    _getAsyncOptionsScrollTop() {
+        return this._getOptionsScrollElement()?.scrollTop ?? null;
+    }
+    _restoreAsyncOptionsScrollTop(scrollTop) {
+        if (scrollTop === null) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            const scrollElement = this._getOptionsScrollElement();
+            if (scrollElement) {
+                scrollElement.scrollTop = scrollTop;
+            }
+        });
+    }
+    _resetOptionsScrollTop(attempt = 0) {
+        requestAnimationFrame(() => {
+            const scrollElement = this._getOptionsScrollElement();
+            if (!scrollElement && attempt < 3) {
+                this._resetOptionsScrollTop(attempt + 1);
+                return;
+            }
+            if (!scrollElement) {
+                return;
+            }
+            if (this.shouldUseVirtualScroll()) {
+                this.virtualizer.scrollToOffset(0);
+            }
+            scrollElement.scrollTop = 0;
+        });
+    }
+    _getOptionsScrollElement() {
+        if (this.shouldUseVirtualScroll()) {
+            return this.virtualScrollRef()?.nativeElement ?? null;
+        }
+        return this.optionsContainerRef()?.nativeElement ?? null;
+    }
+    _resetAsyncOptions() {
+        this._asyncLoadSubscription?.unsubscribe();
+        this._asyncRequestId++;
+        this._asyncOptions.set([]);
+        this._asyncKeyword.set('');
+        this._asyncPage.set(1);
+        this._asyncHasMore.set(false);
+        this._asyncLoading.set(false);
+        this._asyncLoadingMore.set(false);
+    }
+    _clearLocalLoadingTimer() {
+        if (!this._localLoadingTimeout) {
+            return;
+        }
+        clearTimeout(this._localLoadingTimeout);
+        this._localLoadingTimeout = null;
+    }
+    _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.isLoadingMore()) {
+                this._handleLoadMore(container.scrollTop);
+            }
+        }, {
+            root: container,
+            rootMargin: '100px',
+            threshold: 0,
+        });
+        this._loadMoreObserver.observe(sentinel);
+    }
+    _cleanupLoadMoreObserver() {
+        if (!this._loadMoreObserver) {
+            return;
+        }
+        this._loadMoreObserver.disconnect();
+        this._loadMoreObserver = null;
+    }
+    _setupVirtualScrollLoadMore() {
+        this._cleanupVirtualScrollListener();
+        const scrollElement = this.virtualScrollRef()?.nativeElement;
+        if (!scrollElement) {
+            return;
+        }
+        const handleScroll = () => {
+            if (this.isLoadingMore()) {
+                return;
+            }
+            const { scrollTop, scrollHeight, clientHeight } = scrollElement;
+            const threshold = clientHeight * this.zScrollDistance();
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+            if (distanceFromBottom <= threshold) {
+                this._handleLoadMore(scrollTop);
+            }
+        };
+        scrollElement.addEventListener('scroll', handleScroll);
+        this._virtualScrollListener = () => {
+            scrollElement.removeEventListener('scroll', handleScroll);
+        };
+    }
+    _cleanupVirtualScrollListener() {
+        if (!this._virtualScrollListener) {
+            return;
+        }
+        this._virtualScrollListener();
+        this._virtualScrollListener = null;
+    }
+    _handleLoadMore(scrollTop) {
+        if (this.hasAsyncOptions()) {
+            if (!this.canLoadMore()) {
+                return;
+            }
+            this._loadAsyncOptions(this._asyncKeyword(), true);
+            return;
+        }
+        this.zOnLoadMore.emit({
+            currentCount: this.filteredOptions().length,
+            scrollTop,
+        });
+    }
+    _emitControl() {
+        this.zControl.emit({
+            focus: () => this.focus(),
+            blur: () => this.blur(),
+            clear: () => this.clear(),
+            reset: () => this.reset(),
+            open: () => this.open(),
+            close: () => this.close(),
+            setValue: (val) => this.setValue(val),
+            value: this._value.asReadonly(),
+            selected: this.selected,
+            state: this.state,
+        });
+    }
+    _getOptionKey(option) {
+        const key = this.zKey();
+        if (key && key in option) {
+            return option[key];
+        }
+        if (key && typeof option.value === 'object' && option.value !== null && key in option.value) {
+            return option.value[key];
+        }
+        return option.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZAutocompleteComponent, isStandalone: true, selector: "z-autocomplete", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zOptions: { classPropertyName: "zOptions", publicName: "zOptions", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", 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 }, 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 }, zLoadingOutline: { classPropertyName: "zLoadingOutline", publicName: "zLoadingOutline", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zSuffix: { classPropertyName: "zSuffix", publicName: "zSuffix", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zVirtualScroll: { classPropertyName: "zVirtualScroll", publicName: "zVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, zDynamicSize: { classPropertyName: "zDynamicSize", publicName: "zDynamicSize", isSignal: true, isRequired: false, transformFunction: null }, zOptionHeight: { classPropertyName: "zOptionHeight", publicName: "zOptionHeight", isSignal: true, isRequired: false, transformFunction: null }, zDropdownMaxHeight: { classPropertyName: "zDropdownMaxHeight", publicName: "zDropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, zHeightExpand: { classPropertyName: "zHeightExpand", publicName: "zHeightExpand", isSignal: true, isRequired: false, transformFunction: null }, zMaxVisible: { classPropertyName: "zMaxVisible", publicName: "zMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, zResetOnSelect: { classPropertyName: "zResetOnSelect", publicName: "zResetOnSelect", 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 }, zNoDataText: { classPropertyName: "zNoDataText", publicName: "zNoDataText", isSignal: true, isRequired: false, transformFunction: null }, zNoDataIcon: { classPropertyName: "zNoDataIcon", publicName: "zNoDataIcon", isSignal: true, isRequired: false, transformFunction: null }, zAllowCustomValue: { classPropertyName: "zAllowCustomValue", publicName: "zAllowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, zDebounceTime: { classPropertyName: "zDebounceTime", publicName: "zDebounceTime", 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 }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zOptionTemplate: { classPropertyName: "zOptionTemplate", publicName: "zOptionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnLoadMore: "zOnLoadMore", zOnSelect: "zOnSelect", zOnEnter: "zOnEnter", zOnCommit: "zOnCommit", zValueChange: "zValueChange", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zControl: "zControl", zEvent: "zEvent" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ZAutocompleteComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "customOptionDirective", first: true, predicate: (ZAutocompleteOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zAutocomplete"], ngImport: i0, template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" 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    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\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    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"isReadonly() && $event.preventDefault()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (isLoadingMore()) {\n        <div class=\"z-autocomplete-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  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { 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.9", ngImport: i0, type: ZAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-autocomplete', imports: [
+                        FormsModule,
+                        NgClass,
+                        NgTemplateOutlet,
+                        ZIconComponent,
+                        ZLoadingComponent,
+                        ZPopoverDirective,
+                        ZTooltipDirective,
+                        ZEmptyComponent,
+                        ZHighlightPipe,
+                        ZSafeHtmlPipe,
+                    ], standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ZAutocompleteComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zAutocomplete', template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" 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    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\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    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"isReadonly() && $event.preventDefault()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (isLoadingMore()) {\n        <div class=\"z-autocomplete-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  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], virtualOptionElements: [{ type: i0.ViewChildren, args: ['virtualOptionEl', { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZAutocompleteOptionDirective), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", 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 }] }], 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 }] }], zLoadingOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingOutline", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zDynamicSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDynamicSize", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zHeightExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeightExpand", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zResetOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResetOnSelect", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zNoDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNoDataText", required: false }] }], zNoDataIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNoDataIcon", required: false }] }], zAllowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowCustomValue", required: false }] }], zDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounceTime", 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 }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zOnSelect: [{ type: i0.Output, args: ["zOnSelect"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnCommit: [{ type: i0.Output, args: ["zOnCommit"] }], zValueChange: [{ type: i0.Output, args: ["zValueChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZAutocompleteComponent, ZAutocompleteOptionDirective, Z_AUTOCOMPLETE_DEFAULT_CONFIG, zAutocompleteInputVariants, zAutocompleteOptionVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-autocomplete.mjs.map