@shival99/z-ui 1.5.1 → 1.6.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"shival99-z-ui-components-z-autocomplete.mjs","sources":["../../../../libs/core-ui/components/z-autocomplete/z-autocomplete.types.ts","../../../../libs/core-ui/components/z-autocomplete/z-autocomplete.variants.ts","../../../../libs/core-ui/components/z-autocomplete/z-autocomplete.component.ts","../../../../libs/core-ui/components/z-autocomplete/z-autocomplete.component.html","../../../../libs/core-ui/components/z-autocomplete/shival99-z-ui-components-z-autocomplete.ts"],"sourcesContent":["import type { Signal, TemplateRef } from '@angular/core';\nimport type { ZIcon } from '@shival99/z-ui/components/z-icon';\n\nexport interface ZAutocompleteOption<T = unknown> {\n  label: string;\n  value: T;\n  disabled?: boolean;\n  description?: string;\n  icon?: ZIcon;\n}\n\nexport interface ZAutocompleteConfig {\n  minLength: number;\n  debounceTime: number;\n  maxDisplayed: number;\n  highlightMatch: boolean;\n  emptyMessage: string;\n  noDataMessage: string;\n  closeOnSelect: boolean;\n  optionHeight: number;\n  dropdownMaxHeight: number;\n}\n\nexport const Z_AUTOCOMPLETE_DEFAULT_CONFIG: ZAutocompleteConfig = {\n  minLength: 1,\n  debounceTime: 0,\n  maxDisplayed: 50,\n  highlightMatch: true,\n  emptyMessage: 'Không tìm thấy kết quả',\n  noDataMessage: 'Chưa có dữ liệu',\n  closeOnSelect: true,\n  optionHeight: 36,\n  dropdownMaxHeight: 280,\n};\n\nexport type ZAutocompleteSize = 'sm' | 'default' | 'lg';\n\nexport interface ZAutocompleteState {\n  focused: boolean;\n  touched: boolean;\n  dirty: boolean;\n  disabled: boolean;\n  readonly: boolean;\n  open: boolean;\n}\n\nexport interface ZAutocompleteControl<T = unknown> {\n  focus: () => void;\n  blur: () => void;\n  clear: () => void;\n  reset: () => void;\n  open: () => void;\n  close: () => void;\n  value: Signal<string>;\n  selectedOption: Signal<ZAutocompleteOption<T> | null>;\n  state: Signal<ZAutocompleteState>;\n}\n\nexport type ZAutocompleteOptionTemplate<T = unknown> = TemplateRef<{\n  $implicit: ZAutocompleteOption<T>;\n  active: boolean;\n}>;\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zAutocompleteInputVariants = cva(\n  [\n    'flex w-full items-center rounded-[6px] border border-input bg-white shadow-xs',\n    'transition-[border-color,box-shadow,background-color,color,opacity,border-radius] duration-200',\n    'dark:bg-input/30 dark:border-input dark:hover:bg-input/50',\n    'outline-none',\n    'text-sm',\n  ],\n  {\n    variants: {\n      zSize: {\n        sm: 'h-8 px-2 gap-2 text-sm',\n        default: 'h-9 px-2.5 gap-2 text-sm',\n        lg: 'h-10 px-3 gap-2.5 text-sm',\n      },\n      zStatus: {\n        default: 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',\n        open: 'border-ring',\n        error:\n          'border-destructive! ring-destructive/20 ring-[3px] focus-within:border-destructive! focus-within:ring-destructive/30',\n        disabled: 'opacity-50 cursor-not-allowed bg-muted! text-muted-foreground',\n        readonly: 'cursor-default bg-muted/50 text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n      zStatus: 'default',\n    },\n  }\n);\n\nexport type ZAutocompleteInputVariants = VariantProps<typeof zAutocompleteInputVariants>;\n\nexport const zAutocompleteOptionVariants = cva(\n  'flex items-center gap-2 px-2 py-1.5 cursor-pointer transition-colors text-sm rounded-[4px] outline-none',\n  {\n    variants: {\n      active: {\n        true: 'bg-primary/15 text-primary',\n        false: 'hover:bg-primary/10 hover:text-foreground',\n      },\n      disabled: {\n        true: 'opacity-50 cursor-not-allowed pointer-events-none',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      active: false,\n      disabled: false,\n    },\n  }\n);\n\nexport type ZAutocompleteOptionVariants = VariantProps<typeof zAutocompleteOptionVariants>;\n","import { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  forwardRef,\n  inject,\n  Injector,\n  input,\n  type OnInit,\n  output,\n  signal,\n  TemplateRef,\n  viewChild,\n  viewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { type AbstractControl, ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { injectVirtualizer } from '@shival99/angular-virtual';\nimport { ZEmptyComponent } from '@shival99/z-ui/components/z-empty';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport type { ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { ZLoadingComponent } from '@shival99/z-ui/components/z-loading';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport type { ZPopoverControl, ZPopoverPosition } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { ZHighlightPipe, ZSafeHtmlPipe } from '@shival99/z-ui/pipes';\nimport { zUuid, zMergeClasses, zTransform, zRemoveVietnamese } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { debounceTime, distinctUntilChanged, Subject } from 'rxjs';\nimport type {\n  ZAutocompleteOption,\n  ZAutocompleteConfig,\n  ZAutocompleteSize,\n  ZAutocompleteState,\n  ZAutocompleteControl,\n  ZAutocompleteOptionTemplate,\n} from './z-autocomplete.types';\nimport { Z_AUTOCOMPLETE_DEFAULT_CONFIG } from './z-autocomplete.types';\nimport { zAutocompleteInputVariants, zAutocompleteOptionVariants } from './z-autocomplete.variants';\n\n@Component({\n  selector: 'z-autocomplete',\n  imports: [\n    FormsModule,\n    NgClass,\n    NgTemplateOutlet,\n    ZIconComponent,\n    ZLoadingComponent,\n    ZPopoverDirective,\n    ZTooltipDirective,\n    ZEmptyComponent,\n    ZHighlightPipe,\n    ZSafeHtmlPipe,\n  ],\n  standalone: true,\n  templateUrl: './z-autocomplete.component.html',\n  styleUrl: './z-autocomplete.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZAutocompleteComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zAutocomplete',\n})\nexport class ZAutocompleteComponent<T = unknown> implements OnInit, ControlValueAccessor {\n  private readonly _injector = inject(Injector);\n  private readonly _destroyRef = inject(DestroyRef);\n  private readonly _query$ = new Subject<string>();\n\n  protected readonly triggerRef = viewChild<ElementRef<HTMLDivElement>>('triggerEl');\n  protected readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n  protected readonly dropdownTpl = viewChild<TemplateRef<unknown>>('dropdownTpl');\n  protected readonly virtualScrollRef = viewChild<ElementRef<HTMLDivElement>>('virtualScrollElement');\n  protected readonly optionsContainerRef = viewChild<ElementRef<HTMLDivElement>>('optionsContainer');\n  protected readonly virtualOptionElements = viewChildren<ElementRef<HTMLDivElement>>('virtualOptionEl');\n\n  public readonly class = input<ClassValue>('');\n  public readonly zOptions = input<ZAutocompleteOption<T>[]>([]);\n  public readonly zConfig = input<Partial<ZAutocompleteConfig>>({});\n  public readonly zSize = input<ZAutocompleteSize>('default');\n  public readonly zLabel = input<string>('');\n  public readonly zLabelClass = input<string>('');\n  public readonly zPlaceholder = input('');\n  public readonly zDisabled = input(false, { transform: zTransform });\n  public readonly zReadonly = input(false, { transform: zTransform });\n  public readonly zLoading = input(false, { transform: zTransform });\n  public readonly zRequired = input(false, { transform: zTransform });\n  public readonly zPrefix = input<ZIcon | ''>('');\n  public readonly zSuffix = input<ZIcon | ''>('');\n  public readonly zAllowClear = input(true, { transform: zTransform });\n  public readonly zVirtualScroll = input(false, { transform: zTransform });\n  public readonly zDynamicSize = input(true, { transform: zTransform });\n  public readonly zOptionHeight = input<number>(36);\n  public readonly zHeightExpand = input<number>(280);\n  public readonly zMaxVisible = input<number | null>(null);\n  public readonly zResetOnSelect = input(true, { transform: zTransform });\n  public readonly zEmptyText = input<string>('');\n  public readonly zEmptyIcon = input<ZIcon>('lucideSearchX');\n  public readonly zNoDataText = input<string>('');\n  public readonly zNoDataIcon = input<ZIcon>('lucidePackageOpen');\n  public readonly zAllowCustomValue = input(false, { transform: zTransform });\n  public readonly zDebounceTime = input<number | null>(null);\n  public readonly zOptionTemplate = input<ZAutocompleteOptionTemplate<T> | null>(null);\n\n  public readonly zOnSearch = output<string>();\n  public readonly zOnSelect = output<ZAutocompleteOption<T>>();\n  public readonly zOnEnter = output<string>();\n  public readonly zValueChange = output<string>();\n  public readonly zControl = output<ZAutocompleteControl<T>>();\n\n  private readonly _value = signal<string>('');\n  private readonly _disabled = signal(false);\n  private readonly _touched = signal(false);\n  private readonly _dirty = signal(false);\n  private readonly _formControl = signal<AbstractControl | null>(null);\n  private readonly _popoverControl = signal<ZPopoverControl | null>(null);\n  private readonly _selectedOption = signal<ZAutocompleteOption<T> | null>(null);\n\n  protected readonly uiState = signal({\n    isOpen: false,\n    isFocused: false,\n  });\n\n  protected readonly actualPosition = signal<ZPopoverPosition>('bottom');\n\n  protected readonly autocompleteId = zUuid('z-autocomplete');\n  protected readonly dropdownId = `${this.autocompleteId}-dropdown`;\n  protected readonly inputValue = signal('');\n  protected readonly activeIndex = signal(-1);\n  protected readonly dropdownWidth = signal(0);\n\n  protected readonly virtualizer = injectVirtualizer(() => ({\n    scrollElement: this.virtualScrollRef(),\n    count: this.filteredOptions().length,\n    estimateSize: () => this.effectiveOptionHeight(),\n    measureElement: (element: Element) => element.getBoundingClientRect().height,\n    overscan: 5,\n  }));\n\n  private readonly _measureVirtualItems = effect(() => {\n    if (!this.zDynamicSize()) {\n      return;\n    }\n\n    const elements = this.virtualOptionElements();\n    for (const el of elements) {\n      this.virtualizer.measureElement(el.nativeElement);\n    }\n  });\n\n  protected readonly config = computed<ZAutocompleteConfig>(() => ({\n    ...Z_AUTOCOMPLETE_DEFAULT_CONFIG,\n    ...this.zConfig(),\n  }));\n\n  protected readonly isDisabled = computed(() => this._disabled() || this.zDisabled());\n  protected readonly isReadonly = computed(() => this.zReadonly());\n  protected readonly isInteractionDisabled = computed(() => this.isDisabled() || this.isReadonly() || this.zLoading());\n\n  protected readonly effectiveOptionHeight = computed(() => this.zOptionHeight() || this.config().optionHeight);\n  protected readonly effectiveHeightExpand = computed(() => this.zHeightExpand() || this.config().dropdownMaxHeight);\n\n  protected readonly effectiveEmptyText = computed(() => this.zEmptyText() || this.config().emptyMessage);\n  protected readonly effectiveNoDataText = computed(() => this.zNoDataText() || this.config().noDataMessage);\n\n  protected readonly effectiveDebounceTime = computed(() => {\n    const inputValue = this.zDebounceTime();\n    return inputValue !== null ? inputValue : this.config().debounceTime;\n  });\n\n  protected readonly isPositionTop = computed(() => {\n    const pos = this.actualPosition();\n    return pos.startsWith('top');\n  });\n\n  protected readonly shouldUseVirtualScroll = computed(() => {\n    if (this.zVirtualScroll()) {\n      return true;\n    }\n\n    const maxVisible = this.zMaxVisible();\n    if (maxVisible !== null && this.zOptions().length > maxVisible) {\n      return true;\n    }\n\n    return this.zOptions().length > 50;\n  });\n\n  protected readonly filteredOptions = computed(() => {\n    const options = this.zOptions();\n    const query = this.inputValue();\n    const cfg = this.config();\n\n    if (!query || query.trim() === '') {\n      if (cfg.maxDisplayed && options.length > cfg.maxDisplayed) {\n        return options.slice(0, cfg.maxDisplayed);\n      }\n      return options;\n    }\n\n    const normalizedQuery = zRemoveVietnamese(query.toLowerCase());\n    let filtered = options.filter(opt => {\n      const normalizedLabel = zRemoveVietnamese(opt.label.toLowerCase());\n      return normalizedLabel.includes(normalizedQuery);\n    });\n\n    if (cfg.maxDisplayed && filtered.length > cfg.maxDisplayed) {\n      filtered = filtered.slice(0, cfg.maxDisplayed);\n    }\n\n    return filtered;\n  });\n\n  protected readonly hasValue = computed(() => {\n    const value = this.inputValue();\n    return value !== null && value !== undefined && value.trim() !== '';\n  });\n\n  protected readonly currentStatus = computed(() => {\n    if (this.isDisabled()) {\n      return 'disabled';\n    }\n\n    if (this.isReadonly()) {\n      return 'readonly';\n    }\n\n    if (this.uiState().isOpen) {\n      return 'open';\n    }\n\n    return 'default';\n  });\n\n  protected readonly inputClasses = computed(() =>\n    zMergeClasses(\n      zAutocompleteInputVariants({\n        zSize: this.zSize(),\n        zStatus: this.currentStatus() as 'default' | 'open' | 'error' | 'disabled' | 'readonly',\n      }),\n      this.class()\n    )\n  );\n\n  public readonly state = computed<ZAutocompleteState>(() => ({\n    focused: this.uiState().isFocused,\n    touched: this._touched(),\n    dirty: this._dirty(),\n    disabled: this.isDisabled(),\n    readonly: this.isReadonly(),\n    open: this.uiState().isOpen,\n  }));\n\n  private _onChange: (value: string) => void = () => void 0;\n  private _onTouched: () => void = () => void 0;\n  private _ngControl: NgControl | null = null;\n\n  constructor() {\n    effect(onCleanup => {\n      const triggerEl = this.triggerRef()?.nativeElement;\n      if (!triggerEl) {\n        return;\n      }\n\n      const observer = new ResizeObserver(() => {\n        this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);\n      });\n\n      observer.observe(triggerEl);\n      this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);\n\n      onCleanup(() => {\n        observer.disconnect();\n      });\n    });\n\n    effect(() => {\n      const options = this.filteredOptions();\n      const { isOpen } = this.uiState();\n\n      if (isOpen && options.length > 0) {\n        this.activeIndex.set(0);\n      }\n    });\n\n    effect(() => {\n      const idx = this.activeIndex();\n      const { isOpen } = this.uiState();\n\n      if (!isOpen || idx < 0) {\n        return;\n      }\n\n      if (!this.shouldUseVirtualScroll()) {\n        const container = this.optionsContainerRef()?.nativeElement;\n        if (!container) {\n          return;\n        }\n\n        const options = container.querySelectorAll('.z-autocomplete-option');\n        const activeOption = options[idx] as HTMLElement;\n        if (activeOption) {\n          activeOption.scrollIntoView({ block: 'nearest' });\n        }\n      }\n    });\n  }\n\n  ngOnInit(): void {\n    this._setupDebounce();\n\n    queueMicrotask(() => {\n      try {\n        this._ngControl = this._injector.get(NgControl, null);\n        if (this._ngControl?.control) {\n          this._formControl.set(this._ngControl.control);\n        }\n      } catch {\n        this._ngControl = null;\n      }\n    });\n\n    setTimeout(() => this._emitControl());\n  }\n\n  public writeValue(value: string): void {\n    this._value.set(value ?? '');\n    this.inputValue.set(value ?? '');\n  }\n\n  public registerOnChange(fn: (value: string) => 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 onInput(event: Event): void {\n    const { value } = event.target as HTMLInputElement;\n    this.inputValue.set(value);\n    this._value.set(value);\n    this._dirty.set(true);\n    this._onChange(value);\n    this._query$.next(value);\n    this.zValueChange.emit(value);\n\n    if (!this.uiState().isOpen) {\n      this._openPanel();\n    }\n\n    this._selectedOption.set(null);\n  }\n\n  protected onFocus(): void {\n    this.uiState.update(s => ({ ...s, isFocused: true }));\n    this._openPanel();\n  }\n\n  protected onInputClick(): void {\n    if (!this.uiState().isOpen) {\n      this._openPanel();\n    }\n  }\n\n  protected onBlur(): void {\n    this.uiState.update(s => ({ ...s, isFocused: false }));\n    this._touched.set(true);\n    this._onTouched();\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (this.isInteractionDisabled()) {\n      return;\n    }\n\n    const { isOpen } = this.uiState();\n    const options = this.filteredOptions();\n    const currentValue = this.inputValue();\n\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (!isOpen) {\n        this._openPanel();\n        return;\n      }\n      this._handleEnterKey(options, currentValue);\n      return;\n    }\n\n    if (!isOpen) {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        this._openPanel();\n      }\n      return;\n    }\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.activeIndex.update(i => (i < options.length - 1 ? i + 1 : 0));\n        break;\n\n      case 'ArrowUp':\n        event.preventDefault();\n        this.activeIndex.update(i => (i > 0 ? i - 1 : options.length - 1));\n        break;\n\n      case 'Escape':\n        event.preventDefault();\n        this._closePanel();\n        break;\n\n      case 'Tab':\n        this._closePanel();\n        break;\n    }\n  }\n\n  private _handleEnterKey(options: ZAutocompleteOption<T>[], currentValue: string): void {\n    const idx = this.activeIndex();\n\n    if (options.length > 0) {\n      const selectedIdx = idx >= 0 && idx < options.length ? idx : 0;\n      this.selectOption(options[selectedIdx]);\n      return;\n    }\n\n    if (this.zAllowCustomValue() && currentValue.trim()) {\n      this.zOnEnter.emit(currentValue.trim());\n      this._resetInput();\n    }\n  }\n\n  private _resetInput(): void {\n    if (this.zResetOnSelect()) {\n      this.inputValue.set('');\n      this._value.set('');\n      this._onChange('');\n      this.zValueChange.emit('');\n    }\n    this._closePanel();\n    this.activeIndex.set(-1);\n  }\n\n  protected onPopoverControl(control: ZPopoverControl): void {\n    this._popoverControl.set(control);\n  }\n\n  protected onPopoverShow(): void {\n    this.uiState.update(s => ({ ...s, isOpen: true }));\n\n    setTimeout(() => {\n      this.inputRef()?.nativeElement.focus();\n    }, 50);\n  }\n\n  protected onPopoverHideStart(): void {\n    this.uiState.update(s => ({ ...s, isOpen: false }));\n    this.activeIndex.set(-1);\n  }\n\n  protected onPopoverHideEnd(): void {\n    this.actualPosition.set('bottom');\n  }\n\n  protected onPositionChange(position: ZPopoverPosition): void {\n    this.actualPosition.set(position);\n  }\n\n  protected selectOption(option: ZAutocompleteOption<T>): void {\n    if (option.disabled) {\n      return;\n    }\n\n    this._dirty.set(true);\n    this.zOnSelect.emit(option);\n    this._selectedOption.set(option);\n\n    const newValue = this.zResetOnSelect() ? '' : option.label;\n    this.inputValue.set(newValue);\n    this._value.set(newValue);\n    this._onChange(newValue);\n    this.zValueChange.emit(newValue);\n\n    if (this.config().closeOnSelect) {\n      this._closePanel();\n    }\n\n    this.activeIndex.set(-1);\n  }\n\n  protected clearInput(event: MouseEvent): void {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.inputValue.set('');\n    this._value.set('');\n    this._dirty.set(true);\n    this._onChange('');\n    this.zValueChange.emit('');\n    this._selectedOption.set(null);\n    this._closePanel();\n\n    setTimeout(() => {\n      this.inputRef()?.nativeElement.focus();\n    });\n  }\n\n  protected getOptionClasses(option: ZAutocompleteOption<T>, index: number): string {\n    return zAutocompleteOptionVariants({\n      active: this.activeIndex() === index,\n      disabled: option.disabled ?? false,\n    });\n  }\n\n  protected trackByValue = (_index: number, option: ZAutocompleteOption<T>): unknown => option.value;\n\n  public focus(): void {\n    this.inputRef()?.nativeElement.focus();\n  }\n\n  public blur(): void {\n    this.inputRef()?.nativeElement.blur();\n  }\n\n  public clear(): void {\n    this.inputValue.set('');\n    this._value.set('');\n    this._onChange('');\n    this.zValueChange.emit('');\n    this._selectedOption.set(null);\n    this._closePanel();\n  }\n\n  public reset(): void {\n    this.clear();\n    this._touched.set(false);\n    this._dirty.set(false);\n  }\n\n  public open(): void {\n    this._openPanel();\n  }\n\n  public close(): void {\n    this._closePanel();\n  }\n\n  private _openPanel(): void {\n    if (this.isInteractionDisabled()) {\n      return;\n    }\n\n    this._popoverControl()?.show();\n  }\n\n  private _closePanel(): void {\n    this._popoverControl()?.close();\n  }\n\n  private _setupDebounce(): void {\n    this._query$\n      .pipe(debounceTime(this.effectiveDebounceTime()), distinctUntilChanged(), takeUntilDestroyed(this._destroyRef))\n      .subscribe(query => {\n        this.zOnSearch.emit(query);\n      });\n  }\n\n  private _emitControl(): void {\n    this.zControl.emit({\n      focus: () => this.focus(),\n      blur: () => this.blur(),\n      clear: () => this.clear(),\n      reset: () => this.reset(),\n      open: () => this.open(),\n      close: () => this.close(),\n      value: this._value.asReadonly(),\n      selectedOption: this._selectedOption.asReadonly(),\n      state: this.state,\n    });\n  }\n}\n","<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"uiState().isOpen\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"dropdownId\">\n    @if (zPrefix()) {\n      <z-icon [zType]=\"zPrefix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input min-w-0 flex-1 bg-transparent outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (zLoading()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"14\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-lg\"\n    [class.rounded-b-[6px]]=\"!isPositionTop()\"\n    [class.rounded-t-[6px]]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (zLoading()) {\n      <div class=\"flex flex-col items-center justify-center\" [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div class=\"flex flex-col items-center justify-center p-1\" [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          class=\"z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (zOptionTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"zOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: inputValue() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          class=\"z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (opt of filteredOptions(); track opt.value; let i = $index) {\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.minHeight.px]=\"effectiveOptionHeight()\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (zOptionTemplate()) {\n                <ng-container *ngTemplateOutlet=\"zOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: inputValue() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuBO,MAAM,6BAA6B,GAAwB;AAChE,IAAA,SAAS,EAAE,CAAC;AACZ,IAAA,YAAY,EAAE,CAAC;AACf,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,cAAc,EAAE,IAAI;AACpB,IAAA,YAAY,EAAE,wBAAwB;AACtC,IAAA,aAAa,EAAE,iBAAiB;AAChC,IAAA,aAAa,EAAE,IAAI;AACnB,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,iBAAiB,EAAE,GAAG;;;AC9BjB,MAAM,0BAA0B,GAAG,GAAG,CAC3C;IACE,+EAA+E;IAC/E,gGAAgG;IAChG,2DAA2D;IAC3D,cAAc;IACd,SAAS;CACV,EACD;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,wBAAwB;AAC5B,YAAA,OAAO,EAAE,0BAA0B;AACnC,YAAA,EAAE,EAAE,2BAA2B;AAChC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,4EAA4E;AACrF,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,KAAK,EACH,sHAAsH;AACxH,YAAA,QAAQ,EAAE,+DAA+D;AACzE,YAAA,QAAQ,EAAE,kDAAkD;AAC7D,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,OAAO,EAAE,SAAS;AACnB,KAAA;AACF,CAAA;AAKI,MAAM,2BAA2B,GAAG,GAAG,CAC5C,yGAAyG,EACzG;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,4BAA4B;AAClC,YAAA,KAAK,EAAE,2CAA2C;AACnD,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,mDAAmD;AACzD,YAAA,KAAK,EAAE,EAAE;AACV,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA;;MCqBU,sBAAsB,CAAA;AAChB,IAAA,SAAS,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC5B,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAChC,IAAA,OAAO,GAAG,IAAI,OAAO,EAAU;AAE7B,IAAA,UAAU,GAAG,SAAS,CAA6B,WAAW,sDAAC;AAC/D,IAAA,QAAQ,GAAG,SAAS,CAA+B,SAAS,oDAAC;AAC7D,IAAA,WAAW,GAAG,SAAS,CAAuB,aAAa,uDAAC;AAC5D,IAAA,gBAAgB,GAAG,SAAS,CAA6B,sBAAsB,4DAAC;AAChF,IAAA,mBAAmB,GAAG,SAAS,CAA6B,kBAAkB,+DAAC;AAC/E,IAAA,qBAAqB,GAAG,YAAY,CAA6B,iBAAiB,iEAAC;AAEtF,IAAA,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC;AAC7B,IAAA,QAAQ,GAAG,KAAK,CAA2B,EAAE,oDAAC;AAC9C,IAAA,OAAO,GAAG,KAAK,CAA+B,EAAE,mDAAC;AACjD,IAAA,KAAK,GAAG,KAAK,CAAoB,SAAS,iDAAC;AAC3C,IAAA,MAAM,GAAG,KAAK,CAAS,EAAE,kDAAC;AAC1B,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,uDAAC;AAC/B,IAAA,YAAY,GAAG,KAAK,CAAC,EAAE,wDAAC;IACxB,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;IACnD,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;IACnD,QAAQ,GAAG,KAAK,CAAC,KAAK,qDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;IAClD,SAAS,GAAG,KAAK,CAAC,KAAK,sDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;AACnD,IAAA,OAAO,GAAG,KAAK,CAAa,EAAE,mDAAC;AAC/B,IAAA,OAAO,GAAG,KAAK,CAAa,EAAE,mDAAC;IAC/B,WAAW,GAAG,KAAK,CAAC,IAAI,wDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;IACpD,cAAc,GAAG,KAAK,CAAC,KAAK,2DAAI,SAAS,EAAE,UAAU,EAAA,CAAG;IACxD,YAAY,GAAG,KAAK,CAAC,IAAI,yDAAI,SAAS,EAAE,UAAU,EAAA,CAAG;AACrD,IAAA,aAAa,GAAG,KAAK,CAAS,EAAE,yDAAC;AACjC,IAAA,aAAa,GAAG,KAAK,CAAS,GAAG,yDAAC;AAClC,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,uDAAC;IACxC,cAAc,GAAG,KAAK,CAAC,IAAI,2DAAI,SAAS,EAAE,UAAU,EAAA,CAAG;AACvD,IAAA,UAAU,GAAG,KAAK,CAAS,EAAE,sDAAC;AAC9B,IAAA,UAAU,GAAG,KAAK,CAAQ,eAAe,sDAAC;AAC1C,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,uDAAC;AAC/B,IAAA,WAAW,GAAG,KAAK,CAAQ,mBAAmB,uDAAC;IAC/C,iBAAiB,GAAG,KAAK,CAAC,KAAK,8DAAI,SAAS,EAAE,UAAU,EAAA,CAAG;AAC3D,IAAA,aAAa,GAAG,KAAK,CAAgB,IAAI,yDAAC;AAC1C,IAAA,eAAe,GAAG,KAAK,CAAwC,IAAI,2DAAC;IAEpE,SAAS,GAAG,MAAM,EAAU;IAC5B,SAAS,GAAG,MAAM,EAA0B;IAC5C,QAAQ,GAAG,MAAM,EAAU;IAC3B,YAAY,GAAG,MAAM,EAAU;IAC/B,QAAQ,GAAG,MAAM,EAA2B;AAE3C,IAAA,MAAM,GAAG,MAAM,CAAS,EAAE,kDAAC;AAC3B,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,qDAAC;AACzB,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC;AACxB,IAAA,MAAM,GAAG,MAAM,CAAC,KAAK,kDAAC;AACtB,IAAA,YAAY,GAAG,MAAM,CAAyB,IAAI,wDAAC;AACnD,IAAA,eAAe,GAAG,MAAM,CAAyB,IAAI,2DAAC;AACtD,IAAA,eAAe,GAAG,MAAM,CAAgC,IAAI,2DAAC;IAE3D,OAAO,GAAG,MAAM,CAAC;AAClC,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,SAAS,EAAE,KAAK;AACjB,KAAA,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAEiB,IAAA,cAAc,GAAG,MAAM,CAAmB,QAAQ,0DAAC;AAEnD,IAAA,cAAc,GAAG,KAAK,CAAC,gBAAgB,CAAC;AACxC,IAAA,UAAU,GAAG,CAAA,EAAG,IAAI,CAAC,cAAc,WAAW;AAC9C,IAAA,UAAU,GAAG,MAAM,CAAC,EAAE,sDAAC;AACvB,IAAA,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,uDAAC;AACxB,IAAA,aAAa,GAAG,MAAM,CAAC,CAAC,yDAAC;AAEzB,IAAA,WAAW,GAAG,iBAAiB,CAAC,OAAO;AACxD,QAAA,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE;AACtC,QAAA,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,MAAM;AACpC,QAAA,YAAY,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;QAChD,cAAc,EAAE,CAAC,OAAgB,KAAK,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM;AAC5E,QAAA,QAAQ,EAAE,CAAC;AACZ,KAAA,CAAC,CAAC;AAEc,IAAA,oBAAoB,GAAG,MAAM,CAAC,MAAK;AAClD,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE;YACxB;QACF;AAEA,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE;AAC7C,QAAA,KAAK,MAAM,EAAE,IAAI,QAAQ,EAAE;YACzB,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,CAAC,aAAa,CAAC;QACnD;AACF,IAAA,CAAC,gEAAC;AAEiB,IAAA,MAAM,GAAG,QAAQ,CAAsB,OAAO;AAC/D,QAAA,GAAG,6BAA6B;QAChC,GAAG,IAAI,CAAC,OAAO,EAAE;AAClB,KAAA,CAAC,kDAAC;AAEgB,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE,sDAAC;IACjE,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,YAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;IAC7C,qBAAqB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAEjG,IAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,YAAY,iEAAC;AAC1F,IAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,iBAAiB,iEAAC;AAE/F,IAAA,kBAAkB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,YAAY,8DAAC;AACpF,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,aAAa,+DAAC;AAEvF,IAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAK;AACvD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE;AACvC,QAAA,OAAO,UAAU,KAAK,IAAI,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,YAAY;AACtE,IAAA,CAAC,iEAAC;AAEiB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,EAAE;AACjC,QAAA,OAAO,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC;AAC9B,IAAA,CAAC,yDAAC;AAEiB,IAAA,sBAAsB,GAAG,QAAQ,CAAC,MAAK;AACxD,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE;AACrC,QAAA,IAAI,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,UAAU,EAAE;AAC9D,YAAA,OAAO,IAAI;QACb;QAEA,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,EAAE;AACpC,IAAA,CAAC,kEAAC;AAEiB,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;AACjD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC/B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAC/B,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;QAEzB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;AACjC,YAAA,IAAI,GAAG,CAAC,YAAY,IAAI,OAAO,CAAC,MAAM,GAAG,GAAG,CAAC,YAAY,EAAE;gBACzD,OAAO,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;YAC3C;AACA,YAAA,OAAO,OAAO;QAChB;QAEA,MAAM,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAC9D,IAAI,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,IAAG;YAClC,MAAM,eAAe,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;AAClE,YAAA,OAAO,eAAe,CAAC,QAAQ,CAAC,eAAe,CAAC;AAClD,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,GAAG,CAAC,YAAY,IAAI,QAAQ,CAAC,MAAM,GAAG,GAAG,CAAC,YAAY,EAAE;YAC1D,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC;QAChD;AAEA,QAAA,OAAO,QAAQ;AACjB,IAAA,CAAC,2DAAC;AAEiB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAC1C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE;AAC/B,QAAA,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE;AACrE,IAAA,CAAC,oDAAC;AAEiB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,YAAA,OAAO,UAAU;QACnB;AAEA,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;AACrB,YAAA,OAAO,UAAU;QACnB;AAEA,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE;AACzB,YAAA,OAAO,MAAM;QACf;AAEA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,yDAAC;IAEiB,YAAY,GAAG,QAAQ,CAAC,MACzC,aAAa,CACX,0BAA0B,CAAC;AACzB,QAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,QAAA,OAAO,EAAE,IAAI,CAAC,aAAa,EAA4D;AACxF,KAAA,CAAC,EACF,IAAI,CAAC,KAAK,EAAE,CACb,wDACF;AAEe,IAAA,KAAK,GAAG,QAAQ,CAAqB,OAAO;AAC1D,QAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,SAAS;AACjC,QAAA,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE;AACxB,QAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;AACpB,QAAA,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;AAC3B,QAAA,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;AAC3B,QAAA,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM;AAC5B,KAAA,CAAC,iDAAC;AAEK,IAAA,SAAS,GAA4B,MAAM,KAAK,CAAC;AACjD,IAAA,UAAU,GAAe,MAAM,KAAK,CAAC;IACrC,UAAU,GAAqB,IAAI;AAE3C,IAAA,WAAA,GAAA;QACE,MAAM,CAAC,SAAS,IAAG;YACjB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,EAAE,EAAE,aAAa;YAClD,IAAI,CAAC,SAAS,EAAE;gBACd;YACF;AAEA,YAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;AACvC,gBAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;AACjE,YAAA,CAAC,CAAC;AAEF,YAAA,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC3B,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAE/D,SAAS,CAAC,MAAK;gBACb,QAAQ,CAAC,UAAU,EAAE;AACvB,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE;YACtC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;YAEjC,IAAI,MAAM,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AAChC,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;YACzB;AACF,QAAA,CAAC,CAAC;QAEF,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE;YAC9B,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;AAEjC,YAAA,IAAI,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC,EAAE;gBACtB;YACF;AAEA,YAAA,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE;gBAClC,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,aAAa;gBAC3D,IAAI,CAAC,SAAS,EAAE;oBACd;gBACF;gBAEA,MAAM,OAAO,GAAG,SAAS,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;AACpE,gBAAA,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,CAAgB;gBAChD,IAAI,YAAY,EAAE;oBAChB,YAAY,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;gBACnD;YACF;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,QAAQ,GAAA;QACN,IAAI,CAAC,cAAc,EAAE;QAErB,cAAc,CAAC,MAAK;AAClB,YAAA,IAAI;AACF,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC;AACrD,gBAAA,IAAI,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE;oBAC5B,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;gBAChD;YACF;AAAE,YAAA,MAAM;AACN,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI;YACxB;AACF,QAAA,CAAC,CAAC;QAEF,UAAU,CAAC,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;IACvC;AAEO,IAAA,UAAU,CAAC,KAAa,EAAA;QAC7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;IAClC;AAEO,IAAA,gBAAgB,CAAC,EAA2B,EAAA;AACjD,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEO,IAAA,iBAAiB,CAAC,EAAc,EAAA;AACrC,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AAEO,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AACzC,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;IAChC;AAEU,IAAA,OAAO,CAAC,KAAY,EAAA;AAC5B,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAA0B;AAClD,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACtB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;AACrB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE;YAC1B,IAAI,CAAC,UAAU,EAAE;QACnB;AAEA,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC;IAChC;IAEU,OAAO,GAAA;QACf,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QACrD,IAAI,CAAC,UAAU,EAAE;IACnB;IAEU,YAAY,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE;YAC1B,IAAI,CAAC,UAAU,EAAE;QACnB;IACF;IAEU,MAAM,GAAA;QACd,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;AACtD,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,UAAU,EAAE;IACnB;AAEU,IAAA,SAAS,CAAC,KAAoB,EAAA;AACtC,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE,EAAE;YAChC;QACF;QAEA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;AACjC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE;AACtC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE;AAEtC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,MAAM,EAAE;gBACX,IAAI,CAAC,UAAU,EAAE;gBACjB;YACF;AACA,YAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC;YAC3C;QACF;QAEA,IAAI,CAAC,MAAM,EAAE;AACX,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC7B,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,UAAU,EAAE;YACnB;YACA;QACF;AAEA,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;gBAClE;AAEF,YAAA,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAClE;AAEF,YAAA,KAAK,QAAQ;gBACX,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,WAAW,EAAE;gBAClB;AAEF,YAAA,KAAK,KAAK;gBACR,IAAI,CAAC,WAAW,EAAE;gBAClB;;IAEN;IAEQ,eAAe,CAAC,OAAiC,EAAE,YAAoB,EAAA;AAC7E,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE;AAE9B,QAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AACtB,YAAA,MAAM,WAAW,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC;YAC9D,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YACvC;QACF;QAEA,IAAI,IAAI,CAAC,iBAAiB,EAAE,IAAI,YAAY,CAAC,IAAI,EAAE,EAAE;YACnD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;YACvC,IAAI,CAAC,WAAW,EAAE;QACpB;IACF;IAEQ,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;AACzB,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACnB,YAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;AAClB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;QAC5B;QACA,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC1B;AAEU,IAAA,gBAAgB,CAAC,OAAwB,EAAA;AACjD,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC;IACnC;IAEU,aAAa,GAAA;QACrB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAElD,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;QACxC,CAAC,EAAE,EAAE,CAAC;IACR;IAEU,kBAAkB,GAAA;QAC1B,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACnD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC1B;IAEU,gBAAgB,GAAA;AACxB,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC;IACnC;AAEU,IAAA,gBAAgB,CAAC,QAA0B,EAAA;AACnD,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC;IACnC;AAEU,IAAA,YAAY,CAAC,MAA8B,EAAA;AACnD,QAAA,IAAI,MAAM,CAAC,QAAQ,EAAE;YACnB;QACF;AAEA,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;AAC3B,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC;AAEhC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK;AAC1D,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC7B,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;AACxB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;AAEhC,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE;YAC/B,IAAI,CAAC,WAAW,EAAE;QACpB;QAEA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC1B;AAEU,IAAA,UAAU,CAAC,KAAiB,EAAA;QACpC,KAAK,CAAC,eAAe,EAAE;QACvB,KAAK,CAAC,cAAc,EAAE;AAEtB,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE;QAElB,UAAU,CAAC,MAAK;YACd,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;AACxC,QAAA,CAAC,CAAC;IACJ;IAEU,gBAAgB,CAAC,MAA8B,EAAE,KAAa,EAAA;AACtE,QAAA,OAAO,2BAA2B,CAAC;AACjC,YAAA,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,KAAK;AACpC,YAAA,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK;AACnC,SAAA,CAAC;IACJ;IAEU,YAAY,GAAG,CAAC,MAAc,EAAE,MAA8B,KAAc,MAAM,CAAC,KAAK;IAE3F,KAAK,GAAA;QACV,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;IACxC;IAEO,IAAI,GAAA;QACT,IAAI,CAAC,QAAQ,EAAE,EAAE,aAAa,CAAC,IAAI,EAAE;IACvC;IAEO,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE;IACpB;IAEO,KAAK,GAAA;QACV,IAAI,CAAC,KAAK,EAAE;AACZ,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;IACxB;IAEO,IAAI,GAAA;QACT,IAAI,CAAC,UAAU,EAAE;IACnB;IAEO,KAAK,GAAA;QACV,IAAI,CAAC,WAAW,EAAE;IACpB;IAEQ,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,qBAAqB,EAAE,EAAE;YAChC;QACF;AAEA,QAAA,IAAI,CAAC,eAAe,EAAE,EAAE,IAAI,EAAE;IAChC;IAEQ,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE;IACjC;IAEQ,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC;AACF,aAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,EAAE,oBAAoB,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;aAC7G,SAAS,CAAC,KAAK,IAAG;AACjB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,QAAA,CAAC,CAAC;IACN;IAEQ,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,YAAA,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE;AACzB,YAAA,IAAI,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE;AACvB,YAAA,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE;AACzB,YAAA,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE;AACzB,YAAA,IAAI,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE;AACvB,YAAA,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE;AACzB,YAAA,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;AAC/B,YAAA,cAAc,EAAE,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE;YACjD,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,SAAA,CAAC;IACJ;uGA1gBW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAXtB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,sBAAsB,CAAC;AACrD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;SACF,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,qBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,uBAAA,EAAA,SAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpEH,2jRAyMA,q6CDzJI,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,gBAAgB,oJAChB,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,cAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,iBAAiB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,OAAA,EAAA,UAAA,EAAA,cAAA,EAAA,aAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,iBAAiB,6UACjB,iBAAiB,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,UAAA,EAAA,cAAA,EAAA,cAAA,EAAA,QAAA,EAAA,YAAA,EAAA,YAAA,EAAA,QAAA,EAAA,WAAA,EAAA,SAAA,EAAA,aAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,OAAA,EAAA,UAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACf,cAAc,8CACd,aAAa,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAgBJ,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBA5BlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,OAAA,EACjB;wBACP,WAAW;wBACX,OAAO;wBACP,gBAAgB;wBAChB,cAAc;wBACd,iBAAiB;wBACjB,iBAAiB;wBACjB,iBAAiB;wBACjB,eAAe;wBACf,cAAc;wBACd,aAAa;AACd,qBAAA,EAAA,UAAA,EACW,IAAI,EAAA,SAAA,EAGL;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,4BAA4B,CAAC;AACrD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,YAC3B,eAAe,EAAA,QAAA,EAAA,2jRAAA,EAAA,MAAA,EAAA,CAAA,82CAAA,CAAA,EAAA;kGAO6C,WAAW,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACX,SAAS,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACd,aAAa,0EACF,sBAAsB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,mBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,CACnB,kBAAkB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,qBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CACb,iBAAiB,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,iBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,WAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEnFvG;;AAEG;;;;"}

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

