@shival99/z-ui 2.5.2 → 2.5.4

package/assets/css/features/media.css

@@ -0,0 +1,14 @@
+/*
+ * CSS của Vidstack — chỉ cần khi app dùng `z-media-player`, `z-audio-player` hoặc phần preview
+ * audio/video của `z-gallery`. KHÔNG được import từ `tailwind.css`: làm vậy thì mọi app đều buộc
+ * phải cài `vidstack` dù không dùng component nào trong số đó (bundler phải resolve được specifier
+ * thì build mới chạy, `peerDependenciesMeta.optional` không cứu được).
+ *
+ * Thêm vào `angular.json > styles` sau `tailwind.css`:
+ *   "node_modules/@shival99/z-ui/assets/css/features/media.css"
+ */
+@import 'vidstack/player/styles/base.css';
+@import 'vidstack/player/styles/default/theme.css';
+@import 'vidstack/player/styles/default/layouts/video.css';
+@import 'vidstack/player/styles/default/layouts/audio.css';
+@import 'vidstack/player/styles/plyr/theme.css';

package/assets/css/features/office.css

@@ -0,0 +1,11 @@
+/*
+ * CSS của Univer — chỉ cần khi app dùng phần preview Excel của `z-gallery`.
+ * Univer render DOM ngoài template compiler của Angular nên CSS phải ở phạm vi global:
+ * view encapsulation của Angular sẽ gắn attribute selector mà element của Univer không bao giờ có.
+ *
+ * Không import từ `tailwind.css` — xem lý do ở `features/media.css`.
+ *
+ * Thêm vào `angular.json > styles` sau `tailwind.css`:
+ *   "node_modules/@shival99/z-ui/assets/css/features/office.css"
+ */
+@import '@univerjs/presets/lib/styles/preset-sheets-core.css';

package/assets/css/global.css

@@ -1,12 +1,8 @@
-/* Univer sheet renders its DOM outside Angular's template compiler (z-gallery excel preview),
-   so its CSS must stay global — Angular's emulated view encapsulation would otherwise scope
-   these selectors with an attribute that never lands on Univer's own elements. */
-@import '@univerjs/presets/lib/styles/preset-sheets-core.css';
-@import 'vidstack/player/styles/base.css';
-@import 'vidstack/player/styles/default/theme.css';
-@import 'vidstack/player/styles/default/layouts/video.css';
-@import 'vidstack/player/styles/default/layouts/audio.css';
-@import 'vidstack/player/styles/plyr/theme.css';
+/*
+ * Global CSS của z-ui. CSS của thư viện bên thứ ba (Vidstack, Univer) KHÔNG nằm ở đây —
+ * xem `features/media.css` và `features/office.css`, app chỉ thêm vào `angular.json > styles`
+ * khi thật sự dùng component tương ứng.
+ */
 
 /* CDK drag-drop */
 .cdk-drag-preview {

package/assets/css/overlay.css

@@ -20,10 +20,19 @@
     pointer-events: none;
   }
 
-  /* Global panels own their scrolling; the overlay host must not create a second viewport. */
+  /*
+   * Global panels own their scrolling; the overlay host must not create a second viewport.
+   *
+   * `contain: paint` biến host thành containing block cho con `position: fixed` (backdrop, modal,
+   * drawer). Cần thiết vì lúc khoá scroll gutter của scrollbar được GIỮ NGUYÊN (xem
+   * z-scroll-lock.service.ts) nên layout viewport hẹp hơn 100vw đúng bằng chiều rộng scrollbar —
+   * nếu không có dòng này, `inset: 0` / `right-0` sẽ dừng ở mép layout viewport và hở một dải trống
+   * ở mép phải. Host vốn đã `overflow: hidden` nên phần clip mà containment thêm vào là no-op.
+   */
   .z-overlay-host.z-overlay-global {
     overflow: hidden;
     overscroll-behavior: contain;
+    contain: paint;
   }
 
   /* Free-form dynamic overlays opt into viewport scrolling explicitly. */
@@ -91,7 +100,23 @@
  */
 html.z-scroll-locked {
   overflow: hidden;
-  scrollbar-gutter: auto;
 }
 
