@shival99/z-ui 1.9.23 → 1.9.24

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

@@ -13,8 +13,8 @@ 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 { ZTranslateService } from '@shival99/z-ui/services';
-import { zRemoveVietnamese, zMergeClasses, zTransform, zUuid, zCreateEvent } from '@shival99/z-ui/utils';
-import { Subject, debounceTime, merge, filter, isObservable, takeUntil, catchError, of, firstValueFrom } from 'rxjs';
+import { zRemoveVietnamese, zMergeClasses, zTransform, zUuid, zMergeAsyncOptions, zCreateEvent, Z_ASYNC_OPTIONS_DEFAULT_PAGE_SIZE, zToAsyncOptionsObservable, zResolveAsyncOptionsHasMore } from '@shival99/z-ui/utils';
+import { Subject, debounceTime, merge, filter, finalize, isObservable, takeUntil, catchError, of, firstValueFrom } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
 class ZSelectOptionDirective {
@@ -137,6 +137,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 }]
         }] });
 
+const Z_SELECT_DEFAULT_CONFIG = {
+    minLength: 0,
+    debounceTime: 300,
+};
 const TAG_COLORS = [
     {
         bg: 'bg-blue-100 dark:bg-blue-950',
@@ -283,6 +287,7 @@ class ZSelectComponent {
     zVirtualScroll = input(false, { ...(ngDevMode ? { debugName: "zVirtualScroll" } : {}), transform: zTransform });
     zShowAction = input(false, { ...(ngDevMode ? { debugName: "zShowAction" } : {}), transform: zTransform });
     zOptions = input([], ...(ngDevMode ? [{ debugName: "zOptions" }] : []));
+    zConfig = input({}, ...(ngDevMode ? [{ debugName: "zConfig" }] : []));
     zTranslateLabels = input(true, { ...(ngDevMode ? { debugName: "zTranslateLabels" } : {}), transform: zTransform });
     zKey = input('', ...(ngDevMode ? [{ debugName: "zKey" }] : []));
     zSearchServer = input(false, { ...(ngDevMode ? { debugName: "zSearchServer" } : {}), transform: zTransform });
@@ -307,6 +312,12 @@ class ZSelectComponent {
     _allKnownOptions = signal([], ...(ngDevMode ? [{ debugName: "_allKnownOptions" }] : []));
     _asyncErrors = signal(new Map(), ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : []));
     _customError = signal(null, ...(ngDevMode ? [{ debugName: "_customError" }] : []));
+    _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,
         hasScrollShadow: false,
@@ -320,6 +331,16 @@ class ZSelectComponent {
     searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
     dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
     currentValue = this._value.asReadonly();
+    config = computed(() => ({
+        ...Z_SELECT_DEFAULT_CONFIG,
+        ...this.zConfig(),
+    }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+    hasAsyncOptions = computed(() => !!this.config().async?.load, ...(ngDevMode ? [{ debugName: "hasAsyncOptions" }] : []));
+    sourceOptions = computed(() => (this.hasAsyncOptions() ? this._asyncOptions() : this.zOptions()), ...(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" }] : []));
+    effectiveDebounceTime = computed(() => this.zConfig().debounceTime ?? this.zDebounce(), ...(ngDevMode ? [{ debugName: "effectiveDebounceTime" }] : []));
     virtualizer = injectVirtualizer(() => ({
         scrollElement: this.virtualScrollRef(),
         count: this.filteredOptions().length,
@@ -359,7 +380,7 @@ class ZSelectComponent {
     }, ...(ngDevMode ? [{ debugName: "effectiveRequiredErrorText" }] : []));
     translatedOptions = computed(() => {
         this._zTranslate.currentLang();
-        const options = this.zOptions();
+        const options = this.sourceOptions();
         if (!this.zTranslateLabels()) {
             return options;
         }
@@ -387,18 +408,24 @@ class ZSelectComponent {
         }
         return this.zOptionTemplate();
     }, ...(ngDevMode ? [{ debugName: "effectiveOptionTemplate" }] : []));
+    knownOptions = computed(() => {
+        if (this.zSearchServer() || this.hasAsyncOptions()) {
+            return this._allKnownOptions();
+        }
+        return this.translatedOptions();
+    }, ...(ngDevMode ? [{ debugName: "knownOptions" }] : []));
     shouldUseVirtualScroll = computed(() => {
         if (this.zVirtualScroll()) {
             return true;
         }
         const maxVisible = this.zMaxVisible();
-        if (maxVisible !== null && this.zOptions().length > maxVisible) {
+        if (maxVisible !== null && this.sourceOptions().length > maxVisible) {
             return true;
         }
-        if (this.zEnableLoadMore()) {
+        if (this.canLoadMore()) {
             return false;
         }
-        return this.zOptions().length > 50;
+        return this.sourceOptions().length > 50;
     }, ...(ngDevMode ? [{ debugName: "shouldUseVirtualScroll" }] : []));
     selectedOption = computed(() => {
         this._zTranslate.currentLang();
@@ -409,7 +436,7 @@ class ZSelectComponent {
         if (value === null || value === undefined) {
             return null;
         }
-        const options = this.zSearchServer() ? this._allKnownOptions() : this.translatedOptions();
+        const options = this.knownOptions();
         return options.find(opt => opt.value === value) ?? null;
     }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
     selectedOptions = computed(() => {
@@ -421,7 +448,7 @@ class ZSelectComponent {
         if (!Array.isArray(value)) {
             return [];
         }
-        const options = this.zSearchServer() ? this._allKnownOptions() : this.translatedOptions();
+        const options = this.knownOptions();
         return value
             .map(v => options.find(opt => opt.value === v))
             .filter((opt) => opt !== undefined);
@@ -446,7 +473,7 @@ class ZSelectComponent {
         if (!this.isMultipleMode()) {
             return false;
         }
-        const enabledValues = this.zOptions()
+        const enabledValues = this.translatedOptions()
             .filter(option => !option.disabled)
             .map(option => option.value);
         if (enabledValues.length === 0) {
@@ -460,19 +487,19 @@ class ZSelectComponent {
         return enabledValues.every(value => selectedSet.has(value));
     }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
     filteredOptions = computed(() => {
-        if (this.zSearchServer()) {
+        if (this.zSearchServer() || this.hasAsyncOptions()) {
             return this.translatedOptions();
         }
         return filterOptions(this.translatedOptions(), this.searchText());
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
     isEmptyData = computed(() => {
-        if (this.zSearchServer() && this.searchText().trim()) {
+        if ((this.zSearchServer() || this.hasAsyncOptions()) && this.searchText().trim()) {
             return false;
         }
         return this.translatedOptions().length === 0;
     }, ...(ngDevMode ? [{ debugName: "isEmptyData" }] : []));
     isNoSearchResults = computed(() => {
-        if (this.zSearchServer() && this.searchText().trim()) {
+        if ((this.zSearchServer() || this.hasAsyncOptions()) && this.searchText().trim()) {
             return this.translatedOptions().length === 0;
         }
         const noFiltered = this.filteredOptions().length === 0;
@@ -580,6 +607,8 @@ class ZSelectComponent {
     _asyncValidationSubject = new Subject();
     _loadMoreObserver = null;
     _virtualScrollListener = null;
+    _asyncLoadSubscription = null;
+    _asyncRequestId = 0;
     _asyncValidationAbortController = null;
     _onChange = () => void 0;
     _onTouched = () => void 0;
@@ -587,15 +616,14 @@ class ZSelectComponent {
     _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
     constructor() {
         effect(() => {
-            if (!this.zSearchServer()) {
+            if (!this.zSearchServer() && !this.hasAsyncOptions()) {
                 return;
             }
-            const newOpts = this.zOptions();
+            const newOpts = this.sourceOptions();
             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]);
+            const merged = zMergeAsyncOptions(known, newOpts, this.config().async?.dedupeBy);
+            if (merged.length > known.length) {
+                this._allKnownOptions.set(merged);
             }
         });
         effect(() => {
@@ -638,7 +666,7 @@ class ZSelectComponent {
             const sentinel = this.loadMoreSentinelRef();
             const { isOpen } = this.uiState();
             const optionsCount = this.filteredOptions().length;
-            if (!sentinel || !isOpen || optionsCount === 0) {
+            if (!sentinel || !isOpen || optionsCount === 0 || !this.canLoadMore()) {
                 this._cleanupLoadMoreObserver();
                 return;
             }
@@ -660,9 +688,14 @@ class ZSelectComponent {
         });
     }
     ngOnInit() {
-        this._searchSubject.pipe(debounceTime(this.zDebounce()), takeUntilDestroyed(this._destroyRef)).subscribe(value => {
+        this._searchSubject
+            .pipe(debounceTime(this.effectiveDebounceTime()), takeUntilDestroyed(this._destroyRef))
+            .subscribe(value => {
             this.searchText.set(value);
             this.zOnSearch.emit(value);
+            if (this.hasAsyncOptions()) {
+                this._loadAsyncOptions(value, false);
+            }
         });
         const asyncValidators = this.zAsyncValidators();
         if (asyncValidators.length > 0) {
@@ -803,6 +836,7 @@ class ZSelectComponent {
         this.uiState.update(s => ({ ...s, isOpen: true, isFocused: true }));
         this.searchText.set('');
         this.zOnSearch.emit('');
+        this._loadAsyncOptionsOnFocus();
         const triggerEl = this.triggerRef()?.nativeElement;
         if (triggerEl) {
             this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);
@@ -832,7 +866,7 @@ class ZSelectComponent {
         triggerEl?.blur();
     }
     onPopoverHideEnd() {
-        if (this.zSearchServer()) {
+        if (this.zSearchServer() || this.hasAsyncOptions()) {
             this.searchText.set('');
         }
     }
@@ -865,7 +899,7 @@ class ZSelectComponent {
             this.uiState.update(s => ({ ...s, dirty: true }));
             this._onChange(newValue);
             this._triggerAsyncValidation(newValue
-                .map(v => this.zOptions().find(o => o.value === v))
+                .map(v => this.knownOptions().find(o => o.value === v))
                 .filter((o) => o !== undefined));
             return;
         }
@@ -902,7 +936,7 @@ class ZSelectComponent {
         if (!this.isMultipleMode()) {
             return;
         }
-        const enabledOptions = this.zOptions().filter(opt => !opt.disabled);
+        const enabledOptions = this.translatedOptions().filter(opt => !opt.disabled);
         const allValues = enabledOptions.map(opt => opt.value);
         this._value.set(allValues);
         this.uiState.update(s => ({ ...s, dirty: true }));
@@ -947,6 +981,132 @@ class ZSelectComponent {
             errorMessage: this.errorMessage,
         });
     }
+    _loadAsyncOptionsOnFocus() {
+        const asyncConfig = this.config().async;
+        if (!asyncConfig?.loadOnFocus) {
+            return;
+        }
+        if (this._asyncKeyword() === '' && this._asyncOptions().length > 0) {
+            return;
+        }
+        this._loadAsyncOptions('', 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));
+                this._restoreAsyncOptionsScrollTop(scrollTopBeforeAppend);
+            },
+            error: error => {
+                if (requestId !== this._asyncRequestId) {
+                    return;
+                }
+                this._handleAsyncOptionsError(error, append);
+            },
+        });
+    }
+    _handleAsyncOptionsError(error, append) {
+        console.error('ZSelect 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() {
+        const scrollElement = this.shouldUseVirtualScroll()
+            ? this.virtualScrollRef()?.nativeElement
+            : this.optionsContainerRef()?.nativeElement;
+        return scrollElement?.scrollTop ?? null;
+    }
+    _restoreAsyncOptionsScrollTop(scrollTop) {
+        if (scrollTop === null) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            const scrollElement = this.shouldUseVirtualScroll()
+                ? this.virtualScrollRef()?.nativeElement
+                : this.optionsContainerRef()?.nativeElement;
+            if (scrollElement) {
+                scrollElement.scrollTop = scrollTop;
+            }
+        });
+    }
+    _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);
+    }
     _setupLoadMoreObserver() {
         this._cleanupLoadMoreObserver();
         const sentinel = this.loadMoreSentinelRef()?.nativeElement;
@@ -956,12 +1116,8 @@ class ZSelectComponent {
         }
         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,
-                });
+            if (entry?.isIntersecting && !this.isLoadingMore()) {
+                this._handleLoadMore(container.scrollTop);
             }
         }, {
             root: container,
@@ -983,7 +1139,7 @@ class ZSelectComponent {
             return;
         }
         const handleScroll = () => {
-            if (this.zLoadingMore()) {
+            if (this.isLoadingMore()) {
                 return;
             }
             const { scrollTop, scrollHeight, clientHeight } = scrollElement;
@@ -991,11 +1147,7 @@ class ZSelectComponent {
             const threshold = clientHeight * scrollDistance;
             const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
             if (distanceFromBottom <= threshold) {
-                const currentCount = this.filteredOptions().length;
-                this.zOnLoadMore.emit({
-                    currentCount,
-                    scrollTop,
-                });
+                this._handleLoadMore(scrollTop);
             }
         };
         scrollElement.addEventListener('scroll', handleScroll);
@@ -1009,6 +1161,19 @@ class ZSelectComponent {
             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,
+        });
+    }
     _getValidationErrors() {
         const validators = this.zValidators();
         const errors = [];
@@ -1109,13 +1274,13 @@ class ZSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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 }, zTranslateLabels: { classPropertyName: "zTranslateLabels", publicName: "zTranslateLabels", 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 }, zMaxVisible: { classPropertyName: "zMaxVisible", publicName: "zMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", 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", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zControl: "zControl", zEvent: "zEvent" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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 }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zTranslateLabels: { classPropertyName: "zTranslateLabels", publicName: "zTranslateLabels", 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 }, zMaxVisible: { classPropertyName: "zMaxVisible", publicName: "zMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", 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", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zControl: "zControl", zEvent: "zEvent" }, 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 class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none 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]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\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() || 'lucideChevronDown'\" zSize=\"18\" 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 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\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 shrink-0 items-center justify-center rounded-sm 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\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm 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\n                *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 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (zLoading() || zLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" 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=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 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-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" 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]=\"effectivePlaceholderSearch()\"\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 items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\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=\"16\" [zStrokeWidth]=\"4\" 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=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (zEnableLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\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() && (zActionTemplate() || 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\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\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)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}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 input{text-overflow:ellipsis;overflow:hidden}.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(-.25rem)}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", "zPositionChange"], 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: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { 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 });
+        ], 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 class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none 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]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\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() || 'lucideChevronDown'\" zSize=\"18\" 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 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\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 shrink-0 items-center justify-center rounded-sm 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\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm 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\n                *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 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && 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=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 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-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" 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]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\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=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\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=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\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() && (zActionTemplate() || 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\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\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)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}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 input{text-overflow:ellipsis;overflow:hidden}.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(-.25rem)}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", "zPositionChange"], 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: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { 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.9", ngImport: i0, type: ZSelectComponent, decorators: [{
             type: Component,
@@ -1140,12 +1305,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             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 class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none 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]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\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() || 'lucideChevronDown'\" zSize=\"18\" 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 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\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 shrink-0 items-center justify-center rounded-sm 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\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm 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\n                *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 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (zLoading() || zLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" 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=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 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-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" 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]=\"effectivePlaceholderSearch()\"\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 items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\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=\"16\" [zStrokeWidth]=\"4\" 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=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (zEnableLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\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() && (zActionTemplate() || 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\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\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)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}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 input{text-overflow:ellipsis;overflow:hidden}.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(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { 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 }] }], 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"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], 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 }] }], zTranslateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTranslateLabels", 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 }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", 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 }] }], 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 }] }] } });
+                    ], 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 class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none 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]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\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() || 'lucideChevronDown'\" zSize=\"18\" 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 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\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 shrink-0 items-center justify-center rounded-sm 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\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm 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\n                *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 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && 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=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 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-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" 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]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\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=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\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=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\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() && (zActionTemplate() || 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\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\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)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}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 input{text-overflow:ellipsis;overflow:hidden}.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(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], 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"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], 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 }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zTranslateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTranslateLabels", 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 }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", 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 }] }], 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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TAG_COLORS, ZIsSelectedPipe, ZOptionClassesPipe, ZSelectComponent, ZSelectOptionDirective, ZSelectSelectedDirective, ZTagClassesPipe, filterOptions, getTagColor, zSelectOptionVariants, zSelectTagVariants, zSelectVariants };
+export { TAG_COLORS, ZIsSelectedPipe, ZOptionClassesPipe, ZSelectComponent, ZSelectOptionDirective, ZSelectSelectedDirective, ZTagClassesPipe, Z_SELECT_DEFAULT_CONFIG, filterOptions, getTagColor, zSelectOptionVariants, zSelectTagVariants, zSelectVariants };
 //# sourceMappingURL=shival99-z-ui-components-z-select.mjs.map