@shival99/z-ui 2.1.32 → 2.2.0

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

@@ -4,7 +4,6 @@ import { inject, TemplateRef, Directive, Pipe, Injector, DestroyRef, viewChild,
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NgControl, NgModel, PristineChangeEvent, TouchedChangeEvent, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { injectVirtualizer } from '@shival99/angular-virtual';
 import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
 import { ZEmptyComponent } from '@shival99/z-ui/components/z-empty';
 import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
@@ -14,15 +13,16 @@ import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
 import { ZHighlightPipe, ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
 import { ZTranslateService } from '@shival99/z-ui/services';
 import { zRemoveVietnamese, zMergeClasses, zTransform, zUuid, zResolveAsyncSelectedOptions, zMergeAsyncOptions, zCreateEvent, zIsMobileViewport, Z_ASYNC_OPTIONS_DEFAULT_PAGE_SIZE, zToAsyncOptionsObservable, zResolveAsyncOptionsHasMore } from '@shival99/z-ui/utils';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 import { Subject, debounceTime, merge, filter, finalize, isObservable, takeUntil, catchError, of, firstValueFrom } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
 class ZSelectOptionDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZSelectOptionDirective, isStandalone: true, selector: "[z-select-option], [zSelectOption]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: ZSelectOptionDirective, isStandalone: true, selector: "[z-select-option], [zSelectOption]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZSelectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-select-option], [zSelectOption]',
@@ -32,10 +32,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 class ZSelectSelectedDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZSelectSelectedDirective, isStandalone: true, selector: "[z-select-selected], [zSelectSelected]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZSelectSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: ZSelectSelectedDirective, isStandalone: true, selector: "[z-select-selected], [zSelectSelected]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectSelectedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZSelectSelectedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-select-selected], [zSelectSelected]',
@@ -152,10 +152,10 @@ class ZIsSelectedPipe {
         }
         return zIsSelectValueEqual(value, option.value, zKey);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZIsSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZIsSelectedPipe, isStandalone: true, name: "zIsSelected" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZIsSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZIsSelectedPipe, isStandalone: true, name: "zIsSelected" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZIsSelectedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZIsSelectedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zIsSelected',