-/* Body padding keeps document-flow content stable while fixed overlays use the full viewport. */
+/*
+ * Trang vốn đang dành chỗ cho scrollbar (scrollbar cổ điển hoặc `scrollbar-gutter: stable`) → giữ
+ * nguyên đúng chỗ đó trong lúc khoá. Chiều rộng layout không đổi một pixel nào: không layout shift,
+ * không nháy scrollbar khi mở/đóng overlay, và không phải bù `padding-right` cho body.
+ *
+ * Class chỉ được gắn khi đo được gutter thật, nên trang không có scrollbar (overlay scrollbar của
+ * macOS, trang ngắn hơn viewport) không bị ép sinh ra một dải trống mới.
+ */
+html.z-scroll-locked.z-scroll-locked-gutter {
+  scrollbar-gutter: stable;
+}
+
+/*
+ * Fallback cho trình duyệt không giữ được gutter (Safari < 18.4 chưa có `scrollbar-gutter`):
+ * ZScrollLockService đo lại chiều rộng sau khi khoá, phần bị nhả ra được bù thẳng vào
+ * `body.style.paddingRight` và ghi ra `--z-scroll-lock-gutter` để app bù tiếp cho element
+ * `position: fixed` của riêng mình. Ở nhánh giữ được gutter, biến này luôn là `0px`.
+ */

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

@@ -229,6 +229,7 @@ class ZAutocompleteComponent {
     _asyncRequestId = 0;
     _lastFilteredOptionsLength = 0;
     _shouldScrollActiveOption = false;
+    _pendingServerSearchScrollReset = false;
     /** Guards against focus+click both requesting an open on the same gesture, which doubled CD cycles. */
     _openRequested = false;
     /** Stores input value before keyboard navigation for ESC revert */
@@ -336,6 +337,9 @@ class ZAutocompleteComponent {
         if (this.canLoadMore()) {
             return false;
         }
+        if (this.hasAsyncOptions() && this._asyncPage() > 1) {
+            return false;
+        }
         const maxVisible = this.zMaxVisible();
         if (maxVisible !== null && this.sourceOptions().length > maxVisible) {
             return true;
@@ -437,6 +441,15 @@ class ZAutocompleteComponent {
                 observer.disconnect();
             });
         });