@@ -3077,7 +3077,7 @@ class ZCalendarComponent {
                 multi: true,
             },
             TranslatePipe,
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zCalendar"], ngImport: i0, template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      z-popover\n      [zPopoverContent]=\"calendarTpl\"\n      zPosition=\"bottom-left\"\n      zPopoverWidth=\"auto\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isDisabled() || zReadonly()\"\n      [zManualClose]=\"showCancelButton()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      zClass=\"border-0 shadow-none bg-transparent p-0\"\n      (zHideStart)=\"onPopoverHide()\"\n      (zShow)=\"onPopoverShow()\"\n      (zControl)=\"onPopoverControl($event)\"\n      [id]=\"pickerId\"\n      [class]=\"triggerClasses()\"\n      (keydown)=\"onTriggerKeydown($event)\">\n      <z-icon\n        [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 cursor-pointer\"\n        (click)=\"$event.stopPropagation(); toggle()\" />\n\n      @if (isRangeMode()) {\n        <input\n          type=\"text\"\n          data-range-type=\"start\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\"\n          (keydown.escape)=\"onStartInputEscape()\" />\n        <span class=\"text-muted-foreground text-sm\">-</span>\n        <input\n          type=\"text\"\n          data-range-type=\"end\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n          [value]=\"inputDisplayEnd()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onEndInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onEndInputEnter($event)\"\n          (keydown.escape)=\"onEndInputEscape()\" />\n      } @else {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n          [placeholder]=\"zPlaceholder()\"\n          [value]=\"inputDisplayValue()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onInputEnter($event)\"\n          (keydown.escape)=\"onInputEscape()\" />\n      }\n\n      @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n          [class.opacity-0]=\"!hasValue()\"\n          [class.pointer-events-none]=\"!hasValue()\"\n          (click)=\"onClear($event)\">\n          <z-icon zType=\"lucideX\" zSize=\"14\" />\n        </button>\n      }\n    </div>\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 #calendarTpl>\n  <div\n    class=\"z-calendar-calendar bg-popover border-border flex max-h-[50dvh] max-w-[95vw] flex-col overflow-auto rounded-[6px] border shadow-lg min-[480px]:max-h-[55dvh] sm:max-h-none sm:max-w-none sm:flex-row sm:overflow-visible\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div\n        class=\"border-border flex shrink-0 flex-row gap-1 overflow-x-auto border-b p-2 sm:flex-col sm:gap-0 sm:space-y-1 sm:overflow-x-visible sm:border-r sm:border-b-0\">\n        @for (preset of quickSelectPresets; track preset.key) {\n          @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n          <button\n            type=\"button\"\n            class=\"cursor-pointer rounded-[4px] px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n            [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n            [class.bg-primary]=\"activePresetKey() === preset.key\"\n            [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n            [class.font-medium]=\"activePresetKey() === preset.key\"\n            [class.opacity-40]=\"presetDisabled\"\n            [class.cursor-not-allowed]=\"presetDisabled\"\n            [disabled]=\"presetDisabled\"\n            (click)=\"onQuickSelect(preset)\">\n            {{ preset.label | translate }}\n          </button>\n        }\n      </div>\n    }\n    <div\n      class=\"flex flex-1 flex-col items-center overflow-auto py-2 sm:overflow-visible\"\n      [class]=\"!isRangeMode() ? 'w-[280px]' : ''\">\n      @if (!isTimeMode()) {\n        <div\n          class=\"z-calendars-wrapper flex w-full flex-col items-center gap-3 sm:flex-row sm:items-stretch sm:justify-center sm:gap-0\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex w-[280px] shrink-0 flex-col\">\n            @if (!isTimeMode()) {\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"14\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"14\" />\n                </button>\n\n                <div class=\"flex w-[120px] shrink-0 items-center justify-center gap-0\">\n                  @if (!isYearMode() && !isQuarterMode()) {\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      [zDisabled]=\"false\"\n                      (click)=\"setView('month')\">\n                      {{ currentMonthName() }}\n                    </button>\n                  }\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    [zDisabled]=\"isYearMode()\"\n                    (click)=\"setView('year')\">\n                    {{ currentYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"14\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"14\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full w-full flex-col items-center justify-center p-2\"\n                [class.min-h-[224px]]=\"!isQuarterMode()\"\n                [class.h-[224px]]=\"\n                  !isYearMode() &&\n                  !isMonthMode() &&\n                  !isQuarterMode() &&\n                  (currentView() === 'month' || currentView() === 'year')\n                \"\n                [class.min-h-[100px]]=\"isQuarterMode()\"\n                [class.!min-h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\"\n                [class.!h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex w-[33px] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"!w-[33px] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (currentView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let monthDisabled = i | zIsStartMonthDisabled: startMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: selectedMonthIndex() : todayMonthIndex()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"monthDisabled\"\n                          [class.opacity-30]=\"monthDisabled\"\n                          [class.cursor-not-allowed]=\"monthDisabled\"\n                          (click)=\"onMonthSelect(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (year of yearRange(); track year) {\n                      @let yearDisabled = year | zIsStartYearDisabled: startYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: selectedYear() : todayYear()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"yearDisabled\"\n                          [class.opacity-30]=\"yearDisabled\"\n                          [class.cursor-not-allowed]=\"yearDisabled\"\n                          (click)=\"onYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'quarter') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-2 grid-rows-2 gap-2 p-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: selectedQuarterIndex() : todayQuarterIndex()\"\n                          class=\"!h-8 !w-full !text-sm\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border hidden self-stretch sm:block sm:w-px\"></div>\n            <div class=\"border-border bg-border block h-px w-full sm:hidden\"></div>\n\n            <div class=\"z-calendar-section flex w-[280px] shrink-0 flex-col\">\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"14\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"14\" />\n                </button>\n\n                <div class=\"flex w-[120px] shrink-0 items-center justify-center gap-0\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('month')\">\n                    {{ endMonthName() }}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('year')\">\n                    {{ endMonthYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"14\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"14\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full min-h-[224px] w-full flex-col items-center justify-center p-2\"\n                [class.h-[224px]]=\"endView() === 'month' || endView() === 'year'\">\n                @if (endView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex w-[33px] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"!w-[33px] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let endMonthDisabled = i | zIsEndMonthDisabled: endMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endMonthDisabled\"\n                          [class.opacity-30]=\"endMonthDisabled\"\n                          [class.cursor-not-allowed]=\"endMonthDisabled\"\n                          (click)=\"onEndMonthClick(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = year | zIsEndYearDisabled: endYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endYearDisabled\"\n                          [class.opacity-30]=\"endYearDisabled\"\n                          [class.cursor-not-allowed]=\"endYearDisabled\"\n                          (click)=\"onEndYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- Compact Time Picker Below Calendar (Single Date) -->\n        @if (!isRangeMode() && zShowTime()) {\n          <div class=\"border-border w-full border-t text-center\">\n            <div\n              class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              zPopoverWidth=\"auto\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-md\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <div class=\"flex items-center justify-center gap-1\">\n                <!-- Hour -->\n                @if (zShowHour()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"decrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedHour() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"incrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Minute -->\n                @if (zShowMinute()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"decrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedMinute() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"incrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Second -->\n                @if (zShowSecond()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"decrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedSecond() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"incrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                    </button>\n                  </div>\n                }\n                <!-- AM/PM Toggle -->\n                @if (zTimeFormat() === '12h') {\n                  <button\n                    type=\"button\"\n                    class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                    (click)=\"togglePeriod(); $event.stopPropagation()\">\n                    {{ period() }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Compact Time Pickers Below Calendars (Range Mode) -->\n        @if (isRangeMode() && zShowTime()) {\n          <div class=\"border-border flex w-full flex-col border-t sm:flex-row\">\n            <!-- Start Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownStartTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHour() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinute() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecond() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriod(); $event.stopPropagation()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n\n            <!-- Divider space -->\n            <div class=\"border-border bg-border h-px self-stretch sm:block sm:h-full sm:w-px\"></div>\n\n            <!-- End Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHourEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinuteEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecondEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriodEnd(); $event.stopPropagation()\">\n                      {{ periodEnd() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <!-- Time Only Mode - Compact Display -->\n        <div class=\"flex flex-col items-center gap-3 pb-2\">\n          <div\n            class=\"hover:bg-muted inline-flex cursor-pointer items-center rounded-md px-3 py-2 transition-colors\"\n            z-popover\n            [zPopoverContent]=\"timeDropdownTpl\"\n            zPosition=\"bottom\"\n            zPopoverWidth=\"auto\"\n            [zOffset]=\"4\"\n            zTrigger=\"click\"\n            zClass=\"border-border shadow-md\"\n            (zShow)=\"onTimeDropdownShow()\">\n            <div class=\"flex items-center justify-center gap-1.5\">\n              <!-- Hour -->\n              @if (zShowHour()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"decrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedHour() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"incrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowHour() && zShowMinute()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Minute -->\n              @if (zShowMinute()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"decrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedMinute() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"incrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowMinute() && zShowSecond()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Second -->\n              @if (zShowSecond()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"decrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedSecond() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"incrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              <!-- AM/PM Toggle -->\n              @if (zTimeFormat() === '12h') {\n                <button\n                  type=\"button\"\n                  class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-10 cursor-pointer items-center justify-center rounded border-none px-2.5 py-1.5 text-sm font-semibold transition-colors\"\n                  (click)=\"togglePeriod(); $event.stopPropagation()\">\n                  {{ period() }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex w-full items-center justify-between gap-2 border-t px-2 pt-2\">\n          @if (!zQuickSelect() || zMode() !== 'range') {\n            <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n              {{ todayButtonText() }}\n            </button>\n          } @else {\n            <div></div>\n          }\n\n          @if (showOkButton() || showCancelButton()) {\n            <div class=\"flex items-center gap-2\">\n              @if (showCancelButton()) {\n                <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n                  {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n                </button>\n              }\n              @if (showOkButton()) {\n                <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n                  {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-[6px]\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[200px] w-12\"\n          [class.rounded]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr | zIsTimeSelected: displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min | zIsTimeSelected: minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec | zIsTimeSelected: second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownStartTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-[6px]\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[200px] w-12\"\n          [class.rounded]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr | zIsTimeSelected: displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min | zIsTimeSelected: minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec | zIsTimeSelected: second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownEndTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-[6px]\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[200px] w-12\"\n          [class.rounded]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrDisabled = hr | zIsEndHourDisabled: endTimeContext();\n              @let hrEndSelected = hr | zIsTimeSelected: displayHourEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrDisabled && !hrEndSelected\"\n                [class.cursor-pointer]=\"!hrDisabled\"\n                [class.bg-primary]=\"hrEndSelected\"\n                [class.text-primary-foreground]=\"hrEndSelected\"\n                [class.font-medium]=\"hrEndSelected\"\n                [class.opacity-30]=\"hrDisabled\"\n                [class.cursor-not-allowed]=\"hrDisabled\"\n                [disabled]=\"hrDisabled\"\n                (click)=\"selectHourEnd(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minDisabled = min | zIsEndMinuteDisabled: endTimeContext();\n              @let minEndSelected = min | zIsTimeSelected: minuteEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minDisabled && !minEndSelected\"\n                [class.cursor-pointer]=\"!minDisabled\"\n                [class.bg-primary]=\"minEndSelected\"\n                [class.text-primary-foreground]=\"minEndSelected\"\n                [class.font-medium]=\"minEndSelected\"\n                [class.opacity-30]=\"minDisabled\"\n                [class.cursor-not-allowed]=\"minDisabled\"\n                [disabled]=\"minDisabled\"\n                (click)=\"selectMinuteEnd(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secDisabled = sec | zIsEndSecondDisabled: endTimeContext();\n              @let secEndSelected = sec | zIsTimeSelected: secondEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secDisabled && !secEndSelected\"\n                [class.cursor-pointer]=\"!secDisabled\"\n                [class.bg-primary]=\"secEndSelected\"\n                [class.text-primary-foreground]=\"secEndSelected\"\n                [class.font-medium]=\"secEndSelected\"\n                [class.opacity-30]=\"secDisabled\"\n                [class.cursor-not-allowed]=\"secDisabled\"\n                [disabled]=\"secDisabled\"\n                (click)=\"selectSecondEnd(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".animate-calendar-enter{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-calendar input{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { 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"], exportAs: ["zPopover"] }, { 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: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: ZDayClassesPipe, name: "zDayClasses" }, { kind: "pipe", type: ZMonthClassesPipe, name: "zMonthClasses" }, { kind: "pipe", type: ZQuarterClassesPipe, name: "zQuarterClasses" }, { kind: "pipe", type: ZYearClassesPipe, name: "zYearClasses" }, { kind: "pipe", type: ZIsPresetDisabledPipe, name: "zIsPresetDisabled" }, { kind: "pipe", type: ZIsTimeSelectedPipe, name: "zIsTimeSelected" }, { kind: "pipe", type: ZIsEndHourDisabledPipe, name: "zIsEndHourDisabled" }, { kind: "pipe", type: ZIsEndMinuteDisabledPipe, name: "zIsEndMinuteDisabled" }, { kind: "pipe", type: ZIsEndSecondDisabledPipe, name: "zIsEndSecondDisabled" }, { kind: "pipe", type: ZIsStartMonthDisabledPipe, name: "zIsStartMonthDisabled" }, { kind: "pipe", type: ZIsEndMonthDisabledPipe, name: "zIsEndMonthDisabled" }, { kind: "pipe", type: ZIsStartYearDisabledPipe, name: "zIsStartYearDisabled" }, { kind: "pipe", type: ZIsEndYearDisabledPipe, name: "zIsEndYearDisabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zCalendar"], ngImport: i0, template: "<div class=\"z-calendar-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"pickerId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      z-popover\n      [zPopoverContent]=\"calendarTpl\"\n      zPosition=\"bottom-left\"\n      zPopoverWidth=\"auto\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isDisabled() || zReadonly()\"\n      [zManualClose]=\"showCancelButton()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      zClass=\"border-0 shadow-none bg-transparent p-0\"\n      (zHideStart)=\"onPopoverHide()\"\n      (zShow)=\"onPopoverShow()\"\n      (zControl)=\"onPopoverControl($event)\"\n      [id]=\"pickerId\"\n      [class]=\"triggerClasses()\"\n      (keydown)=\"onTriggerKeydown($event)\">\n      <z-icon\n        [zType]=\"isRangeMode() ? 'lucideCalendarRange' : 'lucideCalendar'\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 cursor-pointer\"\n        (click)=\"$event.stopPropagation(); toggle()\" />\n\n      @if (isRangeMode()) {\n        <input\n          type=\"text\"\n          data-range-type=\"start\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_start_date' | translate\"\n          [value]=\"inputDisplayStart()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onStartInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onStartInputEnter($event)\"\n          (keydown.escape)=\"onStartInputEscape()\" />\n        <span class=\"text-muted-foreground text-sm\">-</span>\n        <input\n          type=\"text\"\n          data-range-type=\"end\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-center text-sm outline-none\"\n          [placeholder]=\"'i18n_z_ui_calendar_end_date' | translate\"\n          [value]=\"inputDisplayEnd()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onEndInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onEndInputEnter($event)\"\n          (keydown.escape)=\"onEndInputEscape()\" />\n      } @else {\n        <input\n          #inputEl\n          type=\"text\"\n          class=\"placeholder:text-muted-foreground w-0 min-w-0 flex-1 truncate bg-transparent text-sm outline-none\"\n          [placeholder]=\"zPlaceholder()\"\n          [value]=\"inputDisplayValue()\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"zReadonly()\"\n          (click)=\"isOpen() && $event.stopPropagation()\"\n          (focus)=\"onInputFocus($event)\"\n          (input)=\"onInputChange($event)\"\n          (blur)=\"onInputBlur($event)\"\n          (keydown.enter)=\"onInputEnter($event)\"\n          (keydown.escape)=\"onInputEscape()\" />\n      }\n\n      @if (zAllowClear() && !isDisabled() && !zReadonly()) {\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n          [class.opacity-0]=\"!hasValue()\"\n          [class.pointer-events-none]=\"!hasValue()\"\n          (click)=\"onClear($event)\">\n          <z-icon zType=\"lucideX\" zSize=\"14\" />\n        </button>\n      }\n    </div>\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 #calendarTpl>\n  <div\n    class=\"z-calendar-calendar bg-popover border-border flex max-h-[50dvh] max-w-[95vw] flex-col overflow-auto rounded-[6px] border shadow-lg min-[480px]:max-h-[55dvh] sm:max-h-none sm:max-w-none sm:flex-row sm:overflow-visible\"\n    (keydown)=\"onCalendarKeydown($event)\">\n    @if (zQuickSelect() && zMode() === 'range') {\n      <div\n        class=\"border-border flex shrink-0 flex-row gap-1 overflow-x-auto border-b p-2 sm:flex-col sm:gap-0 sm:space-y-1 sm:overflow-x-visible sm:border-r sm:border-b-0\">\n        @for (preset of quickSelectPresets; track preset.key) {\n          @let presetDisabled = preset | zIsPresetDisabled: zDisabledDate();\n          <button\n            type=\"button\"\n            class=\"cursor-pointer rounded-[4px] px-3 py-1.5 text-left text-sm whitespace-nowrap transition-colors\"\n            [class.hover:bg-muted]=\"activePresetKey() !== preset.key && !presetDisabled\"\n            [class.bg-primary]=\"activePresetKey() === preset.key\"\n            [class.text-primary-foreground]=\"activePresetKey() === preset.key\"\n            [class.font-medium]=\"activePresetKey() === preset.key\"\n            [class.opacity-40]=\"presetDisabled\"\n            [class.cursor-not-allowed]=\"presetDisabled\"\n            [disabled]=\"presetDisabled\"\n            (click)=\"onQuickSelect(preset)\">\n            {{ preset.label | translate }}\n          </button>\n        }\n      </div>\n    }\n    <div\n      class=\"flex flex-1 flex-col items-center overflow-auto py-2 sm:overflow-visible\"\n      [class]=\"!isRangeMode() ? 'w-[280px]' : ''\">\n      @if (!isTimeMode()) {\n        <div\n          class=\"z-calendars-wrapper flex w-full flex-col items-center gap-3 sm:flex-row sm:items-stretch sm:justify-center sm:gap-0\">\n          <!-- First Calendar -->\n          <div class=\"z-calendar-section flex w-[280px] shrink-0 flex-col\">\n            @if (!isTimeMode()) {\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"14\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  (click)=\"navigatePrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"14\" />\n                </button>\n\n                <div class=\"flex w-[120px] shrink-0 items-center justify-center gap-0\">\n                  @if (!isYearMode() && !isQuarterMode()) {\n                    <button\n                      type=\"button\"\n                      z-button\n                      zType=\"ghost\"\n                      zSize=\"sm\"\n                      class=\"h-7 px-1.5 text-sm!\"\n                      [zWave]=\"false\"\n                      [zDisabled]=\"false\"\n                      (click)=\"setView('month')\">\n                      {{ currentMonthName() }}\n                    </button>\n                  }\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    [zDisabled]=\"isYearMode()\"\n                    (click)=\"setView('year')\">\n                    {{ currentYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"14\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateStartNext()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"14\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full w-full flex-col items-center justify-center p-2\"\n                [class.min-h-[224px]]=\"!isQuarterMode()\"\n                [class.h-[224px]]=\"\n                  !isYearMode() &&\n                  !isMonthMode() &&\n                  !isQuarterMode() &&\n                  (currentView() === 'month' || currentView() === 'year')\n                \"\n                [class.min-h-[100px]]=\"isQuarterMode()\"\n                [class.!min-h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\"\n                [class.!h-auto]=\"isYearMode() || isMonthMode() || isQuarterMode()\">\n                @if (currentView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex w-[33px] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDays(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"!w-[33px] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (currentView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let monthDisabled = i | zIsStartMonthDisabled: startMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: selectedMonthIndex() : todayMonthIndex()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"monthDisabled\"\n                          [class.opacity-30]=\"monthDisabled\"\n                          [class.cursor-not-allowed]=\"monthDisabled\"\n                          (click)=\"onMonthSelect(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (year of yearRange(); track year) {\n                      @let yearDisabled = year | zIsStartYearDisabled: startYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: selectedYear() : todayYear()\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"yearDisabled\"\n                          [class.opacity-30]=\"yearDisabled\"\n                          [class.cursor-not-allowed]=\"yearDisabled\"\n                          (click)=\"onYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (currentView() === 'quarter') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-2 grid-rows-2 gap-2 p-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasViewChanged\">\n                    @for (quarter of quarterNames; track quarter; let i = $index) {\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zQuarterClasses: selectedQuarterIndex() : todayQuarterIndex()\"\n                          class=\"!h-8 !w-full !text-sm\"\n                          (click)=\"onQuarterClick(i)\">\n                          {{ quarter }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Second Calendar (Range Mode Only) -->\n          @if (isRangeMode()) {\n            <!-- Divider -->\n            <div class=\"border-border bg-border hidden self-stretch sm:block sm:w-px\"></div>\n            <div class=\"border-border bg-border block h-px w-full sm:hidden\"></div>\n\n            <div class=\"z-calendar-section flex w-[280px] shrink-0 flex-col\">\n              <!-- Header -->\n              <div class=\"border-border flex w-full items-center justify-between gap-0.5 px-2\">\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPreviousFast()\">\n                  <z-icon zType=\"lucideChevronsLeft\" zSize=\"14\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zDisabled]=\"!canNavigateEndPrev()\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndPrevious()\">\n                  <z-icon zType=\"lucideChevronLeft\" zSize=\"14\" />\n                </button>\n\n                <div class=\"flex w-[120px] shrink-0 items-center justify-center gap-0\">\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('month')\">\n                    {{ endMonthName() }}\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    z-button\n                    zType=\"ghost\"\n                    zSize=\"sm\"\n                    class=\"h-7 px-1.5 text-sm!\"\n                    [zWave]=\"false\"\n                    (click)=\"setEndView('year')\">\n                    {{ endMonthYear() }}\n                  </button>\n                </div>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNext()\">\n                  <z-icon zType=\"lucideChevronRight\" zSize=\"14\" />\n                </button>\n\n                <button\n                  type=\"button\"\n                  z-button\n                  zType=\"ghost\"\n                  zSize=\"sm\"\n                  class=\"size-7 shrink-0 p-0!\"\n                  [zWave]=\"false\"\n                  [zWave]=\"false\"\n                  (click)=\"navigateEndNextFast()\">\n                  <z-icon zType=\"lucideChevronsRight\" zSize=\"14\" />\n                </button>\n              </div>\n\n              <!-- Body -->\n              <div\n                class=\"flex h-full min-h-[224px] w-full flex-col items-center justify-center p-2\"\n                [class.h-[224px]]=\"endView() === 'month' || endView() === 'year'\">\n                @if (endView() === 'day') {\n                  <div\n                    class=\"flex h-full w-full flex-1 flex-col gap-1\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    <!-- Weekday headers -->\n                    <div class=\"flex w-full flex-1 justify-center gap-1\">\n                      @for (weekday of weekdayNames(); track weekday) {\n                        <div\n                          class=\"text-muted-foreground flex w-[33px] items-center justify-center text-xs font-medium\">\n                          {{ weekday }}\n                        </div>\n                      }\n                    </div>\n\n                    <!-- Date rows -->\n                    @for (week of calendarDaysEnd(); track $index) {\n                      <div class=\"flex w-full flex-1 justify-center gap-1\">\n                        @for (day of week; track day.date.getTime()) {\n                          <button\n                            type=\"button\"\n                            [class]=\"day | zDayClasses\"\n                            class=\"!w-[33px] !text-sm\"\n                            [disabled]=\"day.isDisabled\"\n                            (click)=\"onDayClick(day)\"\n                            (mouseenter)=\"onDayHover(day)\"\n                            (mouseleave)=\"onDayLeave()\">\n                            {{ day.day }}\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (endView() === 'month') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (month of monthNames(); track month; let i = $index) {\n                      @let endMonthDisabled = i | zIsEndMonthDisabled: endMonthDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"i | zMonthClasses: endMonth().getMonth() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endMonthDisabled\"\n                          [class.opacity-30]=\"endMonthDisabled\"\n                          [class.cursor-not-allowed]=\"endMonthDisabled\"\n                          (click)=\"onEndMonthClick(i)\">\n                          {{ month }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (endView() === 'year') {\n                  <div\n                    class=\"grid h-full w-full grid-cols-3 grid-rows-4 gap-2.5 gap-y-5!\"\n                    [class.animate-calendar-enter]=\"uiState().hasEndViewChanged\">\n                    @for (year of endYearRange(); track year) {\n                      @let endYearDisabled = year | zIsEndYearDisabled: endYearDisabledContext();\n                      <div class=\"flex flex-1 items-center justify-center\">\n                        <button\n                          type=\"button\"\n                          [class]=\"year | zYearClasses: endMonth().getFullYear() : -1\"\n                          class=\"!h-7 !w-full !text-sm\"\n                          [disabled]=\"endYearDisabled\"\n                          [class.opacity-30]=\"endYearDisabled\"\n                          [class.cursor-not-allowed]=\"endYearDisabled\"\n                          (click)=\"onEndYearClick(year)\">\n                          {{ year }}\n                        </button>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n\n        <!-- Compact Time Picker Below Calendar (Single Date) -->\n        @if (!isRangeMode() && zShowTime()) {\n          <div class=\"border-border w-full border-t text-center\">\n            <div\n              class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n              z-popover\n              [zPopoverContent]=\"timeDropdownTpl\"\n              zPosition=\"bottom\"\n              zPopoverWidth=\"auto\"\n              [zOffset]=\"4\"\n              zTrigger=\"click\"\n              zClass=\"border-border shadow-md\"\n              (zShow)=\"onTimeDropdownShow()\">\n              <div class=\"flex items-center justify-center gap-1\">\n                <!-- Hour -->\n                @if (zShowHour()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"decrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedHour() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"incrementHour(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowHour() && zShowMinute()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Minute -->\n                @if (zShowMinute()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"decrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedMinute() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"incrementMinute(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                    </button>\n                  </div>\n                }\n                @if (zShowMinute() && zShowSecond()) {\n                  <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                }\n                <!-- Second -->\n                @if (zShowSecond()) {\n                  <div\n                    class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"decrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                    </button>\n                    <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                      {{ formattedSecond() }}\n                    </span>\n                    <button\n                      type=\"button\"\n                      class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                      (click)=\"incrementSecond(); $event.stopPropagation()\">\n                      <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                    </button>\n                  </div>\n                }\n                <!-- AM/PM Toggle -->\n                @if (zTimeFormat() === '12h') {\n                  <button\n                    type=\"button\"\n                    class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                    (click)=\"togglePeriod(); $event.stopPropagation()\">\n                    {{ period() }}\n                  </button>\n                }\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Compact Time Pickers Below Calendars (Range Mode) -->\n        @if (isRangeMode() && zShowTime()) {\n          <div class=\"border-border flex w-full flex-col border-t sm:flex-row\">\n            <!-- Start Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownStartTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHour() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHour(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinute() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinute(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecond() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecond(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriod(); $event.stopPropagation()\">\n                      {{ period() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n\n            <!-- Divider space -->\n            <div class=\"border-border bg-border h-px self-stretch sm:block sm:h-full sm:w-px\"></div>\n\n            <!-- End Time -->\n            <div class=\"flex w-full flex-col items-center justify-center gap-1\">\n              <div\n                class=\"hover:bg-muted my-1 inline-flex cursor-pointer items-center rounded-sm px-2 py-1 transition-colors\"\n                z-popover\n                [zPopoverContent]=\"timeDropdownEndTpl\"\n                zPosition=\"bottom\"\n                zPopoverWidth=\"auto\"\n                [zOffset]=\"4\"\n                zTrigger=\"click\"\n                zClass=\"border-border shadow-md\"\n                (zShow)=\"onTimeDropdownEndShow()\">\n                <div class=\"flex items-center justify-center gap-1\">\n                  <!-- Hour -->\n                  @if (zShowHour()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedHourEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementHourEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowHour() && zShowMinute()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Minute -->\n                  @if (zShowMinute()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedMinuteEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementMinuteEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  @if (zShowMinute() && zShowSecond()) {\n                    <span class=\"text-muted-foreground text-sm font-medium\">:</span>\n                  }\n                  <!-- Second -->\n                  @if (zShowSecond()) {\n                    <div\n                      class=\"hover:bg-muted/50 flex min-w-7 cursor-pointer flex-col items-center gap-0 rounded px-1 transition-colors\">\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"decrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronUp\" zSize=\"14\" />\n                      </button>\n                      <span class=\"text-foreground min-w-5 text-center text-sm leading-tight font-medium select-none\">\n                        {{ formattedSecondEnd() }}\n                      </span>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-0.5 flex h-4 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                        (click)=\"incrementSecondEnd(); $event.stopPropagation()\">\n                        <z-icon zType=\"lucideChevronDown\" zSize=\"14\" />\n                      </button>\n                    </div>\n                  }\n                  <!-- AM/PM Toggle -->\n                  @if (zTimeFormat() === '12h') {\n                    <button\n                      type=\"button\"\n                      class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-8 cursor-pointer items-center justify-center rounded border-none px-2 py-1 text-xs font-semibold transition-colors\"\n                      (click)=\"togglePeriodEnd(); $event.stopPropagation()\">\n                      {{ periodEnd() }}\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      } @else {\n        <!-- Time Only Mode - Compact Display -->\n        <div class=\"flex flex-col items-center gap-3 pb-2\">\n          <div\n            class=\"hover:bg-muted inline-flex cursor-pointer items-center rounded-md px-3 py-2 transition-colors\"\n            z-popover\n            [zPopoverContent]=\"timeDropdownTpl\"\n            zPosition=\"bottom\"\n            zPopoverWidth=\"auto\"\n            [zOffset]=\"4\"\n            zTrigger=\"click\"\n            zClass=\"border-border shadow-md\"\n            (zShow)=\"onTimeDropdownShow()\">\n            <div class=\"flex items-center justify-center gap-1.5\">\n              <!-- Hour -->\n              @if (zShowHour()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"decrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedHour() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"incrementHour(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowHour() && zShowMinute()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Minute -->\n              @if (zShowMinute()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"decrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedMinute() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"incrementMinute(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              @if (zShowMinute() && zShowSecond()) {\n                <span class=\"text-muted-foreground text-base font-medium\">:</span>\n              }\n              <!-- Second -->\n              @if (zShowSecond()) {\n                <div\n                  class=\"hover:bg-muted/50 flex min-w-9 cursor-pointer flex-col items-center gap-0 rounded px-1.5 transition-colors\">\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mb-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"decrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronUp\" zSize=\"16\" />\n                  </button>\n                  <span class=\"text-foreground min-w-6 text-center text-base leading-tight font-medium select-none\">\n                    {{ formattedSecond() }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"text-muted-foreground hover:bg-muted hover:text-foreground active:bg-accent mt-1 flex h-5 w-full cursor-pointer items-center justify-center rounded border-none bg-transparent transition-colors\"\n                    (click)=\"incrementSecond(); $event.stopPropagation()\">\n                    <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n                  </button>\n                </div>\n              }\n              <!-- AM/PM Toggle -->\n              @if (zTimeFormat() === '12h') {\n                <button\n                  type=\"button\"\n                  class=\"bg-primary/10 text-primary hover:bg-primary/20 active:bg-primary/30 ml-1 flex w-10 cursor-pointer items-center justify-center rounded border-none px-2.5 py-1.5 text-sm font-semibold transition-colors\"\n                  (click)=\"togglePeriod(); $event.stopPropagation()\">\n                  {{ period() }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (!(zQuickSelect() && zMode() === 'range' && !showOkButton() && !showCancelButton())) {\n        <div class=\"border-border flex w-full items-center justify-between gap-2 border-t px-2 pt-2\">\n          @if (!zQuickSelect() || zMode() !== 'range') {\n            <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zWave]=\"false\" (click)=\"onTodayClick()\">\n              {{ todayButtonText() }}\n            </button>\n          } @else {\n            <div></div>\n          }\n\n          @if (showOkButton() || showCancelButton()) {\n            <div class=\"flex items-center gap-2\">\n              @if (showCancelButton()) {\n                <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" (click)=\"onCancelClick()\">\n                  {{ zCancelText() ?? ('i18n_z_ui_calendar_cancel' | translate) }}\n                </button>\n              }\n              @if (showOkButton()) {\n                <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"!canApply()\" (click)=\"onOkClick()\">\n                  {{ zOkText() ?? ('i18n_z_ui_calendar_ok' | translate) }}\n                </button>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-[6px]\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[200px] w-12\"\n          [class.rounded]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr | zIsTimeSelected: displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min | zIsTimeSelected: minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec | zIsTimeSelected: second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownStartTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-[6px]\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour h-[200px] w-12\"\n          [class.rounded]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrSelected = hr | zIsTimeSelected: displayHour();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrSelected\"\n                [class.bg-primary]=\"hrSelected\"\n                [class.text-primary-foreground]=\"hrSelected\"\n                [class.font-medium]=\"hrSelected\"\n                (click)=\"selectHour(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minSelected = min | zIsTimeSelected: minute();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minSelected\"\n                [class.bg-primary]=\"minSelected\"\n                [class.text-primary-foreground]=\"minSelected\"\n                [class.font-medium]=\"minSelected\"\n                (click)=\"selectMinute(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secSelected = sec | zIsTimeSelected: second();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 cursor-pointer items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secSelected\"\n                [class.bg-primary]=\"secSelected\"\n                [class.text-primary-foreground]=\"secSelected\"\n                [class.font-medium]=\"secSelected\"\n                (click)=\"selectSecond(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #timeDropdownEndTpl>\n  <div class=\"bg-popover flex overflow-hidden rounded-[6px]\">\n    @if (zShowHour()) {\n      <div\n        class=\"flex flex-col\"\n        [class.border-r]=\"zShowMinute() || zShowSecond()\"\n        [class.border-border]=\"zShowMinute() || zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-hour-end h-[200px] w-12\"\n          [class.rounded]=\"!zShowMinute() && !zShowSecond()\"\n          [class.rounded-l]=\"zShowMinute() || zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (hr of hourOptions(); track hr) {\n              @let hrDisabled = hr | zIsEndHourDisabled: endTimeContext();\n              @let hrEndSelected = hr | zIsTimeSelected: displayHourEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!hrDisabled && !hrEndSelected\"\n                [class.cursor-pointer]=\"!hrDisabled\"\n                [class.bg-primary]=\"hrEndSelected\"\n                [class.text-primary-foreground]=\"hrEndSelected\"\n                [class.font-medium]=\"hrEndSelected\"\n                [class.opacity-30]=\"hrDisabled\"\n                [class.cursor-not-allowed]=\"hrDisabled\"\n                [disabled]=\"hrDisabled\"\n                (click)=\"selectHourEnd(hr)\">\n                {{ hr | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowMinute()) {\n      <div class=\"flex flex-col\" [class.border-r]=\"zShowSecond()\" [class.border-border]=\"zShowSecond()\">\n        <ng-scrollbar\n          class=\"z-time-scroll-minute-end h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowSecond()\"\n          [class.rounded-l]=\"!zShowHour() && zShowSecond()\"\n          [class.rounded-r]=\"zShowHour() && !zShowSecond()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (min of minuteOptions; track min) {\n              @let minDisabled = min | zIsEndMinuteDisabled: endTimeContext();\n              @let minEndSelected = min | zIsTimeSelected: minuteEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!minDisabled && !minEndSelected\"\n                [class.cursor-pointer]=\"!minDisabled\"\n                [class.bg-primary]=\"minEndSelected\"\n                [class.text-primary-foreground]=\"minEndSelected\"\n                [class.font-medium]=\"minEndSelected\"\n                [class.opacity-30]=\"minDisabled\"\n                [class.cursor-not-allowed]=\"minDisabled\"\n                [disabled]=\"minDisabled\"\n                (click)=\"selectMinuteEnd(min)\">\n                {{ min | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n    @if (zShowSecond()) {\n      <div class=\"flex flex-col\">\n        <ng-scrollbar\n          class=\"z-time-scroll-second-end h-[200px] w-12\"\n          [class.rounded]=\"!zShowHour() && !zShowMinute()\"\n          [class.rounded-r]=\"zShowHour() || zShowMinute()\"\n          track=\"vertical\">\n          <div class=\"flex flex-col\">\n            @for (sec of secondOptions; track sec) {\n              @let secDisabled = sec | zIsEndSecondDisabled: endTimeContext();\n              @let secEndSelected = sec | zIsTimeSelected: secondEnd();\n              <button\n                type=\"button\"\n                class=\"flex h-7 shrink-0 items-center justify-center text-sm transition-colors\"\n                [class.hover:bg-muted]=\"!secDisabled && !secEndSelected\"\n                [class.cursor-pointer]=\"!secDisabled\"\n                [class.bg-primary]=\"secEndSelected\"\n                [class.text-primary-foreground]=\"secEndSelected\"\n                [class.font-medium]=\"secEndSelected\"\n                [class.opacity-30]=\"secDisabled\"\n                [class.cursor-not-allowed]=\"secDisabled\"\n                [disabled]=\"secDisabled\"\n                (click)=\"selectSecondEnd(sec)\">\n                {{ sec | number: '2.0-0' }}\n              </button>\n            }\n          </div>\n        </ng-scrollbar>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [".animate-calendar-enter{animation:z-calendar-view-enter .2s ease-out}@keyframes z-calendar-view-enter{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.z-calendar input{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { 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: "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: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: ZDayClassesPipe, name: "zDayClasses" }, { kind: "pipe", type: ZMonthClassesPipe, name: "zMonthClasses" }, { kind: "pipe", type: ZQuarterClassesPipe, name: "zQuarterClasses" }, { kind: "pipe", type: ZYearClassesPipe, name: "zYearClasses" }, { kind: "pipe", type: ZIsPresetDisabledPipe, name: "zIsPresetDisabled" }, { kind: "pipe", type: ZIsTimeSelectedPipe, name: "zIsTimeSelected" }, { kind: "pipe", type: ZIsEndHourDisabledPipe, name: "zIsEndHourDisabled" }, { kind: "pipe", type: ZIsEndMinuteDisabledPipe, name: "zIsEndMinuteDisabled" }, { kind: "pipe", type: ZIsEndSecondDisabledPipe, name: "zIsEndSecondDisabled" }, { kind: "pipe", type: ZIsStartMonthDisabledPipe, name: "zIsStartMonthDisabled" }, { kind: "pipe", type: ZIsEndMonthDisabledPipe, name: "zIsEndMonthDisabled" }, { kind: "pipe", type: ZIsStartYearDisabledPipe, name: "zIsStartYearDisabled" }, { kind: "pipe", type: ZIsEndYearDisabledPipe, name: "zIsEndYearDisabled" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZCalendarComponent, decorators: [{
             type: Component,