@shival99/z-ui 2.1.18 → 2.1.19

package/fesm2022/shival99-z-ui-components-z-pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-pagination.mjs","sources":["../../../../libs/core-ui/components/z-pagination/z-pagination.component.ts","../../../../libs/core-ui/components/z-pagination/z-pagination.component.html","../../../../libs/core-ui/components/z-pagination/shival99-z-ui-components-z-pagination.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, model, output } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZButtonGroupComponent } from '@shival99/z-ui/components/z-button-group';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZInputComponent } from '@shival99/z-ui/components/z-input';\nimport { ZSelectComponent } from '@shival99/z-ui/components/z-select';\nimport { ZTranslateService } from '@shival99/z-ui/services';\nimport type { ZPageChangeEvent, ZPaginationSize } from './z-pagination.types';\n\n@Component({\n  selector: 'z-pagination',\n  imports: [\n    FormsModule,\n    ZButtonComponent,\n    ZButtonGroupComponent,\n    ZIconComponent,\n    ZInputComponent,\n    ZSelectComponent,\n    TranslatePipe,\n  ],\n  standalone: true,\n  templateUrl: './z-pagination.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'z-pagination flex items-center gap-2',\n  },\n})\nexport class ZPaginationComponent {\n  private readonly _zTranslate = inject(ZTranslateService);\n\n  public readonly zOnPageChange = output<ZPageChangeEvent>();\n\n  public readonly zPageIndex = model<number>(1);\n  public readonly zPageSize = model<number>(10);\n  public readonly zTotal = input.required<number>();\n  public readonly zPageSizeOptions = input<number[]>([10, 20, 50, 100]);\n  public readonly zShowSizeChanger = input<boolean>(true);\n  public readonly zShowQuickJumper = input<boolean>(false);\n  public readonly zShowTotal = input<boolean>(true);\n  public readonly zSimple = input<boolean>(false);\n  public readonly zSize = input<ZPaginationSize>('default');\n  public readonly zDisabled = input<boolean>(false);\n\n  public readonly zTotalLabel = input<string | null>(null);\n  public readonly zPerPageLabel = input<string | null>(null);\n  public readonly zGoToLabel = input<string | null>(null);\n\n  protected readonly totalLabelText = computed(() => {\n    this._zTranslate.currentLang();\n    if (this.zTotalLabel()) {\n      return this.zTotalLabel()!.replace('{{total}}', String(this.zTotal()));\n    }\n    return this._zTranslate.instant('i18n_z_ui_pagination_total_label', { total: this.zTotal() });\n  });\n\n  protected readonly perPageLabelText = computed(() => {\n    this._zTranslate.currentLang();\n    return this.zPerPageLabel() ?? this._zTranslate.instant('i18n_z_ui_pagination_per_page');\n  });\n\n  protected readonly goToLabelText = computed(() => {\n    this._zTranslate.currentLang();\n    return this.zGoToLabel() ?? this._zTranslate.instant('i18n_z_ui_pagination_go_to');\n  });\n\n  protected readonly totalPages = computed(() => {\n    const total = this.zTotal();\n    const pageSize = this.zPageSize();\n    return Math.max(1, Math.ceil(total / pageSize));\n  });\n\n  protected readonly pageSizeOptions = computed(() =>\n    this.zPageSizeOptions().map(size => ({\n      label: `${size} ${this.perPageLabelText()}`,\n      value: size,\n    }))\n  );\n\n  protected readonly visiblePages = computed(() => {\n    const current = this.zPageIndex();\n    const total = this.totalPages();\n    const pages: (number | 'ellipsis')[] = [];\n    const maxVisible = 5;\n\n    if (total <= maxVisible) {\n      for (let i = 1; i <= total; i++) {\n        pages.push(i);\n      }\n      return pages;\n    }\n\n    pages.push(1);\n\n    let startPage = Math.max(2, current - 1);\n    let endPage = Math.min(total - 1, current + 1);\n\n    if (current <= 3) {\n      endPage = Math.min(total - 1, 3);\n    } else if (current >= total - 2) {\n      startPage = Math.max(2, total - 2);\n    }\n\n    if (startPage > 2) {\n      pages.push('ellipsis');\n    }\n\n    for (let i = startPage; i <= endPage; i++) {\n      pages.push(i);\n    }\n\n    if (endPage < total - 1) {\n      pages.push('ellipsis');\n    }\n\n    pages.push(total);\n\n    return pages;\n  });\n\n  protected readonly canGoPrev = computed(() => this.zPageIndex() > 1);\n  protected readonly canGoNext = computed(() => this.zPageIndex() < this.totalPages());\n\n  protected goToPage(page: number): void {\n    if (page < 1 || page > this.totalPages()) {\n      return;\n    }\n    if (page === this.zPageIndex()) {\n      return;\n    }\n\n    this.zPageIndex.set(page);\n    this._emitChange();\n  }\n\n  protected goToPrev(): void {\n    if (!this.canGoPrev()) {\n      return;\n    }\n    this.goToPage(this.zPageIndex() - 1);\n  }\n\n  protected goToNext(): void {\n    if (!this.canGoNext()) {\n      return;\n    }\n    this.goToPage(this.zPageIndex() + 1);\n  }\n\n  protected onPageSizeChange(size: unknown): void {\n    const sizeValue =\n      typeof size === 'object' && size !== null && 'value' in size\n        ? (size as { value: number }).value\n        : (size as number);\n    if (!Number.isFinite(sizeValue) || sizeValue <= 0) {\n      return;\n    }\n\n    this.zPageSize.set(sizeValue);\n    this.zPageIndex.set(1);\n    this._emitChange();\n  }\n\n  protected onQuickJump(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const page = parseInt(input.value, 10);\n\n    if (isNaN(page) || page < 1 || page > this.totalPages()) {\n      input.value = String(this.zPageIndex());\n      return;\n    }\n\n    this.goToPage(page);\n  }\n\n  private _emitChange(): void {\n    this.zOnPageChange.emit({\n      pageIndex: this.zPageIndex(),\n      pageSize: this.zPageSize(),\n    });\n  }\n}\n","@if (zShowTotal()) {\n  <span class=\"text-muted-foreground text-sm whitespace-nowrap\">{{ totalLabelText() }}</span>\n}\n\n@if (!zSimple()) {\n  <!-- Page Size Selector -->\n  @if (zShowSizeChanger()) {\n    <z-select\n      class=\"w-fit\"\n      zSize=\"sm\"\n      [zOptions]=\"pageSizeOptions()\"\n      [ngModel]=\"zPageSize()\"\n      (ngModelChange)=\"onPageSizeChange($event)\"\n      [zDisabled]=\"zDisabled()\"\n      [zShowSearch]=\"false\" />\n  }\n\n  <z-button-group class=\"z-pagination-pages\">\n    <!-- Prev Button -->\n    <z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"!canGoPrev() || zDisabled()\" (click)=\"goToPrev()\">\n      <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n    </z-button>\n\n    <!-- Page Numbers -->\n    @for (page of visiblePages(); track $index) {\n      @if (page === 'ellipsis') {\n        <span\n          class=\"z-pagination-ellipsis text-muted-foreground border-input flex h-8 w-8 items-center justify-center border-y border-r bg-transparent text-sm\">\n          ...\n        </span>\n      } @else {\n        <z-button\n          zType=\"outline\"\n          [zWave]=\"false\"\n          zSize=\"sm\"\n          [class]=\"\n            page === zPageIndex() ? 'relative min-w-8 overflow-hidden !bg-transparent hover:!bg-transparent' : 'min-w-8'\n          \"\n          [zDisabled]=\"zDisabled()\"\n          (click)=\"goToPage(page)\">\n          @if (page === zPageIndex()) {\n            <span class=\"bg-primary pointer-events-none absolute inset-[1px] rounded-[1px]\"></span>\n          }\n          <span [class]=\"page === zPageIndex() ? 'text-primary-foreground relative z-[1]' : ''\">{{ page }}</span>\n        </z-button>\n      }\n    }\n\n    <!-- Next Button -->\n    <z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"!canGoNext() || zDisabled()\" (click)=\"goToNext()\">\n      <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n    </z-button>\n  </z-button-group>\n\n  <!-- Quick Jumper -->\n  @if (zShowQuickJumper()) {\n    <div class=\"flex items-center gap-2 text-sm\">\n      <span class=\"text-muted-foreground whitespace-nowrap\">{{ goToLabelText() }}</span>\n      <z-input\n        zType=\"number\"\n        zSize=\"sm\"\n        class=\"w-14\"\n        [ngModel]=\"zPageIndex()\"\n        [zMin]=\"1\"\n        [zMax]=\"totalPages()\"\n        [zDisabled]=\"zDisabled()\"\n        (keydown.enter)=\"onQuickJump($event)\"\n        (blur)=\"onQuickJump($event)\" />\n    </div>\n  }\n} @else {\n  <!-- Simple Mode -->\n  <z-button-group>\n    <z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"!canGoPrev() || zDisabled()\" (click)=\"goToPrev()\">\n      <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n      <span class=\"ml-1\">{{ 'i18n_z_ui_pagination_previous' | translate }}</span>\n    </z-button>\n\n    <span class=\"text-muted-foreground border-input flex h-8 items-center border-y bg-transparent px-3 text-sm\">\n      {{ zPageIndex() }} / {{ totalPages() }}\n    </span>\n\n    <z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"!canGoNext() || zDisabled()\" (click)=\"goToNext()\">\n      <span class=\"mr-1\">{{ 'i18n_z_ui_pagination_next' | translate }}</span>\n      <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n    </z-button>\n  </z-button-group>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"shival99-z-ui-components-z-pagination.mjs","sources":["../../../../libs/core-ui/components/z-pagination/z-pagination.component.ts","../../../../libs/core-ui/components/z-pagination/z-pagination.component.html","../../../../libs/core-ui/components/z-pagination/shival99-z-ui-components-z-pagination.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, model, output } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZButtonGroupComponent } from '@shival99/z-ui/components/z-button-group';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZInputComponent } from '@shival99/z-ui/components/z-input';\nimport { ZSelectComponent } from '@shival99/z-ui/components/z-select';\nimport { ZTranslateService } from '@shival99/z-ui/services';\nimport type { ZPageChangeEvent, ZPaginationSize } from './z-pagination.types';\n\n@Component({\n  selector: 'z-pagination',\n  imports: [\n    FormsModule,\n    ZButtonComponent,\n    ZButtonGroupComponent,\n    ZIconComponent,\n    ZInputComponent,\n    ZSelectComponent,\n    TranslatePipe,\n  ],\n  standalone: true,\n  templateUrl: './z-pagination.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'z-pagination flex items-center gap-2',\n  },\n})\nexport class ZPaginationComponent {\n  private readonly _zTranslate = inject(ZTranslateService);\n\n  public readonly zOnPageChange = output<ZPageChangeEvent>();\n\n  public readonly zPageIndex = model<number>(1);\n  public readonly zPageSize = model<number>(10);\n  public readonly zTotal = input.required<number>();\n  public readonly zPageSizeOptions = input<number[]>([10, 20, 50, 100]);\n  public readonly zShowSizeChanger = input<boolean>(true);\n  public readonly zShowQuickJumper = input<boolean>(false);\n  public readonly zShowTotal = input<boolean>(true);\n  public readonly zSimple = input<boolean>(false);\n  public readonly zSize = input<ZPaginationSize>('default');\n  public readonly zDisabled = input<boolean>(false);\n\n  public readonly zTotalLabel = input<string | null>(null);\n  public readonly zPerPageLabel = input<string | null>(null);\n  public readonly zGoToLabel = input<string | null>(null);\n\n  protected readonly totalLabelText = computed(() => {\n    this._zTranslate.currentLang();\n    if (this.zTotalLabel()) {\n      return this.zTotalLabel()!.replace('{{total}}', String(this.zTotal()));\n    }\n    return this._zTranslate.instant('i18n_z_ui_pagination_total_label', { total: this.zTotal() });\n  });\n\n  protected readonly perPageLabelText = computed(() => {\n    this._zTranslate.currentLang();\n    return this.zPerPageLabel() ?? this._zTranslate.instant('i18n_z_ui_pagination_per_page');\n  });\n\n  protected readonly goToLabelText = computed(() => {\n    this._zTranslate.currentLang();\n    return this.zGoToLabel() ?? this._zTranslate.instant('i18n_z_ui_pagination_go_to');\n  });\n\n  protected readonly totalPages = computed(() => {\n    const total = this.zTotal();\n    const pageSize = this.zPageSize();\n    return Math.max(1, Math.ceil(total / pageSize));\n  });\n\n  protected readonly pageSizeOptions = computed(() =>\n    this.zPageSizeOptions().map(size => ({\n      label: `${size} ${this.perPageLabelText()}`,\n      value: size,\n    }))\n  );\n\n  protected readonly visiblePages = computed(() => {\n    const current = this.zPageIndex();\n    const total = this.totalPages();\n    const pages: (number | 'ellipsis')[] = [];\n    const maxVisible = 5;\n\n    if (total <= maxVisible) {\n      for (let i = 1; i <= total; i++) {\n        pages.push(i);\n      }\n      return pages;\n    }\n\n    pages.push(1);\n\n    let startPage = Math.max(2, current - 1);\n    let endPage = Math.min(total - 1, current + 1);\n\n    if (current <= 3) {\n      endPage = Math.min(total - 1, 3);\n    } else if (current >= total - 2) {\n      startPage = Math.max(2, total - 2);\n    }\n\n    if (startPage > 2) {\n      pages.push('ellipsis');\n    }\n\n    for (let i = startPage; i <= endPage; i++) {\n      pages.push(i);\n    }\n\n    if (endPage < total - 1) {\n      pages.push('ellipsis');\n    }\n\n    pages.push(total);\n\n    return pages;\n  });\n\n  protected readonly canGoPrev = computed(() => this.zPageIndex() > 1);\n  protected readonly canGoNext = computed(() => this.zPageIndex() < this.totalPages());\n\n  protected goToPage(page: number): void {\n    if (page < 1 || page > this.totalPages()) {\n      return;\n    }\n    if (page === this.zPageIndex()) {\n      return;\n    }\n\n    this.zPageIndex.set(page);\n    this._emitChange();\n  }\n\n  protected goToPrev(): void {\n    if (!this.canGoPrev()) {\n      return;\n    }\n    this.goToPage(this.zPageIndex() - 1);\n  }\n\n  protected goToNext(): void {\n    if (!this.canGoNext()) {\n      return;\n    }\n    this.goToPage(this.zPageIndex() + 1);\n  }\n\n  protected onPageSizeChange(size: unknown): void {\n    const sizeValue =\n      typeof size === 'object' && size !== null && 'value' in size\n        ? (size as { value: number }).value\n        : (size as number);\n    if (!Number.isFinite(sizeValue) || sizeValue <= 0) {\n      return;\n    }\n\n    this.zPageSize.set(sizeValue);\n    this.zPageIndex.set(1);\n    this._emitChange();\n  }\n\n  protected onQuickJump(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const page = parseInt(input.value, 10);\n\n    if (isNaN(page) || page < 1 || page > this.totalPages()) {\n      input.value = String(this.zPageIndex());\n      return;\n    }\n\n    this.goToPage(page);\n  }\n\n  private _emitChange(): void {\n    this.zOnPageChange.emit({\n      pageIndex: this.zPageIndex(),\n      pageSize: this.zPageSize(),\n    });\n  }\n}\n","@if (zShowTotal()) {\n  <span class=\"text-muted-foreground text-sm whitespace-nowrap\">{{ totalLabelText() }}</span>\n}\n\n@if (!zSimple()) {\n  <!-- Page Size Selector -->\n  @if (zShowSizeChanger()) {\n    <z-select\n      class=\"w-fit\"\n      zSize=\"sm\"\n      [zOptions]=\"pageSizeOptions()\"\n      [ngModel]=\"zPageSize()\"\n      (ngModelChange)=\"onPageSizeChange($event)\"\n      [zDisabled]=\"zDisabled()\"\n      [zShowSearch]=\"false\" />\n  }\n\n  <z-button-group class=\"z-pagination-pages\">\n    <!-- Prev Button -->\n    <z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"!canGoPrev() || zDisabled()\" (click)=\"goToPrev()\">\n      <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n    </z-button>\n\n    <!-- Page Numbers -->\n    @for (page of visiblePages(); track $index) {\n      @if (page === 'ellipsis') {\n        <span\n          class=\"z-pagination-ellipsis text-muted-foreground border-input flex h-8 w-8 items-center justify-center border-y border-r bg-transparent text-sm\">\n          ...\n        </span>\n      } @else {\n        <z-button\n          zType=\"outline\"\n          [zWave]=\"false\"\n          zSize=\"sm\"\n          [class]=\"\n            page === zPageIndex() ? 'relative min-w-8 overflow-hidden !bg-transparent hover:!bg-transparent' : 'min-w-8'\n          \"\n          [zDisabled]=\"zDisabled()\"\n          (click)=\"goToPage(page)\">\n          @if (page === zPageIndex()) {\n            <span class=\"bg-primary pointer-events-none absolute inset-[1px] rounded-[1px]\"></span>\n          }\n          <span [class]=\"page === zPageIndex() ? 'text-primary-foreground relative z-[1]' : ''\">{{ page }}</span>\n        </z-button>\n      }\n    }\n\n    <!-- Next Button -->\n    <z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"!canGoNext() || zDisabled()\" (click)=\"goToNext()\">\n      <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n    </z-button>\n  </z-button-group>\n\n  <!-- Quick Jumper -->\n  @if (zShowQuickJumper()) {\n    <div class=\"flex items-center gap-2 text-sm\">\n      <span class=\"text-muted-foreground whitespace-nowrap\">{{ goToLabelText() }}</span>\n      <z-input\n        zType=\"number\"\n        zSize=\"sm\"\n        class=\"w-14\"\n        [ngModel]=\"zPageIndex()\"\n        [zMin]=\"1\"\n        [zMax]=\"totalPages()\"\n        [zDisabled]=\"zDisabled()\"\n        (keydown.enter)=\"onQuickJump($event)\"\n        (blur)=\"onQuickJump($event)\" />\n    </div>\n  }\n} @else {\n  <!-- Simple Mode -->\n  <z-button-group>\n    <z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"!canGoPrev() || zDisabled()\" (click)=\"goToPrev()\">\n      <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n      <span class=\"ml-1\">{{ 'i18n_z_ui_pagination_previous' | translate }}</span>\n    </z-button>\n\n    <span class=\"text-muted-foreground border-input flex h-8 items-center border-y bg-transparent px-3 text-sm\">\n      {{ zPageIndex() }} / {{ totalPages() }}\n    </span>\n\n    <z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"!canGoNext() || zDisabled()\" (click)=\"goToNext()\">\n      <span class=\"mr-1\">{{ 'i18n_z_ui_pagination_next' | translate }}</span>\n      <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n    </z-button>\n  </z-button-group>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, Pipe, Injector, DestroyRef, viewChild, contentChild, output, input, signal, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, TemplateRef, Directive, Pipe, Injector, DestroyRef, viewChild, viewChildren, contentChild, output, input, signal, computed, effect, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NgControl, NgModel, PristineChangeEvent, TouchedChangeEvent, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -202,8 +202,12 @@ const zSelectTagVariants = cva('inline-flex items-center gap-1 rounded-sm border
         zSize: 'default',
     },
 });