+        effect(() => {
+            this.zOptions();
+            const isServerSearch = this.config().serverSearch;
+            if (!isServerSearch || !this._pendingServerSearchScrollReset) {
+                return;
+            }
+            this._pendingServerSearchScrollReset = false;
+            this._resetOptionsScrollTop();
+        });
         effect(() => {
             const options = this.filteredOptions();
             const { isOpen } = this.uiState();
@@ -878,6 +891,7 @@ class ZAutocompleteComponent {
                 return;
             }
             if (this.config().serverSearch) {
+                this._pendingServerSearchScrollReset = true;
                 return;
             }
             this._resetOptionsScrollTop();
@@ -1143,7 +1157,7 @@ class ZAutocompleteComponent {
                 useExisting: forwardRef(() => ZAutocompleteComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customOptionDirective", first: true, predicate: (ZAutocompleteOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zAutocomplete"], ngImport: i0, template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    [zTooltipShowDelay]=\"300\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"onInputMousedown($event)\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          zHoverGlide\n          zHoverGlideClass=\"bg-primary/15 rounded-(--radius-sm)\"\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                data-glide-item\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px) translateZ(0)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      [zShowDelay]=\"300\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          zHoverGlide\n          zHoverGlideClass=\"bg-primary/15 rounded-(--radius-sm)\"\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              data-glide-item\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zShowDelay]=\"300\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (isLoadingMore()) {\n        <div class=\"z-autocomplete-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customOptionDirective", first: true, predicate: (ZAutocompleteOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zAutocomplete"], ngImport: i0, template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    [zTooltipShowDelay]=\"300\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"onInputMousedown($event)\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          zHoverGlide\n          zHoverGlideClass=\"bg-primary/15 rounded-(--radius-sm)\"\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                data-glide-item\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px) translateZ(0)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      [zShowDelay]=\"300\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n          @if (isLoadingMore()) {\n            <div\n              class=\"z-autocomplete-loading-more from-popover via-popover/95 sticky bottom-0 -mx-1 -mb-1 flex items-center justify-center bg-gradient-to-t to-transparent pt-6 pb-2\"\n              animate.enter=\"z-autocomplete-loading-enter\"\n              animate.leave=\"z-autocomplete-loading-leave\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          zHoverGlide\n          zHoverGlideClass=\"bg-primary/15 rounded-(--radius-sm)\"\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              data-glide-item\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zShowDelay]=\"300\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n          @if (isLoadingMore()) {\n            <div\n              class=\"z-autocomplete-loading-more from-popover via-popover/95 sticky bottom-0 -mx-1 -mb-1 flex items-center justify-center bg-gradient-to-t to-transparent pt-6 pb-2\"\n              animate.enter=\"z-autocomplete-loading-enter\"\n              animate.leave=\"z-autocomplete-loading-leave\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important;overflow-anchor:none}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}.z-autocomplete-loading-enter{animation:z-autocomplete-loading-fade-in .2s ease-out}.z-autocomplete-loading-leave{animation:z-autocomplete-loading-fade-out .15s ease-in}@keyframes z-autocomplete-loading-fade-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-loading-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.5rem)}}@media(prefers-reduced-motion:reduce){.z-autocomplete-loading-enter,.z-autocomplete-loading-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { 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.6", ngImport: i0, type: ZAutocompleteComponent, decorators: [{
             type: Component,
@@ -1165,7 +1179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                             useExisting: forwardRef(() => ZAutocompleteComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zAutocomplete', template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    [zTooltipShowDelay]=\"300\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"onInputMousedown($event)\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          zHoverGlide\n          zHoverGlideClass=\"bg-primary/15 rounded-(--radius-sm)\"\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                data-glide-item\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px) translateZ(0)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      [zShowDelay]=\"300\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          zHoverGlide\n          zHoverGlideClass=\"bg-primary/15 rounded-(--radius-sm)\"\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              data-glide-item\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zShowDelay]=\"300\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (isLoadingMore()) {\n        <div class=\"z-autocomplete-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zAutocomplete', template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    [zTooltipShowDelay]=\"300\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"onInputMousedown($event)\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          zHoverGlide\n          zHoverGlideClass=\"bg-primary/15 rounded-(--radius-sm)\"\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                data-glide-item\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px) translateZ(0)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      [zShowDelay]=\"300\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n          @if (isLoadingMore()) {\n            <div\n              class=\"z-autocomplete-loading-more from-popover via-popover/95 sticky bottom-0 -mx-1 -mb-1 flex items-center justify-center bg-gradient-to-t to-transparent pt-6 pb-2\"\n              animate.enter=\"z-autocomplete-loading-enter\"\n              animate.leave=\"z-autocomplete-loading-leave\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          zHoverGlide\n          zHoverGlideClass=\"bg-primary/15 rounded-(--radius-sm)\"\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              data-glide-item\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zShowDelay]=\"300\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n          @if (isLoadingMore()) {\n            <div\n              class=\"z-autocomplete-loading-more from-popover via-popover/95 sticky bottom-0 -mx-1 -mb-1 flex items-center justify-center bg-gradient-to-t to-transparent pt-6 pb-2\"\n              animate.enter=\"z-autocomplete-loading-enter\"\n              animate.leave=\"z-autocomplete-loading-leave\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important;overflow-anchor:none}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}.z-autocomplete-loading-enter{animation:z-autocomplete-loading-fade-in .2s ease-out}.z-autocomplete-loading-leave{animation:z-autocomplete-loading-fade-out .15s ease-in}@keyframes z-autocomplete-loading-fade-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-loading-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(.5rem)}}@media(prefers-reduced-motion:reduce){.z-autocomplete-loading-enter,.z-autocomplete-loading-leave{animation-duration:1ms}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], virtualOptionElements: [{ type: i0.ViewChildren, args: ['virtualOptionEl', { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZAutocompleteOptionDirective), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zLoadingOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingOutline", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zDynamicSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDynamicSize", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zHeightExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeightExpand", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zResetOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResetOnSelect", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zNoDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNoDataText", required: false }] }], zNoDataIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNoDataIcon", required: false }] }], zAllowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowCustomValue", required: false }] }], zOpenOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOpenOnFocus", required: false }] }], zDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounceTime", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zOnSelect: [{ type: i0.Output, args: ["zOnSelect"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnCommit: [{ type: i0.Output, args: ["zOnCommit"] }], zValueChange: [{ type: i0.Output, args: ["zValueChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }] } });
 
 /**