@shival99/z-ui 1.4.2 → 1.4.3

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

@@ -1,6 +1,6 @@
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, Pipe, output, input, contentChild, viewChild, signal, Injector, DestroyRef, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, Pipe, Injector, DestroyRef, viewChild, contentChild, output, input, signal, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NgControl, PristineChangeEvent, TouchedChangeEvent, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -241,6 +241,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }] });
 
 class ZSelectComponent {
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    _zTranslate = inject(ZTranslateService);
+    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
+    searchInputRef = viewChild('dropdownSearchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : []));
+    dropdownTpl = viewChild('dropdownTpl', ...(ngDevMode ? [{ debugName: "dropdownTpl" }] : []));
+    optionsContainerRef = viewChild('optionsContainer', ...(ngDevMode ? [{ debugName: "optionsContainerRef" }] : []));
+    virtualScrollRef = viewChild('virtualScrollElement', ...(ngDevMode ? [{ debugName: "virtualScrollRef" }] : []));
+    loadMoreSentinelRef = viewChild('loadMoreSentinel', ...(ngDevMode ? [{ debugName: "loadMoreSentinelRef" }] : []));
+    customSelectedDirective = contentChild((ZSelectSelectedDirective), ...(ngDevMode ? [{ debugName: "customSelectedDirective" }] : []));
+    customOptionDirective = contentChild((ZSelectOptionDirective), ...(ngDevMode ? [{ debugName: "customOptionDirective" }] : []));
     zOnSearch = output();
     zOnLoadMore = output();
     zControl = output();
@@ -280,54 +291,36 @@ class ZSelectComponent {
     zSelectedTemplate = input(null, ...(ngDevMode ? [{ debugName: "zSelectedTemplate" }] : []));
     zOptionTemplate = input(null, ...(ngDevMode ? [{ debugName: "zOptionTemplate" }] : []));
     zActionTemplate = input(null, ...(ngDevMode ? [{ debugName: "zActionTemplate" }] : []));
-    customSelectedDirective = contentChild((ZSelectSelectedDirective), ...(ngDevMode ? [{ debugName: "customSelectedDirective" }] : []));
-    customOptionDirective = contentChild((ZSelectOptionDirective), ...(ngDevMode ? [{ debugName: "customOptionDirective" }] : []));
     zAsyncValidators = input([], ...(ngDevMode ? [{ debugName: "zAsyncValidators" }] : []));
     zAsyncDebounce = input(300, ...(ngDevMode ? [{ debugName: "zAsyncDebounce" }] : []));
     zAsyncValidateOn = input('change', ...(ngDevMode ? [{ debugName: "zAsyncValidateOn" }] : []));
     zValidators = input([], ...(ngDevMode ? [{ debugName: "zValidators" }] : []));
-    triggerRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "triggerRef" }] : []));
-    searchInputRef = viewChild('dropdownSearchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : []));
-    dropdownTpl = viewChild('dropdownTpl', ...(ngDevMode ? [{ debugName: "dropdownTpl" }] : []));
-    optionsContainerRef = viewChild('optionsContainer', ...(ngDevMode ? [{ debugName: "optionsContainerRef" }] : []));
-    virtualScrollRef = viewChild('virtualScrollElement', ...(ngDevMode ? [{ debugName: "virtualScrollRef" }] : []));
-    loadMoreSentinelRef = viewChild('loadMoreSentinel', ...(ngDevMode ? [{ debugName: "loadMoreSentinelRef" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
+    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
+    _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
+    _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
+    _popoverControl = signal(null, ...(ngDevMode ? [{ debugName: "_popoverControl" }] : []));
+    _allKnownOptions = signal([], ...(ngDevMode ? [{ debugName: "_allKnownOptions" }] : []));
+    _asyncErrors = signal(new Map(), ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : []));
+    uiState = signal({
+        isOpen: false,
+        hasScrollShadow: false,
+        isFocused: false,
+        isValidating: false,
+    }, ...(ngDevMode ? [{ debugName: "uiState" }] : []));
     selectId = zUuid('z-select');
     dropdownId = `${this.selectId}-dropdown`;
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
     dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
-    hasScrollShadow = signal(false, ...(ngDevMode ? [{ debugName: "hasScrollShadow" }] : []));
-    _popoverControl = signal(null, ...(ngDevMode ? [{ debugName: "_popoverControl" }] : []));
-    _searchSubject = new Subject();
-    _loadMoreObserver = null;
-    _allKnownOptions = signal([], ...(ngDevMode ? [{ debugName: "_allKnownOptions" }] : []));
-    _virtualScrollListener = null;
-    _optionGap = 3;
+    currentValue = this._value.asReadonly();
     virtualizer = injectVirtualizer(() => ({
         scrollElement: this.virtualScrollRef(),
         count: this.filteredOptions().length,
-        estimateSize: () => this.zOptionHeight() + this._optionGap,
+        estimateSize: () => this.zOptionHeight() + 3,
         overscan: 5,
     }));
-    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    currentValue = this._value.asReadonly();
-    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
-    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
-    _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
-    _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
-    _injector = inject(Injector);
-    _destroyRef = inject(DestroyRef);
-    _zTranslate = inject(ZTranslateService);
-    _onChange = () => void 0;
-    _onTouched = () => void 0;
-    _ngControl = null;
-    isValidating = signal(false, ...(ngDevMode ? [{ debugName: "isValidating" }] : []));
-    _asyncErrors = signal(new Map(), ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : []));
-    _asyncCancelSubject = new Subject();
-    _asyncValidationSubject = new Subject();
-    _asyncValidationAbortController = null;
     isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isReadonly = computed(() => this.zReadonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
     isInteractionDisabled = computed(() => this.isDisabled() || this.isReadonly() || this.zLoading(), ...(ngDevMode ? [{ debugName: "isInteractionDisabled" }] : []));
@@ -479,7 +472,7 @@ class ZSelectComponent {
         if (this.isReadonly()) {
             return 'readonly';
         }
-        if (this.isOpen()) {
+        if (this.uiState().isOpen) {
             return 'open';
         }
         if (this.hasError()) {
@@ -548,6 +541,24 @@ class ZSelectComponent {
         'h-9': this.zSize() === 'default',
         'h-10': this.zSize() === 'lg',
     }, this.class()), ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
+    state = computed(() => ({
+        focused: this.uiState().isFocused,
+        touched: this._touched(),
+        blurred: !this.uiState().isFocused,
+        dirty: this._dirty(),
+        disabled: this.isDisabled(),
+        readonly: this.isReadonly(),
+        open: this.uiState().isOpen,
+    }), ...(ngDevMode ? [{ debugName: "state" }] : []));
+    _searchSubject = new Subject();
+    _asyncCancelSubject = new Subject();
+    _asyncValidationSubject = new Subject();
+    _loadMoreObserver = null;
+    _virtualScrollListener = null;
+    _asyncValidationAbortController = null;
+    _onChange = () => void 0;
+    _onTouched = () => void 0;
+    _ngControl = null;
     constructor() {
         effect(() => {
             if (!this.zSearchServer()) {
@@ -562,7 +573,7 @@ class ZSelectComponent {
             }
         });
         effect(() => {
-            const isOpen = this.isOpen();
+            const { isOpen } = this.uiState();
             const useVirtual = this.shouldUseVirtualScroll();
             if (!isOpen) {
                 return;
@@ -579,7 +590,7 @@ class ZSelectComponent {
                     return;
                 }
                 const isScrollable = el.scrollHeight > el.clientHeight;
-                this.hasScrollShadow.set(isScrollable);
+                this.uiState.update(s => ({ ...s, hasScrollShadow: isScrollable }));
             };
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
@@ -599,7 +610,7 @@ class ZSelectComponent {
         });
         effect(() => {
             const sentinel = this.loadMoreSentinelRef();
-            const isOpen = this.isOpen();
+            const { isOpen } = this.uiState();
             const optionsCount = this.filteredOptions().length;
             if (!sentinel || !isOpen || optionsCount === 0) {
                 this._cleanupLoadMoreObserver();
@@ -608,7 +619,7 @@ class ZSelectComponent {
             this._setupLoadMoreObserver();
         });
         effect(() => {
-            const isOpen = this.isOpen();
+            const { isOpen } = this.uiState();
             const useVirtual = this.shouldUseVirtualScroll();
             const optionsCount = this.filteredOptions().length;
             if (!isOpen || !useVirtual || optionsCount === 0) {
@@ -692,6 +703,52 @@ class ZSelectComponent {
     setDisabledState(isDisabled) {
         this._disabled.set(isDisabled);
     }
+    reset() {
+        if (this.isMultipleMode()) {
+            this._value.set([]);
+            this._onChange([]);
+        }
+        if (!this.isMultipleMode()) {
+            this._value.set(null);
+            this._onChange(null);
+        }
+        this._touched.set(false);
+        this._dirty.set(false);
+        this.searchText.set('');
+        if (!this._ngControl?.control) {
+            return;
+        }
+        this._ngControl.control.markAsPristine();
+        this._ngControl.control.markAsUntouched();
+    }
+    focus() {
+        this.triggerRef()?.nativeElement.focus();
+    }
+    blur() {
+        this.triggerRef()?.nativeElement.blur();
+    }
+    markAsTouched() {
+        this._touched.set(true);
+        this._onTouched();
+    }
+    markAsUntouched() {
+        this._touched.set(false);
+    }
+    markAsDirty() {
+        this._dirty.set(true);
+    }
+    markAsPristine() {
+        this._dirty.set(false);
+    }
+    validate() {
+        this._touched.set(true);
+        this._dirty.set(true);
+        this._onTouched();
+        if (this._ngControl?.control) {
+            this._ngControl.control.markAsDirty();
+            this._ngControl.control.markAsTouched();
+        }
+    }
     onTriggerKeydown(event) {
         if (this.isInteractionDisabled()) {
             return;
@@ -701,7 +758,7 @@ class ZSelectComponent {
             this.toggleDropdown();
             return;
         }
-        if (event.key === 'Escape' && this.isOpen()) {
+        if (event.key === 'Escape' && this.uiState().isOpen) {
             this._popoverControl()?.close();
         }
     }
@@ -719,7 +776,7 @@ class ZSelectComponent {
         this._popoverControl.set(control);
     }
     onPopoverShow() {
-        this.isOpen.set(true);
+        this.uiState.update(s => ({ ...s, isOpen: true, isFocused: true }));
         this.searchText.set('');
         this.zOnSearch.emit('');
         if (this.zShowSearch()) {
@@ -729,8 +786,7 @@ class ZSelectComponent {
         }
     }
     onPopoverHideStart() {
-        this.isOpen.set(false);
-        this.hasScrollShadow.set(false);
+        this.uiState.update(s => ({ ...s, isOpen: false, isFocused: false, hasScrollShadow: false }));
         this._cleanupVirtualScrollListener();
         if (this._dirty()) {
             this._touched.set(true);
@@ -755,73 +811,11 @@ class ZSelectComponent {
     checkScrollShadow() {
         const container = this.optionsContainerRef()?.nativeElement;
         if (!container) {
-            this.hasScrollShadow.set(false);
+            this.uiState.update(s => ({ ...s, hasScrollShadow: false }));
             return;
         }
         const isScrollable = container.scrollHeight > container.clientHeight;
-        this.hasScrollShadow.set(isScrollable);
-    }
-    _setupLoadMoreObserver() {
-        this._cleanupLoadMoreObserver();
-        const sentinel = this.loadMoreSentinelRef()?.nativeElement;
-        const container = this.optionsContainerRef()?.nativeElement;
-        if (!sentinel || !container) {
-            return;
-        }
-        this._loadMoreObserver = new IntersectionObserver(entries => {
-            const entry = entries[0];
-            if (entry?.isIntersecting && !this.zLoadingMore()) {
-                const currentCount = this.filteredOptions().length;
-                this.zOnLoadMore.emit({
-                    currentCount,
-                    scrollTop: container.scrollTop,
-                });
-            }
-        }, {
-            root: container,
-            rootMargin: '100px',
-            threshold: 0,
-        });
-        this._loadMoreObserver.observe(sentinel);
-    }
-    _cleanupLoadMoreObserver() {
-        if (this._loadMoreObserver) {
-            this._loadMoreObserver.disconnect();
-            this._loadMoreObserver = null;
-        }
-    }
-    _setupVirtualScrollLoadMore() {
-        this._cleanupVirtualScrollListener();
-        const scrollElement = this.virtualScrollRef()?.nativeElement;
-        if (!scrollElement) {
-            return;
-        }
-        const handleScroll = () => {
-            if (this.zLoadingMore()) {
-                return;
-            }
-            const { scrollTop, scrollHeight, clientHeight } = scrollElement;
-            const scrollDistance = this.zScrollDistance();
-            const threshold = clientHeight * scrollDistance;
-            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-            if (distanceFromBottom <= threshold) {
-                const currentCount = this.filteredOptions().length;
-                this.zOnLoadMore.emit({
-                    currentCount,
-                    scrollTop,
-                });
-            }
-        };
-        scrollElement.addEventListener('scroll', handleScroll);
-        this._virtualScrollListener = () => {
-            scrollElement.removeEventListener('scroll', handleScroll);
-        };
-    }
-    _cleanupVirtualScrollListener() {
-        if (this._virtualScrollListener) {
-            this._virtualScrollListener();
-            this._virtualScrollListener = null;
-        }
+        this.uiState.update(s => ({ ...s, hasScrollShadow: isScrollable }));
     }
     selectOption(option, closeFn) {
         if (option.disabled) {
@@ -886,52 +880,13 @@ class ZSelectComponent {
         this._dirty.set(true);
         this._onChange([]);
     }
-    reset() {
-        if (this.isMultipleMode()) {
-            this._value.set([]);
-            this._onChange([]);
-        }
-        if (!this.isMultipleMode()) {
-            this._value.set(null);
-            this._onChange(null);
-        }
-        this._touched.set(false);
-        this._dirty.set(false);
-        this.searchText.set('');
-        if (!this._ngControl?.control) {
-            return;
-        }
-        this._ngControl.control.markAsPristine();
-        this._ngControl.control.markAsUntouched();
-    }
-    focus() {
-        this.triggerRef()?.nativeElement.focus();
-    }
-    blur() {
-        this.triggerRef()?.nativeElement.blur();
-    }
-    markAsTouched() {
-        this._touched.set(true);
-        this._onTouched();
-    }
-    markAsUntouched() {
-        this._touched.set(false);
-    }
-    markAsDirty() {
-        this._dirty.set(true);
-    }
-    markAsPristine() {
-        this._dirty.set(false);
-    }
-    validate() {
-        this._touched.set(true);
-        this._dirty.set(true);
-        this._onTouched();
-        if (this._ngControl?.control) {
-            this._ngControl.control.markAsDirty();
-            this._ngControl.control.markAsTouched();
+    trackByValue = (_index, option) => {
+        const key = this.zKey();
+        if (key && key in option) {
+            return option[key];
         }
-    }
+        return option.value;
+    };
     _emitControl() {
         this.zControl.emit({
             validate: () => this.validate(),
@@ -943,21 +898,77 @@ class ZSelectComponent {
             markAsDirty: () => this.markAsDirty(),
             markAsPristine: () => this.markAsPristine(),
             hasError: this.hasError,
-            isValidating: this.isValidating,
-            isOpen: this.isOpen.asReadonly(),
+            isValidating: computed(() => this.uiState().isValidating),
+            isOpen: computed(() => this.uiState().isOpen),
             value: this._value.asReadonly(),
             selectedOption: this.selectedOption,
             selectedOptions: this.selectedOptions,
             errorMessage: this.errorMessage,
+            state: this.state,
         });
     }
-    trackByValue = (_index, option) => {
-        const key = this.zKey();
-        if (key && key in option) {
-            return option[key];
+    _setupLoadMoreObserver() {
+        this._cleanupLoadMoreObserver();
+        const sentinel = this.loadMoreSentinelRef()?.nativeElement;
+        const container = this.optionsContainerRef()?.nativeElement;
+        if (!sentinel || !container) {
+            return;
         }
-        return option.value;
-    };
+        this._loadMoreObserver = new IntersectionObserver(entries => {
+            const entry = entries[0];
+            if (entry?.isIntersecting && !this.zLoadingMore()) {
+                const currentCount = this.filteredOptions().length;
+                this.zOnLoadMore.emit({
+                    currentCount,
+                    scrollTop: container.scrollTop,
+                });
+            }
+        }, {
+            root: container,
+            rootMargin: '100px',
+            threshold: 0,
+        });
+        this._loadMoreObserver.observe(sentinel);
+    }
+    _cleanupLoadMoreObserver() {
+        if (this._loadMoreObserver) {
+            this._loadMoreObserver.disconnect();
+            this._loadMoreObserver = null;
+        }
+    }
+    _setupVirtualScrollLoadMore() {
+        this._cleanupVirtualScrollListener();
+        const scrollElement = this.virtualScrollRef()?.nativeElement;
+        if (!scrollElement) {
+            return;
+        }
+        const handleScroll = () => {
+            if (this.zLoadingMore()) {
+                return;
+            }
+            const { scrollTop, scrollHeight, clientHeight } = scrollElement;
+            const scrollDistance = this.zScrollDistance();
+            const threshold = clientHeight * scrollDistance;
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+            if (distanceFromBottom <= threshold) {
+                const currentCount = this.filteredOptions().length;
+                this.zOnLoadMore.emit({
+                    currentCount,
+                    scrollTop,
+                });
+            }
+        };
+        scrollElement.addEventListener('scroll', handleScroll);
+        this._virtualScrollListener = () => {
+            scrollElement.removeEventListener('scroll', handleScroll);
+        };
+    }
+    _cleanupVirtualScrollListener() {
+        if (this._virtualScrollListener) {
+            this._virtualScrollListener();
+            this._virtualScrollListener = null;
+        }
+    }
     _getValidationErrors() {
         const validators = this.zValidators();
         const errors = [];
@@ -983,13 +994,13 @@ class ZSelectComponent {
         }
         if (value === null || value === undefined) {
             this._asyncErrors.set(new Map());
-            this.isValidating.set(false);
+            this.uiState.update(s => ({ ...s, isValidating: false }));
             return;
         }
         this._cancelAsyncValidation();
         this._asyncValidationAbortController = new AbortController();
         const { signal } = this._asyncValidationAbortController;
-        this.isValidating.set(true);
+        this.uiState.update(s => ({ ...s, isValidating: true }));
         const errors = new Map();
         try {
             const validationPromises = asyncValidators.map(async (validator) => {
@@ -1041,7 +1052,7 @@ class ZSelectComponent {
         }
         finally {
             if (!signal.aborted) {
-                this.isValidating.set(false);
+                this.uiState.update(s => ({ ...s, isValidating: false }));
             }
         }
     }
@@ -1064,7 +1075,7 @@ class ZSelectComponent {
                 useExisting: forwardRef(() => ZSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    [id]=\"selectId\"\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"6\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    [zScrollClose]=\"zScrollClose()\"\n    zTrigger=\"click\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"isOpen()\"\n    (mousedown)=\"onTriggerMousedown()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground 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-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (isValidating()) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"isOpen()\" />\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"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 flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          @if (zEnableLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\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      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"min-w-0 flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveSelectAllText() }}</span>\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"min-w-0 flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveClearAllText() }}</span>\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "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\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=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"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=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground 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-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (uiState().isValidating) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"uiState().isOpen\" />\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"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 flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          @if (zEnableLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\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      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"min-w-0 flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveSelectAllText() }}</span>\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"min-w-0 flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveClearAllText() }}</span>\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl"], exportAs: ["zPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "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.6", ngImport: i0, type: ZSelectComponent, decorators: [{
             type: Component,
@@ -1089,8 +1100,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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\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=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"isOpen()\"\n    (mousedown)=\"onTriggerMousedown()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground 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-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (isValidating()) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"isOpen()\" />\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"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 flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          @if (zEnableLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\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      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"min-w-0 flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveSelectAllText() }}</span>\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"min-w-0 flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveClearAllText() }}</span>\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], 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 }] }], zSelectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedTemplate", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zActionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zActionTemplate", required: false }] }], customSelectedDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectSelectedDirective), { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectOptionDirective), { isSignal: true }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['dropdownSearchInput', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    [id]=\"selectId\"\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"6\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    [zScrollClose]=\"zScrollClose()\"\n    zTrigger=\"click\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"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=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground 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-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (uiState().isValidating) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"uiState().isOpen\" />\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"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 flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          @if (zEnableLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\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      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"min-w-0 flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveSelectAllText() }}</span>\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"min-w-0 flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveClearAllText() }}</span>\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { 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"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], 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 }] }], 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.