-const zSelectOptionVariants = cva('flex items-center gap-2 px-2 py-1.5 cursor-pointer transition-colors text-sm rounded-sm outline-none whitespace-nowrap', {
+const zSelectOptionVariants = cva('px-2 py-1.5 cursor-pointer transition-colors text-sm rounded-sm outline-none', {
     variants: {
+        customTemplate: {
+            true: 'block h-auto whitespace-normal',
+            false: 'flex items-center gap-2 whitespace-nowrap',
+        },
         selected: {
             true: 'bg-primary/15 text-primary',
             false: 'hover:bg-primary/10 hover:text-foreground',
@@ -214,14 +218,16 @@ const zSelectOptionVariants = cva('flex items-center gap-2 px-2 py-1.5 cursor-po
         },
     },
     defaultVariants: {
+        customTemplate: false,
         selected: false,
         disabled: false,
     },
 });
 
 class ZOptionClassesPipe {
-    transform(isSelected, isDisabled) {
+    transform(isSelected, isDisabled, customTemplate = false) {
         return zSelectOptionVariants({
+            customTemplate,
             selected: isSelected,
             disabled: isDisabled ?? false,
         });
@@ -269,6 +275,7 @@ class ZSelectComponent {
     optionsContainerRef = viewChild('optionsContainer', ...(ngDevMode ? [{ debugName: "optionsContainerRef" }] : []));
     virtualScrollRef = viewChild('virtualScrollElement', ...(ngDevMode ? [{ debugName: "virtualScrollRef" }] : []));
     loadMoreSentinelRef = viewChild('loadMoreSentinel', ...(ngDevMode ? [{ debugName: "loadMoreSentinelRef" }] : []));
+    virtualOptionElements = viewChildren('virtualOptionEl', ...(ngDevMode ? [{ debugName: "virtualOptionElements" }] : []));
     customSelectedDirective = contentChild((ZSelectSelectedDirective), ...(ngDevMode ? [{ debugName: "customSelectedDirective" }] : []));
     customOptionDirective = contentChild((ZSelectOptionDirective), ...(ngDevMode ? [{ debugName: "customOptionDirective" }] : []));
     zOnSearch = output();
@@ -290,6 +297,7 @@ class ZSelectComponent {
     zLoadingOutline = input(false, { ...(ngDevMode ? { debugName: "zLoadingOutline" } : {}), transform: zTransform });
     zPrefix = input('', ...(ngDevMode ? [{ debugName: "zPrefix" }] : []));
     zAllowClear = input(false, { ...(ngDevMode ? { debugName: "zAllowClear" } : {}), transform: zTransform });
+    zShowCheck = input(true, { ...(ngDevMode ? { debugName: "zShowCheck" } : {}), transform: zTransform });
     zWrap = input(true, { ...(ngDevMode ? { debugName: "zWrap" } : {}), transform: zTransform });
     zShowSearch = input(true, { ...(ngDevMode ? { debugName: "zShowSearch" } : {}), transform: zTransform });
     zPlaceholderSearch = input('', ...(ngDevMode ? [{ debugName: "zPlaceholderSearch" }] : []));
@@ -301,6 +309,7 @@ class ZSelectComponent {
     zDropdownMaxHeight = input(256, ...(ngDevMode ? [{ debugName: "zDropdownMaxHeight" }] : []));
     zOptionHeight = input(32, ...(ngDevMode ? [{ debugName: "zOptionHeight" }] : []));
     zVirtualScroll = input(false, { ...(ngDevMode ? { debugName: "zVirtualScroll" } : {}), transform: zTransform });
+    zDynamicSize = input(false, { ...(ngDevMode ? { debugName: "zDynamicSize" } : {}), transform: zTransform });
     zShowAction = input(false, { ...(ngDevMode ? { debugName: "zShowAction" } : {}), transform: zTransform });
     zOptions = input([], ...(ngDevMode ? [{ debugName: "zOptions" }] : []));
     zConfig = input({}, ...(ngDevMode ? [{ debugName: "zConfig" }] : []));
@@ -362,9 +371,20 @@ class ZSelectComponent {
     virtualizer = injectVirtualizer(() => ({
         scrollElement: this.virtualScrollRef(),
         count: this.filteredOptions().length,
-        estimateSize: () => this.zOptionHeight() + 3,
+        estimateSize: () => this.zOptionHeight(),
+        measureElement: (element) => element.getBoundingClientRect().height,
+        gap: 3,
         overscan: 5,
     }));
+    _measureVirtualItems = effect(() => {
+        if (!this.zDynamicSize()) {
+            return;
+        }
+        const elements = this.virtualOptionElements();
+        for (const el of elements) {
+            this.virtualizer.measureElement(el.nativeElement);
+        }
+    }, ...(ngDevMode ? [{ debugName: "_measureVirtualItems" }] : []));
     isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isReadonly = computed(() => this.zReadonly(), ...(ngDevMode ? [{ debugName: "isReadonly" }] : []));
     isInteractionDisabled = computed(() => this.isDisabled() || this.isReadonly() || this.zLoading(), ...(ngDevMode ? [{ debugName: "isInteractionDisabled" }] : []));
@@ -1174,34 +1194,41 @@ class ZSelectComponent {
         this._asyncLoadingMore.set(false);
     }
     _getAsyncOptionsScrollTop() {
-        const scrollElement = this.shouldUseVirtualScroll()
-            ? this.virtualScrollRef()?.nativeElement
-            : this.optionsContainerRef()?.nativeElement;
-        return scrollElement?.scrollTop ?? null;
+        return this._getOptionsScrollElement()?.scrollTop ?? null;
     }
     _restoreAsyncOptionsScrollTop(scrollTop) {
         if (scrollTop === null) {
             return;
         }
         requestAnimationFrame(() => {
-            const scrollElement = this.shouldUseVirtualScroll()
-                ? this.virtualScrollRef()?.nativeElement
-                : this.optionsContainerRef()?.nativeElement;
+            const scrollElement = this._getOptionsScrollElement();
             if (scrollElement) {
                 scrollElement.scrollTop = scrollTop;
             }
         });
     }
-    _resetOptionsScrollTop() {
+    _resetOptionsScrollTop(attempt = 0) {
         requestAnimationFrame(() => {
-            const scrollElement = this.shouldUseVirtualScroll()
-                ? this.virtualScrollRef()?.nativeElement
-                : this.optionsContainerRef()?.nativeElement;
-            if (scrollElement) {
-                scrollElement.scrollTop = 0;
+            const scrollElement = this._getOptionsScrollElement();
+            if (!scrollElement && attempt < 3) {
+                this._resetOptionsScrollTop(attempt + 1);
+                return;
             }
+            if (!scrollElement) {
+                return;
+            }
+            if (this.shouldUseVirtualScroll()) {
+                this.virtualizer.scrollToOffset(0);
+            }
+            scrollElement.scrollTop = 0;
         });
     }
+    _getOptionsScrollElement() {
+        if (this.shouldUseVirtualScroll()) {
+            return this.virtualScrollRef()?.nativeElement ?? null;
+        }
+        return this.optionsContainerRef()?.nativeElement ?? null;
+    }
     _resetAsyncOptions() {
         this._asyncLoadSubscription?.unsubscribe();
         this._asyncRequestId++;
@@ -1379,13 +1406,13 @@ class ZSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZSelectComponent, isStandalone: true, selector: "z-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, 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 }, zWrap: { classPropertyName: "zWrap", publicName: "zWrap", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholderSearch: { classPropertyName: "zPlaceholderSearch", publicName: "zPlaceholderSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zNotFoundText: { classPropertyName: "zNotFoundText", publicName: "zNotFoundText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zMaxTagCount: { classPropertyName: "zMaxTagCount", publicName: "zMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, zDropdownMaxHeight: { classPropertyName: "zDropdownMaxHeight", publicName: "zDropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, zOptionHeight: { classPropertyName: "zOptionHeight", publicName: "zOptionHeight", isSignal: true, isRequired: false, transformFunction: null }, zVirtualScroll: { classPropertyName: "zVirtualScroll", publicName: "zVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, zShowAction: { classPropertyName: "zShowAction", publicName: "zShowAction", isSignal: true, isRequired: false, transformFunction: null }, zOptions: { classPropertyName: "zOptions", publicName: "zOptions", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zTranslateLabels: { classPropertyName: "zTranslateLabels", publicName: "zTranslateLabels", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zSearchServer: { classPropertyName: "zSearchServer", publicName: "zSearchServer", isSignal: true, isRequired: false, transformFunction: null }, zLoadingMore: { classPropertyName: "zLoadingMore", publicName: "zLoadingMore", isSignal: true, isRequired: false, transformFunction: null }, zEnableLoadMore: { classPropertyName: "zEnableLoadMore", publicName: "zEnableLoadMore", isSignal: true, isRequired: false, transformFunction: null }, zScrollDistance: { classPropertyName: "zScrollDistance", publicName: "zScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, zMaxVisible: { classPropertyName: "zMaxVisible", publicName: "zMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZSelectComponent, isStandalone: true, selector: "z-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zLoadingOutline: { classPropertyName: "zLoadingOutline", publicName: "zLoadingOutline", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zShowCheck: { classPropertyName: "zShowCheck", publicName: "zShowCheck", isSignal: true, isRequired: false, transformFunction: null }, zWrap: { classPropertyName: "zWrap", publicName: "zWrap", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholderSearch: { classPropertyName: "zPlaceholderSearch", publicName: "zPlaceholderSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zNotFoundText: { classPropertyName: "zNotFoundText", publicName: "zNotFoundText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zMaxTagCount: { classPropertyName: "zMaxTagCount", publicName: "zMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, zDropdownMaxHeight: { classPropertyName: "zDropdownMaxHeight", publicName: "zDropdownMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, zOptionHeight: { classPropertyName: "zOptionHeight", publicName: "zOptionHeight", isSignal: true, isRequired: false, transformFunction: null }, zVirtualScroll: { classPropertyName: "zVirtualScroll", publicName: "zVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, zDynamicSize: { classPropertyName: "zDynamicSize", publicName: "zDynamicSize", isSignal: true, isRequired: false, transformFunction: null }, zShowAction: { classPropertyName: "zShowAction", publicName: "zShowAction", isSignal: true, isRequired: false, transformFunction: null }, zOptions: { classPropertyName: "zOptions", publicName: "zOptions", isSignal: true, isRequired: false, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zTranslateLabels: { classPropertyName: "zTranslateLabels", publicName: "zTranslateLabels", isSignal: true, isRequired: false, transformFunction: null }, zKey: { classPropertyName: "zKey", publicName: "zKey", isSignal: true, isRequired: false, transformFunction: null }, zSearchServer: { classPropertyName: "zSearchServer", publicName: "zSearchServer", isSignal: true, isRequired: false, transformFunction: null }, zLoadingMore: { classPropertyName: "zLoadingMore", publicName: "zLoadingMore", isSignal: true, isRequired: false, transformFunction: null }, zEnableLoadMore: { classPropertyName: "zEnableLoadMore", publicName: "zEnableLoadMore", isSignal: true, isRequired: false, transformFunction: null }, zScrollDistance: { classPropertyName: "zScrollDistance", publicName: "zScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, zMaxVisible: { classPropertyName: "zMaxVisible", publicName: "zMaxVisible", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zSticky: { classPropertyName: "zSticky", publicName: "zSticky", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zSelectedTemplate: { classPropertyName: "zSelectedTemplate", publicName: "zSelectedTemplate", isSignal: true, isRequired: false, transformFunction: null }, zOptionTemplate: { classPropertyName: "zOptionTemplate", publicName: "zOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, zActionTemplate: { classPropertyName: "zActionTemplate", publicName: "zActionTemplate", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnLoadMore: "zOnLoadMore", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zControl: "zControl", zEvent: "zEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ZSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      [zSticky]=\"zSticky()\"\n      [zKeyboardSafe]=\"zShowSearch()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zTooltipDisabled]=\"uiState().isOpen\"\n                    zTooltipPosition=\"top\"\n                    [zTooltipHideDelay]=\"0\"\n                    [zTooltipOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                [zTooltipDisabled]=\"uiState().isOpen\"\n                zTooltipPosition=\"top\"\n                [zTooltipHideDelay]=\"0\"\n                [zTooltipOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-[var(--z-popover-shadow)]\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full min-w-0 overflow-hidden bg-transparent py-3 text-sm text-ellipsis whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #optionEl\n                    [class]=\"\n                      'z-select-option absolute right-0 left-0 min-w-0 ' +\n                      (opt | zIsSelected: currentValue() : isMultipleMode() : zKey() | zOptionClasses: opt.disabled)\n                    \"\n                    [style.height.px]=\"zOptionHeight()\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          effectiveOptionTemplate()!;\n                          context: {\n                            $implicit: opt,\n                            selected: opt | zIsSelected: currentValue() : isMultipleMode() : zKey(),\n                          }\n                        \" />\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    }\n                    @if (opt | zIsSelected: currentValue() : isMultipleMode() : zKey()) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  [class]=\"\n                    'z-select-option relative min-w-0 ' +\n                    (opt | zIsSelected: currentValue() : isMultipleMode() : zKey() | zOptionClasses: opt.disabled)\n                  \"\n                  [style.minHeight.px]=\"zOptionHeight()\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        effectiveOptionTemplate()!;\n                        context: {\n                          $implicit: opt,\n                          selected: opt | zIsSelected: currentValue() : isMultipleMode() : zKey(),\n                        }\n                      \" />\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                  }\n                  @if (opt | zIsSelected: currentValue() : isMultipleMode() : zKey()) {\n                    <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      [zSticky]=\"zSticky()\"\n      [zKeyboardSafe]=\"zShowSearch()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zTooltipDisabled]=\"uiState().isOpen\"\n                    zTooltipPosition=\"top\"\n                    [zTooltipHideDelay]=\"0\"\n                    [zTooltipOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                [zTooltipDisabled]=\"uiState().isOpen\"\n                zTooltipPosition=\"top\"\n                [zTooltipHideDelay]=\"0\"\n                [zTooltipOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-[var(--z-popover-shadow)]\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full min-w-0 overflow-hidden bg-transparent py-3 text-sm text-ellipsis whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #virtualOptionEl\n                    #optionEl\n                    [class]=\"\n                      'z-select-option absolute right-0 left-0 min-w-0 ' +\n                      (opt\n                        | zIsSelected: currentValue() : isMultipleMode() : zKey()\n                        | zOptionClasses: opt.disabled : !!effectiveOptionTemplate())\n                    \"\n                    [attr.data-index]=\"virtualItem.index\"\n                    [style.display]=\"effectiveOptionTemplate() ? 'block' : null\"\n                    [style.height.px]=\"zDynamicSize() ? null : zOptionHeight()\"\n                    [style.minHeight.px]=\"zDynamicSize() ? zOptionHeight() : null\"\n                    [style.overflow]=\"effectiveOptionTemplate() ? 'visible' : null\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      @let selected = opt | zIsSelected: currentValue() : isMultipleMode() : zKey();\n                      <div class=\"flex min-w-0 items-start gap-2\">\n                        <div class=\"min-w-0 flex-1\">\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              effectiveOptionTemplate()!;\n                              context: {\n                                $implicit: opt,\n                                selected: selected,\n                              }\n                            \" />\n                        </div>\n                        @if (zShowCheck() && selected) {\n                          <z-icon\n                            zType=\"lucideCheck\"\n                            zSize=\"16\"\n                            [zStrokeWidth]=\"4\"\n                            class=\"text-primary mt-2 shrink-0\" />\n                        }\n                      </div>\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                      @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                        <z-icon\n                          zType=\"lucideCheck\"\n                          zSize=\"16\"\n                          [zStrokeWidth]=\"4\"\n                          class=\"text-primary ml-auto shrink-0\" />\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=\"text-primary mt-2 shrink-0\" />\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectComponent, decorators: [{
             type: Component,
@@ -1409,8 +1436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => ZSelectComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      [zSticky]=\"zSticky()\"\n      [zKeyboardSafe]=\"zShowSearch()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zTooltipDisabled]=\"uiState().isOpen\"\n                    zTooltipPosition=\"top\"\n                    [zTooltipHideDelay]=\"0\"\n                    [zTooltipOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                [zTooltipDisabled]=\"uiState().isOpen\"\n                zTooltipPosition=\"top\"\n                [zTooltipHideDelay]=\"0\"\n                [zTooltipOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-[var(--z-popover-shadow)]\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full min-w-0 overflow-hidden bg-transparent py-3 text-sm text-ellipsis whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #optionEl\n                    [class]=\"\n                      'z-select-option absolute right-0 left-0 min-w-0 ' +\n                      (opt | zIsSelected: currentValue() : isMultipleMode() : zKey() | zOptionClasses: opt.disabled)\n                    \"\n                    [style.height.px]=\"zOptionHeight()\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          effectiveOptionTemplate()!;\n                          context: {\n                            $implicit: opt,\n                            selected: opt | zIsSelected: currentValue() : isMultipleMode() : zKey(),\n                          }\n                        \" />\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    }\n                    @if (opt | zIsSelected: currentValue() : isMultipleMode() : zKey()) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  [class]=\"\n                    'z-select-option relative min-w-0 ' +\n                    (opt | zIsSelected: currentValue() : isMultipleMode() : zKey() | zOptionClasses: opt.disabled)\n                  \"\n                  [style.minHeight.px]=\"zOptionHeight()\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        effectiveOptionTemplate()!;\n                        context: {\n                          $implicit: opt,\n                          selected: opt | zIsSelected: currentValue() : isMultipleMode() : zKey(),\n                        }\n                      \" />\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                  }\n                  @if (opt | zIsSelected: currentValue() : isMultipleMode() : zKey()) {\n                    <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['dropdownSearchInput', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], customSelectedDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectSelectedDirective), { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectOptionDirective), { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], 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 }] }], zWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWrap", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zPlaceholderSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholderSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zNotFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNotFoundText", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxTagCount", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zShowAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowAction", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zTranslateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTranslateLabels", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zSearchServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchServer", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], 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=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zTooltipDisabled]=\"uiState().isOpen\"\n                    zTooltipPosition=\"top\"\n                    [zTooltipHideDelay]=\"0\"\n                    [zTooltipOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                [zTooltipDisabled]=\"uiState().isOpen\"\n                zTooltipPosition=\"top\"\n                [zTooltipHideDelay]=\"0\"\n                [zTooltipOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-[var(--z-popover-shadow)]\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full min-w-0 overflow-hidden bg-transparent py-3 text-sm text-ellipsis whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #virtualOptionEl\n                    #optionEl\n                    [class]=\"\n                      'z-select-option absolute right-0 left-0 min-w-0 ' +\n                      (opt\n                        | zIsSelected: currentValue() : isMultipleMode() : zKey()\n                        | zOptionClasses: opt.disabled : !!effectiveOptionTemplate())\n                    \"\n                    [attr.data-index]=\"virtualItem.index\"\n                    [style.display]=\"effectiveOptionTemplate() ? 'block' : null\"\n                    [style.height.px]=\"zDynamicSize() ? null : zOptionHeight()\"\n                    [style.minHeight.px]=\"zDynamicSize() ? zOptionHeight() : null\"\n                    [style.overflow]=\"effectiveOptionTemplate() ? 'visible' : null\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      @let selected = opt | zIsSelected: currentValue() : isMultipleMode() : zKey();\n                      <div class=\"flex min-w-0 items-start gap-2\">\n                        <div class=\"min-w-0 flex-1\">\n                          <ng-container\n                            *ngTemplateOutlet=\"\n                              effectiveOptionTemplate()!;\n                              context: {\n                                $implicit: opt,\n                                selected: selected,\n                              }\n                            \" />\n                        </div>\n                        @if (zShowCheck() && selected) {\n                          <z-icon\n                            zType=\"lucideCheck\"\n                            zSize=\"16\"\n                            [zStrokeWidth]=\"4\"\n                            class=\"text-primary mt-2 shrink-0\" />\n                        }\n                      </div>\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                      @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                        <z-icon\n                          zType=\"lucideCheck\"\n                          zSize=\"16\"\n                          [zStrokeWidth]=\"4\"\n                          class=\"text-primary ml-auto shrink-0\" />\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=\"text-primary mt-2 shrink-0\" />\n                      }\n                    </div>\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    @if (zShowCheck() && (opt | zIsSelected: currentValue() : isMultipleMode() : zKey())) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\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 }] }], 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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.