@shival99/z-ui 2.4.3 → 2.4.4

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

@@ -4,8 +4,10 @@ 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 { ZBreadcrumbComponent } from '@shival99/z-ui/components/z-breadcrumb';
 import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
 import { ZEmptyComponent } from '@shival99/z-ui/components/z-empty';
+import { ZHoverGlideDirective } from '@shival99/z-ui/components/z-hover-glide';
 import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
 import { ZLoadingComponent } from '@shival99/z-ui/components/z-loading';
 import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
@@ -19,10 +21,10 @@ import { cva } from 'class-variance-authority';
 
 class ZSelectOptionDirective {
     templateRef = inject((TemplateRef));
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ZSelectOptionDirective, isStandalone: true, selector: "[z-select-option], [zSelectOption]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZSelectOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZSelectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-select-option], [zSelectOption]',
@@ -32,10 +34,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 
 class ZSelectSelectedDirective {
     templateRef = inject((TemplateRef));
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZSelectSelectedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ZSelectSelectedDirective, isStandalone: true, selector: "[z-select-selected], [zSelectSelected]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZSelectSelectedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZSelectSelectedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-select-selected], [zSelectSelected]',
@@ -152,10 +154,10 @@ class ZIsSelectedPipe {
         }
         return zIsSelectValueEqual(value, option.value, zKey);
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZIsSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: ZIsSelectedPipe, isStandalone: true, name: "zIsSelected" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZIsSelectedPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZIsSelectedPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zIsSelected',
@@ -165,27 +167,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
         }] });
 
 const zSelectVariants = cva([
-    'flex w-full items-center rounded-sm border border-input bg-white shadow-xs cursor-pointer',
+    'flex w-full items-center cursor-pointer',
     'transition-[border-color,box-shadow,background-color,color,opacity] duration-200',
-    'dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
     'outline-none',
     'text-sm',
 ], {
     variants: {
+        zVariant: {
+            default: 'rounded-sm border border-input bg-white shadow-xs dark:bg-input/30 dark:border-input dark:hover:bg-input/50 focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+            ghost: 'min-h-8 rounded-sm border-0 bg-transparent px-2 py-0.5 shadow-none focus-within:bg-accent/50 focus-visible:ring-ring/50 focus-visible:ring-2',
+        },
         zSize: {
             sm: 'min-h-8 px-2 py-1 gap-2 text-sm',
             default: 'min-h-9 px-2 py-1.5 gap-2 text-sm',
             lg: 'min-h-10 px-2 py-1.5 gap-2.5 text-sm',
         },
         zStatus: {
-            default: 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+            default: '',
             open: 'border-ring ring-ring/50 ring-[3px]',
             error: 'border-destructive! ring-destructive/20 ring-[3px] focus-within:border-destructive! focus-within:ring-destructive/30',
             disabled: 'opacity-50 cursor-not-allowed bg-muted! text-muted-foreground',
             readonly: 'cursor-default bg-muted/50 text-muted-foreground',
         },
     },
+    compoundVariants: [
+        { zVariant: 'ghost', zSize: 'sm', class: 'min-h-8 px-2 py-0.5' },
+        { zVariant: 'ghost', zSize: 'default', class: 'min-h-8 px-2 py-0.5' },
+        { zVariant: 'ghost', zSize: 'lg', class: 'min-h-9 px-2 py-0.5' },
+        { zVariant: 'ghost', zStatus: 'open', class: 'border-transparent! bg-accent/50 ring-0!' },
+        { zVariant: 'ghost', zStatus: 'error', class: 'border-transparent!' },
+        { zVariant: 'ghost', zStatus: 'disabled', class: 'border-transparent! bg-transparent!' },
+        { zVariant: 'ghost', zStatus: 'readonly', class: 'border-transparent! bg-transparent!' },
+    ],
     defaultVariants: {
+        zVariant: 'default',
         zSize: 'default',
         zStatus: 'default',
     },
@@ -210,7 +225,7 @@ const zSelectOptionVariants = cva('px-2 py-1.5 cursor-pointer transition-colors
         },
         selected: {
             true: 'bg-primary/15 text-primary',
-            false: 'hover:bg-primary/10 hover:text-foreground',
+            false: '',
         },
         disabled: {
             true: 'opacity-50 cursor-not-allowed pointer-events-none',
@@ -232,10 +247,10 @@ class ZOptionClassesPipe {
             disabled: isDisabled ?? false,
         });
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZOptionClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: ZOptionClassesPipe, isStandalone: true, name: "zOptionClasses" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZOptionClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZOptionClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zOptionClasses',
@@ -253,10 +268,10 @@ class ZTagClassesPipe {
         }
         return zMergeClasses(baseClasses, 'bg-muted text-foreground border-border');
     }
-    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" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZTagClassesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: ZTagClassesPipe, isStandalone: true, name: "zTagClasses" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZTagClassesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZTagClassesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'zTagClasses',
@@ -301,6 +316,8 @@ class ZSelectComponent {
     ...(ngDevMode ? [{ debugName: "zMode" }] : /* istanbul ignore next */ []));
     zSize = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
+    zVariant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zVariant" }] : /* istanbul ignore next */ []));
     zLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zLabel" }] : /* istanbul ignore next */ []));
     zLabelClass = input('', /* @ts-ignore */
@@ -332,6 +349,9 @@ class ZSelectComponent {
     ...(ngDevMode ? [{ debugName: "zMaxTagCount" }] : /* istanbul ignore next */ []));
     zDropdownMaxHeight = input(256, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zDropdownMaxHeight" }] : /* istanbul ignore next */ []));
+    /** Match the trigger by default; use `auto` or a number for an independent dropdown width. */
+    zDropdownWidth = input('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDropdownWidth" }] : /* 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 });
@@ -355,6 +375,9 @@ class ZSelectComponent {
     zSticky = input(false, { ...(ngDevMode ? { debugName: "zSticky" } : /* istanbul ignore next */ {}), transform: zTransform });
     zPosition = input('bottom', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zPosition" }] : /* istanbul ignore next */ []));
+    zTree = input(false, { ...(ngDevMode ? { debugName: "zTree" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zTreeRootLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTreeRootLabel" }] : /* istanbul ignore next */ []));
     zSelectedTemplate = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zSelectedTemplate" }] : /* istanbul ignore next */ []));
     zOptionTemplate = input(null, /* @ts-ignore */
@@ -412,7 +435,26 @@ class ZSelectComponent {
     ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
     dropdownWidth = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
+    dropdownWidthStyle = computed(() => {
+        const width = this.zDropdownWidth();
+        if (width === 'auto') {
+            return null;
+        }
+        if (width === 'trigger') {
+            return `${this.dropdownWidth()}px`;
+        }
+        return `${width}px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownWidthStyle" }] : /* istanbul ignore next */ []));
     currentValue = this._value.asReadonly();
+    treeStack = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeStack" }] : /* istanbul ignore next */ []));
+    treeActiveIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeActiveIndex" }] : /* istanbul ignore next */ []));
+    treeSearchText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeSearchText" }] : /* istanbul ignore next */ []));
+    treeDirection = signal('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeDirection" }] : /* istanbul ignore next */ []));
     config = computed(() => ({
         ...Z_SELECT_DEFAULT_CONFIG,
         ...this.zConfig(),
@@ -477,6 +519,30 @@ class ZSelectComponent {
         return this.zEmptyText() || this._zTranslate.instant('i18n_z_ui_select_no_options');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveEmptyText" }] : /* istanbul ignore next */ []));
+    effectiveTreeRootLabel = computed(() => {
+        this._zTranslate.currentLang();
+        return this.zTreeRootLabel() || this._zTranslate.instant('i18n_z_ui_select_tree_root');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTreeRootLabel" }] : /* istanbul ignore next */ []));
+    treeCurrentLevel = computed(() => this.treeStack()[this.treeActiveIndex()] ?? { label: '', options: [] }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeCurrentLevel" }] : /* istanbul ignore next */ []));
+    treeBreadcrumbItems = computed(() => {
+        const stack = this.treeStack();
+        const activeIndex = this.treeActiveIndex();
+        return stack.slice(0, activeIndex + 1).map((level, index) => ({
+            label: index === 0 ? this.effectiveTreeRootLabel() : level.label,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeBreadcrumbItems" }] : /* istanbul ignore next */ []));
+    treeFilteredOptions = computed(() => {
+        this._zTranslate.currentLang();
+        const options = this.treeCurrentLevel().options;
+        const translated = this.zTranslateLabels()
+            ? options.map(opt => ({ ...opt, label: this._zTranslate.instant(opt.label) }))
+            : options;
+        return filterOptions(translated, this.treeSearchText());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "treeFilteredOptions" }] : /* istanbul ignore next */ []));
     effectiveSelectAllText = computed(() => {
         this._zTranslate.currentLang();
         return this._zTranslate.instant('i18n_z_ui_select_select_all');
@@ -749,6 +815,7 @@ class ZSelectComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     selectClasses = computed(() => zMergeClasses(zSelectVariants({
+        zVariant: this.zVariant(),
         zSize: this.zSize(),
         zStatus: this.currentStatus(),
     }), this.zLoading() && this.zLoadingOutline() ? 'z-loading-outline-active !ring-ring/50 !ring-[3px]' : '', 
@@ -1014,6 +1081,7 @@ class ZSelectComponent {
     onPopoverShow() {
         this.uiState.update(s => ({ ...s, isOpen: true, isFocused: true }));
         this._resetOptionsScrollTop();
+        this._resetTreeStack();
         this.searchText.set('');
         this.zOnSearch.emit('');
         this._loadAsyncOptionsOnFocus();
@@ -1120,6 +1188,65 @@ class ZSelectComponent {
             closeFn();
         }
     }
+    /** Selects a leaf option, or drills into its children when present (zTree mode). */
+    onTreeOptionClick(option, closeFn) {
+        if (option.disabled) {
+            return;
+        }
+        if (option.children?.length) {
+            this._drillIntoTree(option);
+            return;
+        }
+        this.selectOption(option, closeFn);
+    }
+    /** Jumps back to an ancestor level via the tree breadcrumb. */
+    treeNavigateTo(index) {
+        if (index === this.treeActiveIndex()) {
+            return;
+        }
+        this.treeDirection.set('back');
+        this.treeActiveIndex.set(index);
+        this.treeSearchText.set('');
+    }
+    /** Goes up exactly one tree level. */
+    treeGoBack() {
+        this.treeNavigateTo(Math.max(0, this.treeActiveIndex() - 1));
+    }
+    /** Resolves a z-breadcrumb click back to its stack level (matched by label, unique within one drill path). */
+    onTreeBreadcrumbClick(item) {
+        const index = this.treeBreadcrumbItems().findIndex(i => i.label === item.label);
+        if (index >= 0) {
+            this.treeNavigateTo(index);
+        }
+    }
+    _drillIntoTree(option) {
+        const truncated = this.treeStack().slice(0, this.treeActiveIndex() + 1);
+        this.treeStack.set([...truncated, { label: option.label, options: option.children ?? [] }]);
+        this.treeDirection.set('forward');
+        this.treeActiveIndex.set(truncated.length);
+        this.treeSearchText.set('');
+    }
+    _resetTreeStack() {
+        if (!this.zTree()) {
+            return;
+        }
+        const rootOptions = this.zOptions();
+        const stack = [{ label: '', options: rootOptions }];
+        const value = this._value();
+        if (!this.isMultipleMode() && value !== null && value !== undefined) {
+            const path = this._findTreePath(rootOptions, value);
+            for (const ancestor of path?.slice(0, -1) ?? []) {
+                stack.push({ label: this._translateOptionLabel(ancestor.label), options: ancestor.children ?? [] });
+            }
+        }
+        this.treeStack.set(stack);
+        this.treeActiveIndex.set(stack.length - 1);
+        this.treeSearchText.set('');
+        this.treeDirection.set('none');
+    }
+    _translateOptionLabel(label) {
+        return this.zTranslateLabels() ? this._zTranslate.instant(label) : label;
+    }
     removeOption(event, option) {
         event.stopPropagation();
         const current = this._value() ?? [];
@@ -1167,7 +1294,33 @@ class ZSelectComponent {
     }
     trackByValue = (_index, option) => this._getOptionKey(option);
     _findOptionByValue(options, value) {
-        return options.find(option => this._isValueEqual(option.value, value));
+        for (const option of options) {
+            if (this._isValueEqual(option.value, value)) {
+                return option;
+            }
+            if (option.children?.length) {
+                const found = this._findOptionByValue(option.children, value);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return undefined;
+    }
+    /** Returns the chain of ancestors (ending with the matching option itself) leading to `value`. */
+    _findTreePath(options, value) {
+        for (const option of options) {
+            if (this._isValueEqual(option.value, value)) {
+                return [option];
+            }
+            if (option.children?.length) {
+                const childPath = this._findTreePath(option.children, value);
+                if (childPath) {
+                    return [option, ...childPath];
+                }
+            }
+        }
+        return null;
     }
     _getOptionKey(option) {
         const key = this.zKey();
@@ -1508,16 +1661,16 @@ class ZSelectComponent {
             this._asyncValidationSubject.next(value);
         }
     }
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", 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 }, zDropdownWidth: { classPropertyName: "zDropdownWidth", publicName: "zDropdownWidth", 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 }, zTree: { classPropertyName: "zTree", publicName: "zTree", isSignal: true, isRequired: false, transformFunction: null }, zTreeRootLabel: { classPropertyName: "zTreeRootLabel", publicName: "zTreeRootLabel", 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                    [zShowDelay]=\"300\"\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                [zShowDelay]=\"300\"\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                        [zShowDelay]=\"300\"\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                      [zShowDelay]=\"300\"\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 });
+        ], 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]=\"zDropdownWidth()\"\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                    [zShowDelay]=\"300\"\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                [zShowDelay]=\"300\"\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]=\"dropdownWidthStyle()\"\n      [style.min-width]=\"dropdownWidthStyle()\">\n      @if (zTree()) {\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              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]=\"treeSearchText()\"\n              (ngModelChange)=\"treeSearchText.set($event)\"\n              autocomplete=\"off\"\n              autocorrect=\"off\"\n              spellcheck=\"false\" />\n          </div>\n        }\n\n        @if (treeActiveIndex() > 0) {\n          <div class=\"z-select-tree-crumbs border-border flex items-center gap-1 border-b px-2 py-1.5\">\n            <button\n              type=\"button\"\n              class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 items-center justify-center rounded-sm transition-colors\"\n              (click)=\"treeGoBack()\">\n              <z-icon zType=\"lucideChevronLeft\" zSize=\"14\" />\n            </button>\n            <z-breadcrumb\n              class=\"min-w-0 flex-1\"\n              zSize=\"sm\"\n              zSeparator=\"/\"\n              [zItems]=\"treeBreadcrumbItems()\"\n              (zItemClick)=\"onTreeBreadcrumbClick($event)\" />\n          </div>\n        }\n\n        <div class=\"z-select-tree-viewport relative overflow-hidden\" [style.height.px]=\"optionsMaxHeight()\">\n          @for (level of [treeCurrentLevel()]; track treeActiveIndex()) {\n            <div\n              zHoverGlide\n              class=\"absolute inset-0 flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [class.z-select-tree-slide-left]=\"treeDirection() === 'forward'\"\n              [class.z-select-tree-slide-right]=\"treeDirection() === 'back'\">\n              @if (treeFilteredOptions().length > 0) {\n                @for (opt of treeFilteredOptions(); track opt.value) {\n                  <div\n                    #treeOptionEl\n                    data-glide-item\n                    [class]=\"\n                      'z-select-option relative flex min-w-0 items-center gap-2 ' +\n                      (opt\n                        | zIsSelected: currentValue() : isMultipleMode() : zKey()\n                        | zOptionClasses: opt.disabled : false)\n                    \"\n                    [style.minHeight.px]=\"zOptionHeight()\"\n                    (click)=\"onTreeOptionClick(opt, close)\">\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      [zShowDelay]=\"300\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"treeOptionEl\"\n                      [innerHTML]=\"opt.label | zHighlight: treeSearchText() | zSafeHtml\"></span>\n                    @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                    }\n                    @if (opt.children?.length) {\n                      <z-icon zType=\"lucideChevronRight\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n                    }\n                  </div>\n                }\n              } @else {\n                <div class=\"flex size-full items-center justify-center\">\n                  <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n                </div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\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                zHoverGlide\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                      data-glide-item\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) translateZ(0)'\"\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                          [zShowDelay]=\"300\"\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                zHoverGlide\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                    data-glide-item\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                        [zShowDelay]=\"300\"\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      }\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)}}.z-select-tree-slide-left{animation:z-select-tree-slide-left .22s cubic-bezier(.16,1,.3,1)}@keyframes z-select-tree-slide-left{0%{transform:translate(100%)}to{transform:translate(0)}}.z-select-tree-slide-right{animation:z-select-tree-slide-right .22s cubic-bezier(.16,1,.3,1)}@keyframes z-select-tree-slide-right{0%{transform:translate(-100%)}to{transform:translate(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: ZBreadcrumbComponent, selector: "z-breadcrumb", inputs: ["class", "zItems", "zSize", "zSeparator", "zSeparatorSize", "zHomeIcon", "zShowHome"], outputs: ["zItemClick"] }, { 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: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { 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: "22.1.2", ngImport: i0, type: ZSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-select', imports: [
                         FormsModule,
@@ -1525,6 +1678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         ZPopoverDirective,
                         NgTemplateOutlet,
                         ZButtonComponent,
+                        ZBreadcrumbComponent,
                         ZEmptyComponent,
                         ZTooltipDirective,
                         ZIsSelectedPipe,
@@ -1533,14 +1687,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         ZLoadingComponent,
                         ZHighlightPipe,
                         ZSafeHtmlPipe,
+                        ZHoverGlideDirective,
                     ], standalone: true, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ZSelectComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div 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                    [zShowDelay]=\"300\"\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                [zShowDelay]=\"300\"\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                        [zShowDelay]=\"300\"\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                      [zShowDelay]=\"300\"\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"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['dropdownSearchInput', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], virtualOptionElements: [{ type: i0.ViewChildren, args: ['virtualOptionEl', { isSignal: true }] }], customSelectedDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectSelectedDirective), { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectOptionDirective), { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zClassSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClassSelect", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zLoadingOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingOutline", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zShowCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowCheck", required: false }] }], zWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWrap", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zPlaceholderSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholderSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zNotFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNotFoundText", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxTagCount", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zDynamicSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDynamicSize", required: false }] }], zShowAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowAction", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zTranslateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTranslateLabels", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zSearchServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchServer", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSticky", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zSelectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedTemplate", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zActionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zActionTemplate", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      [zSticky]=\"zSticky()\"\n      [zKeyboardSafe]=\"zShowSearch()\"\n      [zPopoverWidth]=\"zDropdownWidth()\"\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                    [zShowDelay]=\"300\"\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                [zShowDelay]=\"300\"\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]=\"dropdownWidthStyle()\"\n      [style.min-width]=\"dropdownWidthStyle()\">\n      @if (zTree()) {\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              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]=\"treeSearchText()\"\n              (ngModelChange)=\"treeSearchText.set($event)\"\n              autocomplete=\"off\"\n              autocorrect=\"off\"\n              spellcheck=\"false\" />\n          </div>\n        }\n\n        @if (treeActiveIndex() > 0) {\n          <div class=\"z-select-tree-crumbs border-border flex items-center gap-1 border-b px-2 py-1.5\">\n            <button\n              type=\"button\"\n              class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 items-center justify-center rounded-sm transition-colors\"\n              (click)=\"treeGoBack()\">\n              <z-icon zType=\"lucideChevronLeft\" zSize=\"14\" />\n            </button>\n            <z-breadcrumb\n              class=\"min-w-0 flex-1\"\n              zSize=\"sm\"\n              zSeparator=\"/\"\n              [zItems]=\"treeBreadcrumbItems()\"\n              (zItemClick)=\"onTreeBreadcrumbClick($event)\" />\n          </div>\n        }\n\n        <div class=\"z-select-tree-viewport relative overflow-hidden\" [style.height.px]=\"optionsMaxHeight()\">\n          @for (level of [treeCurrentLevel()]; track treeActiveIndex()) {\n            <div\n              zHoverGlide\n              class=\"absolute inset-0 flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [class.z-select-tree-slide-left]=\"treeDirection() === 'forward'\"\n              [class.z-select-tree-slide-right]=\"treeDirection() === 'back'\">\n              @if (treeFilteredOptions().length > 0) {\n                @for (opt of treeFilteredOptions(); track opt.value) {\n                  <div\n                    #treeOptionEl\n                    data-glide-item\n                    [class]=\"\n                      'z-select-option relative flex min-w-0 items-center gap-2 ' +\n                      (opt\n                        | zIsSelected: currentValue() : isMultipleMode() : zKey()\n                        | zOptionClasses: opt.disabled : false)\n                    \"\n                    [style.minHeight.px]=\"zOptionHeight()\"\n                    (click)=\"onTreeOptionClick(opt, close)\">\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      [zShowDelay]=\"300\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"treeOptionEl\"\n                      [innerHTML]=\"opt.label | zHighlight: treeSearchText() | zSafeHtml\"></span>\n                    @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" [class]=\"dropdownClasses()\" />\n                    }\n                    @if (opt.children?.length) {\n                      <z-icon zType=\"lucideChevronRight\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n                    }\n                  </div>\n                }\n              } @else {\n                <div class=\"flex size-full items-center justify-center\">\n                  <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n                </div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\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                zHoverGlide\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                      data-glide-item\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) translateZ(0)'\"\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                          [zShowDelay]=\"300\"\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                zHoverGlide\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                    data-glide-item\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                        [zShowDelay]=\"300\"\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      }\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)}}.z-select-tree-slide-left{animation:z-select-tree-slide-left .22s cubic-bezier(.16,1,.3,1)}@keyframes z-select-tree-slide-left{0%{transform:translate(100%)}to{transform:translate(0)}}.z-select-tree-slide-right{animation:z-select-tree-slide-right .22s cubic-bezier(.16,1,.3,1)}@keyframes z-select-tree-slide-right{0%{transform:translate(-100%)}to{transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['dropdownSearchInput', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], virtualOptionElements: [{ type: i0.ViewChildren, args: ['virtualOptionEl', { isSignal: true }] }], customSelectedDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectSelectedDirective), { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectOptionDirective), { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zClassSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClassSelect", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVariant", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zLoadingOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingOutline", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zShowCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowCheck", required: false }] }], zWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWrap", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zPlaceholderSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholderSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zNotFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNotFoundText", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxTagCount", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zDropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownWidth", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zDynamicSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDynamicSize", required: false }] }], zShowAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowAction", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zTranslateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTranslateLabels", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zSearchServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchServer", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSticky", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTree", required: false }] }], zTreeRootLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTreeRootLabel", required: false }] }], zSelectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedTemplate", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zActionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zActionTemplate", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.