@@ -232,10 +232,10 @@ class ZOptionClassesPipe {
             disabled: isDisabled ?? false,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZOptionClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZOptionClassesPipe, isStandalone: true, name: "zOptionClasses" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZOptionClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZOptionClassesPipe, isStandalone: true, name: "zOptionClasses" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZOptionClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZOptionClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zOptionClasses',
@@ -253,10 +253,10 @@ class ZTagClassesPipe {
         }
         return zMergeClasses(baseClasses, 'bg-muted text-foreground border-border');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTagClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.9", ngImport: i0, type: ZTagClassesPipe, isStandalone: true, name: "zTagClasses" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZTagClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ZTagClassesPipe, isStandalone: true, name: "zTagClasses" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTagClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZTagClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zTagClasses',
@@ -269,82 +269,134 @@ 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" }] : []));
-    virtualOptionElements = viewChildren('virtualOptionEl', ...(ngDevMode ? [{ debugName: "virtualOptionElements" }] : []));
-    customSelectedDirective = contentChild((ZSelectSelectedDirective), ...(ngDevMode ? [{ debugName: "customSelectedDirective" }] : []));
-    customOptionDirective = contentChild((ZSelectOptionDirective), ...(ngDevMode ? [{ debugName: "customOptionDirective" }] : []));
+    triggerRef = viewChild('triggerEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    searchInputRef = viewChild('dropdownSearchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
+    dropdownTpl = viewChild('dropdownTpl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownTpl" }] : /* istanbul ignore next */ []));
+    optionsContainerRef = viewChild('optionsContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionsContainerRef" }] : /* istanbul ignore next */ []));
+    virtualScrollRef = viewChild('virtualScrollElement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScrollRef" }] : /* istanbul ignore next */ []));
+    loadMoreSentinelRef = viewChild('loadMoreSentinel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadMoreSentinelRef" }] : /* istanbul ignore next */ []));
+    virtualOptionElements = viewChildren('virtualOptionEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualOptionElements" }] : /* istanbul ignore next */ []));
+    customSelectedDirective = contentChild((ZSelectSelectedDirective), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customSelectedDirective" }] : /* istanbul ignore next */ []));
+    customOptionDirective = contentChild((ZSelectOptionDirective), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customOptionDirective" }] : /* istanbul ignore next */ []));
     zOnSearch = output();
     zOnLoadMore = output();
     zOnBlur = output();
     zOnFocus = output();
     zControl = output();
     zEvent = output();
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    zClassSelect = input('', ...(ngDevMode ? [{ debugName: "zClassSelect" }] : []));
-    zMode = input('single', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
-    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
-    zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
-    zLabelClass = input('', ...(ngDevMode ? [{ debugName: "zLabelClass" }] : []));
-    zPlaceholder = input('', ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : []));
-    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : {}), transform: zTransform });
-    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
-    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : {}), transform: zTransform });
-    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
-    zLoadingOutline = input(false, { ...(ngDevMode ? { debugName: "zLoadingOutline" } : {}), transform: zTransform });
-    zPrefix = input('', ...(ngDevMode ? [{ debugName: "zPrefix" }] : []));
-    zAllowClear = input(false, { ...(ngDevMode ? { debugName: "zAllowClear" } : {}), transform: zTransform });
-    zShowCheck = input(true, { ...(ngDevMode ? { debugName: "zShowCheck" } : {}), transform: zTransform });
-    zWrap = input(true, { ...(ngDevMode ? { debugName: "zWrap" } : {}), transform: zTransform });
-    zShowSearch = input(true, { ...(ngDevMode ? { debugName: "zShowSearch" } : {}), transform: zTransform });
-    zPlaceholderSearch = input('', ...(ngDevMode ? [{ debugName: "zPlaceholderSearch" }] : []));
-    zDebounce = input(300, ...(ngDevMode ? [{ debugName: "zDebounce" }] : []));
-    zNotFoundText = input('', ...(ngDevMode ? [{ debugName: "zNotFoundText" }] : []));
-    zEmptyText = input('', ...(ngDevMode ? [{ debugName: "zEmptyText" }] : []));
-    zEmptyIcon = input('lucideInbox', ...(ngDevMode ? [{ debugName: "zEmptyIcon" }] : []));
-    zMaxTagCount = input(3, ...(ngDevMode ? [{ debugName: "zMaxTagCount" }] : []));
-    zDropdownMaxHeight = input(256, ...(ngDevMode ? [{ debugName: "zDropdownMaxHeight" }] : []));
-    zOptionHeight = input(32, ...(ngDevMode ? [{ debugName: "zOptionHeight" }] : []));
-    zVirtualScroll = input(false, { ...(ngDevMode ? { debugName: "zVirtualScroll" } : {}), transform: zTransform });
-    zDynamicSize = input(false, { ...(ngDevMode ? { debugName: "zDynamicSize" } : {}), transform: zTransform });
-    zShowAction = input(false, { ...(ngDevMode ? { debugName: "zShowAction" } : {}), transform: zTransform });
-    zOptions = input([], ...(ngDevMode ? [{ debugName: "zOptions" }] : []));
-    zConfig = input({}, ...(ngDevMode ? [{ debugName: "zConfig" }] : []));
-    zTranslateLabels = input(true, { ...(ngDevMode ? { debugName: "zTranslateLabels" } : {}), transform: zTransform });
-    zKey = input('', ...(ngDevMode ? [{ debugName: "zKey" }] : []));
-    zSearchServer = input(false, { ...(ngDevMode ? { debugName: "zSearchServer" } : {}), transform: zTransform });
-    zLoadingMore = input(false, { ...(ngDevMode ? { debugName: "zLoadingMore" } : {}), transform: zTransform });
-    zEnableLoadMore = input(false, { ...(ngDevMode ? { debugName: "zEnableLoadMore" } : {}), transform: zTransform });
-    zScrollDistance = input(2, ...(ngDevMode ? [{ debugName: "zScrollDistance" }] : []));
-    zMaxVisible = input(null, ...(ngDevMode ? [{ debugName: "zMaxVisible" }] : []));
-    zScrollClose = input(false, { ...(ngDevMode ? { debugName: "zScrollClose" } : {}), transform: zTransform });
-    zSticky = input(false, { ...(ngDevMode ? { debugName: "zSticky" } : {}), transform: zTransform });
-    zPosition = input('bottom', ...(ngDevMode ? [{ debugName: "zPosition" }] : []));
-    zSelectedTemplate = input(null, ...(ngDevMode ? [{ debugName: "zSelectedTemplate" }] : []));
-    zOptionTemplate = input(null, ...(ngDevMode ? [{ debugName: "zOptionTemplate" }] : []));
-    zActionTemplate = input(null, ...(ngDevMode ? [{ debugName: "zActionTemplate" }] : []));
-    zAsyncValidators = input([], ...(ngDevMode ? [{ debugName: "zAsyncValidators" }] : []));
-    zAsyncDebounce = input(300, ...(ngDevMode ? [{ debugName: "zAsyncDebounce" }] : []));
-    zAsyncValidateOn = input('change', ...(ngDevMode ? [{ debugName: "zAsyncValidateOn" }] : []));
-    zValidators = input([], ...(ngDevMode ? [{ debugName: "zValidators" }] : []));
-    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    _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" }] : []));
-    _customError = signal(null, ...(ngDevMode ? [{ debugName: "_customError" }] : []));
-    _asyncOptions = signal([], ...(ngDevMode ? [{ debugName: "_asyncOptions" }] : []));
-    _asyncKeyword = signal('', ...(ngDevMode ? [{ debugName: "_asyncKeyword" }] : []));
-    _asyncPage = signal(1, ...(ngDevMode ? [{ debugName: "_asyncPage" }] : []));
-    _asyncHasMore = signal(false, ...(ngDevMode ? [{ debugName: "_asyncHasMore" }] : []));
-    _asyncLoading = signal(false, ...(ngDevMode ? [{ debugName: "_asyncLoading" }] : []));
-    _asyncLoadingMore = signal(false, ...(ngDevMode ? [{ debugName: "_asyncLoadingMore" }] : []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zClassSelect = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zClassSelect" }] : /* istanbul ignore next */ []));
+    zMode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMode" }] : /* istanbul ignore next */ []));
+    zSize = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
+    zLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zLabel" }] : /* istanbul ignore next */ []));
+    zLabelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zLabelClass" }] : /* istanbul ignore next */ []));
+    zPlaceholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : /* istanbul ignore next */ []));
+    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zLoadingOutline = input(false, { ...(ngDevMode ? { debugName: "zLoadingOutline" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zPrefix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPrefix" }] : /* istanbul ignore next */ []));
+    zAllowClear = input(false, { ...(ngDevMode ? { debugName: "zAllowClear" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zShowCheck = input(true, { ...(ngDevMode ? { debugName: "zShowCheck" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zWrap = input(true, { ...(ngDevMode ? { debugName: "zWrap" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zShowSearch = input(true, { ...(ngDevMode ? { debugName: "zShowSearch" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zPlaceholderSearch = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPlaceholderSearch" }] : /* istanbul ignore next */ []));
+    zDebounce = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDebounce" }] : /* istanbul ignore next */ []));
+    zNotFoundText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zNotFoundText" }] : /* istanbul ignore next */ []));
+    zEmptyText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zEmptyText" }] : /* istanbul ignore next */ []));
+    zEmptyIcon = input('lucideInbox', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zEmptyIcon" }] : /* istanbul ignore next */ []));
+    zMaxTagCount = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMaxTagCount" }] : /* istanbul ignore next */ []));
+    zDropdownMaxHeight = input(256, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDropdownMaxHeight" }] : /* istanbul ignore next */ []));
+    zOptionHeight = input(32, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOptionHeight" }] : /* istanbul ignore next */ []));
+    zVirtualScroll = input(false, { ...(ngDevMode ? { debugName: "zVirtualScroll" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zDynamicSize = input(false, { ...(ngDevMode ? { debugName: "zDynamicSize" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zShowAction = input(false, { ...(ngDevMode ? { debugName: "zShowAction" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zOptions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOptions" }] : /* istanbul ignore next */ []));
+    zConfig = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zConfig" }] : /* istanbul ignore next */ []));
+    zTranslateLabels = input(true, { ...(ngDevMode ? { debugName: "zTranslateLabels" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zKey = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zKey" }] : /* istanbul ignore next */ []));
+    zSearchServer = input(false, { ...(ngDevMode ? { debugName: "zSearchServer" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zLoadingMore = input(false, { ...(ngDevMode ? { debugName: "zLoadingMore" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zEnableLoadMore = input(false, { ...(ngDevMode ? { debugName: "zEnableLoadMore" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zScrollDistance = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zScrollDistance" }] : /* istanbul ignore next */ []));
+    zMaxVisible = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMaxVisible" }] : /* istanbul ignore next */ []));
+    zScrollClose = input(false, { ...(ngDevMode ? { debugName: "zScrollClose" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zSticky = input(false, { ...(ngDevMode ? { debugName: "zSticky" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zPosition = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPosition" }] : /* istanbul ignore next */ []));
+    zSelectedTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSelectedTemplate" }] : /* istanbul ignore next */ []));
+    zOptionTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOptionTemplate" }] : /* istanbul ignore next */ []));
+    zActionTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zActionTemplate" }] : /* istanbul ignore next */ []));
+    zAsyncValidators = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAsyncValidators" }] : /* istanbul ignore next */ []));
+    zAsyncDebounce = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAsyncDebounce" }] : /* istanbul ignore next */ []));
+    zAsyncValidateOn = input('change', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAsyncValidateOn" }] : /* istanbul ignore next */ []));
+    zValidators = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zValidators" }] : /* istanbul ignore next */ []));
+    _value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _formControl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formControl" }] : /* istanbul ignore next */ []));
+    _formStateVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : /* istanbul ignore next */ []));
+    _popoverControl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_popoverControl" }] : /* istanbul ignore next */ []));
+    _allKnownOptions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_allKnownOptions" }] : /* istanbul ignore next */ []));
+    _asyncErrors = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : /* istanbul ignore next */ []));
+    _customError = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_customError" }] : /* istanbul ignore next */ []));
+    _asyncOptions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asyncOptions" }] : /* istanbul ignore next */ []));
+    _asyncKeyword = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asyncKeyword" }] : /* istanbul ignore next */ []));
+    _asyncPage = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asyncPage" }] : /* istanbul ignore next */ []));
+    _asyncHasMore = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asyncHasMore" }] : /* istanbul ignore next */ []));
+    _asyncLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asyncLoading" }] : /* istanbul ignore next */ []));
+    _asyncLoadingMore = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asyncLoadingMore" }] : /* istanbul ignore next */ []));
     uiState = signal({
         isOpen: false,
         hasScrollShadow: false,
@@ -352,23 +404,34 @@ class ZSelectComponent {
         isValidating: false,
         touched: false,
         dirty: false,
-    }, ...(ngDevMode ? [{ debugName: "uiState" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiState" }] : /* istanbul ignore next */ []));
     selectId = zUuid('z-select');
     dropdownId = `${this.selectId}-dropdown`;
-    searchText = signal('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
-    dropdownWidth = signal(0, ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : []));
+    searchText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    dropdownWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
     currentValue = this._value.asReadonly();
     config = computed(() => ({
         ...Z_SELECT_DEFAULT_CONFIG,
         ...this.zConfig(),
-    }), ...(ngDevMode ? [{ debugName: "config" }] : []));
-    hasAsyncOptions = computed(() => !!this.config().async?.load, ...(ngDevMode ? [{ debugName: "hasAsyncOptions" }] : []));
-    sourceOptions = computed(() => (this.hasAsyncOptions() ? this._asyncOptions() : this.zOptions()), ...(ngDevMode ? [{ debugName: "sourceOptions" }] : []));
-    asyncSelectedOptions = computed(() => zResolveAsyncSelectedOptions(this.config().async), ...(ngDevMode ? [{ debugName: "asyncSelectedOptions" }] : []));
-    isLoading = computed(() => this.zLoading() || this._asyncLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    isLoadingMore = computed(() => this.zLoadingMore() || this._asyncLoadingMore(), ...(ngDevMode ? [{ debugName: "isLoadingMore" }] : []));
-    canLoadMore = computed(() => this.hasAsyncOptions() ? this._asyncHasMore() : this.zEnableLoadMore(), ...(ngDevMode ? [{ debugName: "canLoadMore" }] : []));
-    effectiveDebounceTime = computed(() => this.zConfig().debounceTime ?? this.zDebounce(), ...(ngDevMode ? [{ debugName: "effectiveDebounceTime" }] : []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    hasAsyncOptions = computed(() => !!this.config().async?.load, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAsyncOptions" }] : /* istanbul ignore next */ []));
+    sourceOptions = computed(() => (this.hasAsyncOptions() ? this._asyncOptions() : this.zOptions()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sourceOptions" }] : /* istanbul ignore next */ []));
+    asyncSelectedOptions = computed(() => zResolveAsyncSelectedOptions(this.config().async), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asyncSelectedOptions" }] : /* istanbul ignore next */ []));
+    isLoading = computed(() => this.zLoading() || this._asyncLoading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    isLoadingMore = computed(() => this.zLoadingMore() || this._asyncLoadingMore(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoadingMore" }] : /* istanbul ignore next */ []));
+    canLoadMore = computed(() => this.hasAsyncOptions() ? this._asyncHasMore() : this.zEnableLoadMore(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canLoadMore" }] : /* istanbul ignore next */ []));
+    effectiveDebounceTime = computed(() => this.zConfig().debounceTime ?? this.zDebounce(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDebounceTime" }] : /* istanbul ignore next */ []));
     virtualizer = injectVirtualizer(() => ({
         scrollElement: this.virtualScrollRef(),
         count: this.filteredOptions().length,
@@ -376,6 +439,7 @@ class ZSelectComponent {
         measureElement: (element) => element.getBoundingClientRect().height,
         gap: 3,
         overscan: 5,
+        useApplicationRefTick: false,
     }));
     _measureVirtualItems = effect(() => {
         if (!this.zDynamicSize()) {
@@ -385,38 +449,49 @@ class ZSelectComponent {
         for (const el of elements) {
             this.virtualizer.measureElement(el.nativeElement);
         }
-    }, ...(ngDevMode ? [{ debugName: "_measureVirtualItems" }] : []));
-    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" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_measureVirtualItems" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this._disabled() || this.zDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isReadonly = computed(() => this.zReadonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
+    isInteractionDisabled = computed(() => this.isDisabled() || this.isReadonly() || this.zLoading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInteractionDisabled" }] : /* istanbul ignore next */ []));
     effectivePlaceholder = computed(() => {
         this._zTranslate.currentLang();
         return this.zPlaceholder() || this._zTranslate.instant('i18n_z_ui_select_placeholder');
-    }, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
     effectivePlaceholderSearch = computed(() => {
         this._zTranslate.currentLang();
         return this.zPlaceholderSearch() || this._zTranslate.instant('i18n_z_ui_select_search');
-    }, ...(ngDevMode ? [{ debugName: "effectivePlaceholderSearch" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlaceholderSearch" }] : /* istanbul ignore next */ []));
     effectiveNotFoundText = computed(() => {
         this._zTranslate.currentLang();
         return this.zNotFoundText() || this._zTranslate.instant('i18n_z_ui_select_no_results');
-    }, ...(ngDevMode ? [{ debugName: "effectiveNotFoundText" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveNotFoundText" }] : /* istanbul ignore next */ []));
     effectiveEmptyText = computed(() => {
         this._zTranslate.currentLang();
         return this.zEmptyText() || this._zTranslate.instant('i18n_z_ui_select_no_options');
-    }, ...(ngDevMode ? [{ debugName: "effectiveEmptyText" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveEmptyText" }] : /* istanbul ignore next */ []));
     effectiveSelectAllText = computed(() => {
         this._zTranslate.currentLang();
         return this._zTranslate.instant('i18n_z_ui_select_select_all');
-    }, ...(ngDevMode ? [{ debugName: "effectiveSelectAllText" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSelectAllText" }] : /* istanbul ignore next */ []));
     effectiveClearAllText = computed(() => {
         this._zTranslate.currentLang();
         return this._zTranslate.instant('i18n_z_ui_select_clear_all');
-    }, ...(ngDevMode ? [{ debugName: "effectiveClearAllText" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveClearAllText" }] : /* istanbul ignore next */ []));
     effectiveRequiredErrorText = computed(() => {
         this._zTranslate.currentLang();
         return this._zTranslate.instant('i18n_z_ui_select_required');
-    }, ...(ngDevMode ? [{ debugName: "effectiveRequiredErrorText" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveRequiredErrorText" }] : /* istanbul ignore next */ []));
     translatedOptions = computed(() => {
         this._zTranslate.currentLang();
         const options = this.sourceOptions();
@@ -427,7 +502,8 @@ class ZSelectComponent {
             ...opt,
             label: this._zTranslate.instant(opt.label),
         }));
-    }, ...(ngDevMode ? [{ debugName: "translatedOptions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translatedOptions" }] : /* istanbul ignore next */ []));
     translatedAsyncSelectedOptions = computed(() => {
         this._zTranslate.currentLang();
         const options = this.asyncSelectedOptions();
@@ -438,32 +514,38 @@ class ZSelectComponent {
             ...opt,
             label: this._zTranslate.instant(opt.label),
         }));
-    }, ...(ngDevMode ? [{ debugName: "translatedAsyncSelectedOptions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translatedAsyncSelectedOptions" }] : /* istanbul ignore next */ []));
     isMultipleMode = computed(() => {
         const mode = this.zMode();
         return mode === 'multiple' || mode === 'tags';
-    }, ...(ngDevMode ? [{ debugName: "isMultipleMode" }] : []));
-    isTagsMode = computed(() => this.zMode() === 'tags', ...(ngDevMode ? [{ debugName: "isTagsMode" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMultipleMode" }] : /* istanbul ignore next */ []));
+    isTagsMode = computed(() => this.zMode() === 'tags', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isTagsMode" }] : /* istanbul ignore next */ []));
     effectiveSelectedTemplate = computed(() => {
         const directive = this.customSelectedDirective();
         if (directive) {
             return directive.templateRef;
         }
         return this.zSelectedTemplate();
-    }, ...(ngDevMode ? [{ debugName: "effectiveSelectedTemplate" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSelectedTemplate" }] : /* istanbul ignore next */ []));
     effectiveOptionTemplate = computed(() => {
         const directive = this.customOptionDirective();
         if (directive) {
             return directive.templateRef;
         }
         return this.zOptionTemplate();
-    }, ...(ngDevMode ? [{ debugName: "effectiveOptionTemplate" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveOptionTemplate" }] : /* istanbul ignore next */ []));
     knownOptions = computed(() => {
         if (this.zSearchServer() || this.hasAsyncOptions()) {
             return zMergeAsyncOptions(this._allKnownOptions(), this.translatedAsyncSelectedOptions(), this.config().async?.dedupeBy);
         }
         return this.translatedOptions();
-    }, ...(ngDevMode ? [{ debugName: "knownOptions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "knownOptions" }] : /* istanbul ignore next */ []));
     shouldUseVirtualScroll = computed(() => {
         if (this.zVirtualScroll()) {
             return true;
@@ -476,7 +558,8 @@ class ZSelectComponent {
             return false;
         }
         return this.sourceOptions().length > 50;
-    }, ...(ngDevMode ? [{ debugName: "shouldUseVirtualScroll" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldUseVirtualScroll" }] : /* istanbul ignore next */ []));
     selectedOption = computed(() => {
         this._zTranslate.currentLang();
         if (this.isMultipleMode()) {
@@ -488,7 +571,8 @@ class ZSelectComponent {
         }
         const options = this.knownOptions();
         return this._findOptionByValue(options, value) ?? null;
-    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
     selectedOptions = computed(() => {
         this._zTranslate.currentLang();
         if (!this.isMultipleMode()) {
@@ -502,7 +586,8 @@ class ZSelectComponent {
         return value
             .map(v => this._findOptionByValue(options, v))
             .filter((opt) => opt !== undefined);
-    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
     selected = computed(() => {
         if (this.isMultipleMode()) {
             return this.selectedOptions();
@@ -512,23 +597,27 @@ class ZSelectComponent {
             return [];
         }
         return [option];
-    }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     displayedTags = computed(() => {
         const selected = this.selectedOptions();
         const max = this.zMaxTagCount();
         return selected.slice(0, max);
-    }, ...(ngDevMode ? [{ debugName: "displayedTags" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayedTags" }] : /* istanbul ignore next */ []));
     remainingCount = computed(() => {
         const selected = this.selectedOptions();
         const max = this.zMaxTagCount();
         return Math.max(0, selected.length - max);
-    }, ...(ngDevMode ? [{ debugName: "remainingCount" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "remainingCount" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => {
         if (this.isMultipleMode()) {
             return this.selectedOptions().length > 0;
         }
         return this.selectedOption() !== null;
-    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     isAllSelected = computed(() => {
         if (!this.isMultipleMode()) {
             return false;
@@ -544,19 +633,22 @@ class ZSelectComponent {
             return false;
         }
         return enabledValues.every(value => selectedValues.some(selectedValue => this._isValueEqual(selectedValue, value)));
-    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAllSelected" }] : /* istanbul ignore next */ []));
     filteredOptions = computed(() => {
         if (this.zSearchServer() || this.hasAsyncOptions()) {
             return this.translatedOptions();
         }
         return filterOptions(this.translatedOptions(), this.searchText());
-    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     isEmptyData = computed(() => {
         if ((this.zSearchServer() || this.hasAsyncOptions()) && this.searchText().trim()) {
             return false;
         }
         return this.translatedOptions().length === 0;
-    }, ...(ngDevMode ? [{ debugName: "isEmptyData" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmptyData" }] : /* istanbul ignore next */ []));
     isNoSearchResults = computed(() => {
         if ((this.zSearchServer() || this.hasAsyncOptions()) && this.searchText().trim()) {
             return this.translatedOptions().length === 0;
@@ -565,14 +657,16 @@ class ZSelectComponent {
         const hasOptions = this.translatedOptions().length > 0;
         const hasSearch = this.searchText().trim() !== '';
         return noFiltered && hasOptions && hasSearch;
-    }, ...(ngDevMode ? [{ debugName: "isNoSearchResults" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNoSearchResults" }] : /* istanbul ignore next */ []));
     optionsMaxHeight = computed(() => {
         const total = this.zDropdownMaxHeight();
         const searchHeight = this.zShowSearch() ? 44 : 0;
         const hasActionBar = this.zShowAction() && (!!this.zActionTemplate() || this.isMultipleMode());
         const actionHeight = hasActionBar ? 40 : 0;
         return total - searchHeight - actionHeight;
-    }, ...(ngDevMode ? [{ debugName: "optionsMaxHeight" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionsMaxHeight" }] : /* istanbul ignore next */ []));
     currentStatus = computed(() => {
         if (this.isDisabled()) {
             return 'disabled';
@@ -587,7 +681,8 @@ class ZSelectComponent {
             return 'error';
         }
         return 'default';
-    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentStatus" }] : /* istanbul ignore next */ []));
     _shouldShowValidation = computed(() => {
         const control = this._formControl();
         this._formStateVersion();
@@ -599,7 +694,8 @@ class ZSelectComponent {
             return control.dirty;
         }
         return this.uiState().dirty || this.uiState().touched;
-    }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : /* istanbul ignore next */ []));
     hasError = computed(() => {
         // Check custom error first (from setErrorMessage)
         if (this._customError()) {
@@ -619,7 +715,8 @@ class ZSelectComponent {
             return false;
         }
         return control.invalid && this._shouldShowValidation();
-    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     errorMessage = computed(() => {
         // Check custom error first (from setErrorMessage)
         const customError = this._customError();
@@ -649,7 +746,8 @@ class ZSelectComponent {
             return this.effectiveRequiredErrorText();
         }
         return '';
-    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     selectClasses = computed(() => zMergeClasses(zSelectVariants({
         zSize: this.zSize(),
         zStatus: this.currentStatus(),
@@ -660,8 +758,10 @@ class ZSelectComponent {
         'h-8': this.zSize() === 'sm',
         'h-9': this.zSize() === 'default',
         'h-10': this.zSize() === 'lg',
-    }, this.class()), ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
-    dropdownClasses = computed(() => zMergeClasses('text-primary mt-0 shrink-0', this.zClassSelect()), ...(ngDevMode ? [{ debugName: "dropdownClasses" }] : []));
+    }, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectClasses" }] : /* istanbul ignore next */ []));
+    dropdownClasses = computed(() => zMergeClasses('text-primary mt-0 shrink-0', this.zClassSelect()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownClasses" }] : /* istanbul ignore next */ []));
     _searchSubject = new Subject();
     _asyncCancelSubject = new Subject();
     _asyncValidationSubject = new Subject();
@@ -673,7 +773,8 @@ class ZSelectComponent {
     _onChange = () => void 0;
     _onTouched = () => void 0;
     _ngControl = null;
-    _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
+    _isNgModel = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isNgModel" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(onCleanup => {
             const triggerEl = this.triggerRef()?.nativeElement;
@@ -1407,16 +1508,16 @@ class ZSelectComponent {
             this._asyncValidationSubject.next(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZSelectComponent, isStandalone: true, selector: "z-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zClassSelect: { classPropertyName: "zClassSelect", publicName: "zClassSelect", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zLoadingOutline: { classPropertyName: "zLoadingOutline", publicName: "zLoadingOutline", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zShowCheck: { classPropertyName: "zShowCheck", publicName: "zShowCheck", isSignal: true, isRequired: false, transformFunction: null }, zWrap: { classPropertyName: "zWrap", publicName: "zWrap", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholderSearch: { classPropertyName: "zPlaceholderSearch", publicName: "zPlaceholderSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zNotFoundText: { classPropertyName: "zNotFoundText", publicName: "zNotFoundText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zMaxTagCount: { classPropertyName: "zMaxTagCount", publicName: "zMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, zDropdownMaxHeight: { classPropertyName: "zDropdownMaxHeight", publicName: "zDropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, zOptionHeight: { classPropertyName: "zOptionHeight", publicName: "zOptionHeight", isSignal: true, isRequired: false, transformFunction: null }, zVirtualScroll: { classPropertyName: "zVirtualScroll", publicName: "zVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, zDynamicSize: { classPropertyName: "zDynamicSize", publicName: "zDynamicSize", isSignal: true, isRequired: false, transformFunction: null }, zShowAction: { classPropertyName: "zShowAction", publicName: "zShowAction", isSignal: true, isRequired: false, transformFunction: null }, zOptions: { classPropertyName: "zOptions", publicName: "zOptions", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zTranslateLabels: { classPropertyName: "zTranslateLabels", publicName: "zTranslateLabels", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zSearchServer: { classPropertyName: "zSearchServer", publicName: "zSearchServer", isSignal: true, isRequired: false, transformFunction: null }, zLoadingMore: { classPropertyName: "zLoadingMore", publicName: "zLoadingMore", isSignal: true, isRequired: false, transformFunction: null }, zEnableLoadMore: { classPropertyName: "zEnableLoadMore", publicName: "zEnableLoadMore", isSignal: true, isRequired: false, transformFunction: null }, zScrollDistance: { classPropertyName: "zScrollDistance", publicName: "zScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, zMaxVisible: { classPropertyName: "zMaxVisible", publicName: "zMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zSticky: { classPropertyName: "zSticky", publicName: "zSticky", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zSelectedTemplate: { classPropertyName: "zSelectedTemplate", publicName: "zSelectedTemplate", isSignal: true, isRequired: false, transformFunction: null }, zOptionTemplate: { classPropertyName: "zOptionTemplate", publicName: "zOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, zActionTemplate: { classPropertyName: "zActionTemplate", publicName: "zActionTemplate", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnLoadMore: "zOnLoadMore", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zControl: "zControl", zEvent: "zEvent" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZSelectComponent, isStandalone: true, selector: "z-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zClassSelect: { classPropertyName: "zClassSelect", publicName: "zClassSelect", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zLoadingOutline: { classPropertyName: "zLoadingOutline", publicName: "zLoadingOutline", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zShowCheck: { classPropertyName: "zShowCheck", publicName: "zShowCheck", isSignal: true, isRequired: false, transformFunction: null }, zWrap: { classPropertyName: "zWrap", publicName: "zWrap", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholderSearch: { classPropertyName: "zPlaceholderSearch", publicName: "zPlaceholderSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zNotFoundText: { classPropertyName: "zNotFoundText", publicName: "zNotFoundText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zMaxTagCount: { classPropertyName: "zMaxTagCount", publicName: "zMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, zDropdownMaxHeight: { classPropertyName: "zDropdownMaxHeight", publicName: "zDropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, zOptionHeight: { classPropertyName: "zOptionHeight", publicName: "zOptionHeight", isSignal: true, isRequired: false, transformFunction: null }, zVirtualScroll: { classPropertyName: "zVirtualScroll", publicName: "zVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, zDynamicSize: { classPropertyName: "zDynamicSize", publicName: "zDynamicSize", isSignal: true, isRequired: false, transformFunction: null }, zShowAction: { classPropertyName: "zShowAction", publicName: "zShowAction", isSignal: true, isRequired: false, transformFunction: null }, zOptions: { classPropertyName: "zOptions", publicName: "zOptions", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zTranslateLabels: { classPropertyName: "zTranslateLabels", publicName: "zTranslateLabels", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zSearchServer: { classPropertyName: "zSearchServer", publicName: "zSearchServer", isSignal: true, isRequired: false, transformFunction: null }, zLoadingMore: { classPropertyName: "zLoadingMore", publicName: "zLoadingMore", isSignal: true, isRequired: false, transformFunction: null }, zEnableLoadMore: { classPropertyName: "zEnableLoadMore", publicName: "zEnableLoadMore", isSignal: true, isRequired: false, transformFunction: null }, zScrollDistance: { classPropertyName: "zScrollDistance", publicName: "zScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, zMaxVisible: { classPropertyName: "zMaxVisible", publicName: "zMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zSticky: { classPropertyName: "zSticky", publicName: "zSticky", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zSelectedTemplate: { classPropertyName: "zSelectedTemplate", publicName: "zSelectedTemplate", isSignal: true, isRequired: false, transformFunction: null }, zOptionTemplate: { classPropertyName: "zOptionTemplate", publicName: "zOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, zActionTemplate: { classPropertyName: "zActionTemplate", publicName: "zActionTemplate", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnLoadMore: "zOnLoadMore", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zControl: "zControl", zEvent: "zEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ZSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      [zSticky]=\"zSticky()\"\n      [zKeyboardSafe]=\"zShowSearch()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground min-w-0 flex-1 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                    [zTooltipDisabled]=\"uiState().isOpen\"\n                    zTooltipPosition=\"top\"\n                    [zTooltipHideDelay]=\"0\"\n                    [zTooltipOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                [zTooltipDisabled]=\"uiState().isOpen\"\n                zTooltipPosition=\"top\"\n                [zTooltipHideDelay]=\"0\"\n                [zTooltipOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-[var(--z-popover-shadow)]\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full min-w-0 overflow-hidden bg-transparent py-3 text-sm text-ellipsis whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #virtualOptionEl\n                    #optionEl\n                    [class]=\"\n                      'z-select-option absolute right-0 left-0 min-w-0 ' +\n                      (opt\n                        | zIsSelected: currentValue() : isMultipleMode() : zKey()\n                        | zOptionClasses: opt.disabled : !!effectiveOptionTemplate())\n                    \"\n                    [attr.data-index]=\"virtualItem.index\"\n                    [style.display]=\"effectiveOptionTemplate() ? 'block' : null\"\n                    [style.height.px]=\"zDynamicSize() ? null : zOptionHeight()\"\n                    [style.minHeight.px]=\"zDynamicSize() ? zOptionHeight() : null\"\n                    [style.overflow]=\"effectiveOptionTemplate() ? 'visible' : null\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      @let selected = opt | zIsSelected: currentValue() : isMultipleMode() : zKey();\n                      <div class=\"flex min-w-0 items-start gap-2\">\n                        <div class=\"min-w-0 flex-1\">\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              effectiveOptionTemplate()!;\n                              context: {\n                                $implicit: opt,\n                                selected: selected,\n                              }\n                            \" />\n                        </div>\n                        @if (zShowCheck() && selected) {\n                          <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                        }\n                      </div>\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                      @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                        <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                      }\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  [class]=\"\n                    'z-select-option relative min-w-0 ' +\n                    (opt\n                      | zIsSelected: currentValue() : isMultipleMode() : zKey()\n                      | zOptionClasses: opt.disabled : !!effectiveOptionTemplate())\n                  \"\n                  [style.display]=\"effectiveOptionTemplate() ? 'block' : null\"\n                  [style.minHeight.px]=\"effectiveOptionTemplate() ? null : zOptionHeight()\"\n                  [style.overflow]=\"effectiveOptionTemplate() ? 'visible' : null\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    @let selected = opt | zIsSelected: currentValue() : isMultipleMode() : zKey();\n                    <div class=\"flex min-w-0 items-start gap-2\">\n                      <div class=\"min-w-0 flex-1\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            effectiveOptionTemplate()!;\n                            context: {\n                              $implicit: opt,\n                              selected: selected,\n                            }\n                          \" />\n                      </div>\n                      @if (zShowCheck() && selected) {\n                        <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                      }\n                    </div>\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                    @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                    }\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: 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", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "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", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: 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 }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      [zSticky]=\"zSticky()\"\n      [zKeyboardSafe]=\"zShowSearch()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground min-w-0 flex-1 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                    [zTooltipDisabled]=\"uiState().isOpen\"\n                    zTooltipPosition=\"top\"\n                    [zTooltipHideDelay]=\"0\"\n                    [zTooltipOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                [zTooltipDisabled]=\"uiState().isOpen\"\n                zTooltipPosition=\"top\"\n                [zTooltipHideDelay]=\"0\"\n                [zTooltipOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-[var(--z-popover-shadow)]\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full min-w-0 overflow-hidden bg-transparent py-3 text-sm text-ellipsis whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #virtualOptionEl\n                    #optionEl\n                    [class]=\"\n                      'z-select-option absolute right-0 left-0 min-w-0 ' +\n                      (opt\n                        | zIsSelected: currentValue() : isMultipleMode() : zKey()\n                        | zOptionClasses: opt.disabled : !!effectiveOptionTemplate())\n                    \"\n                    [attr.data-index]=\"virtualItem.index\"\n                    [style.display]=\"effectiveOptionTemplate() ? 'block' : null\"\n                    [style.height.px]=\"zDynamicSize() ? null : zOptionHeight()\"\n                    [style.minHeight.px]=\"zDynamicSize() ? zOptionHeight() : null\"\n                    [style.overflow]=\"effectiveOptionTemplate() ? 'visible' : null\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      @let selected = opt | zIsSelected: currentValue() : isMultipleMode() : zKey();\n                      <div class=\"flex min-w-0 items-start gap-2\">\n                        <div class=\"min-w-0 flex-1\">\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              effectiveOptionTemplate()!;\n                              context: {\n                                $implicit: opt,\n                                selected: selected,\n                              }\n                            \" />\n                        </div>\n                        @if (zShowCheck() && selected) {\n                          <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                        }\n                      </div>\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                      @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                        <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                      }\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  [class]=\"\n                    'z-select-option relative min-w-0 ' +\n                    (opt\n                      | zIsSelected: currentValue() : isMultipleMode() : zKey()\n                      | zOptionClasses: opt.disabled : !!effectiveOptionTemplate())\n                  \"\n                  [style.display]=\"effectiveOptionTemplate() ? 'block' : null\"\n                  [style.minHeight.px]=\"effectiveOptionTemplate() ? null : zOptionHeight()\"\n                  [style.overflow]=\"effectiveOptionTemplate() ? 'visible' : null\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    @let selected = opt | zIsSelected: currentValue() : isMultipleMode() : zKey();\n                    <div class=\"flex min-w-0 items-start gap-2\">\n                      <div class=\"min-w-0 flex-1\">\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            effectiveOptionTemplate()!;\n                            context: {\n                              $implicit: opt,\n                              selected: selected,\n                            }\n                          \" />\n                      </div>\n                      @if (zShowCheck() && selected) {\n                        <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                      }\n                    </div>\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                    @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                    }\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: 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", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "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", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-select', imports: [
                         FormsModule,