@shival99/z-ui 1.6.10 → 1.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-radio.mjs","sources":["../../../../libs/core-ui/components/z-radio/z-radio.variants.ts","../../../../libs/core-ui/components/z-radio/z-radio.component.ts","../../../../libs/core-ui/components/z-radio/z-radio.component.html","../../../../libs/core-ui/components/z-radio/shival99-z-ui-components-z-radio.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zRadioVariants = cva(\n  [\n    'relative inline-flex items-center justify-center shrink-0 cursor-pointer',\n    'rounded-full border-2 border-input',\n    'transition-[border-color,background-color,box-shadow] duration-200',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'data-[state=checked]:border-primary',\n  ],\n  {\n    variants: {\n      zSize: {\n        sm: 'size-4',\n        default: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  }\n);\n\nexport const zRadioIndicatorVariants = cva('rounded-full bg-primary transition-transform duration-200', {\n  variants: {\n    zSize: {\n      sm: 'size-2',\n      default: 'size-2.5',\n      lg: 'size-3',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\nexport const zRadioLabelVariants = cva(\n  'select-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n  {\n    variants: {\n      zSize: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  }\n);\n\nexport type ZRadioVariants = VariantProps<typeof zRadioVariants>;\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZRadioOption, ZRadioOrientation, ZRadioSize, ZRadioType } from './z-radio.types';\nimport { zRadioIndicatorVariants, zRadioLabelVariants, zRadioVariants } from './z-radio.variants';\n\n@Component({\n  selector: 'z-radio',\n  imports: [],\n  standalone: true,\n  templateUrl: './z-radio.component.html',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZRadioComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZRadioComponent implements ControlValueAccessor {\n  public readonly zChange = output<string | number | null>();\n\n  public readonly class = input<ClassValue>('');\n  public readonly zType = input<ZRadioType>('default');\n  public readonly zSize = input<ZRadioSize>('default');\n  public readonly zLabel = input<string>('');\n  public readonly zText = input<string>('');\n  public readonly zDisabled = input(false, { transform: zTransform });\n  public readonly zValue = input<string | number>('');\n  public readonly zOptions = input<ZRadioOption[]>([]);\n  public readonly zOrientation = input<ZRadioOrientation>('vertical');\n\n  public readonly zSelectedValue = model<string | number | null>(null);\n\n  private readonly _disabled = signal(false);\n\n  protected readonly isDisabled = computed(() => this.zDisabled() || this._disabled());\n\n  protected readonly hostClasses = computed(() => {\n    const hasLabel = !!this.zLabel();\n    if (this.zType() === 'group') {\n      return zMergeClasses('flex flex-col gap-2', this.class());\n    }\n    if (hasLabel) {\n      return zMergeClasses('flex flex-col gap-2', this.class());\n    }\n    return zMergeClasses('inline-flex items-center gap-2', this.class());\n  });\n\n  protected readonly groupClasses = computed(() => {\n    const orientation = this.zOrientation() === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col';\n    return `flex ${orientation} gap-2`;\n  });\n\n  protected readonly radioClasses = computed(() => zRadioVariants({ zSize: this.zSize() }));\n\n  protected readonly indicatorClasses = computed(() => zRadioIndicatorVariants({ zSize: this.zSize() }));\n\n  protected readonly labelClasses = computed(() => zRadioLabelVariants({ zSize: this.zSize() }));\n\n  private _onChange: (value: string | number | null) => void = () => {};\n  private _onTouched: () => void = () => {};\n\n  public writeValue(value: string | number | null): void {\n    this.zSelectedValue.set(value);\n  }\n\n  public registerOnChange(fn: (value: string | number | null) => void): void {\n    this._onChange = fn;\n  }\n\n  public registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n  }\n\n  public setDisabledState(isDisabled: boolean): void {\n    this._disabled.set(isDisabled);\n  }\n\n  protected onRadioClick(): void {\n    if (this.isDisabled()) {\n      return;\n    }\n\n    const value = this.zValue();\n    this.zSelectedValue.set(value);\n    this.zChange.emit(value);\n    this._onChange(value);\n    this._onTouched();\n  }\n\n  protected onOptionClick(option: ZRadioOption): void {\n    if (this.isDisabled() || option.disabled) {\n      return;\n    }\n\n    this.zSelectedValue.set(option.value);\n    this.zChange.emit(option.value);\n    this._onChange(option.value);\n    this._onTouched();\n  }\n\n  protected isOptionChecked(option: ZRadioOption): boolean {\n    return this.zSelectedValue() === option.value;\n  }\n\n  protected isChecked(): boolean {\n    return this.zSelectedValue() === this.zValue();\n  }\n\n  protected getRadioState(): string {\n    return this.isChecked() ? 'checked' : 'unchecked';\n  }\n\n  protected getOptionState(option: ZRadioOption): string {\n    return this.isOptionChecked(option) ? 'checked' : 'unchecked';\n  }\n}\n","<!-- Group Mode -->\n@if (zType() === 'group') {\n  <!-- Label above group -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div [class]=\"groupClasses()\">\n    @for (option of zOptions(); track option.value) {\n      <label\n        class=\"inline-flex cursor-pointer items-center gap-2\"\n        [class.opacity-40]=\"option.disabled || isDisabled()\"\n        [class.dark:opacity-50]=\"option.disabled || isDisabled()\"\n        [class.cursor-not-allowed]=\"option.disabled || isDisabled()\">\n        <button\n          type=\"button\"\n          role=\"radio\"\n          [class]=\"radioClasses()\"\n          [attr.aria-checked]=\"isOptionChecked(option)\"\n          [attr.data-state]=\"getOptionState(option)\"\n          [disabled]=\"isDisabled() || option.disabled\"\n          (click)=\"onOptionClick(option)\">\n          @if (isOptionChecked(option)) {\n            <span [class]=\"indicatorClasses()\"></span>\n          }\n        </button>\n        <span [class]=\"labelClasses()\" [class.text-muted-foreground]=\"option.disabled\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n}\n\n<!-- Default Mode (single radio) -->\n@if (zType() === 'default') {\n  <!-- Label above -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div class=\"inline-flex items-center gap-2\">\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [class]=\"radioClasses()\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.data-state]=\"getRadioState()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onRadioClick()\">\n      @if (isChecked()) {\n        <span [class]=\"indicatorClasses()\"></span>\n      }\n    </button>\n    @if (zText()) {\n      <label [class]=\"labelClasses()\" (click)=\"onRadioClick()\">{{ zText() }}</label>\n    }\n  </div>\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-radio.mjs","sources":["../../../../libs/core-ui/components/z-radio/z-radio.variants.ts","../../../../libs/core-ui/components/z-radio/z-radio.component.ts","../../../../libs/core-ui/components/z-radio/z-radio.component.html","../../../../libs/core-ui/components/z-radio/shival99-z-ui-components-z-radio.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zRadioVariants = cva(\n  [\n    'relative inline-flex items-center justify-center shrink-0 cursor-pointer',\n    'rounded-full border-2 border-input',\n    'transition-[border-color,background-color,box-shadow] duration-200',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'data-[state=checked]:border-primary',\n  ],\n  {\n    variants: {\n      zSize: {\n        sm: 'size-4',\n        default: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  }\n);\n\nexport const zRadioIndicatorVariants = cva('rounded-full bg-primary transition-transform duration-200', {\n  variants: {\n    zSize: {\n      sm: 'size-2',\n      default: 'size-2.5',\n      lg: 'size-3',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\nexport const zRadioLabelVariants = cva(\n  'select-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n  {\n    variants: {\n      zSize: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  }\n);\n\nexport type ZRadioVariants = VariantProps<typeof zRadioVariants>;\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { zMergeClasses, zTransform, zCreateEvent, type ZEvent } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZRadioOption, ZRadioOrientation, ZRadioSize, ZRadioType } from './z-radio.types';\nimport { zRadioIndicatorVariants, zRadioLabelVariants, zRadioVariants } from './z-radio.variants';\n\n@Component({\n  selector: 'z-radio',\n  imports: [],\n  standalone: true,\n  templateUrl: './z-radio.component.html',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZRadioComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZRadioComponent implements ControlValueAccessor {\n  public readonly zChange = output<string | number | null>();\n  public readonly zEvent = output<ZEvent>();\n\n  public readonly class = input<ClassValue>('');\n  public readonly zType = input<ZRadioType>('default');\n  public readonly zSize = input<ZRadioSize>('default');\n  public readonly zLabel = input<string>('');\n  public readonly zText = input<string>('');\n  public readonly zDisabled = input(false, { transform: zTransform });\n  public readonly zValue = input<string | number>('');\n  public readonly zOptions = input<ZRadioOption[]>([]);\n  public readonly zOrientation = input<ZRadioOrientation>('vertical');\n\n  public readonly zSelectedValue = model<string | number | null>(null);\n\n  private readonly _disabled = signal(false);\n\n  protected readonly isDisabled = computed(() => this.zDisabled() || this._disabled());\n\n  protected readonly hostClasses = computed(() => {\n    const hasLabel = !!this.zLabel();\n    if (this.zType() === 'group') {\n      return zMergeClasses('flex flex-col gap-2', this.class());\n    }\n    if (hasLabel) {\n      return zMergeClasses('flex flex-col gap-2', this.class());\n    }\n    return zMergeClasses('inline-flex items-center gap-2', this.class());\n  });\n\n  protected readonly groupClasses = computed(() => {\n    const orientation = this.zOrientation() === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col';\n    return `flex ${orientation} gap-2`;\n  });\n\n  protected readonly radioClasses = computed(() => zRadioVariants({ zSize: this.zSize() }));\n\n  protected readonly indicatorClasses = computed(() => zRadioIndicatorVariants({ zSize: this.zSize() }));\n\n  protected readonly labelClasses = computed(() => zRadioLabelVariants({ zSize: this.zSize() }));\n\n  private _onChange: (value: string | number | null) => void = () => {};\n  private _onTouched: () => void = () => {};\n\n  public writeValue(value: string | number | null): void {\n    this.zSelectedValue.set(value);\n  }\n\n  public registerOnChange(fn: (value: string | number | null) => void): void {\n    this._onChange = fn;\n  }\n\n  public registerOnTouched(fn: () => void): void {\n    this._onTouched = fn;\n  }\n\n  public setDisabledState(isDisabled: boolean): void {\n    this._disabled.set(isDisabled);\n  }\n\n  protected onFocus(event: FocusEvent): void {\n    this.zEvent.emit(zCreateEvent('focus', event));\n  }\n\n  protected onBlur(event: FocusEvent): void {\n    this.zEvent.emit(zCreateEvent('blur', event));\n    this._onTouched();\n  }\n\n  protected onRadioClick(): void {\n    if (this.isDisabled()) {\n      return;\n    }\n\n    const value = this.zValue();\n    this.zSelectedValue.set(value);\n    this.zChange.emit(value);\n    this._onChange(value);\n    this._onTouched();\n  }\n\n  protected onOptionClick(option: ZRadioOption): void {\n    if (this.isDisabled() || option.disabled) {\n      return;\n    }\n\n    this.zSelectedValue.set(option.value);\n    this.zChange.emit(option.value);\n    this._onChange(option.value);\n    this._onTouched();\n  }\n\n  protected isOptionChecked(option: ZRadioOption): boolean {\n    return this.zSelectedValue() === option.value;\n  }\n\n  protected isChecked(): boolean {\n    return this.zSelectedValue() === this.zValue();\n  }\n\n  protected getRadioState(): string {\n    return this.isChecked() ? 'checked' : 'unchecked';\n  }\n\n  protected getOptionState(option: ZRadioOption): string {\n    return this.isOptionChecked(option) ? 'checked' : 'unchecked';\n  }\n}\n","<!-- Group Mode -->\n@if (zType() === 'group') {\n  <!-- Label above group -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div [class]=\"groupClasses()\">\n    @for (option of zOptions(); track option.value) {\n      <label\n        class=\"inline-flex cursor-pointer items-center gap-2\"\n        [class.opacity-40]=\"option.disabled || isDisabled()\"\n        [class.dark:opacity-50]=\"option.disabled || isDisabled()\"\n        [class.cursor-not-allowed]=\"option.disabled || isDisabled()\">\n        <button\n          type=\"button\"\n          role=\"radio\"\n          [class]=\"radioClasses()\"\n          [attr.aria-checked]=\"isOptionChecked(option)\"\n          [attr.data-state]=\"getOptionState(option)\"\n          [disabled]=\"isDisabled() || option.disabled\"\n          (click)=\"onOptionClick(option)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\">\n          @if (isOptionChecked(option)) {\n            <span [class]=\"indicatorClasses()\"></span>\n          }\n        </button>\n        <span [class]=\"labelClasses()\" [class.text-muted-foreground]=\"option.disabled\">{{ option.label }}</span>\n      </label>\n    }\n  </div>\n}\n\n<!-- Default Mode (single radio) -->\n@if (zType() === 'default') {\n  <!-- Label above -->\n  @if (zLabel()) {\n    <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n  }\n\n  <div class=\"inline-flex items-center gap-2\">\n    <button\n      type=\"button\"\n      role=\"radio\"\n      [class]=\"radioClasses()\"\n      [attr.aria-checked]=\"isChecked()\"\n      [attr.data-state]=\"getRadioState()\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onRadioClick()\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\">\n      @if (isChecked()) {\n        <span [class]=\"indicatorClasses()\"></span>\n      }\n    </button>\n    @if (zText()) {\n      <label [class]=\"labelClasses()\" (click)=\"onRadioClick()\">{{ zText() }}</label>\n    }\n  </div>\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

@@ -13,7 +13,7 @@ import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
 import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
 import { ZHighlightPipe, ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
 import { ZTranslateService } from '@shival99/z-ui/services';
-import { zRemoveVietnamese, zMergeClasses, zTransform, zUuid } from '@shival99/z-ui/utils';
+import { zRemoveVietnamese, zMergeClasses, zTransform, zUuid, zCreateEvent } from '@shival99/z-ui/utils';
 import { Subject, debounceTime, merge, filter, isObservable, takeUntil, catchError, of, firstValueFrom } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
@@ -255,6 +255,7 @@ class ZSelectComponent {
     zOnSearch = output();
     zOnLoadMore = output();
     zControl = output();
+    zEvent = output();
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     zMode = input('single', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
     zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
@@ -297,8 +298,6 @@ class ZSelectComponent {
     zValidators = input([], ...(ngDevMode ? [{ debugName: "zValidators" }] : []));
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
     _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
-    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
     _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
     _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
     _popoverControl = signal(null, ...(ngDevMode ? [{ debugName: "_popoverControl" }] : []));
@@ -309,6 +308,8 @@ class ZSelectComponent {
         hasScrollShadow: false,
         isFocused: false,
         isValidating: false,
+        touched: false,
+        dirty: false,
     }, ...(ngDevMode ? [{ debugName: "uiState" }] : []));
     selectId = zUuid('z-select');
     dropdownId = `${this.selectId}-dropdown`;
@@ -486,7 +487,7 @@ class ZSelectComponent {
         if (control) {
             return control.dirty;
         }
-        return this._dirty() || this._touched();
+        return this.uiState().dirty || this.uiState().touched;
     }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
     hasError = computed(() => {
         const asyncErrors = this._asyncErrors();
@@ -504,7 +505,6 @@ class ZSelectComponent {
         }
         return control.invalid && this._shouldShowValidation();
     }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
-    showError = computed(() => this.hasError(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
     errorMessage = computed(() => {
         const asyncErrors = this._asyncErrors();
         if (asyncErrors.size > 0) {
@@ -543,9 +543,9 @@ class ZSelectComponent {
     }, this.class()), ...(ngDevMode ? [{ debugName: "selectClasses" }] : []));
     state = computed(() => ({
         focused: this.uiState().isFocused,
-        touched: this._touched(),
+        touched: this.uiState().touched,
         blurred: !this.uiState().isFocused,
-        dirty: this._dirty(),
+        dirty: this.uiState().dirty,
         disabled: this.isDisabled(),
         readonly: this.isReadonly(),
         open: this.uiState().isOpen,
@@ -712,8 +712,7 @@ class ZSelectComponent {
             this._value.set(null);
             this._onChange(null);
         }
-        this._touched.set(false);
-        this._dirty.set(false);
+        this.uiState.update(s => ({ ...s, touched: false, dirty: false }));
         this.searchText.set('');
         if (!this._ngControl?.control) {
             return;
@@ -728,21 +727,20 @@ class ZSelectComponent {
         this.triggerRef()?.nativeElement.blur();
     }
     markAsTouched() {
-        this._touched.set(true);
+        this.uiState.update(s => ({ ...s, touched: true }));
         this._onTouched();
     }
     markAsUntouched() {
-        this._touched.set(false);
+        this.uiState.update(s => ({ ...s, touched: false }));
     }
     markAsDirty() {
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
     }
     markAsPristine() {
-        this._dirty.set(false);
+        this.uiState.update(s => ({ ...s, dirty: false }));
     }
     validate() {
-        this._touched.set(true);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, touched: true, dirty: true }));
         this._onTouched();
         if (this._ngControl?.control) {
             this._ngControl.control.markAsDirty();
@@ -780,6 +778,11 @@ class ZSelectComponent {
         this.uiState.update(s => ({ ...s, isOpen: true, isFocused: true }));
         this.searchText.set('');
         this.zOnSearch.emit('');
+        const triggerEl = this.triggerRef()?.nativeElement;
+        if (triggerEl) {
+            const focusEvent = new FocusEvent('focus', { relatedTarget: triggerEl });
+            this.zEvent.emit(zCreateEvent('focus', focusEvent));
+        }
         if (this.zShowSearch()) {
             setTimeout(() => {
                 this.searchInputRef()?.nativeElement.focus();
@@ -789,11 +792,16 @@ class ZSelectComponent {
     onPopoverHideStart() {
         this.uiState.update(s => ({ ...s, isOpen: false, isFocused: false, hasScrollShadow: false }));
         this._cleanupVirtualScrollListener();
-        if (this._dirty()) {
-            this._touched.set(true);
+        if (this.uiState().dirty) {
+            this.uiState.update(s => ({ ...s, touched: true }));
         }
         this._onTouched();
-        this.triggerRef()?.nativeElement.blur();
+        const triggerEl = this.triggerRef()?.nativeElement;
+        if (triggerEl) {
+            const blurEvent = new FocusEvent('blur', { relatedTarget: triggerEl });
+            this.zEvent.emit(zCreateEvent('blur', blurEvent));
+        }
+        triggerEl?.blur();
     }
     onPopoverHideEnd() {
         if (this.zSearchServer()) {
@@ -827,7 +835,7 @@ class ZSelectComponent {
             const isSelected = current.includes(option.value);
             const newValue = isSelected ? current.filter(v => v !== option.value) : [...current, option.value];
             this._value.set(newValue);
-            this._dirty.set(true);
+            this.uiState.update(s => ({ ...s, dirty: true }));
             this._onChange(newValue);
             this._triggerAsyncValidation(newValue
                 .map(v => this.zOptions().find(o => o.value === v))
@@ -835,7 +843,7 @@ class ZSelectComponent {
             return;
         }
         this._value.set(option.value);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(option.value);
         this._triggerAsyncValidation(option);
         this._popoverControl()?.close();
@@ -848,19 +856,19 @@ class ZSelectComponent {
         const current = this._value() ?? [];
         const newValue = current.filter(v => v !== option.value);
         this._value.set(newValue);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(newValue);
     }
     clearAll(event) {
         event.stopPropagation();
         if (this.isMultipleMode()) {
             this._value.set([]);
-            this._dirty.set(true);
+            this.uiState.update(s => ({ ...s, dirty: true }));
             this._onChange([]);
             return;
         }
         this._value.set(null);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(null);
     }
     selectAll() {
@@ -870,7 +878,7 @@ class ZSelectComponent {
         const enabledOptions = this.zOptions().filter(opt => !opt.disabled);
         const allValues = enabledOptions.map(opt => opt.value);
         this._value.set(allValues);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(allValues);
     }
     removeAll() {
@@ -878,7 +886,7 @@ class ZSelectComponent {
             return;
         }
         this._value.set([]);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange([]);
     }
     trackByValue = (_index, option) => {
@@ -1070,13 +1078,13 @@ class ZSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, 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 }, 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 }, 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", zControl: "zControl" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, 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 }, 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 }, 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", 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\n    #triggerEl\n    [id]=\"selectId\"\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"6\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    [zScrollClose]=\"zScrollClose()\"\n    zTrigger=\"click\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"uiState().isOpen\"\n    (mousedown)=\"onTriggerMousedown()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        } @else {\n          @for (opt of displayedTags(); track opt.value) {\n            <span\n              #tagEl\n              [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n              class=\"z-select-tag\"\n              [class.min-w-0]=\"!zWrap()\"\n              [class.shrink]=\"!zWrap()\">\n              @if (effectiveSelectedTemplate()) {\n                <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n              } @else {\n                <span\n                  class=\"truncate\"\n                  [class.max-w-25]=\"zWrap()\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zHideDelay]=\"0\"\n                  [zOffset]=\"6\"\n                  [zTriggerElement]=\"tagEl\">\n                  {{ opt.label }}\n                </span>\n              }\n              @if (zAllowClear() && !isDisabled()) {\n                <button\n                  type=\"button\"\n                  class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (uiState().isValidating) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"uiState().isOpen\" />\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"effectivePlaceholderSearch()\"\n          [ngModel]=\"searchText()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          spellcheck=\"false\" />\n      </div>\n    }\n\n    @if (zLoading()) {\n      <div class=\"flex flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          @if (zEnableLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\n        @if (isEmptyData()) {\n          <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n        } @else {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n        }\n      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"min-w-0 flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveSelectAllText() }}</span>\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"min-w-0 flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveClearAllText() }}</span>\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    [id]=\"selectId\"\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"6\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    [zScrollClose]=\"zScrollClose()\"\n    zTrigger=\"click\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"uiState().isOpen\"\n    (mousedown)=\"onTriggerMousedown()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        } @else {\n          @for (opt of displayedTags(); track opt.value) {\n            <span\n              #tagEl\n              [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n              class=\"z-select-tag\"\n              [class.min-w-0]=\"!zWrap()\"\n              [class.shrink]=\"!zWrap()\">\n              @if (effectiveSelectedTemplate()) {\n                <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n              } @else {\n                <span\n                  class=\"truncate\"\n                  [class.max-w-25]=\"zWrap()\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zHideDelay]=\"0\"\n                  [zOffset]=\"6\"\n                  [zTriggerElement]=\"tagEl\">\n                  {{ opt.label }}\n                </span>\n              }\n              @if (zAllowClear() && !isDisabled()) {\n                <button\n                  type=\"button\"\n                  class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (uiState().isValidating) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"uiState().isOpen\" />\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"effectivePlaceholderSearch()\"\n          [ngModel]=\"searchText()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          spellcheck=\"false\" />\n      </div>\n    }\n\n    @if (zLoading()) {\n      <div class=\"flex flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          @if (zEnableLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\n        @if (isEmptyData()) {\n          <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n        } @else {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n        }\n      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"min-w-0 flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveSelectAllText() }}</span>\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"min-w-0 flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveClearAllText() }}</span>\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSelectComponent, decorators: [{
             type: Component,
@@ -1101,8 +1109,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useExisting: forwardRef(() => ZSelectComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    [id]=\"selectId\"\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"6\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    [zScrollClose]=\"zScrollClose()\"\n    zTrigger=\"click\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"uiState().isOpen\"\n    (mousedown)=\"onTriggerMousedown()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        } @else {\n          @for (opt of displayedTags(); track opt.value) {\n            <span\n              #tagEl\n              [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n              class=\"z-select-tag\"\n              [class.min-w-0]=\"!zWrap()\"\n              [class.shrink]=\"!zWrap()\">\n              @if (effectiveSelectedTemplate()) {\n                <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n              } @else {\n                <span\n                  class=\"truncate\"\n                  [class.max-w-25]=\"zWrap()\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zHideDelay]=\"0\"\n                  [zOffset]=\"6\"\n                  [zTriggerElement]=\"tagEl\">\n                  {{ opt.label }}\n                </span>\n              }\n              @if (zAllowClear() && !isDisabled()) {\n                <button\n                  type=\"button\"\n                  class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (uiState().isValidating) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"uiState().isOpen\" />\n  </div>\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"effectivePlaceholderSearch()\"\n          [ngModel]=\"searchText()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          spellcheck=\"false\" />\n      </div>\n    }\n\n    @if (zLoading()) {\n      <div class=\"flex flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          @if (zEnableLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\n        @if (isEmptyData()) {\n          <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n        } @else {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n        }\n      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"min-w-0 flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveSelectAllText() }}</span>\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"min-w-0 flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveClearAllText() }}</span>\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['dropdownSearchInput', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], customSelectedDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectSelectedDirective), { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectOptionDirective), { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWrap", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zPlaceholderSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholderSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zNotFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNotFoundText", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxTagCount", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zShowAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowAction", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zTranslateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTranslateLabels", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zSearchServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchServer", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zSelectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedTemplate", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zActionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zActionTemplate", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    [id]=\"selectId\"\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"6\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    [zScrollClose]=\"zScrollClose()\"\n    zTrigger=\"click\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    class=\"z-select-trigger cursor-pointer\"\n    [class]=\"selectClasses()\"\n    [class.z-select-open]=\"uiState().isOpen\"\n    (mousedown)=\"onTriggerMousedown()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    tabindex=\"0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <div\n      class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n      [class.flex-wrap]=\"zWrap()\"\n      [class.overflow-hidden]=\"!zWrap()\">\n      @if (isMultipleMode()) {\n        @if (selectedOptions().length === 0) {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        } @else {\n          @for (opt of displayedTags(); track opt.value) {\n            <span\n              #tagEl\n              [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n              class=\"z-select-tag\"\n              [class.min-w-0]=\"!zWrap()\"\n              [class.shrink]=\"!zWrap()\">\n              @if (effectiveSelectedTemplate()) {\n                <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n              } @else {\n                <span\n                  class=\"truncate\"\n                  [class.max-w-25]=\"zWrap()\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zHideDelay]=\"0\"\n                  [zOffset]=\"6\"\n                  [zTriggerElement]=\"tagEl\">\n                  {{ opt.label }}\n                </span>\n              }\n              @if (zAllowClear() && !isDisabled()) {\n                <button\n                  type=\"button\"\n                  class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-[3px] transition-colors hover:bg-black/10\"\n                  (click)=\"removeOption($event, opt)\"\n                  tabindex=\"-1\">\n                  <z-icon zType=\"lucideX\" zSize=\"10\" />\n                </button>\n              }\n            </span>\n          }\n          @if (remainingCount() > 0) {\n            <span class=\"z-select-remaining text-muted-foreground bg-muted rounded px-1.5 py-0.5 text-xs font-medium\">\n              +{{ remainingCount() }}\n            </span>\n          }\n        }\n      } @else {\n        @if (selectedOption()) {\n          @if (effectiveSelectedTemplate()) {\n            <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n          } @else {\n            <span\n              class=\"truncate\"\n              z-tooltip\n              [zContent]=\"selectedOption()!.label\"\n              zPosition=\"top\"\n              [zHideDelay]=\"0\"\n              [zOffset]=\"10\">\n              {{ selectedOption()!.label }}\n            </span>\n          }\n        } @else {\n          <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n            {{ effectivePlaceholder() }}\n          </span>\n        }\n      }\n    </div>\n\n    @if (zLoading() || zLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    @if (!zLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n      <button\n        type=\"button\"\n        class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n        (click)=\"clearAll($event)\"\n        tabindex=\"-1\">\n        <z-icon zType=\"lucideX\" zSize=\"14\" />\n      </button>\n    }\n\n    @if (uiState().isValidating) {\n      <z-icon zType=\"lucideLoader2\" zSize=\"14\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    }\n\n    <z-icon\n      zType=\"lucideChevronDown\"\n      zSize=\"16\"\n      class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n      [class.rotate-180]=\"uiState().isOpen\" />\n  </div>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-select-dropdown bg-popover border-border rounded-[6px] border shadow-lg\"\n    [style.width.px]=\"dropdownWidth()\">\n    @if (zShowSearch()) {\n      <div class=\"border-border flex items-center border-b px-3\">\n        <z-icon zType=\"lucideSearch\" zSize=\"16\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n        <input\n          #dropdownSearchInput\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n          [placeholder]=\"effectivePlaceholderSearch()\"\n          [ngModel]=\"searchText()\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          spellcheck=\"false\" />\n      </div>\n    }\n\n    @if (zLoading()) {\n      <div class=\"flex flex-col items-center justify-center py-8\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (shouldUseVirtualScroll()) {\n        <div\n          #virtualScrollElement\n          class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"optionsMaxHeight()\">\n          <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              <div\n                #optionEl\n                class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                [style.height.px]=\"zOptionHeight()\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                (click)=\"selectOption(opt, close)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      effectiveOptionTemplate()!;\n                      context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                    \" />\n                } @else {\n                  <span\n                    class=\"min-w-0 flex-1 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl\"\n                    [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                }\n                @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                  <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n                }\n              </div>\n            }\n          </div>\n          @if (zLoadingMore()) {\n            <div\n              class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n              [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n              <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <div\n          #optionsContainer\n          class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"optionsMaxHeight()\">\n          @for (opt of filteredOptions(); track opt.value) {\n            <div\n              #optionEl2\n              class=\"z-select-option relative min-w-0\"\n              [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n              [style.minHeight.px]=\"zOptionHeight()\"\n              (click)=\"selectOption(opt, close)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    effectiveOptionTemplate()!;\n                    context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                  \" />\n              } @else {\n                <span\n                  class=\"min-w-0 flex-1 truncate\"\n                  z-tooltip\n                  [zContent]=\"opt.label\"\n                  zPosition=\"top\"\n                  [zArrow]=\"false\"\n                  [zOffset]=\"5\"\n                  [zHideDelay]=\"0\"\n                  [zTriggerElement]=\"optionEl2\"\n                  [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n              }\n              @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                <z-icon zType=\"lucideCheck\" zSize=\"14\" class=\"text-primary ml-auto shrink-0\" />\n              }\n            </div>\n          }\n          @if (zEnableLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (filteredOptions().length === 0) {\n        @if (isEmptyData()) {\n          <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n        } @else {\n          <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n        }\n      }\n\n      @if (zLoadingMore()) {\n        <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n          <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n        </div>\n      }\n    }\n\n    @if (zShowAction() && isMultipleMode()) {\n      <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n        @if (zActionTemplate()) {\n          <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n        } @else {\n          <z-button zSize=\"xs\" zType=\"ghost-info\" class=\"min-w-0 flex-1\" (click)=\"selectAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideCheckCheck\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveSelectAllText() }}</span>\n          </z-button>\n          <z-button zSize=\"xs\" zType=\"ghost-error\" class=\"min-w-0 flex-1\" (click)=\"removeAll()\" [zWave]=\"false\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" class=\"shrink-0\" />\n            <span class=\"truncate\">{{ effectiveClearAllText() }}</span>\n          </z-button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown{animation:z-select-dropdown-enter .15s ease-out;contain:layout style;will-change:transform,opacity}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}@keyframes z-select-dropdown-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['dropdownSearchInput', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], customSelectedDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectSelectedDirective), { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectOptionDirective), { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], 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 }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWrap", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zPlaceholderSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholderSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zNotFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNotFoundText", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxTagCount", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zShowAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowAction", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zTranslateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTranslateLabels", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zSearchServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchServer", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zSelectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedTemplate", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zActionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zActionTemplate", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.